Skip to main content

Polyline

Polyline Properties​

Required Parameters

  • Map Object
  • Path: This could be be the array of lat lng.

Example:

    Var polyline =new mappls.polyline({
        map:map,
        path: [{lat:28.55108, lng:77.26913},{lat:28.55106,lng: 77.26906},{lat:28.55105,lng: 77.26897},{lat:28.55101,lng:77.26872},{lat:28.55099, lng:77.26849},{lat:28.55097, lng:77.26831},{lat:28.55093, lng:77.26794},{lat:28.55089, lng:77.2676},{lat:28.55123, lng:77.26756},{lat:28.55145, lng:77.26758},{lat:28.55168, lng:77.26758},{lat:28.55175, lng:77.26759},{lat:28.55177, lng:77.26755},{lat:28.55179, lng:77.26753}],
        });

Optional Parameters

  • strokeColor: The polyline's stroke color. All CSS3 colors are supported except for extended named colors.
    {
        strokeColor: '#333'
    }
  • strokeOpacity: The stroke color. All CSS3 colors are supported except for extended named colors.
    {
        strokeOpacity: 1.0
    }
  • strokeWeight: The stroke color. All CSS3 colors are supported except for extended named colors.
    {
        strokeWeight: 5
    }
  • fitbounds: Make map fit to polyline cordinates. By default the value is false.
    {
        fitbounds: true
    }
  • fitboundOptions: Make map fit to polyline cordinates. By default the value is false.
    {
        fitboundOptions: {padding: 120,duration:1000}
    }
  • lineCap: The display of line endings. One of "butt", "round", "square". Defaults to "butt".
    {
        lineCap: {padding: 120,duration:1000}
    }
  • popupHtml: It shows the message on clicking the polyline.
    {
        popupHtml: "MapmyIndia"
    }
  • popupOptions: Various options to show the message on clicking the polyline.
    {
        popupOptions: {offset: {'bottom': [0, -20]}}
    }
  • zIndex: Decides the priority index of the polyline.
    {
        zIndex: 5
    }
  • visibility: Decides whether to show the Polyline or not. By default the value is true.
    {
        visibility: false
    }

Example:

Polyline = new mappls.Polyline({
    map: map,
    path: [{lat:28.55108, lng:77.26913},{lat:28.55106,lng: 77.26906},
    {lat:28.55105,lng: 77.26897},{lat:28.55101,lng:77.26872},
    {lat:28.55099,lng:77.26849},{lat:28.55097, lng:77.26831},
    {lat:28.55093,lng:77.26794},{lat:28.55089, lng:77.2676},
    {lat:28.55123, lng:77.26756},{lat:28.55145, lng:77.26758},
    {lat:28.55168, lng:77.26758},{lat:28.55175, lng:77.26759},
    {lat:28.55177, lng:77.26755},{lat:28.55179, lng:77.26753},
    {lat:28.55182, lng:77.26751},{lat:28.55185, lng:77.2675},
    {lat:28.5519, lng:77.2675},{lat:28.55193, lng:77.2675},
    {lat:28.55195, lng:77.26752}],
    strokeColor: red,
    strokeOpacity: 1.0,
    strokeWeight: 9,
    fitbounds: true,
    lineGap: 0,
    fitboundOptions: {padding: 120,duration:1000},
    popupHtml: "Route 1",
    popupOptions: {offset: {'bottom': [0, -20]}}
});

Editable Polyline​

Drag polyline from anywhere & get callback polyline data.

    var pts=[{lat:28.55108, lng:77.26913},{lat:28.55106,lng: 77.26906},{lat:28.55105,lng: 77.26897},{lat:28.55101,lng:77.26872},{lat:28.55099, lng:77.26849},{lat:28.55097, lng:77.26831},{lat:28.55093, lng:77.26794},{lat:28.55089, lng:77.2676},{lat:28.55123, lng:77.26756},{lat:28.55145, lng:77.26758},{lat:28.55168, lng:77.26758},{lat:28.55175, lng:77.26759},{lat:28.55177, lng:77.26755},{lat:28.55179, lng:77.26753}];
    var polyline = new mappls.Polyline({
        map:map,
        paths: pts,
        strokeColor: '#333',
        strokeOpacity: 1.0,
        strokeWeight: 10,
        fitbounds:true,
        editable: true
    });

Gradient Polyline​

