Location data reflecting the real world
Updated, reliable, industry data
360° panoramic street images
India’s original internet mapping portal
Doorstep digital address system
High precision 4D maps
Immersive maps reflecting the real-world
Intelligent mobility platform for PV, CV, EV
Offline navigation maps and app
Super app for maps, safety, and more
GPS enabled IoT gadgets
Connected embedded navigation
Convert movement data to traffic analytics
SDKs for maps and traffic
Hyperlocal, personalised O2O marketing
APIs for search and discovery
APIs to solve complex routing problems
Connected embedded navigation
Route planning & optimisation
APIs for 360° panoramic images
SDKs for maps and traffic
Hyperlocal, personalised O2O marketing
APIs for search and discovery
APIs to solve complex routing problems
Connected embedded navigation
Route planning & optimisation
APIs for 360° panoramic images
SDKs for maps and traffic
Hyperlocal, personalised O2O marketing
APIs for search and discovery
APIs to solve complex routing problems
Connected embedded navigation
Route planning & optimisation
APIs for 360° panoramic images
Multi Colored Dashed Polyline
/* First install : npm install mappls-web-maps */
import { Component, OnInit, ElementRef } from '@angular/core';
import { mappls } from 'mappls-web-maps';
@Component({
selector: 'app-root',
template: '',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
mapObject: any;
mapplsClassObject = new mappls();
polyline: any;
title = 'Multi colored Dashed-Polyline';
mapProps = {
center: [28.544, 77.5454],
zoomControl: true,
location: true
}
ngOnInit() {
this.mapplsClassObject.map({ id: "map", key: "", properties: this.mapProps }, (data: any) => {
this.mapObject = data;
this.mapObject.addListener('load', () => {
this.polyline = new mappls().Polyline({
map: this.mapObject,
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]
]
}
}
]
},
strokeOpacity: 1.0,
strokeWeight: 9,
fitbounds: true, // or false
lineGap: 0,
fitboundOptions: {
padding: 120,
duration: 1000
},
popupHtml: "Route 1",
popupOptions: {
offset: {
'bottom': [0, -20]
}
},
dasharray: [2, 2]
});
});
});
}
}
/* First install : npm install mappls-web-maps */
import { mappls } from 'mappls-web-maps';
import './App.css';
function App() {
const styleMap = {width: '99%', height: '99vh', display:'inline-block'}
var mapObject ;
var mapplsClassObject= new mappls();
const title="Multi Colored Dashed Polyline"
const mapProps = { center: [28.544, 77.2454]}
mapplsClassObject.map({id:"map",key:"", properties: mapProps},(data)=>{
mapObject = data;
mapObject.addListener('load', function() {
new mapplsClassObject.Polyline({
map: mapObject,
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]
]
}
}
]
},
strokeOpacity: 1.0,
strokeWeight: 9,
fitbounds: true, // or false
lineGap: 0,
fitboundOptions: {
padding: 120,
duration: 1000
},
popupHtml: "Route 1",
popupOptions: {
offset: {
'bottom': [0, -20]
}
},
dasharray: [2, 2]
});
});
});
return (
);
}
export default App;
Personalisation SDK, by Mappls, is India's first O2O engagement tool that can 3X your customer engagement, retention and conversion.
There's so much that Mappls MapmyIndia can do for your enterprise or individual requirements. Explore our website to learn more or request a callback/email if you'd like us to connect with you.