OpenLayers 2 Clustering

by balab2020

HTML

<script src="http://dev.openlayers.org/OpenLayers.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="shortdesc">Demonstrates the Drag Marker on OpenLayes 2.</p>
<div id="map" class="smallmap"></div>

<button id="dragMarker" onclick="toggleDrag()">
  Toggle Drag Marker
</button>

CSS

ul {
  list-style: none;
  padding-left: 2em;
}

#reset {
  margin-left: 2em;
}

#map {
  width: 100%;
  height: 500px;
}

JavaScript

// create a semi-random grid of features to be clustered
var dragMarker = null;

var map;

init();

function init() {
  map = new OpenLayers.Map('map');
  var base = new OpenLayers.Layer.WMS("OpenLayers WMS","http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'});

  map.events.register("click", map, function() {
    alert("hey you clicked on map area ;)");
  });


  var markers = new OpenLayers.Layer.Markers("Markers");
  var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
  var size = new OpenLayers.Size(50, 50);
  var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
  dragMarker = new OpenLayers.Control.DragMarker(markers, {});
  map.addControl(dragMarker);
  dragMarker.activate();  
  var marker = new OpenLayers.CustomMarker("marker1", new OpenLayers.LonLat(15, 35), size, 0);
  markers.addMarker(marker);
  markers.getFeatureFromEvent = function(evt) {
    console.log("move requested");
    //hack returns one marker always
    return this.markers[0];
  };
  map.addLayers([base, markers]);
  map.setCenter(new OpenLayers.LonLat(0, 0), 2);

  //reset();
  document.getElementById("reset").onclick = reset;
}

function toggleDrag() {
  if (dragMarker.active) {
    dragMarker.deactivate();
    alert("deactivated");
  } else {
    dragMarker.activate();
    alert("activated");
  }

}

function reset() {
  var distance = parseInt(document.getElementById("distance").value);
  var threshold = parseInt(document.getElementById("threshold").value);
  strategy.distance = distance || strategy.distance;
  strategy.threshold = threshold || strategy.threshold;
  document.getElementById("distance").value = strategy.distance;
  document.getElementById("threshold").value = strategy.threshold || "null";
  clusters.removeFeatures(clusters.features);
  clusters.addFeatures(features);
}

function display(event) {
  var f = event.feature;
  var el = document.getElementById("output");
  if (f.cluster) {
    el.innerHTML = "cluster of "...