Live Demo | JS Fiddle

    var pts=[{lat:28.55108, lng:77.26913},{lat:28.55106,lng: 77.26906},{lat:28.55105,lng: 77.26897},{lat:28.55101,lng:77.26872},{lat:28.55099, lng:77.26849},{lat:28.55097, lng:77.26831},{lat:28.55093, lng:77.26794},{lat:28.55089, lng:77.2676},{lat:28.55123, lng:77.26756},{lat:28.55145, lng:77.26758},{lat:28.55168, lng:77.26758},{lat:28.55175, lng:77.26759},{lat:28.55177, lng:77.26755},{lat:28.55179, lng:77.26753}];
    var polyline = new mappls.Polyline({
        map:map,
        paths: pts,
        strokeColor: '#333',
        strokeOpacity: 1.0,
        strokeWeight: 10,
        fitbounds:true,
        gradient:[0, 'pink',0.1, 'black',0.3, 'cyan',0.5, 'lime',0.7, 'yellow',1, 'red']
    });

Animated Polyline​

Live Demo | JS Fiddle

Polyline draw point by point with speed

    var pts=[{lat:28.55108, lng:77.26913},{lat:28.55106,lng: 77.26906},{lat:28.55105,lng: 77.26897},{lat:28.55101,lng:77.26872},{lat:28.55099, lng:77.26849},{lat:28.55097, lng:77.26831},{lat:28.55093, lng:77.26794},{lat:28.55089, lng:77.2676},{lat:28.55123, lng:77.26756},{lat:28.55145, lng:77.26758},{lat:28.55168, lng:77.26758},{lat:28.55175, lng:77.26759},{lat:28.55177, lng:77.26755},{lat:28.55179, lng:77.26753}];
    var polyline = new mappls.Polyline({
        map:map,
        paths: pts,
        strokeColor: '#333',
        strokeOpacity: 1.0,
        strokeWeight: 10,
        fitbounds:true,
        animate: {path:true/false,speed:5}
    });

Animated Marker Along With Polyline​

    var pts=[{lat:28.55108, lng:77.26913},{lat:28.55106,lng: 77.26906},{lat:28.55105,lng: 77.26897},{lat:28.55101,lng:77.26872},{lat:28.55099, lng:77.26849},{lat:28.55097, lng:77.26831},{lat:28.55093, lng:77.26794},{lat:28.55089, lng:77.2676},{lat:28.55123, lng:77.26756},{lat:28.55145, lng:77.26758},{lat:28.55168, lng:77.26758},{lat:28.55175, lng:77.26759},{lat:28.55177, lng:77.26755},{lat:28.55179, lng:77.26753}];
    var polyline = new mappls.Polyline({
        map:map,
        paths: pts,
        strokeColor: '#333',
        strokeOpacity: 1.0,
        strokeWeight: 10,
        fitbounds:true,
        animate: { 
        speed:5 
        icon_width: 35 / “35”,
        icon_height: 15 / “15”,,
        icon_url: (icon_url),
        repeat: true/false,
        },
    });

Multi Colored Polyline​

Live Demo | JS Fiddle

    Polyline = new mappls.Polyline({
        map: map,
        path: {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "properties": {
                        "color": "green" 
                        },
                    "geometry": {
                        "type": "LineString",
                            "coordinates": [[28.55101,77.26872],[28.55099,77.26849],
                            [28.55097,77.26831],[28.55093, 77.26794],
                            [28.55089,77.2676],[28.55123,77.26756]]
                        }
                    },
                    {
                    "type": "Feature",
                    "properties": {
                        "color": "#F7455D" 
                        },
                    "geometry": {
                        "type": "LineString",
                            "coordinates": [[28.55123,77.26756],[28.55145,77.26758],
                            [28.55168,77.26758],[28.55168,77.26758],
                            [28.55168,77.26758],[28.55172,77.26759]]
                        }
                    }]
                },
        strokeColor: red,
        strokeOpacity: 1.0,
        strokeWeight: 9,
        fitbounds: true, // or false
        lineGap: 0,
        fitboundOptions: {padding: 120,duration:1000},
        popupHtml: "Route 1",
        popupOptions: {offset: {'bottom': [0, -20]}}
    });

Polyline Marker Animation Methods​

Stop Animation​
    polyline.animate('stop');
Resume Animation​
    polyline.animate('resume');

Polyline Events​

click​

    Polyline.addListener(('click')), function() {
            alert(`Polyline Event Works`);
    });

dblclick​

    Polyline.addListener(('dblclick')), function() {
            alert(`Polyline Event Works`);
    });

drag​

    Polyline.addListener(('drag')), function() {
            alert(`Polyline Event Works`);
    });

dragstart​

    Polyline.addListener(('dragstart')), function() {
            alert(`Polyline Event Works`);
    });

dragend​

    Polyline.addListener(('dragend')), function() {
            alert(`Polyline Event Works`);
    });

mousemove​

    Polyline.addListener(('mousemove')), function() {
            alert(`Polyline Event Works`);
    });

mouseout​

```js
Polyline.addListener(('mouseout')), function() {
        alert(`Polyline Event Works`);
});
```

Remove Polyline​

    mappls.remove({map: map_object, layer: Polyline_object);