PieChartClusterer is an extention of standard Yandex Maps JS API 2.1 Clusterer
that represents numerical proportion of different Placemark
types
in Cluster.
PieChartClusterer class allows to construct and display such representations over geographical maps using PieChart icon.
-
Put module source code (pie-chart-clusterer.min.js) on your CDN.
-
Load both Yandex Maps JS API 2.1 and module source code by adding following code into <head> section of your page
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<!-- Change my.cdn.tld to your CDN host name -->
<script src="http://my.cdn.tld/pie-chart-clusterer.min.js" type="text/javascript"></script>- Get access to module functions by using ymaps.modules.require method
ymaps.modules.require(['PieChartClusterer'], function (PieChartClusterer) {
/**
* Supports all Clusterer constructor options.
* @see https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Clusterer-docpage/
*/
var clusterer = new PieChartClusterer({margin: 10});
});http://yandex.github.io/ymaps-pie-chart-clusterer/
- Displaying Clusterer of different Placemark types.
ymaps.ready(function () {
var myMap = new ymaps.Map('YMapsID', {
center: [55.7517318022522, 37.61691485505143],
zoom: 10
});
ymaps.modules.require(['PieChartClusterer'], function (PieChartClusterer) {
var clusterer = new PieChartClusterer();
var points = [
new ymaps.Placemark(
[55.75498702962238, 37.618202315378575],
{balloonContent: 'museum'},
{preset: 'islands#brownIcon'}
),
new ymaps.Placemark(
[55.754662597966856, 37.621551735588916],
{balloonContent: 'shopping centre'},
{preset: 'islands#blueIcon'}
),
new ymaps.Placemark(
[55.753610957072794, 37.6258667510446],
{balloonContent: 'shopping centre'},
{preset: 'islands#blueIcon'}
),
new ymaps.Placemark(
[55.752475871211445, 37.623210672898345],
{balloonContent: 'temple'},
{preset: 'islands#greenIcon'}
),
new ymaps.Placemark(
[55.755421360094026, 37.622878078980506],
{balloonContent: 'cafe'},
{preset: 'islands#redIcon'}
),
new ymaps.Placemark(
[55.75573597375927, 37.62162280516154],
{balloonContent: 'restaurant'},
{preset: 'islands#orangeIcon'}
)
];
clusterer.add(points);
myMap.geoObjects.add(clusterer);
});
});Use ym-builder if re-build is needed.