Subversion Repositories eFlore/Applications.cel

/**

 * @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";

};