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