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