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 use of the cluster strategy threshold property.</p>
<div id="map" class="smallmap"></div>

<p>Cluster details: <span id="output">hover over a feature to see details.</span></p>
<ul>
  <li>
    <input id="distance" name="distance" type="text" value="" size="3" />
    <label for="distance">distance</label>
  </li>
  <li>
    <input id="threshold" name="threshold" type="text" value="" size="3" />
    <label for="threshold">threshold</label>
  </li>
</ul>
<button id="reset">recluster</button>

<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 dx = 3;
var dy = 3;
var px, py;
var features = [];
var dragMarker = null;

for (var x = -45; x <= 45; x += dx) {
  for (var y = -22.5; y <= 22.5; y += dy) {
    px = x + (2 * dx * (Math.random() - 0.5));
    py = y + (2 * dy * (Math.random() - 0.5));
    features.push(new OpenLayers.Feature.Vector(
      new OpenLayers.Geometry.Point(px, py), {
        x: px,
        y: py
      }));
  }
}
OpenLayers.CustomMarker = OpenLayers.Class({


  /** 
   * Property: lonlat 
   * {<OpenLayers.LonLat>} location of object
   */
  lonlat: null,

  /** 
   * Property: events 
   * {<OpenLayers.Events>} the event handler.
   */
  events: null,

  /** 
   * Property: map 
   * {<OpenLayers.Map>} the map this marker is attached to
   */
  map: null,

  div: null,

  size: null,


  parent: null,

  parked: false,

  minZoom: 0,

  popup: null,

  id: null,

  popupVisible: false,

  layer: undefined,

  /** 
   * Constructor: OpenLayers.Marker
   *
   * Parameters:
   * lonlat - {<OpenLayers.LonLat>} the position of this marker
   * icon - {<OpenLayers.Icon>}  the icon for this marker
   */
  initialize: function(id, lonlat, size, minZoom) {
    this.lonlat = lonlat;
    this.size = size;
    this.minZoom = minZoom;
    this.id = id;
    this.div = OpenLayers.Util.createDiv();
    var $div = $(this.div)
      .css("background-color", "white")
      .css("border", "3px double black")
      .css("border-radius", "50px")
      .css("display", "inline-block")
      .css("height", "50px")
      .css("width", "50px");
    this.parent = this.div.parentNode;
  },

  openPopup: function(html) {
    if (!this.popupVisible) {
      this.popupVisible = true;

      var id = ("popup_" + Math.random()).replace(".", "_");

      // the size of the popup was determined by UX
      this.popupDiv = OpenLayers.Util.createDiv(
        this.id + "markerpopup", null, {
          w: 260,
          h: 226
        }
      );

      this.popup =...