# Places Visited Map

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](https://gohugo.io), a static site generator with no server side component.  The map is powered by [MapBox GL](https://www.mapbox.com/mapbox-gl-js/) which lets me choose any of the [mapbox styles](https://www.mapbox.com/gallery/) 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](https://github.com/rickymoorhouse/blog/blob/master/layouts/travel/travel.html) 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](https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/)):

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




    


© Ricky Moorhouse