Додав карту

Давно хотів відмічати міста в яких довелось побувати. Тому, натрапивши на гітхаб одного швейцарця вирішив зробити й собі таку.

маркери клікабельні

How-to

Позначки на карті записані в GeoJSON форматі, який можна згенерувати на одному з сервісів на зразок geojson.io чи geojson.net . Потрібно лише поставити маркер на карті і, клікнувши на нього, записати додаткові параметри.

Згенерований GeoJSON файл можна одразу залити на гітхаб і отримати готовий результат. Ось мій gist для прикладу.

Щоб показати карту на своєму сайті слід зареєструватись на mapbox.com та отримати API ключ. Після підтвердження електронної адреси короткий туторіал розкаже як додати карту на сторінку.

Щоб показати згенеровані раніше маркери й зробити їх клікабельними, слідуємо крокам наступного туторіалу .

Зрештою, код виглядає наступним чином:

<!DOCTYPE html>
<html>
  <head>
    <!-- підключаємо ресурси mapbox, прописуємо стилі для карти -->
    <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>
    // вставляємо свій токен
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; // replace this with your access token
    
    // ініціалізуємо саму карту з початковими параметрами
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v10',
      center: [14.0213,47.9296],
      zoom: 3
    });

    // згенерований раніше geoJson з даними маркерів
    var geoJsonData = {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {
            "marker-color": "#7e7e7e",
            "marker-size": "medium",
            "title": "Київ",
            "date": "2020-01-16",
            "description": "Столиця"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [
              30.505900382995602,
              50.44436027951135
            ]
          }
        },      
      ]
    }

    // додаємо шар з маркерами до карти: даємо йому назву і вказуємо змінну geoJson
    map.on("load", function () {
      /* Image: An image is loaded and added to the map. */
      // вставляємо свій токен
      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
            }
          });
        });
    });

    // не забуваємо про попап при кліку на маркер: слід вказати ім'я шару з маркерами
    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)
        
        // обов'язково прописати параметри, які відображатимуться при кліку (з geoJson)
        .setHTML('<h3>' + feature.properties.title + '</h3><p>' + feature.properties.description + '</p>')
        .addTo(map);
    });
    </script>
  </body>
</html>