Clustering

Verfügbar ab V 3.5

Zur Funktionalität der SmartMaps-API gehört die Möglichkeit, Marker zu Clustern zusammenzufassen.

SmartMaps-Karte

Das Beispiel ist vollständig. Sie müssen lediglich den Wert für den apiKey ersetzen. Die Größe der Karte kann mittels CSS des Container-Elements (width und height) bestimmt werden. Fügen Sie den folgenden Code in den body hinzu:

Codebeispiel: Clustern

<!DOCTYPE html>
<html>

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

<body>
  <!-- Vordefiniertes DIV-Element, in das die Karte geladen wird. -->
  <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) {
      // Karte definieren.
      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", "https://www.yellowmap.de/api_js/cdn/smartmaps/data/bonn_small.geojson.json", true);
      xmlhttp.send();
    });
  </script>
</body>

</html>