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>

PreviousPolyline NextCircle

Last updated 2 years ago

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);

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