Cluster
If the data is a collection of point features, setting this to true clusters the points by radius into groups.
Cluster
new fatosmap.maps.Cluster({ option)};
Parameter
Example (Javascript + HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 100vh">
<div id="app"></div>
</div>
<button style="position: absolute; float: top; top: 50px; left: 50px;" onclick="clusterFNC()">Create Cluster</button>
<script type="text/javascript" src="https://maps.fatos.biz/dist/fatosmap-gl.js"></script>
<script>
let LatLng = {lat: 37.482901, lng: 126.896038};
let mapInstance = new fatosmap.maps.Map(
document.getElementById("app"),
{
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: 'https://maps.fatos.biz/dist/car_fatos.png'
},
{
imageId: 'bus',
imageUrl: 'https://maps.fatos.biz/dist/bus_fatos.png'
},
{
imageId: 'truck',
imageUrl: 'https://maps.fatos.biz/dist/truck_fatos.png'
},
{
imageId: 'kickboard',
imageUrl: 'https://maps.fatos.biz/dist/kickboard_fatos.png'
}
],
},
popupStyle: {
event: 'click',
className: 'fatos-marker-popup-bottom',
closeButton:false,
offset:[0, -10],
closeOnClick: true,
maxWidth: 'fit-content',
anchor: 'bottom',
},
});
cluster.setMap(mapInstance);
}
</script>
</body>
</html>
Last updated