Clustering

Clustering makes it possible to combine markers that are close to each other into a cluster or to dissolve them depending on the zoom level in the map. A cluster is displayed as one element on the map.

Instructions

To enable clustering of the SmartMaps map, a div element with the ID map-wrapper is first added to the body tag of the HTML script.

<div id="map" style="height: 400px; width: 500px;"></div>

To implement the functionality of clustering, the integration of JavaScript code is necessary. As in this example, this code can be included in the HTML script or in a separate .js file using a script tag. All variables and functions are implemented in the ym.ready method, because this method resolves dependencies to start the actual map application.

ym.ready(function (modules) {
  ...
});

To display the SmartMaps map for clustering, an object of the class ym.map is created. Parameters are the ID of the div element in which the map is to be drawn and the desired map options (start position, start zoom level, etc.). To manage the map further in code, the object is stored in a variable map.

// define map.
var map = ym.map("map", {
  center: ym.latLng(48.991897, 8.435568),
  zoom: 6
});

For clustering, an object of the class markerClusterGroup is needed. This object manages the creation of clusters. The object is added to the map, and markers are passed to it. In the following example, option parameters are passed to the object by creation.

var markers = ym.markerClusterGroup({
  disableClusteringAtZoom: 19
});

We load a GeoJson file and add the contained markers to a layer geoJsonLayer.

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);
      }
    });
    ...
  }
};
xmlhttp.open("GET", "geojson.json", true);
xmlhttp.send();

We now add the markers to the clustering object.

markers.addLayer(geoJsonLayer);

We now add the MarkerClusterGroup object to the SmartMaps map, and the clustering is now displayed on the map.

map.addLayer(markers);

To zoom into the section of the map where the clusters are located, we call the getBounds() method. This method returns the section of the map where the clusters are located. We set this section in the map with fitBounds().

map.fitBounds(markers.getBounds());

HTML document

Code example: Clustering

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>SmartMaps Karte</title>
</head>
<body>
  <!-- div-element, of the 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
      });

      var markers = ym.markerClusterGroup({
        disableClusteringAtZoom: 19
      });

      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);
            }
          });
          markers.addLayer(geoJsonLayer);
          map.addLayer(markers);
          map.fitBounds(markers.getBounds());
        }
      };
      xmlhttp.open("GET", "geojson.geojson", true);
      xmlhttp.send();
    });
  </script>
</body>
</html>