Create a rectangle to display on the map.

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

Required Parameter




Map object to display the Rectangle

Map instance

Optional Parameter




Set individual circle styles.

color : Set the color of the inner cluster. Colors, HEX, RGB, RGBA Default : #fff strokeColor : Set the color of the outer cluster. Colors, HEX, RGB, RGBA Default : #F2AF4E strokeWidth : Set the width of the outer cluster. numeric Default : 4 radius : Set the radius of the cluster. numeric

Default : 4.5



Set individual rectangle styles.

lineColor : The color with which the line will be drawn. Colors, HEX, RGB, RGBA Default : #1bcdc1 lineWidth : Stroke thickness.


Default : 5 dashLineColor : The color with which the line will be drawn. Colors, HEX, RGB, RGBA Default : #a5a5a5 dashLineWidth : Stroke thickness.


Default : 4 dashArray : Specifies the lengths of the alternating dashes and gaps that form the dash pattern. Array<numeric> Default : [3, 2] fillColor : The color of the filled part of this layer. Colors, HEX, RGB, RGBA Default : #1bcdc1 fillOpacity : The opacity of the entire fill layer. numeric between 0 and 1

Default : 0.3 textColor : The color with which the text will be drawn. Colors, HEX, RGB, RGBA Default : #F2AF4E

textSize : Set the font size. numeric Default : 18 textHaloColor : The color of the text's halo, which helps it stand out from backgrounds. Colors, HEX, RGB, RGBA Default : #fff textHaloWidth : Distance of halo to the font outline. Max text halo width is 1/4 of the font-size.

numeric Default 5

overlap : If true, the icon will be visible even if it collides with other previously drawn symbols.

boolean Default true

placement : If true, other symbols can be visible even if they collide with the icon.

boolean Default true



A callback is a function passed as an argument to another function.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
<div style="height: 100vh">
    <div id="app"></div>
<button style="position: absolute; float: top; top: 50px; left: 50px;" onclick="rectangleAPI()">Rectangle API</button>
<script type="text/javascript" src=""></script>

    const LatLng = {lat: 37.482901, lng: 126.896038};
    const mapInstance = new fatosmap.maps.Map(
            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)

Last updated