Clustering

Clustering ermöglicht es, Marker, die nahe beieinander liegen, zu einem Cluster zusammenzufassen oder sie je nach Zoomstufe der Karte wieder aufzulösen. Ein Cluster wird als ein einzelnes Element auf der Karte angezeigt.

Anleitung

Um das Clustering der SmartMaps-Karte zu aktivieren, wird zunächst ein div-Element mit der ID map-wrapper in das Body-Tag des HTML-Skripts eingefügt.

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

Um die Funktionalität des Clusterings zu implementieren, ist die Einbindung von JavaScript-Code erforderlich. Wie in diesem Beispiel kann dieser Code über ein Script-Tag in das HTML-Skript oder in eine separate .js-Datei eingebunden werden. Alle Variablen und Funktionen werden in der Methode ym.ready implementiert, da diese Methode die Abhängigkeiten auflöst, um die eigentliche Kartenanwendung zu starten.

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

Um die SmartMaps-Karte für das Clustering anzuzeigen, wird ein Objekt der Klasse ym.map erstellt. Parameter sind die ID des div-Elements, in dem die Karte gezeichnet werden soll, sowie die gewünschten Kartenoptionen (Startposition, Start-Zoomstufe usw.). Um die Karte im Code weiter zu verwalten, wird das Objekt in einer Variable map gespeichert.

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

Für das Clustering wird ein Objekt der Klasse markerClusterGroup benötigt. Dieses Objekt verwaltet die Erstellung der Cluster. Das Objekt wird der Karte hinzugefügt, und ihm werden Marker übergeben. Im folgenden Beispiel werden dem Objekt bei der Erstellung Optionsparameter übergeben.

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

Wir laden eine GeoJson-Datei und fügen die darin enthaltenen Marker einem 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();

Wir fügen die Marker nun dem Clustering-Objekt hinzu.

markers.addLayer(geoJsonLayer);

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

map.addLayer(markers);

Um in den Kartenausschnitt zu zoomen, in dem sich die Cluster befinden, rufen wir die Methode getBounds() auf. Diese Methode gibt den Kartenausschnitt zurück, in dem sich die Cluster befinden. Wir setzen diesen Ausschnitt 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>
  <!-- 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=[INSERT 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>