Polyline
Connect vertices with lines
Polyline
Sets latitude/longitude, color, transparency, line thickness. Draws a line on the map by combining the set value. Collects the values of multiple coordinates and express them as lines.
new fatosmap.maps.Polyline({ option })Parameter
How to clear the polyline
Clears the path drawn on the map.
Example
polyline.setMap(null);How to change path
Example
const line = [
{ "lng": 126.89607702533408, "lat": 37.482463744025864 },
{ "lng": 126.80346571250732, "lat": 37.55918112070216 },
];
polyline.addPolyline(line);How to make a path on/off
Example
// on
polyline.setVisible(true);
// off
polyline.setVisible(false);HTML Sample CODE
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.fatos.biz/dist/fatosmap-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 fatosmap.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.fatos.biz
}
);
mapInstance.on('load', function () {
polyline = new fatosmap.maps.Polyline({
path: line,
strokeColor: '#0000FF',
strokeOpacity: 0.5,
strokeWeight: 10,
message: 'FATOS',
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>
Last updated