Places Visited Map

Ricky Moorhouse April 26, 2018
Source
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. The 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: --- title: "Salto" layout: travel datePosted: 2003 photo: "/travel/image.jpg" lat: -31.387022 lng: -57.968802 --- I 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): ... map.addLayer({ "id": "places", "type": "circle", "source": { "type": "geojson", "data": { "type": "FeatureCollection", "features": [ {{ range .Pages }} { "type": "Feature", "geometry": { "type": "Point", "coordinates": [{{ .Params.lng }}, {{ .Params.lat }}] }, "properties": { "title": "{{ .Title }}", "description": "{{ .Content }}" } }, {{ end }} ] ...

Discussion in the ATmosphere

Loading comments...