Yahoo! Map Cluster

Demo

var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 15, Y.LayerSetId.NORMAL);
var marker = new Y.Marker(new Y.LatLng(35.66572, 139.73100));
var marker2 = new Y.Marker(new Y.LatLng(35.66572, 139.73000));
var marker3 = new Y.Marker(new Y.LatLng(35.665, 139.734));
var marker4 = new Y.Marker(new Y.LatLng(35.6635, 139.734));
var marker5 = new Y.Marker(new Y.LatLng(35.665, 139.731));
var marker6 = new Y.Marker(new Y.LatLng(35.6642, 139.733));
var marker7 = new Y.Marker(new Y.LatLng(35.6635, 139.7328));
var marker8 = new Y.Marker(new Y.LatLng(35.665, 139.7343));
var marker9 = new Y.Marker(new Y.LatLng(35.6638, 139.7333));
var marker10 = new Y.Marker(new Y.LatLng(35.6628, 139.7333));
new YmapCluster(ymap, [marker, marker2, marker3, marker4, marker5, marker6, 
marker7, marker8, marker9, marker10]);

When you want to change color of the clusters depending on the number of markers inside

var ymap = new Y.Map("map2");
ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 15, Y.LayerSetId.NORMAL);
new YmapCluster(ymap, markers, {
  getClusterSize: function(sums) {
    if (sums >= 3 && sums < 7) {
      return 2;
    } else if (sums >= 7) {
      return 3;
    }
    return 1;
  }
});

You can also add markers dynamically by calling the medthod addMarker

var ymap = new Y.Map("map3");
ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 15, Y.LayerSetId.NORMAL);
var marker = new Y.Marker(new Y.LatLng(35.66572, 139.73100));
var cluster = new YmapCluster(ymap, [marker]);
var btn = document.querySelector('.js-btn');
btn.addEventListener('click', function() {
  var lat = parseFloat(document.querySelector('.js-lat').value);
  var lng = parseFloat(document.querySelector('.js-lng').value);
  var newMarker = new Y.Marker(new Y.LatLng(lat, lng));
  cluster.addMarker(newMarker, true);
});

Quick Start

Using CDN

Add the following description in the <head> tag of the web page you want to use

<script src="https://unpkg.com/yahoo-map-cluster@latest/bundle/ymap-cluster.js"></script>

You can also bundle the library with Browserify/Webpack

npm install yahoo-map-cluster --save

import YmapCluster from 'yahoo-map-cluster'

Write the following script

var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 15, Y.LayerSetId.NORMAL);
new YmapCluster(ymap, markers);

Options

Some options are available when making new instances like below.

new YmapCluster(map, markers, {
  imagePath: './assets/cluster/',
  getClusterSize: function(sums) {
    if (sums >= 3 && sums < 7) {
      return 2;
    } else if (sums >= 7) {
      return 3;
    }
    return 1;
  }
});

For your reference, below is the list of the options available.

Name	Default	Description
`gridSize`	60(px)	Cluster radius in pixels
`minClusterSize`	2	The minimum number of markers to be in a cluster before the markers are hidden and a count is shown.
`imagePath`	`./images/cluster/`	The cluster image URL
`injectStyle`		function to add clusters and labels style `.ymap-cluster-label`、`.ymap-cluster-icon`
`getClusterSize`		Caluculator function to colorize the cluster icons

Join development on

GitHub

License