# Rectangle

## Rectangle

Create a rectangle to display on the map.

```javascript
new fatosmap.maps.Rectangle({ option });
```

| Required Parameter | Description                         | Type         |
| ------------------ | ----------------------------------- | ------------ |
| map                | Map object to display the Rectangle | Map instance |

| Optional Parameter | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Type     |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- |
| circleStyle        | <p>Set individual circle styles.</p><p><strong>color</strong> : Set the color of the inner cluster. <br>            Colors, HEX, RGB, RGBA<br>            Default : #fff<br><strong>strokeColor</strong> : Set the color of the outer cluster. <br>             Colors, HEX, RGB, RGBA<br>             Default : #F2AF4E<br><strong>strokeWidth</strong> : Set the width of the outer cluster.<br>             numeric<br>             Default : 4<br><strong>radius</strong> : Set the radius of the cluster.<br>              numeric </p><p>              Default : 4.5</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Object   |
| rectangleStyle     | <p>Set individual rectangle styles.</p><p><strong>lineColor :</strong> The color with which the line will be drawn.<br>                    Colors, HEX, RGB, RGBA<br>                    Default : #1bcdc1<br><strong>lineWidth</strong> : Stroke thickness.</p><p>                    numeric </p><p>                    Default : 5<br><strong>dashLineColor</strong> : The color with which the line will be drawn.<br>                    Colors, HEX, RGB, RGBA<br>                    Default : #a5a5a5<br><strong>dashLineWidth</strong> : Stroke thickness.</p><p>                              numeric </p><p>                              Default : 4<br><strong>dashArray</strong> : Specifies the lengths of the alternating dashes and gaps that form the dash pattern.<br>                      Array\<numeric><br>                      Default : \[3, 2]<br><strong>fillColor</strong> : The color of the filled part of this layer.<br>                    Colors, HEX, RGB, RGBA<br>                    Default : #1bcdc1<br><strong>fillOpacity</strong> : The opacity of the entire fill layer.<br>                    numeric between 0 and 1</p><p>                    Default : 0.3<br><strong>textColor</strong> : The color with which the text will be drawn.<br>                    Colors, HEX, RGB, RGBA<br>                    Default : #F2AF4E</p><p><strong>textSize</strong> : Set the font size.<br>                  numeric<br>                  Default : 18<br><strong>textHaloColor</strong> : The color of the text's halo, which helps it stand out from backgrounds.<br>             Colors, HEX, RGB, RGBA<br>             Default : #fff<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 <br>              Default 5</p><p>�<strong>overlap</strong> : If true, the icon will be visible even if it collides with other previously drawn symbols. </p><p>              boolean <br>              Default true</p><p><strong>placement</strong> : If true, other symbols can be visible even if they collide with the icon.</p><p>              boolean <br>              Default true</p> | Object   |
| callback           | A callback is a function passed as an argument to another function.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Function |

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rectangle</title>
</head>
<body>
<div style="height: 100vh">
    <div id="app"></div>
</div>
<button style="position: absolute; float: top; top: 50px; left: 50px;" onclick="rectangleAPI()">Rectangle API</button>
<script type="text/javascript" src="https://maps.fatos.biz/dist/fatosmap-gl.js"></script>
<script>

    const LatLng = {lat: 37.482901, lng: 126.896038};
    const mapInstance = new fatosmap.maps.Map(
        document.getElementById("app"),
        {
            zoom: 14.5,
            center: LatLng,
            maxZoom: 20,
            minZoom: 2,
            key: 'YOUR_API_KEY',
        }
    );

    function rectangleAPI() {
        new fatosmap.maps.Rectangle({
            map : mapInstance,
            circleStyle : {
              color: '#fff',
              radius: 4.5,
              strokeColor: '#F2AF4E',
              strokeWidth: 4
            },
            rectangleStyle : {
                lineColor: '#1bcdc1',
                lineWidth: 5,
                dashLineColor: '#a5a5a5',
                dashLineWidth: 4,
                dashArray: [3,2],
                fillColor: '#1bcdc1',
                fillOpacity: 0.3,
                textColor: '#F2AF4E',
                textSize: 18,
                textHaloColor: '#fff',
                textHaloWidth: 5,
                overlap: true,
                placement: true,
            },
            callback : getData,
        });
    }
    function getData(bounds) {
        console.log('GetData ::', bounds)
    }
</script>
</body>
</html>

```