2GIS Map API

Cluster object style example

by Trufi

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>2GIS Map API</title>
        <meta name="description" content="Cluster object style example">
    </head>
    <body>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script src="https://unpkg.com/@2gis/mapgl-clusterer@^1/dist/clustering.js"></script>
        <div id="container"></div>
    </body>
</html>

CSS

html,
body,
#container {
    margin: 0;
    width: 500px;
    height: 300px;
    overflow: hidden;
}

JavaScript

// API key can be used on jsfiddle.net only!
// You can get more info on https://docs.2gis.com/

const map = new mapgl.Map('container', {
    center: [55.323, 25.235],
    zoom: 10.5,
    key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
});
const markers = [
    { coordinates: [55.27887, 25.21001] },
    { coordinates: [55.30771, 25.20314] },
    { coordinates: [55.35266, 25.24382] },
];
const clusterer = new mapgl.Clusterer(map, {
    clusterStyle: {
        icon: 'https://docs.2gis.com/img/mapgl/cluster.svg',
        hoverIcon: 'https://docs.2gis.com/img/mapgl/clusterHover.svg',
        labelColor: '#ffffff',
        labelFontSize: 16,
        anchor: [15, 30],
    },
});
clusterer.load(markers);