Developer SiteConsole

Polygon

Fill colors the area within given vertices

Polygon

Creates a custom polygon. Takes JSON Array of at least 3 latitude/longitude for vertices, color, and transparency as arguments.

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

Parameter

How to clear th polygon

Clears the polygon drawn on the map

Example

polygon.setMap(null);

How to change path

Example

const polygonPath2 = [
    { lng : 126.89671297016855, lat : 37.48327831082247 },
    { lng : 126.9263372880938, lat : 37.4687100831612 },
    { lng : 126.894434176483, lat : 37.457555934748214 },
    { lng : 126.86854454821116, lat : 37.47338227239054 }
];
polygon.addPolygon(polygonPath2);

How to make a path on/off

Sets a visibility option for a polygon instance.

Example

// on
polygon.setVisible(true);

// off
polygon.setVisible(false);

HTML Sample CODE

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Polygon</title>
</head>
<body>
<div style="height: 100vh">
    <div id="app"></div>
</div>

<button style="position:absolute;float:top;top:50px;left:20px;" onclick="addPath()">Change Path</button>
<button style="position:absolute;float:top;top:50px;left:120px;" onclick="removePath()">Remove Polygon</button>
<button style="position:absolute;float:top;top:50px;left:250px;" onclick="visible()">visible</button>
<button style="position:absolute;float:top;top:50px;left:320px;" onclick="invisible()">invisible</button>

<script type="text/javascript" src="https://maps.fatos.biz/dist/fatosmap-gl.js"></script>
<script>
    const LatLng = {lat: 37.482901, lng: 126.896038};
    let polygon = null;
    const polygonPath = [
        { lng : 126.89654749206602, lat : 37.483294848898396 },
        { lng : 126.91949422580217, lat : 37.650939883625114 },
        { lng : 127.06066732772979, lat : 37.750899297688065 },
        { lng : 127.0416190159097, lat : 37.51702306480502 },
        { lng : 126.89654749206602, lat : 37.483294848898396 }
    ];

    const polygonPath2 = [
        { lng : 126.89671297016855, lat : 37.48327831082247 },
        { lng : 126.9263372880938, lat : 37.4687100831612 },
        { lng : 126.894434176483, lat : 37.457555934748214 },
        { lng : 126.86854454821116, lat : 37.47338227239054 },
        { lng : 126.89671297016855, lat : 37.48327831082247 }
    ];

    let toggle = 0;

    const mapInstance = new fatosmap.maps.Map(
        document.getElementById("app"),
        {
            zoom: 14.5,  // current zoom level
            center: LatLng,
            maxZoom: 20, // default 24
            minZoom: 2,  // default 0
            key: 'YOUR_API_KEY', // https://console.fatos.biz
        }
    );
    mapInstance.on('load', function () {

        polygon = new fatosmap.maps.Polygon({
            paths:             polygonPath,
            fillColor:         '#FF0000',
            fillOpacity:       0.35,
            outlineColor:      '#DC151A',
            text:              'FATOS',
            textColor:         '#91FF7C',
            textSize:          25,
            // textOffset:        [5,4],
            textHaloWidth:     10
        });

        polygon.setMap(mapInstance);
    });

    function addPath() {
        if(toggle === 1) {
            polygon.addPolygon(polygonPath);
            toggle = 0
        } else {
            polygon.addPolygon(polygonPath2);
            toggle = 1
        }
    }

    function removePath() {
        polygon.setMap(null);
    }
    function visible() {
        polygon.setVisible(true);
    }
    function invisible() {
        polygon.setVisible(false);
    }
</script>
</body>
</html>

PreviousPolylineNextCircle

Last updated