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 }}
                    ]
        ...