Clustering

Available from V 3.5

The functionality of the SmartMaps API includes the ability to add markers to clusters.

SmartMaps-map

The example is complete, you can save it locally in a file and view it in your browser. You only have to replace the value for the apiKey.

Code example: Clustering

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>SmartMaps Karte</title>
</head>

<body>
  <!-- Define Map. -->
  <div id="map" style="height: 400px; width: 500px;"></div>


  <script
    src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={API_KEY}"></script>


  <script type="text/javascript">
    ym.ready(function (modules) {
      // Define map.
      var map = ym.map("map", {
        center: ym.latLng(48.991897, 8.435568),
        zoom: 6
      });
	  
      // Define Cluster.
      var markers = ym.markerClusterGroup({
        disableClusteringAtZoom: 19
      });
      // Request markers from external ressource (GeoJson).
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
          var geoJsonLayer = ym.geoJson(JSON.parse(this.responseText), {
            onEachFeature: function (feature, layer) {
              layer.bindPopup(feature.properties.objekt);
            }
          });
          // Add markers to cluster.
          markers.addLayer(geoJsonLayer);
          // Add cluster to map.
          map.addLayer(markers);
          // Set viewpoint to cluster.
          map.fitBounds(markers.getBounds());
        }
      };
      xmlhttp.open("GET", "https://www.yellowmap.de/api_js/cdn/smartmaps/data/bonn_small.geojson.json", true);
      xmlhttp.send();
    });
  </script>
</body>

</html>