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