Developer SiteConsole

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>
PreviousThemeNextInstance Members

Last updated