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

Required Parameter

Description

Type

map

Map object to display ther Cluster

Map instance

position

Latitude(must), Longitude(must), iconType(Option), message(Option), popupMessage(Option)

Array<object>

Optional Parameter

Description

Type

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 2 years ago