Polylgon

Generate a polygon object and display it on map.

Polylgon

mogosmap.maps.Polygon({ option });

Parameters

Parameter (Required)

Description

Remark

path

Each {lat, lng} behaves as a vertex

JSON Array

Parameter (Optional)

Description

Remark

fillColor

Specifies a hexadecimal HTML color of the format "#FFFFFF".

The Polygon class does not support named colors.

(Default : #000000)

Hex

fillOpacity

Specifies a numerical value between 0.0 and 1.0 to determine the opacity of the line's color.

(Default : 1.0)

Numeric

outlineColor

specifies a hexadecimal HTML outline color of the format "#FFFFFF".

The Polygon class does not support named colors.

(Default : #000000)

Hex

text

Optional formatted.

(Default : "")

String

textColor

Optional color.

Defaults to "#000000".

Requires "text" option.

Hex

textHaloColor

Optional color.

Default is "rgba(0, 0, 0, 0)".

Requires "text" option.

rgba

textHaloWidth

Optional number greater than or equal to 0. Units in pixels.

Default is 0.

Requires "text" option.

Numeric

textSize

Optional number greater than or equal to 0.

Units in pixels.

Default is 16.

Requires "text" option.

Numeric

textOffset

Optional array of numbers.

Units in ems.

Default is [0,0].

Requires "text" option.

Numeric

callback

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

Function

Returns

Parameter

Description

Remark

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Polyline</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 Polyline</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.mogoscorp.com/dist/mogosmap-gl.js"></script>
<script>
    const LatLng = {lat: 37.482901, lng: 126.896038};
    let polyline = null;
    let line = [
        { "lng": 126.89607702533408, "lat": 37.482463744025864 },
        { "lng": 126.80346571250732, "lat": 37.55918112070216 },
    ];
    let line2 = [
        { "lng": 126.89607702533408, "lat": 37.482463744025864 },
        {"lat": 37.54906263620941, "lng": 126.99450956618568}
    ];
    let toggle = 0;

    const mapInstance = new mogosmap.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', 
        }
    );
    mapInstance.on('load', function () {

        polyline = new fatosmap.maps.Polyline({
            path:            line,
            strokeColor:     '#0000FF',
            strokeOpacity:   0.5,
            strokeWeight:    10,
            message:         'MOGOS',
            anchor:          'bottom',
            offset:          15,
            closeButton:     true,
            closeOnClick:    true,
        });

        polyline.setMap(mapInstance);
    });

    function addPath() {
        if(toggle === 1) {
            polyline.addPolyline(line);
            toggle = 0
        } else {
            polyline.addPolyline(line2);
            toggle = 1
        }
    }
    function removePath() {
        polyline.setMap(null);
        polyline = null;
    }
    function visible() {
        polyline.setVisible(true);
    }
    function invisible() {
        polyline.setVisible(false);
    }
</script>
</body>
</html>

setMap

polygon.setMap(null);

Parameters

Parameter (Required)

Description

Remark

null

Clear or destroy to generated polyline.

null

Returns

Parameter

Description

Remark

Example

polygon.setMap(null);
polygon = null;

addPolygon

polygon.addPolygon(object);

Parameters

Parameter (Required)

Description

Remark

path

The shape of the polyline can be changed by setting new coordinates.

JSON Array

Returns

Parameter

Description

Remark

Example

const vertexPolygon = [
        { "lng": 126.89607702533408, "lat": 37.482463744025864 },
        { "lng": 126.80346571250732, "lat": 37.55918112070216 },
];
polygon.addPolygone(vertexPolygon);

setVisible

polygon.setVisible(bool);

Parameter

Parameter (Required)

Description

Remark

modeShow

Show or hide the generated polyline on the map.

Boolean

Returns

Parameter

Description

Remark

Example

// on
polygon.setVisible(true);

// off
polygon.setVisible(false);

The MOGOS Maps API requires an API Key, which can be obtained from the MOGOS Console website or contact [email protected].

PreviousPolyline NextArea

Last updated 2 years ago