{
  "$type": "site.standard.document",
  "canonicalUrl": "https://rickymoorhouse.uk/blog/2018/places-visited-map",
  "path": "/blog/2018/places-visited-map",
  "publishedAt": "2018-04-26T00:00:00.000Z",
  "site": "at://did:plc:r53zv4vpzeihop3aliwyejlu/site.standard.publication/3mos5q3a7jf2w",
  "tags": [
    "map",
    "travel",
    "blog"
  ],
  "textContent": "For a while I've had a variation on my map of the places I've visited - here's a summary of how my current version is working. \n\nThe whole site is currently generated by hugo, a static site generator with no server side component.  The map is powered by MapBox GL which lets me choose any of the mapbox styles to use for my map. I create a markdown file for each place on the map, with the latitude and longitude in the 'front matter' for the post which looks something like this:\n\n        ---\n        title: \"Salto\"\n        layout: travel\n        datePosted: 2003\n        photo: \"/travel/image.jpg\"\n        lat: -31.387022\n        lng: -57.968802\n        ---\n\nI then have a list layout for travel items which will generate GeoJSON data from the list of places. In my current version of the map this is inline within the page and fed directly into the Mapbox javascript method like this (roughly based on the Mapbox GeoJSON points tutorial):\n\n            ...\n            map.addLayer({\n                \"id\": \"places\",\n                \"type\": \"circle\",\n                \"source\": {\n                    \"type\": \"geojson\",\n                    \"data\": {\n                        \"type\": \"FeatureCollection\",\n                        \"features\": [\n            {{ range .Pages }}\n                        {\n                            \"type\": \"Feature\",\n                            \"geometry\": {\n                                \"type\": \"Point\",\n                                \"coordinates\": [{{ .Params.lng }}, {{ .Params.lat }}]\n                            },\n                            \"properties\": {\n                                \"title\": \"{{ .Title }}\",\n                                \"description\": \"{{ .Content }}\"\n                            }\n                        },\n            {{ end }}\n                        ]\n            ...",
  "title": "Places Visited Map"
}