Clustering

Copy

var map;

document.addEventListener('cercalia-ready', initMap);

function initMap() {

var totalMarkers = [];
  var drawmarkers = document.querySelector('#drawmarkers');
  var enableclustering = document.querySelector('#enableclustering');
  var disableclustering = document.querySelector('#disableclustering');
  var removemarkers = document.querySelector('#removemarkers');

var map = new cercalia.Map({
    target: 'map'
  });

drawmarkers.addEventListener('click', function() {
    var arrayMarkers = [];
    for (var i = 0; i < 1000; i++) {
      var marker = new cercalia.Marker({
        position: new cercalia.LonLat((-1 - (Math.random() * 4)), (40 - (Math.random() * 4))),
        popup: new cercalia.Popup({
          title: 'Title',
          content: '<b>Content</b>'
        })
      });
      arrayMarkers.push(marker);
    }

map.addMarkers(arrayMarkers);

totalMarkers = totalMarkers.concat(arrayMarkers);
  });

enableclustering.addEventListener('click', function() {
    map.enableClustering();
  });

disableclustering.addEventListener('click', function() {
    map.disableClustering();
  });

removemarkers.addEventListener('click', function() {
    map.removeMarkers(totalMarkers);
  });
}

<!DOCTYPE html>
<html>
  <head>
    <title>Clustering</title>
    <script src="https://maps.cercalia.com/maps/loader.js?key=YOUR_API_KEY&v=5&lang=en&theme=1976d2"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <button id="drawmarkers">Draw markers</button>
    <button id="enableclustering">Enable clustering</button>
    <button id="disableclustering">Disable clustering</button>
    <button id="removemarkers">Remove markers</button>

    <script>
      var map;

      document.addEventListener('cercalia-ready', initMap);

      function initMap() {

        var totalMarkers = [];
        var drawmarkers = document.querySelector('#drawmarkers');
        var enableclustering = document.querySelector('#enableclustering');
        var disableclustering = document.querySelector('#disableclustering');
        var removemarkers = document.querySelector('#removemarkers');

        var map = new cercalia.Map({
          target: 'map'
        });

        drawmarkers.addEventListener('click', function() {
          var arrayMarkers = [];
          for (var i = 0; i < 1000; i++) {
            var marker = new cercalia.Marker({
              position: new cercalia.LonLat((-1 - (Math.random() * 4)), (40 - (Math.random() * 4))),
              popup: new cercalia.Popup({
                title: 'Title',
                content: '<b>Content</b>'
              })
            });
            arrayMarkers.push(marker);
          }

          map.addMarkers(arrayMarkers);

          totalMarkers = totalMarkers.concat(arrayMarkers);
        });

        enableclustering.addEventListener('click', function() {
          map.enableClustering();
        });

        disableclustering.addEventListener('click', function() {
          map.disableClustering();
        });

        removemarkers.addEventListener('click', function() {
          map.removeMarkers(totalMarkers);
        });
      }
    </script>
  </body>
</html>