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 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 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]
}
},
});
});
});
}
}
/* 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 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]
}
},
});
});
});
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.