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

Required Parameter
Description
Type
path
Each {lat, lng} behaves as a node
JSON Array
Optional Parameter
Description
Type
strokeColor
specifies a hexadecimal HTML color of the format "#FFFFFF", The default is '#000000'
Hex
strokeOpacity
specifies a numerical value between 0.0 and 1.0 to determine the opacity of the line's color. The default is 1.0
Numeric
strokeWeight
specifies the width of the line in pixels. The default is 1
Numeric
message (popup)
Set the message of popup, type is string or HTML
String / HTML
event
popup mouse event click or mouseover. The 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'. The default is 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. The default is false
Bool
coloseOnClick (popup)
If true, the popup closes when the map is clicked. The default is false
Bool

Example

let line = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
let 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);

How to clear the polyline

Clears the path drawn on the map.

Example

polyline.setMap(null);
Copy link
On this page
Polyline
Parameter
Example
How to clear the polyline
Example