Polyline
Generate a polyline object and display it on the map.
Polyline
mogosmap.maps.Polyline({ option });Parameters
path
Each {lat, lng} behaves as a node
JSON Array
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
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
null
Clear or destroy to generated polyline.
null
Returns
Example
polyline.setMap(null);
polyline = null;addPolyline
polyline.addPolyline(object);Parameters
path
The shape of the polyline can be changed by setting new coordinates.
JSON Array
Returns
Example
const line = [
{ "lng": 126.89607702533408, "lat": 37.482463744025864 },
{ "lng": 126.80346571250732, "lat": 37.55918112070216 },
];
polyline.addPolyline(line);setVisible
polyline.setVisible(bool);Parameter
modeShow
Show or hide the generated polyline on the map.
Boolean
Returns
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].
Last updated