View source for maps

{{emojicon|🗺}}
{{stub}}

'''<dfn>Maps</dfn>''' are representations of the real world that are often used to display the [[location]] of a post, especially for [[checkin]]s, and sometimes an aspect of [[archive]] pages, showing locations (or animating [[travel]]) during the month or other time period. There are many services that can be used to put a map on your site, like [[OpenStreetMap]] and [[Google Maps]]. 

The term '''map''' is also used for other representations of relationships between things. See:
* [[indiemap]] — public IndieWeb social graph and dataset
* [[social web map]] — artistic ideas for metaphorical & symbolic map of the IndieWeb, Mastoverse, Silos, and other social web related sites

== IndieWeb Examples ==
(this section needs expansion with headings for people, and links + images of specific examples!)

There are several IndieWeb sites that display and show interesting things with maps!

* {{adactio}} has maps of his travels [https://adactio.com/notes/15990 since 2019-10-21]
** See examples linked at [[Indy_web#Jeremy_Keith]]
* {{gwg}} has a map view of his [[archives]] showing where he posted from
* {{jgmac1106}} uses a gpx file, an owncloud app, and an iframe to embed maps on their website
** [https://jgregorymcverry.com/myrunningtrail|My Running Trail].
* Max Dietrich uses [[Leaflet]] to display routes of [https://mxd.codes/activities activities] with OpenStreetMap.
* {{aaronpk}} shows a zoomable map of his bike rides and other modes of transport, e.g. https://aaronparecki.com/2022/03/03/10/
* {{capjamesg}} has maps that plot all of the coffee shops he recommends in various cities across the UK, i.e. https://jamesg.blog/coffee/maps/york/.
* {{martymcguire}} shows [[static maps]] images on his checkins since 2018-06-25.
** example: https://martymcgui.re/2018/06/25/201057/
** Uses [https://github.com/dfacts/staticmaplite staticmaplite] with tiles from [https://stadiamaps.com/stamen/ Stadia's Stamen collaboration]. [https://martymcgui.re/2023/09/23/this-map-is-made-for-you-and-me/ Blog post].

== Related Examples ==
{{section-stub}}
Examples related or adjacent to the IndieWeb:
* [https://gusbus.space/smallweb-subway/ Smallweb Subway]
* ...

== Brainstorming ==
=== Abstract maps for data ===
Why:
* '''Privacy / blurring.''' Abstract maps allow a coarser presentation of data that may be more suitable for publishing publicly, instead of cartesian maps that provide precise location data.
* '''Simpler display, focus on non-geo data.''' When the data to display is more important than precise geographical relationships among the data, an abstract map helps by removing the "noise" of extraneous geographical details which would otherwise distract from the data being presented. Abstract subway maps are another example of this.

Use-cases:
* Coarse geographic "heatmaps" of your checkins per state
* Coarse geographic posts [[archive]]

==== US states as squares ====
===== Seven Rows =====
United States as a map of seven rows of squares: https://www.instagram.com/p/CBvWcWEg7JY/
* Original article: https://www.themarshallproject.org/2020/06/18/which-states-are-taking-on-police-reform-after-george-floyd uses HTML div elements for each state! <br/><img src="https://d1n0c1ufntxbvh.cloudfront.net/photo/ece2af72/58276/740x/" style="max-width:100%" alt="map of the 50 US states where each state is a square, labeled with its 2 letter abbreviation, and backgrounds highlighted gray, blue, green, red to indicate different values" />
* Another article with a slightly different layout of states as squares: https://www.themarshallproject.org/2020/03/17/tracking-prisons-response-to-coronavirus <br/><img src="https://d1n0c1ufntxbvh.cloudfront.net/photo/ac5eb6c3/58676/740x/" style="max-width:100%" alt="map of the 50 US states where each state is a square, labeled with its 2 letter abbreviation, and backgrounds highlighted yellow, orange, red to indicate different values" />

===== Eight Rows =====
United States as a map of eight rows of squares

====== 538 election results timing ======
From https://projects.fivethirtyeight.com/election-results-timing/ (note the odd placement of Alaska next to / East of Hawaii, in contrast to previous maps where AK is immediately West of HI)

<img src="https://fivethirtyeight.com/wp-content/uploads/2020/10/Screen-Shot-2020-10-30-at-4.36.37-PM.png" style="max-width:100%" alt="map of the 50 US states where each state is a square, labeled with its name or abbreviation, and backgrounds of a few shades of green to indicate how much of its votes to be counted on election night 2020." />

====== NYT election certification ======
From https://www.nytimes.com/interactive/2020/11/20/us/politics/2020-election-certification-tracker.html (note the different placement of Alaska to the top left of the continental states), change of map over time on 2020-11-20, 2020-11-23, 2020-11-24, 2021-03-31 (final state)

<img src="https://static01.nyt.com/images/2020/11/20/us/2020-election-certification-tracker-promo-1605898427160/2020-election-certification-tracker-promo-1605898427160-videoSixteenByNineJumbo1600-v4.png" style="max-width:25%" alt="map of the 50 US states where each state is a square, labeled with its name or abbreviation, and backgrounds of light or medium red or blue, indicating if a state has certified its election results or not, and for which candidate, as of 2020-11-20." /><img src="https://static01.nyt.com/images/2020/11/20/us/2020-election-certification-tracker-promo-1605898427160/2020-election-certification-tracker-promo-1605898427160-videoSixteenByNineJumbo1600-v11.png" style="max-width:25%" alt="map of the 50 US states where each state is a square, labeled with its name or abbreviation, and backgrounds of light or medium red or blue, indicating if a state has certified its election results or not, and for which candidate, as of 2020-11-23." /><img src="https://static01.nyt.com/images/2020/11/20/us/2020-election-certification-tracker-promo-1605898427160/2020-election-certification-tracker-promo-1605898427160-videoSixteenByNineJumbo1600-v21.png" style="max-width:25%" alt="map of the 50 US states where each state is a square, labeled with its name or abbreviation, and backgrounds of light or medium red or blue, indicating if a state has certified its election results or not, and for which candidate, as of 2020-11-24." /><img src="https://static01.nyt.com/images/2020/11/20/us/2020-election-certification-tracker-promo-1605898427160/2020-election-certification-tracker-promo-1605898427160-videoSixteenByNineJumbo1600-v45.png" style="max-width:25%" alt="map of the 50 US states where each state is a square, labeled with its name or abbreviation, and backgrounds of medium red or blue, indicating which states have certified its election results for which candidate, as of 2021-03-31." />

====== WP C19 4th wave ======
From https://www.washingtonpost.com/politics/2021/03/30/danger-fourth-coronavirus-wave-visualized/ (Same shape as the previous "certified results" diagrams, however note the detail graphs in each state and multiple additional dimensions of data shown)

<img src="https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/PU6TGEYLB5FSLN6U5YZWY37VFE.png" style="max-width:100%" alt="map of the 50 US states where each state is a square, labeled with its abbreviation, and also a linegraph chart of a year of COVID-19 cases, with additional colors used to show the degree of the fourth surge." />

====== NYT C19 4th wave ======
From https://www.nytimes.com/interactive/2021/04/06/us/variants-cases-spread.html (same shape as previous, data over a shorter period of 2 months instead of a year, and simpler graphs with more judicious use of color)

<img src="https://static01.nyt.com/images/2021/04/05/us/variants-cases-spread-promo-1617667420406/variants-cases-spread-promo-1617667420406-videoSixteenByNineJumbo1600.jpg" style="max-width:100%" alt="map of the 50 US states where each state is a square, labeled with its abbreviation, and also a linegraph chart of a year of COVID-19 cases, with filled in shading under the section of time that a state entered a fourth surge." />

==== US states as hexagons ====
States as hexagons map: https://www.npr.org/sections/health-shots/2020/03/16/816707182/map-tracking-the-spread-of-the-coronavirus-in-the-u-s <br/><img src="https://media.npr.org/assets/img/2020/07/02/change-map_wide-9b7b0f7dbdbbc1cc340baeb32dd046fce002cbba.jpg" style="max-width:100%" alt="map of the 50 US states where each state is a hexagon, labeled with their short names or abbreviations, and backgrounds highlighted from red, to orange, yellow, and green to indicate different levels of new cases as compared to two weeks ago" />

Another article: https://www.npr.org/sections/health-shots/2020/05/30/865413079/what-do-coronavirus-racial-disparities-look-like-state-by-state <br/><img src="https://media.npr.org/assets/img/2020/05/30/racial-disparities-promo3_wide-ce99fe41651df11063e0dbf7a2380fd5bd24fc46.png" style="max-width:100%" alt="Two maps of the 50 US states where each state is a hexagon, labeled with its 2 letter abbreviation, and backgrounds highlighted from gray to, to yellow, orange, and red to indicate different levels of new deaths and cases affecting African Americans " />

Different site, with same tiled hexagon shape for continental 48 states, and use of two-letter abbreviations, though with Alaska and Hawaii tucked in immediately above / below the tiled 48 to narrow the overall width vs. height necessary: https://missionlocal.org/2022/03/san-francisco-is-now-boycotting-most-of-the-united-states/ <br/><img src="https://i0.wp.com/missionloca.s3.amazonaws.com/mission/wp-content/uploads/2022/03/Cartogram4.jpg" alt="Map of the 50 US states where each state is  hexagon, labeled with their two-letter abbreviations, and backgrounds highlighted teal, indigo, or purple, indicating whether SF was banned from doing business with them in 2017, 2020, or 2022 respectively." style="max-width:100%" />

==== US states and territories ====
United States and territories as a map of ten rows of hexagons

From https://www.npr.org/sections/health-shots/2020/09/01/816707182/map-tracking-the-spread-of-the-coronavirus-in-the-u-s. Though the article is apparently from "2020-09-01", the left image has data as of April 21st, and the right as of December 13th.

<img src="https://media.npr.org/assets/img/2021/04/19/seamus-coronavirus-d3-us-map-20200312_wide-c3fd62b990b24a2768bd3011548f6e6a05cc2f6e.png" style="max-width:50%" alt="map of the 50 US states and 5 territories, where each is a hexagon, labeled with its abbreviation, with filled in color shading red orange yellow or green according to number of daily COVID-19 cases per 100,000 population as of 2021-04-19" /><img src="https://media.npr.org/assets/img/2021/12/13/seamus-coronavirus-d3-us-map-20200312_wide-5a49c0ad8ac985f08c5e54bd5e1ba30be3a5d5f1.png" style="max-width:50%" alt="map of the 50 US states and 5 territories, where each is a hexagon, labeled with its abbreviation, with filled in color shading red orange yellow or green according to number of daily COVID-19 cases per 100,000 population as of 2021-12-13" />

==== CA counties as hexagons ====
California state counties as a map of many rows of hexagons roughly in the shape of the state.

From https://www.sfchronicle.com/politics/article/The-final-recall-results-are-in-at-last-They-16546910.php

Click for full-map and hover-interactive version:
[https://www.sfchronicle.com/projects/2021/recall-govshift-embeds/ <img src="https://s.hdnux.com/photos/01/22/32/22/21603494/5/rawImage.jpg" style="max-width:100%" alt="map of mid California counties, where each is a hexagon, labeled with its name, with filled in color shading gradients from green, lightgreen, pink, to red according to percentage of no vs yes votes for recalling the governor." />]

==== US states and CA counties ====
This is a combined view of different scales of a map, a coarser hexagon overview and zooming into a particular hexagon with more granular hexagons laid out in the shape of the thing that the coarser view obscured.

From https://www.sfchronicle.com/projects/2021/california-bay-area-migration-maps/

Click for hover-interactive version: 
[https://www.sfchronicle.com/projects/2021/california-bay-area-migration-maps/ <img src="https://s.hdnux.com/photos/01/20/11/37/21826794/7/1200x0.jpg" style="max-width:100%" alt="maps of US states and California counties, where each area within is a hexagon, labeled with state abbreviations and a couple of county abbreviations respectively, with filled in color shading gradients from light blue to dark blue, according to relative numbers of emigrants from San Francisco to each state or county." />]

==== Europe and nearby countries ====
Coarse hexagon map of European and nearby countries.

From https://www.maartenlambrechts.com/2017/05/03/the-eurosearch-song-contest-making-of.html

[https://www.maartenlambrechts.com/2017/05/03/the-eurosearch-song-contest-making-of.html <img src="https://www.maartenlambrechts.com/assets/images/google/europe_hex.png" style="max-width:100%" alt="maps of European and adjacent countries, where each country is a hexagon, labeled with country abbreviations" />]

== Articles ==

* {{citation
| title = Self-hosting maps: taking control over UX and users’ privacy
| url = https://sebastiangreger.net/2018/05/self-hosting-maps-control-privacy-ux/
| author = {{sgreger}}
| published = 2018-05-30
| archiveurl = https://web.archive.org/web/20180530150919/https://sebastiangreger.net/2018/05/self-hosting-maps-control-privacy-ux/
}} - on methods to embed external maps, using [[static maps]], and hosting the infrastructure yourself.

== See Also ==
* [[indie map]]
* [[social web map]]
* [[static maps]]
* useful for communicating change over areas over time, eg animated: https://twitter.com/ranjchak/status/1183723221104975872
** "I got to fit in stuff like this map of what ~150 years of colonization looks like. (Native American land loss from 1776 to 1930) which took me forever to animate so I made a gif of it" [http://ranjchak.com/ @ranjchak] October 14, 2019
* another example of communicating change of 2d data over time via animated map: https://twitter.com/i_ameztoy/status/1184932194621575186
** "Weekly Arctic Sea Ice Age with Graph of Ice Age By Area: 1984 - 2019 - by NASA." [https://www.flickr.com/photos/184249102@N03/ @i_ameztoy] October 17, 2019
* Animated (click to play) map archive page of travel: https://adactio.com/archive/2019/10/map (and backstory: https://adactio.com/journal/16058)
* ^^^ and where the idea started on {{adactio}}'s blog: https://adactio.com/journal/15992
* Open source tool for displaying maps to represent datasets: https://pitchinteractiveinc.github.io/tilegrams/
* Beware that maps embedded on sites may also be tracking you (or if you’re using a 3rd party map embedding, they might be tracking your users), e.g. now defunct example RagTag: https://web.archive.org/web/20070105010652/http://ragt.ag/
* Example of US states as circles, with each circle showing percentage data in three colors proportionately, like hollowed out pie-charts: https://www.nbcnews.com/politics/2022-elections/early-vote