radiant-event_map-extension 1.1.0

data/public/javascript/markerclusterer.js

@@ -0,0 +1,735 @@
+/**
+ * @name MarkerClusterer
+ * @version 1.0
+ * @author Xiaoxi Wu
+ * @copyright (c) 2009 Xiaoxi Wu
+ * @fileoverview
+ * This javascript library creates and manages per-zoom-level 
+ * clusters for large amounts of markers (hundreds or thousands).
+ * This library was inspired by the <a href="http://www.maptimize.com">
+ * Maptimize</a> hosted clustering solution.
+ * <br /><br/>
+ * <b>How it works</b>:<br/>
+ * The <code>MarkerClusterer</code> will group markers into clusters according to
+ * their distance from a cluster's center. When a marker is added,
+ * the marker cluster will find a position in all the clusters, and 
+ * if it fails to find one, it will create a new cluster with the marker.
+ * The number of markers in a cluster will be displayed
+ * on the cluster marker. When the map viewport changes,
+ * <code>MarkerClusterer</code> will destroy the clusters in the viewport 
+ * and regroup them into new clusters.
+ *
+ */
+
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+/**
+ * @name MarkerClustererOptions
+ * @class This class represents optional arguments to the {@link MarkerClusterer}
+ * constructor.
+ * @property {Number} [maxZoom] The max zoom level monitored by a
+ * marker cluster. If not given, the marker cluster assumes the maximum map
+ * zoom level. When maxZoom is reached or exceeded all markers will be shown
+ * without cluster.
+ * @property {Number} [gridSize=60] The grid size of a cluster in pixel. Each
+ * cluster will be a square. If you want the algorithm to run faster, you can set
+ * this value larger.
+ * @property {Array of MarkerStyleOptions} [styles]
+ * Custom styles for the cluster markers.
+ * The array should be ordered according to increasing cluster size,
+ * with the style for the smallest clusters first, and the style for the
+ * largest clusters last.
+ */
+
+/**
+ * @name MarkerStyleOptions
+ * @class An array of these is passed into the {@link MarkerClustererOptions}
+ * styles option.
+ * @property {String} [url] Image url.
+ * @property {Number} [height] Image height.
+ * @property {Number} [height] Image width.
+ * @property {Array of Number} [opt_anchor] Anchor for label text, like [24, 12]. 
+ *    If not set, the text will align center and middle.
+ * @property {String} [opt_textColor="black"] Text color.
+ */
+
+/**
+ * Creates a new MarkerClusterer to cluster markers on the map.
+ *
+ * @constructor
+ * @param {GMap2} map The map that the markers should be added to.
+ * @param {Array of GMarker} opt_markers Initial set of markers to be clustered.
+ * @param {MarkerClustererOptions} opt_opts A container for optional arguments.
+ */
+function MarkerClusterer(map, opt_markers, opt_opts) {
+  // private members
+  var clusters_ = [];
+  var map_ = map;
+  var maxZoom_ = null;
+  var me_ = this;
+  var gridSize_ = 60;
+  var sizes = [53, 56, 66, 78, 90];
+  var styles_ = [];
+  var leftMarkers_ = [];
+  var mcfn_ = null;
+
+  var i = 0;
+  for (i = 1; i <= 5; ++i) {
+    styles_.push({
+      'url': "http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/images/m" + i + ".png",
+      'height': sizes[i - 1],
+      'width': sizes[i - 1]
+    });
+  }
+
+  if (typeof opt_opts === "object" && opt_opts !== null) {
+    if (typeof opt_opts.gridSize === "number" && opt_opts.gridSize > 0) {
+      gridSize_ = opt_opts.gridSize;
+    }
+    if (typeof opt_opts.maxZoom === "number") {
+      maxZoom_ = opt_opts.maxZoom;
+    }
+    if (typeof opt_opts.styles === "object" && opt_opts.styles !== null && opt_opts.styles.length !== 0) {
+      styles_ = opt_opts.styles;
+    }
+  }
+
+  /**
+   * When we add a marker, the marker may not in the viewport of map, then we don't deal with it, instead
+   * we add the marker into a array called leftMarkers_. When we reset MarkerClusterer we should add the
+   * leftMarkers_ into MarkerClusterer.
+   */
+  function addLeftMarkers_() {
+    if (leftMarkers_.length === 0) {
+      return;
+    }
+    var leftMarkers = [];
+    for (i = 0; i < leftMarkers_.length; ++i) {
+      me_.addMarker(leftMarkers_[i], true, null, null, true);
+    }
+    leftMarkers_ = leftMarkers;
+  }
+
+  /**
+   * Get cluster marker images of this marker cluster. Mostly used by {@link Cluster}
+   * @private
+   * @return {Array of String}
+   */
+  this.getStyles_ = function () {
+    return styles_;
+  };
+
+  /**
+   * Remove all markers from MarkerClusterer.
+   */
+  this.clearMarkers = function () {
+    for (var i = 0; i < clusters_.length; ++i) {
+      if (typeof clusters_[i] !== "undefined" && clusters_[i] !== null) {
+        clusters_[i].clearMarkers();
+      }
+    }
+    clusters_ = [];
+    leftMarkers_ = [];
+    GEvent.removeListener(mcfn_);
+  };
+
+  /**
+   * Check a marker, whether it is in current map viewport.
+   * @private
+   * @return {Boolean} if it is in current map viewport
+   */
+  function isMarkerInViewport_(marker) {
+    return map_.getBounds().containsLatLng(marker.getLatLng());
+  }
+
+  /**
+   * When reset MarkerClusterer, there will be some markers get out of its cluster.
+   * These markers should be add to new clusters.
+   * @param {Array of GMarker} markers Markers to add.
+   */
+  function reAddMarkers_(markers) {
+    var len = markers.length;
+    var clusters = [];
+    for (var i = len - 1; i >= 0; --i) {
+      me_.addMarker(markers[i].marker, true, markers[i].isAdded, clusters, true);
+    }
+    addLeftMarkers_();
+  }
+
+  /**
+   * Add a marker.
+   * @private
+   * @param {GMarker} marker Marker you want to add
+   * @param {Boolean} opt_isNodraw Whether redraw the cluster contained the marker
+   * @param {Boolean} opt_isAdded Whether the marker is added to map. Never use it.
+   * @param {Array of Cluster} opt_clusters Provide a list of clusters, the marker
+   *     cluster will only check these cluster where the marker should join.
+   */
+  this.addMarker = function (marker, opt_isNodraw, opt_isAdded, opt_clusters, opt_isNoCheck) {
+    if (opt_isNoCheck !== true) {
+      if (!isMarkerInViewport_(marker)) {
+        leftMarkers_.push(marker);
+        return;
+      }
+    }
+
+    var isAdded = opt_isAdded;
+    var clusters = opt_clusters;
+    var pos = map_.fromLatLngToDivPixel(marker.getLatLng());
+
+    if (typeof isAdded !== "boolean") {
+      isAdded = false;
+    }
+    if (typeof clusters !== "object" || clusters === null) {
+      clusters = clusters_;
+    }
+
+    var length = clusters.length;
+    var cluster = null;
+    for (var i = length - 1; i >= 0; i--) {
+      cluster = clusters[i];
+      var center = cluster.getCenter();
+      if (center === null) {
+        continue;
+      }
+      center = map_.fromLatLngToDivPixel(center);
+
+      // Found a cluster which contains the marker.
+      if (pos.x >= center.x - gridSize_ && pos.x <= center.x + gridSize_ &&
+          pos.y >= center.y - gridSize_ && pos.y <= center.y + gridSize_) {
+        cluster.addMarker({
+          'isAdded': isAdded,
+          'marker': marker
+        });
+        if (!opt_isNodraw) {
+          cluster.redraw_();
+        }
+        return;
+      }
+    }
+
+    // No cluster contain the marker, create a new cluster.
+    cluster = new Cluster(this, map);
+    cluster.addMarker({
+      'isAdded': isAdded,
+      'marker': marker
+    });
+    if (!opt_isNodraw) {
+      cluster.redraw_();
+    }
+
+    // Add this cluster both in clusters provided and clusters_
+    clusters.push(cluster);
+    if (clusters !== clusters_) {
+      clusters_.push(cluster);
+    }
+  };
+
+  /**
+   * Remove a marker.
+   *
+   * @param {GMarker} marker The marker you want to remove.
+   */
+
+  this.removeMarker = function (marker) {
+    for (var i = 0; i < clusters_.length; ++i) {
+      if (clusters_[i].remove(marker)) {
+        clusters_[i].redraw_();
+        return;
+      }
+    }
+  };
+
+  /**
+   * Redraw all clusters in viewport.
+   */
+  this.redraw_ = function () {
+    var clusters = this.getClustersInViewport_();
+    for (var i = 0; i < clusters.length; ++i) {
+      clusters[i].redraw_(true);
+    }
+  };
+
+  /**
+   * Get all clusters in viewport.
+   * @return {Array of Cluster}
+   */
+  this.getClustersInViewport_ = function () {
+    var clusters = [];
+    var curBounds = map_.getBounds();
+    for (var i = 0; i < clusters_.length; i ++) {
+      if (clusters_[i].isInBounds(curBounds)) {
+        clusters.push(clusters_[i]);
+      }
+    }
+    return clusters;
+  };
+
+  /**
+   * Get max zoom level.
+   * @private
+   * @return {Number}
+   */
+  this.getMaxZoom_ = function () {
+    return maxZoom_;
+  };
+
+  /**
+   * Get map object.
+   * @private
+   * @return {GMap2}
+   */
+  this.getMap_ = function () {
+    return map_;
+  };
+
+  /**
+   * Get grid size
+   * @private
+   * @return {Number}
+   */
+  this.getGridSize_ = function () {
+    return gridSize_;
+  };
+
+  /**
+   * Get total number of markers.
+   * @return {Number}
+   */
+  this.getTotalMarkers = function () {
+    var result = 0;
+    for (var i = 0; i < clusters_.length; ++i) {
+      result += clusters_[i].getTotalMarkers();
+    }
+    return result;
+  };
+
+  /**
+   * Get total number of clusters.
+   * @return {int}
+   */
+  this.getTotalClusters = function () {
+    return clusters_.length;
+  };
+
+  /**
+   * Collect all markers of clusters in viewport and regroup them.
+   */
+  this.resetViewport = function () {
+    var clusters = this.getClustersInViewport_();
+    var tmpMarkers = [];
+    var removed = 0;
+
+    for (var i = 0; i < clusters.length; ++i) {
+      var cluster = clusters[i];
+      var oldZoom = cluster.getCurrentZoom();
+      if (oldZoom === null) {
+        continue;
+      }
+      var curZoom = map_.getZoom();
+      if (curZoom !== oldZoom) {
+
+        // If the cluster zoom level changed then destroy the cluster
+        // and collect its markers.
+        var mks = cluster.getMarkers();
+        for (var j = 0; j < mks.length; ++j) {
+          var newMarker = {
+            'isAdded': false,
+            'marker': mks[j].marker
+          };
+          tmpMarkers.push(newMarker);
+        }
+        cluster.clearMarkers();
+        removed++;
+        for (j = 0; j < clusters_.length; ++j) {
+          if (cluster === clusters_[j]) {
+            clusters_.splice(j, 1);
+          }
+        }
+      }
+    }
+
+    // Add the markers collected into marker cluster to reset
+    reAddMarkers_(tmpMarkers);
+    this.redraw_();
+  };
+
+
+  /**
+   * Add a set of markers.
+   *
+   * @param {Array of GMarker} markers The markers you want to add.
+   */
+  this.addMarkers = function (markers) {
+    for (var i = 0; i < markers.length; ++i) {
+      this.addMarker(markers[i], true);
+    }
+    this.redraw_();
+  };
+
+  // initialize
+  if (typeof opt_markers === "object" && opt_markers !== null) {
+    this.addMarkers(opt_markers);
+  }
+
+  // when map move end, regroup.
+  mcfn_ = GEvent.addListener(map_, "moveend", function () {
+    me_.resetViewport();
+  });
+}
+
+/**
+ * Create a cluster to collect markers.
+ * A cluster includes some markers which are in a block of area.
+ * If there are more than one markers in cluster, the cluster
+ * will create a {@link ClusterMarker_} and show the total number
+ * of markers in cluster.
+ *
+ * @constructor
+ * @private
+ * @param {MarkerClusterer} markerClusterer The marker cluster object
+ */
+function Cluster(markerClusterer) {
+  var center_ = null;
+  var markers_ = [];
+  var markerClusterer_ = markerClusterer;
+  var map_ = markerClusterer.getMap_();
+  var clusterMarker_ = null;
+  var zoom_ = map_.getZoom();
+
+  /**
+   * Get markers of this cluster.
+   *
+   * @return {Array of GMarker}
+   */
+  this.getMarkers = function () {
+    return markers_;
+  };
+
+  /**
+   * If this cluster intersects certain bounds.
+   *
+   * @param {GLatLngBounds} bounds A bounds to test
+   * @return {Boolean} Is this cluster intersects the bounds
+   */
+  this.isInBounds = function (bounds) {
+    if (center_ === null) {
+      return false;
+    }
+
+    if (!bounds) {
+      bounds = map_.getBounds();
+    }
+    var sw = map_.fromLatLngToDivPixel(bounds.getSouthWest());
+    var ne = map_.fromLatLngToDivPixel(bounds.getNorthEast());
+
+    var centerxy = map_.fromLatLngToDivPixel(center_);
+    var inViewport = true;
+    var gridSize = markerClusterer.getGridSize_();
+    if (zoom_ !== map_.getZoom()) {
+      var dl = map_.getZoom() - zoom_;
+      gridSize = Math.pow(2, dl) * gridSize;
+    }
+    if (ne.x !== sw.x && (centerxy.x + gridSize < sw.x || centerxy.x - gridSize > ne.x)) {
+      inViewport = false;
+    }
+    if (inViewport && (centerxy.y + gridSize < ne.y || centerxy.y - gridSize > sw.y)) {
+      inViewport = false;
+    }
+    return inViewport;
+  };
+
+  /**
+   * Get cluster center.
+   *
+   * @return {GLatLng}
+   */
+  this.getCenter = function () {
+    return center_;
+  };
+
+  /**
+   * Add a marker.
+   *
+   * @param {Object} marker An object of marker you want to add:
+   *   {Boolean} isAdded If the marker is added on map.
+   *   {GMarker} marker The marker you want to add.
+   */
+  this.addMarker = function (marker) {
+    if (center_ === null) {
+      /*var pos = marker['marker'].getLatLng();
+       pos = map.fromLatLngToContainerPixel(pos);
+       pos.x = parseInt(pos.x - pos.x % (GRIDWIDTH * 2) + GRIDWIDTH);
+       pos.y = parseInt(pos.y - pos.y % (GRIDWIDTH * 2) + GRIDWIDTH);
+       center = map.fromContainerPixelToLatLng(pos);*/
+      center_ = marker.marker.getLatLng();
+    }
+    markers_.push(marker);
+  };
+
+  /**
+   * Remove a marker from cluster.
+   *
+   * @param {GMarker} marker The marker you want to remove.
+   * @return {Boolean} Whether find the marker to be removed.
+   */
+  this.removeMarker = function (marker) {
+    for (var i = 0; i < markers_.length; ++i) {
+      if (marker === markers_[i].marker) {
+        if (markers_[i].isAdded) {
+          map_.removeOverlay(markers_[i].marker);
+        }
+        markers_.splice(i, 1);
+        return true;
+      }
+    }
+    return false;
+  };
+
+  /**
+   * Get current zoom level of this cluster.
+   * Note: the cluster zoom level and map zoom level not always the same.
+   *
+   * @return {Number}
+   */
+  this.getCurrentZoom = function () {
+    return zoom_;
+  };
+
+  /**
+   * Redraw a cluster.
+   * @private
+   * @param {Boolean} isForce If redraw by force, no matter if the cluster is
+   *     in viewport.
+   */
+  this.redraw_ = function (isForce) {
+    if (!isForce && !this.isInBounds()) {
+      return;
+    }
+
+    // Set cluster zoom level.
+    zoom_ = map_.getZoom();
+    var i = 0;
+    var mz = markerClusterer.getMaxZoom_();
+    if (mz === null) {
+      mz = map_.getCurrentMapType().getMaximumResolution();
+    }
+    if (zoom_ >= mz || this.getTotalMarkers() === 1) {
+
+      // If current zoom level is beyond the max zoom level or the cluster
+      // have only one marker, the marker(s) in cluster will be showed on map.
+      for (i = 0; i < markers_.length; ++i) {
+        if (markers_[i].isAdded) {
+          if (markers_[i].marker.isHidden()) {
+            markers_[i].marker.show();
+          }
+        } else {
+          map_.addOverlay(markers_[i].marker);
+          markers_[i].isAdded = true;
+        }
+      }
+      if (clusterMarker_ !== null) {
+        clusterMarker_.hide();
+      }
+    } else {
+      // Else add a cluster marker on map to show the number of markers in
+      // this cluster.
+      for (i = 0; i < markers_.length; ++i) {
+        if (markers_[i].isAdded && (!markers_[i].marker.isHidden())) {
+          markers_[i].marker.hide();
+        }
+      }
+      if (clusterMarker_ === null) {
+        clusterMarker_ = new ClusterMarker_(center_, this.getTotalMarkers(), markerClusterer_.getStyles_(), markerClusterer_.getGridSize_());
+        map_.addOverlay(clusterMarker_);
+      } else {
+        if (clusterMarker_.isHidden()) {
+          clusterMarker_.show();
+        }
+        clusterMarker_.redraw(true);
+      }
+    }
+  };
+
+  /**
+   * Remove all the markers from this cluster.
+   */
+  this.clearMarkers = function () {
+    if (clusterMarker_ !== null) {
+      map_.removeOverlay(clusterMarker_);
+    }
+    for (var i = 0; i < markers_.length; ++i) {
+      if (markers_[i].isAdded) {
+        map_.removeOverlay(markers_[i].marker);
+      }
+    }
+    markers_ = [];
+  };
+
+  /**
+   * Get number of markers.
+   * @return {Number}
+   */
+  this.getTotalMarkers = function () {
+    return markers_.length;
+  };
+}
+
+/**
+ * ClusterMarker_ creates a marker that shows the number of markers that
+ * a cluster contains.
+ *
+ * @constructor
+ * @private
+ * @param {GLatLng} latlng Marker's lat and lng.
+ * @param {Number} count Number to show.
+ * @param {Array of Object} styles The image list to be showed:
+ *   {String} url Image url.
+ *   {Number} height Image height.
+ *   {Number} width Image width.
+ *   {Array of Number} anchor Text anchor of image left and top.
+ *   {String} textColor text color.
+ * @param {Number} padding Padding of marker center.
+ */
+function ClusterMarker_(latlng, count, styles, padding) {
+  var index = 0;
+  var dv = count;
+  while (dv !== 0) {
+    dv = parseInt(dv / 10, 10);
+    index ++;
+  }
+
+  if (styles.length < index) {
+    index = styles.length;
+  }
+  this.url_ = styles[index - 1].url;
+  this.height_ = styles[index - 1].height;
+  this.width_ = styles[index - 1].width;
+  this.textColor_ = styles[index - 1].opt_textColor;
+  this.anchor_ = styles[index - 1].opt_anchor;
+  this.latlng_ = latlng;
+  this.index_ = index;
+  this.styles_ = styles;
+  this.text_ = count;
+  this.padding_ = padding;
+}
+
+ClusterMarker_.prototype = new GOverlay();
+
+/**
+ * Initialize cluster marker.
+ * @private
+ */
+ClusterMarker_.prototype.initialize = function (map) {
+  this.map_ = map;
+  var div = document.createElement("div");
+  var latlng = this.latlng_;
+  var pos = map.fromLatLngToDivPixel(latlng);
+  pos.x -= parseInt(this.width_ / 2, 10);
+  pos.y -= parseInt(this.height_ / 2, 10);
+  var mstyle = "";
+  if (document.all) {
+    mstyle = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="' + this.url_ + '");';
+  } else {
+    mstyle = "background:url(" + this.url_ + ");";
+  }
+  if (typeof this.anchor_ === "object") {
+    if (typeof this.anchor_[0] === "number" && this.anchor_[0] > 0 && this.anchor_[0] < this.height_) {
+      mstyle += 'height:' + (this.height_ - this.anchor_[0]) + 'px;padding-top:' + this.anchor_[0] + 'px;';
+    } else {
+      mstyle += 'height:' + this.height_ + 'px;line-height:' + this.height_ + 'px;';
+    }
+    if (typeof this.anchor_[1] === "number" && this.anchor_[1] > 0 && this.anchor_[1] < this.width_) {
+      mstyle += 'width:' + (this.width_ - this.anchor_[1]) + 'px;padding-left:' + this.anchor_[1] + 'px;';
+    } else {
+      mstyle += 'width:' + this.width_ + 'px;text-align:center;';
+    }
+  } else {
+    mstyle += 'height:' + this.height_ + 'px;line-height:' + this.height_ + 'px;';
+    mstyle += 'width:' + this.width_ + 'px;text-align:center;';
+  }
+  var txtColor = this.textColor_ ? this.textColor_ : 'black';
+
+  div.style.cssText = mstyle + 'cursor:pointer;top:' + pos.y + "px;left:" +
+      pos.x + "px;color:" + txtColor +  ";position:absolute;font-size:11px;" +
+      'font-family:Arial,sans-serif;font-weight:bold';
+  div.innerHTML = this.text_;
+  map.getPane(G_MAP_MAP_PANE).appendChild(div);
+  var padding = this.padding_;
+  GEvent.addDomListener(div, "click", function () {
+    var pos = map.fromLatLngToDivPixel(latlng);
+    var sw = new GPoint(pos.x - padding, pos.y + padding);
+    sw = map.fromDivPixelToLatLng(sw);
+    var ne = new GPoint(pos.x + padding, pos.y - padding);
+    ne = map.fromDivPixelToLatLng(ne);
+    var zoom = map.getBoundsZoomLevel(new GLatLngBounds(sw, ne), map.getSize());
+    map.setCenter(latlng, zoom);
+  });
+  this.div_ = div;
+};
+
+/**
+ * Remove this overlay.
+ * @private
+ */
+ClusterMarker_.prototype.remove = function () {
+  this.div_.parentNode.removeChild(this.div_);
+};
+
+/**
+ * Copy this overlay.
+ * @private
+ */
+ClusterMarker_.prototype.copy = function () {
+  return new ClusterMarker_(this.latlng_, this.index_, this.text_, this.styles_, this.padding_);
+};
+
+/**
+ * Redraw this overlay.
+ * @private
+ */
+ClusterMarker_.prototype.redraw = function (force) {
+  if (!force) {
+    return;
+  }
+  var pos = this.map_.fromLatLngToDivPixel(this.latlng_);
+  pos.x -= parseInt(this.width_ / 2, 10);
+  pos.y -= parseInt(this.height_ / 2, 10);
+  this.div_.style.top =  pos.y + "px";
+  this.div_.style.left = pos.x + "px";
+};
+
+/**
+ * Hide this cluster marker.
+ */
+ClusterMarker_.prototype.hide = function () {
+  this.div_.style.display = "none";
+};
+
+/**
+ * Show this cluster marker.
+ */
+ClusterMarker_.prototype.show = function () {
+  this.div_.style.display = "";
+};
+
+/**
+ * Get whether the cluster marker is hidden.
+ * @return {Boolean}
+ */
+ClusterMarker_.prototype.isHidden = function () {
+  return this.div_.style.display === "none";
+};