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
map
Map object to display ther Cluster
Map instance
position
Latitude(must), Longitude(must), iconType(Option), message(Option), popupMessage(Option)
Array<object>
clusterMaxZoom
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.
Numeric
clusterRadius
Radius of each cluster if clustering is enabled. A value of 512 indicates a radius equal to the width of a tile.
Numeric
clusterStyle
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.
numeric
textColor : Set the text color of the cluster.
Colors, HEX, RGB, RGBA
textHaloWidth : Distance of halo to the font outline.
numeric
textHaloColor : The color of the text's halo.
Colors, HEX, RGB, RGBA
Array<object>
circleStyle
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
Array<object>
marker
Whether to display the data as a marker.
Default false(circle)
Boolean
markerStyle
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.
Array<object>
popupStyle
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
Array<object>
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
Was this helpful?