Clustering: Customize Icons

Available from V 3.5
The functionality of the SmartMaps API includes the possibility to customize the icons of the clusters.

SmartMaps-map

The example is complete, you can save it locally in a file and view it in your browser. You only have to replace the value for the apiKey.

Code example: Clustering - Customize 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 () {
      // Define map
      const map = ym.map('map', { center: { lat: 51.163361, lng: 10.447683 }, zoom: 6 });
      // Define cluster
      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) });
        },
      });
      // Load markers from external source (GeoJson)
      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);
            }
          });
          // Add Markers to Cluster
          markers.addLayer(geoJsonLayer);
          // Add Cluster to map
          map.addLayer(markers);
          // Set viewpoint to the cluster
          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>