Clustering

Ab Version 3.5 bietet die SmartMaps API die Möglichkeit, Marker zu Clustern hinzuzufügen.

SmartMaps Map

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>SmartMaps Map</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 resource (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>

Dieser HTML-Code zeigt, wie Sie Clustering mit der SmartMaps API implementieren. Sie können diesen Code in einer Datei speichern und in Ihrem Browser öffnen, um die Clustering-Funktionalität in Aktion zu sehen.