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>

PreviousTheme NextInstance Members

Last updated 3 years ago