Added the map

I tend to forget everything, so I wanted to make a map with the markers of the visited places for a while. One day I saw someone’s gist and decided to create one for myself.

markers are clickable

How-to

Markers data is stored in GeoJSON that you can generate using one of online services: geojson.io , geojson.net . All you have to do is put the marker on the map and click it to add more parameters.

The GeoJSON can be uploaded directly to github where it will be shown as a map. Here is my gist .

You can try to embed the map from GitHub, but I did it my way using mapbox. To do the same you need to register on mapbox.com and get an API key.

There is a tutorial that will help you to add map on your site.

Here is the final snippet:

<!DOCTYPE html>
<html>
  <head>
    <!-- mapbox resources, map style -->
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet"/>
    <style>
      #map {
        height: 500px;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id='map'></div>
    <script>
    // past your token here
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; // replace this with your access token
    
    // initialise the map with initial params
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v10',
      // make sure to tune zoom and center coordinates to include your markers
      center: [14.0213,47.9296],
      zoom: 3
    });

    // past previously generated geoJson with your markers
    var geoJsonData = {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {
            "marker-color": "#7e7e7e",
            "marker-size": "medium",
            "title": "Kyiv",
            "date": "2020-01-16",
            "description": "The Capital"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [
              30.505900382995602,
              50.44436027951135
            ]
          }
        },      
      ]
    }

    // adding markers layer: name it and add geoJson variable
    map.on("load", function () {
      /* Image: An image is loaded and added to the map. */
      // put your token here
      map.loadImage("https://a.tiles.mapbox.com/v4/marker/pin-m+7e7e7e.png?access_token=YOUR_MAPBOX_ACCESS_TOKEN", function(error, image) {
          if (error) throw error;
          map.addImage("custom-marker", image);
          /* Style layer: A style layer ties together the source and image and specifies how they are displayed on the map. */
          map.addLayer({
            id: "markers-layer",
            type: "symbol",
            /* Source: A data source specifies the geographic coordinate where the image marker gets placed. */
            source: {
              type: "geojson",
              data: geoJsonData
            },
            layout: {
              "icon-image": "custom-marker",
              "icon-allow-overlap": true
            }
          });
        });
    });

    // don't forget about handling the click: 
    map.on('click', function(e) {
      var features = map.queryRenderedFeatures(e.point, {
        layers: ['markers-layer'] // replace this with the name of the layer
      });

      if (!features.length) {
        return;
      }

      var feature = features[0];

      var popup = new mapboxgl.Popup({ offset: [0, -15] })
        .setLngLat(feature.geometry.coordinates)
        
        // you have to specify the html that will be shown on click
        .setHTML('<h3>' + feature.properties.title + '</h3><p>' + feature.properties.description + '</p>')
        .addTo(map);
    });
    </script>
  </body>
</html>