Clustering

Verfügbar ab V 3.5
Das Clustering ermöglicht es Marker, die nahe zueinander liegen, zu einem Cluster zusammenzufassen und je nach Zoomstufe in der Karte wieder aufzulösen. Ein Cluster wird als ein Element auf der Karte angezeigt.

Anleitung

Um das Clustering der SmartMaps-Karte zu ermöglichen, beinhaltet body-Tag des HTML-Dokuments ein div-Element mit der ID map. In diesem wird zur Laufzeit die Karte geladen. Für das div-Element kann man durch das style-Attribut eine feste Höhe und Breite für die Karte festlegen.

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

Für die Umsetzung der Funktionalität zum Clustern ist die Einbindung von Javascript-Code notwendig. Dieser kann, wie in diesem Beispiel, anhand eines script-Tags im HTML-Skript oder in einer separaten Javascript-Datei eingebunden werden.
Alle Variablen und Funktionen werden in der ym.ready-Methode implementiert, da diese Abhängigkeiten auflöst, um die eigentliche Kartenanwendung zu starten.

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

Für das Anzeigen der SmartMaps-Karte wird ein Objekt der Klasse ym.map angelegt. Als Parameter wird dabei die ID des div-Elementes übergeben, in dem die Karte eingezeichnet werden soll, und die gewünschten Karten-Optionen (Startposition, Startzoom-Level, usw.). Um die Karte weiterhin im Code zu verwalten, wird das Objekt in einer Variable map gelagert.

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

Für das Clustering definieren wir ein Objekt der Klasse ym.markerClusterGroup. Dieses Objekt verwaltet das Erstellen von Clustern. Das Objekt wird der Karte hinzugefügt und Marker übergeben.
Im folgenden Beispiel werden dem Objekt Optionen-Parameter übergeben.

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

Wir laden eine GeoJson-Datei und fügen die enthaltenen Marker in einen Layer geoJsonLayer hinzu.

      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();

Dem Clustering-Objekt fügen wir nun die Marker hinzu.

markers.addLayer(geoJsonLayer);

Der SmartMaps-Karte fügen wir nun das MarkerClusterGroup Objekt hinzu und das Clustering wird nun auf der Karte angezeigt.

map.addLayer(markers);

Um in den Ausschnitt zu Zoomen, indem sich die Cluster befinden, rufen wir die Methode getBounds(). Diese Methode gibt den Abschnitt zurück, in dem sich die Cluster befinden. Diesen Ausschnitt setzen wir in der Karte mit fitBounds().

map.fitBounds(markers.getBounds());

HTML-Dokument

Codebeispiel: Clustering

<!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", "geojson.geojson", true);
      xmlhttp.send();
    });
  </script>
  </script>
</body>

</html>

Das könnte Sie auch interessieren:

Jetzt Beispiel ansehen  
ym.modules.provider.MarkerClusterGroup
ym.modules.provider.MarkerCluster