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

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>

PreviousInstance Members NextPolygon

Last updated 2 years ago

Was this helpful?

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