# Cluster

## Cluster

```javascript
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       | <p>Set individual cluster styles.</p><p><strong>color</strong> : Set the color of the inner cluster. <br>            Colors, HEX, RGB, RGBA<br><strong>strokeColor</strong> : Set the color of the outer cluster. <br>             Colors, HEX, RGB, RGBA<br><strong>strokeWidth</strong> : Set the width of the outer cluster.<br>             numeric<br><strong>radius</strong> : Set the radius of the cluster.<br>              numeric<br><strong>count</strong> : The number of clusters. <br>             numeric<br> <strong>textSize</strong> : Set the text size of the cluster.  </p><p>             numeric</p><p><strong>textColor</strong> : Set the text color of the cluster.   </p><p>             Colors, HEX, RGB, RGBA</p><p><strong>textHaloWidth</strong> : Distance of halo to the font outline.</p><p>             numeric</p><p><strong>textHaloColor</strong> : The color of the text's halo.</p><p>             Colors, HEX, RGB, RGBA</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Array\<object> |
| circleStyle        | <p>Set circle styles.</p><p><strong>color</strong> : Set the color of the inner circle. <br>            Colors, HEX, RGB, RGBA</p><p><strong>strokeColor</strong> : Set the color of the outer circle. <br>             Colors, HEX, RGB, RGBA<br><strong>strokeWidth</strong> : Set the width of the outer circle.<br>             numeric<br><strong>radius</strong> : Set the radius of the circle.<br>              numeric</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Array\<object> |
| marker             | <p>Whether to display the data as a marker.</p><p>Default false(circle)</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Boolean        |
| markerStyle        | <p>If marker true, </p><p>Set marker styles.</p><p><strong>minZoom</strong> : Zoom level to indicate the marker.</p><p>              numeric Default clusterMaxZoom</p><p><strong>overlap</strong> : If true, the icon will be visible even if it collides with other previously drawn symbols. </p><p>              boolean Default false</p><p><strong>placement</strong> : If true, other symbols can be visible even if they collide with the icon.</p><p>              boolean Default false</p><p><strong>iconSize</strong> : Scales the original size of the icon by the provided factor.</p><p>              numeric Default 1</p><p><strong>iconAnchor</strong> : Part of the icon placed closest to the anchor.<br> <code>"center"</code>, <code>"left"</code>, <code>"right"</code>, <code>"top"</code>, <code>"bottom"</code>, <code>"top-left"</code>, <code>"top-right"</code>, <code>"bottom-left"</code>, <code>"bottom-right"</code></p><p>              String Default center</p><p><strong>textAnchor</strong> : Part of the text placed closest to the anchor.<br> <code>"center"</code>, <code>"left"</code>, <code>"right"</code>, <code>"top"</code>, <code>"bottom"</code>, <code>"top-left"</code>, <code>"top-right"</code>, <code>"bottom-left"</code>, <code>"bottom-right"</code></p><p>              String Default center</p><p><strong>textColor</strong> : The color with which the text will be drawn.<br>              Colors, HEX, RGB, RGBA</p><p><strong>textOffset</strong> : Offset distance of text from its anchor.<br>              Array\<Numeric> Default \[0,0]<br><strong>textHaloColor</strong> : The color of the text's halo, which helps it stand out from backgrounds.<br>             Colors, HEX, RGB, RGBA<br><strong>textHaloWidth</strong> : Distance of halo to the font outline. Max text halo width is 1/4 of the font-size.</p><p>              numeric Default 0<br><strong>addImage</strong> : The marker image is registered with the server.<br>              Array\<object><br>               <strong>imageId</strong> : It must match the icon type of data.</p><p>               <strong>imageUrl</strong> : Link with an image.</p><p></p> | Array\<object> |
| popupStyle         | <p>If marker true, </p><p>Set popup styles.</p><p><strong>event :</strong> mouse event.</p><p>"click", "mouseenter"</p><p>            String Defautl click</p><p><strong>className</strong> : Space-separated CSS class names to add to popup container.</p><p>            String Default None</p><p><strong>closeButton</strong> : If true, a close button will appear in the top right corner of the popup.</p><p>            Boolean Default false<br><strong>closeOnClick</strong> : If true , the popup will close when the map is clicked.<br>            Boolean Default false<br><strong>offset</strong> : A pixel offset applied to the popup's location.</p><p>             Array\<numeric> Default \[0,0]</p><p><strong>maxWidth</strong> : A string that sets the CSS property of the popup's maximum width.</p><p>            String Default fit-content<br><strong>anchor</strong> : Part of the popup that should be positioned closest to the coordinate</p><p>�<code>'center'</code> , <code>'top'</code> , <code>'bottom'</code> , <code>'left'</code> , <code>'right'</code> , <code>'top-left'</code> , <code>'top-right'</code> , <code>'bottom-left'</code> , and <code>'bottom-right'</code> </p><p>              String Default center</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Array\<object> |

### Example (Javascript + HTML)

```javascript
<!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>

```