If the data is a collection of point features, setting this to true clusters the points by radius into groups.


new fatosmap.maps.Cluster({ option)};


Required Parameter




Map object to display ther Cluster

Map instance


Latitude(must), Longitude(must), iconType(Option), message(Option), popupMessage(Option)


Optional Parameter




Max zoom on which to cluster points if clustering is enabled. Defaults to one zoom less than maxzoom (so that last zoom features are not clustered). Clusters are re-evaluated at integer zoom levels so setting clusterMaxZoom to 14 means the clusters will be displayed until z15.



Radius of each cluster if clustering is enabled. A value of 512 indicates a radius equal to the width of a tile.



Set individual cluster styles.

color : Set the color of the inner cluster. Colors, HEX, RGB, RGBA strokeColor : Set the color of the outer cluster. Colors, HEX, RGB, RGBA strokeWidth : Set the width of the outer cluster. numeric radius : Set the radius of the cluster. numeric count : The number of clusters. numeric textSize : Set the text size of the cluster.


textColor : Set the text color of the cluster.

Colors, HEX, RGB, RGBA

textHaloWidth : Distance of halo to the font outline.


textHaloColor : The color of the text's halo.

Colors, HEX, RGB, RGBA



Set circle styles.

color : Set the color of the inner circle. Colors, HEX, RGB, RGBA

strokeColor : Set the color of the outer circle. Colors, HEX, RGB, RGBA strokeWidth : Set the width of the outer circle. numeric radius : Set the radius of the circle. numeric



Whether to display the data as a marker.

Default false(circle)



If marker true,

Set marker styles.

minZoom : Zoom level to indicate the marker.

numeric Default clusterMaxZoom

overlap : If true, the icon will be visible even if it collides with other previously drawn symbols.

boolean Default false

placement : If true, other symbols can be visible even if they collide with the icon.

boolean Default false

iconSize : Scales the original size of the icon by the provided factor.

numeric Default 1

iconAnchor : Part of the icon placed closest to the anchor. "center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right"

String Default center

textAnchor : Part of the text placed closest to the anchor. "center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right"

String Default center

textColor : The color with which the text will be drawn. Colors, HEX, RGB, RGBA

textOffset : Offset distance of text from its anchor. Array<Numeric> Default [0,0] textHaloColor : The color of the text's halo, which helps it stand out from backgrounds. Colors, HEX, RGB, RGBA textHaloWidth : Distance of halo to the font outline. Max text halo width is 1/4 of the font-size.

numeric Default 0 addImage : The marker image is registered with the server. Array<object> imageId : It must match the icon type of data.

imageUrl : Link with an image.



If marker true,

Set popup styles.

event : mouse event.

"click", "mouseenter"

String Defautl click

className : Space-separated CSS class names to add to popup container.

String Default None

closeButton : If true, a close button will appear in the top right corner of the popup.

Boolean Default false closeOnClick : If true , the popup will close when the map is clicked. Boolean Default false offset : A pixel offset applied to the popup's location.

Array<numeric> Default [0,0]

maxWidth : A string that sets the CSS property of the popup's maximum width.

String Default fit-content anchor : Part of the popup that should be positioned closest to the coordinate

'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right'

String Default center


Example (Javascript + HTML)

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
<div style="height: 100vh">
    <div id="app"></div>
<button style="position: absolute; float: top; top: 50px; left: 50px;" onclick="clusterFNC()">Create Cluster</button>
<script type="text/javascript" src=""></script>
    let LatLng = {lat: 37.482901, lng: 126.896038};
    let mapInstance = new fatosmap.maps.Map(
            zoom: 14.5,
            center: LatLng,
            maxZoom: 20,
            minZoom: 2,
            key: 'YOUR_API_KEY',

    let data = [
        {lat: 37.564895, lng: 126.987056, iconType: 'truck', message: 'truck', popupMessage: `<div>Fatos</div>`},
        {lng: 126.978505, lat: 37.564978, iconType: 'bus', message: 'bus'},
        {lng: 126.987233, lat: 37.564934, iconType: 'kickboard', message: 'kickboard', popupMessage: `<div>Fatos2</div>`},
        {lng: 126.995626, lat: 37.550784, iconType: 'bus', message: 'bus'},
        {lng: 127.009800, lat: 37.530547, iconType: 'car', message: 'car'},
        {lng: 127.018089, lat: 37.540411, iconType: 'car', message: 'car'},
        {lng: 127.088223, lat: 37.528625, iconType: 'car', message: 'car'},
        {lng: 127.128448, lat: 37.572359, iconType: 'kickboard', message: 'car'},
        {lng: 127.284693, lat: 37.530413, iconType: 'car', message: 'car'},
        {lng: 127.321753, lat: 37.538258, iconType: 'bus', message: 'car'},
        {lng: 127.348518, lat: 37.592647, iconType: 'car', message: 'car'}

    let cluster;
    function clusterFNC () {
        cluster = new fatosmap.maps.Cluster({
            map:mapInstance,                    // Map to be created
            position: data,             // Data of objects to be clustered     
            clusterMaxZoom: 14,         // Uncluster if zoom exceeds level 14       
            clusterRadius: 150,         // All Cluster radius 150       
            clusterStyle: [
                    color: 'rgba(81,187,214,0.7)',
                    radius: 20,
                    color: 'rgba(241,240,117,0.71)',
                    count: 8,
                    radius: 30,
                    color: 'rgba(242,140,177,0.71)',
                    strokeColor: '#feff18',
                    strokeWidth : 2,
                    count: 10,
                    radius: 40,
                    textSize: 20,
                    textColor: '#fff',
                    textHaloWidth: 2,
                    textHaloColor: '#222'
            // Create circle-shaped points when not using markers.
            circleStyle: {
                color: '#fc00ee',
                radius: 8,
                strokeColor: '#fff',
                strokeWidth: 2
            marker: true,
            markerStyle: {
                minZoom: 1,
                overlap: true,
                placement: true,
                iconSize: 1,
                iconAnchor: 'top',
                textAnchor: 'bottom',
                textColor: 'rgb(244,165,98)',
                textOffset: [0,5],
                textHaloColor: '#fff',
                textHaloWidth: 2,
                addImage: [     // marker: true  must
                        imageId: 'car',      // imageId === position.iconType  must
                        imageUrl: ''
                        imageId: 'bus',
                        imageUrl: ''
                        imageId: 'truck',
                        imageUrl: ''
                        imageId: 'kickboard',
                        imageUrl: ''
            popupStyle: {
                event: 'click',
                className: 'fatos-marker-popup-bottom',
                offset:[0, -10],
                closeOnClick: true,
                maxWidth: 'fit-content',
                anchor: 'bottom',

Last updated