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)};
Map object to display ther Cluster
Map instance
Latitude(must), Longitude(must), iconType(Option), message(Option), popupMessage(Option)
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 modified 10mo ago
Copy link
On this page
Example (Javascript + HTML)