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>

PreviousInstance Members NextPolygon

Last updated 2 years ago

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