Clustering eigenes Icon

Verfügbar ab V 3.5

Zur Funktionalität der SmartMaps-API gehört die Möglichkeit, die Icons der Cluster nach eigenen Wünschen zu gestalten.

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 eigene Icons

<!DOCTYPE html>
<html>

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

<body>

  <div id="map-wrapper">
    <!-- Vordefiniertes DIV-Element, in das die Karte geladen wird. -->
    <div id="map" style="width: 100%; height: 100%;"></div>
  </div>

  <script
    src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={API_KEY}"></script>

  <style>
    .mycluster {
      width: 40px;
      height: 15x;
      border-radius: 3px;
      text-align: center;
      font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
      border: .25em solid #19355c;
      background: #f5b808;
    }
  </style>
  <script type="text/javascript">
    ym.ready(function () {
	  // Karte definieren
	  const map = ym.map('map', { center: { lat: 51.163361, lng: 10.447683 }, zoom: 6 });
	  
	  // Cluster definieren
	  const markers = ym.markerClusterGroup({
		disableClusteringAtZoom: 19,
		iconCreateFunction: function (cluster) {
			var markers = cluster.getAllChildMarkers();
			var output = '<b>'+Intl.NumberFormat('de-DE', { maximumSignificantDigits: 3 }).format(markers.length)+'</b>';
			return ym.divIcon({ html: output, className: 'mycluster', iconSize: ym.point(40, 15) });
		},
	  });
	  
      // Marker von externen GeoJSON laden
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
          const geoJsonLayer = ym.geoJson(JSON.parse(this.responseText), {
            onEachFeature: function (feature, layer) {
              layer.bindPopup(feature.properties.objekt);
            }
          });
          // Layer zum Cluster hinzufügen
          markers.addLayer(geoJsonLayer);
          //Cluster zur Karte hinzufügen
          map.addLayer(markers);
          // Auschnitt der Karte anpassen
          map.fitBounds(markers.getBounds());
          window.markers = markers;
        }
      };
      xmlhttp.open("GET", "https://docs.yellowmap.com/wp-content/uploads/2021/04/bonn_small.geojson.js", true);
      xmlhttp.send();
    });
  </script>
  <pre><code id="codeblock" class="html"></code></pre>

</body>

</html>