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);