# Cluster

## 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   | <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>
```

###


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nostramap-doc.fatos.biz/fatos-api/map/map-control/cluster.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.