Polyline

Generate a polyline object and display it on the map.

Polyline

mogosmap.maps.Polyline({ option });

Parameters

Parameter (Required)

Description

Remark

path

Each {lat, lng} behaves as a node

JSON Array

Parameter (Optional)

Description

Remark

strokeColor

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

The Circle class does not support named colors.

The default is '#000000' specifies a hexadecimal HTML color of the format "#FFFFFF".

(Default : #000000)

Hex

strokeOpacity

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

(Default : 1.0)

Numeric

strokeWeight

Specifies the width of the line in pixels.

(Default : 1)

String

message (popup)

Set the message of popup, type is string or HTML

String / HTML

event

Popup mouse event click or mouseover.

(Default : click)

String

anchor (popup)

A string indicating the part of the Marker that should be positioned closest to the coordinate set via Marker #setLngLat.

Options are 'center' , 'top' , 'bottom' , 'left' , 'right'.

(Default : bottom)

String

offset

(popup)

The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up. (Default : 15)

Numeric

closeButton (popup)

If true, a close button will appear in the top right corner of the popup.

(Default : false)

Boolean

coloseOnClick (popup)

If true, the popup closes when the map is clicked.

(Default : false)

Boolean

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', // https://console.mogoscorp.com
        }
    );
    mapInstance.on('load', function () {

        polyline = new mogosmap.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

polyline.setMap(null);

Parameters

Parameter (Required)

Description

Remark

null

Clear or destroy to generated polyline.

null

Returns

Parameter

Description

Remark

Example

polyline.setMap(null);
polyline = null;

addPolyline

polyline.addPolyline(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 line = [
        { "lng": 126.89607702533408, "lat": 37.482463744025864 },
        { "lng": 126.80346571250732, "lat": 37.55918112070216 },
];
polyline.addPolyline(line);

setVisible

polyline.setVisible(bool);

Parameter

Parameter (Required)

Description

Remark

modeShow

Show or hide the generated polyline on the map.

Boolean

Returns

Parameter

Description

Remark

Example

// on
polyline.setVisible(true);

// off
polyline.setVisible(false);

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

PreviousCircle NextPolylgon

Last updated 2 years ago