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

Required Parameter

Description

Type

paths

Coordinate value for each vertex

JSON Array

Optional Parameter

Description

Type

fillColor

specifies a hexadecimal HTML color of the format "#FFFFFF". The Polygon class does not support named colors. The default is '#000000'

Hex (String)

fillOpacity

specifies a numerical value between 0.0 and 1.0 to determine the opacity of the fill's color. The default is 1.0

Numeric

outlineColor

specifies a hexadecimal HTML outline color of the format "#FFFFFF". The Polygon class does not support named colors. The default is '#000000'

Hex (String)

text

Optional formatted. Defaults to ""

String

textColor

Optional color. Defaults to "#000000". Requires "text" option.

Hex (String)

textHaloColor

Optional color. Defaults to "rgba(0, 0, 0, 0)". Requires "text" option.

RGBA

textHaloWidth

Optional number greater than or equal to 0. Units in pixels. Defaults to 0. Requires "text" option.

Numeric

textSize

Optional number greater than or equal to 0. Units in pixels. Defaults to 16. Requires "text" option.

Numeric

textOffset

Optional array of numbers. Units in ems. Defaults to [0,0]. Requires "text" option.

Numeric Array

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