MapmyIndia Interactive Vector Maps JS SDK for Web !¶

Polyline Quick Reference¶

Polyline

Polyline Properties ¶

Required¶

Map Object
Path:

This could be be the array of lat lng. For access, you can get your api key from Mappls Console

Example Code Snippets:

    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 Properties¶

strokeColor: The polyline's stroke color. All CSS3 colors are supported except for extended named colors.

    {
        strokeColor: '#333'
    }

strokeOpacity: The stroke color opacity can be set using this property. All CSS3 colors are supported except for extended named colors.

    {
        strokeOpacity: 1.0
    }

strokeWeight: The stroke color density can be definded using this property. All CSS3 colors are supported except for extended named colors.

    {
        strokeWeight: 5
    }

fitbounds: Automatically adjusts the map layer to fit within the boundaries defined by the GeoJSON data/or other layer parameters. 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 Code Snippet

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 ¶

Mappls Gradient Polyline Live Demo

    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 ¶

Animated Polyline Live Demo

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 ¶

Multi Colored Polyline Live Demo

    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¶

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

For any queries and support, please contact:

Email us at apisupport@mappls.com

Support Need support? contact us!

Terms & Conditions | Privacy Policy | Supplier Sustainability Policy | Health & Safety Policy | Environmental Policy & CSR Report

Customer Care: +91-9999333223