Cluster click event function

Copy

var map;

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

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

drawMarkers();
  enableClustering();
}

function createContent(markers) {
  var content = '<div style="font-size:11px">';
  for (var i = 0; i < markers.length; i++) {
    var position = markers[i].getPosition();
    content += 'Marker ' + i + '. Position=' + position.toString() + '<br/>';
  }
  content += '</div>';
  return content;
}

function clickClusterFn(feature, markers) {
  var infoMap = new cercalia.InfoMap({
    title: 'Click cluster',
    content: createContent(markers)
  });
  map.showInfoMap(infoMap);
}

function mouseOverClusterFn(feature, markers) {
  var infoMap = new cercalia.InfoMap({
    title: 'Mousemove cluster',
    content: createContent(markers)
  });
  map.showInfoMap(infoMap);
}

function doubleclickClusterFn(feature, markers) {
  var infoMap = new cercalia.InfoMap({
    title: 'Doubleclick cluster',
    content: createContent(markers)
  });
  map.showInfoMap(infoMap);
}

function mouseOutClusterFn() {
  var infoMap = new cercalia.InfoMap({
    title:'MouseOut',
    content: 'Mouse out. No cluster'
  });
  map.showInfoMap(infoMap);
}

function enableClustering() {
  map.enableClustering(40, clickClusterFn, mouseOverClusterFn, doubleclickClusterFn, mouseOutClusterFn);
}

<!DOCTYPE html>
<html>
  <head>
    <title>Cluster click event function</title>
    <script src="https://maps.cercalia.com/maps/loader.js?key=YOUR_API_KEY&v=5&lang=en&theme=1976d2"></script>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.0.0/examples/resources/jquery/jquery-ui-1.10.4.min.css">
    <script src="https://openlayers.org/en/v5.0.0/examples/resources/jquery/jquery-2.1.0.min.js"></script>
    <script src="https://openlayers.org/en/v5.0.0/examples/resources/jquery/jquery-ui-1.10.4.min.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var map;

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

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

        drawMarkers();
        enableClustering();
      }

      function drawMarkers() {
        var arrayMarkers = [];
        for (var i = 0; i < 50; i++) {
          var marker = new cercalia.Marker({
            position: new cercalia.LonLat((-1 - (Math.random() * 4)), (40 - (Math.random() * 4)))
          });
          arrayMarkers.push(marker);
        }
        map.addMarkers(arrayMarkers);
      }

      function createContent(markers) {
        var content = '<div style="font-size:11px">';
        for (var i = 0; i < markers.length; i++) {
          var position = markers[i].getPosition();
          content += 'Marker ' + i + '. Position=' + position.toString() + '<br/>';
        }
        content += '</div>';
        return content;
      }

      function clickClusterFn(feature, markers) {
        var infoMap = new cercalia.InfoMap({
          title: 'Click cluster',
          content: createContent(markers)
        });
        map.showInfoMap(infoMap);
      }

      function mouseOverClusterFn(feature, markers) {
        var infoMap = new cercalia.InfoMap({
          title: 'Mousemove cluster',
          content: createContent(markers)
        });
        map.showInfoMap(infoMap);
      }

      function doubleclickClusterFn(feature, markers) {
        var infoMap = new cercalia.InfoMap({
          title: 'Doubleclick cluster',
          content: createContent(markers)
        });
        map.showInfoMap(infoMap);
      }

      function mouseOutClusterFn() {
        var infoMap = new cercalia.InfoMap({
          title:'MouseOut',
          content: 'Mouse out. No cluster'
        });
        map.showInfoMap(infoMap);
      }

      function enableClustering() {
        map.enableClustering(40, clickClusterFn, mouseOverClusterFn, doubleclickClusterFn, mouseOutClusterFn);
      }

    </script>
  </body>
</html>