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
Gradient 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 = 'Gradient 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', () => {
let 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
}
];
this.polyline = new mappls().Polyline({
map: this.mapObject,
path: 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']
});
});
});
}
}
/* 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="Gradient Polyline"
const mapProps = { center: [28.544, 77.2454]}
mapplsClassObject.map({id:"map",key:"", properties: mapProps},(data)=>{
mapObject = data;
mapObject.addListener('load', function() {
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
}
];
new mapplsClassObject.Polyline({
map: mapObject,
path: pts,
strokeColor: '#333',
strokeOpacity: 1.0,
strokeWeight: 5,
fitbounds: true,
gradient: [0, 'pink', 0.1, 'black', 0.3, 'cyan', 0.5, 'lime', 0.7, 'yellow', 1, 'red']
});
});
});
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.