Cluster
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)};
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> |
<!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 modified 1yr ago