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
Heatmap on Click
/* 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();
title = 'Heatmap on Onclick ';
mapProps = {
center: [28.61, 77.23],
zoomControl: true,
location: true,
}
ngOnInit() {
this.mapplsClassObject.map({ id: "map", key: "", properties: this.mapProps }, (data: any) => {
this.mapObject = data;
this.mapObject.on('click', (e: any) => {
let gradient = ['rgba(0, 255, 255, 0)', 'rgba(0, 255, 255, 1)', 'rgba(0, 191, 255, 1)', 'rgba(0, 127, 255, 1)', 'rgba(0, 63, 255, 1)', 'rgba(0, 0, 255, 1)', 'rgba(0, 0, 223, 1)', 'rgba(0, 0, 191, 1)', 'rgba(0, 0, 159, 1)', 'rgba(0, 0, 127, 1)', 'rgba(63, 0, 91, 1)', 'rgba(127, 0, 63, 1)', 'rgba(191, 0, 31, 1)', 'brown'];
new mappls().HeatmapLayer({
map: this.mapObject,
data: [{
lat: e.lngLat.lat,
lng: e.lngLat.lng
}],
gradient: gradient,
});
});
});
}
}
/* 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 = "Heatmap on Click";
const mapProps = {zoomControl: true};
mapplsClassObject.map(
{
id: "map",
key: "",
properties: mapProps,
},
(data) => {
mapObject = data;
var gradient = ['rgba(0, 255, 255, 0)', 'rgba(0, 255, 255, 1)', 'rgba(0, 191, 255, 1)', 'rgba(0, 127, 255, 1)', 'rgba(0, 63, 255, 1)', 'rgba(0, 0, 255, 1)', 'rgba(0, 0, 223, 1)', 'rgba(0, 0, 191, 1)', 'rgba(0, 0, 159, 1)', 'rgba(0, 0, 127, 1)', 'rgba(63, 0, 91, 1)', 'rgba(127, 0, 63, 1)', 'rgba(191, 0, 31, 1)', 'brown'];
mapObject.on('click', (e)=> {
mapplsClassObject.HeatmapLayer({
map: mapObject,
data: [{
lat: e.lngLat.lat,
lng: e.lngLat.lng
}],
gradient: gradient,
});
});
})
return (
);
}
export default App;
Personalisation SDK, by Mappls, is India's first O2O engagement tool that can 3X your customer engagement, retention and conversion.
Boost your businesses with Mappls’ industry-leading optimisation APIs and SDKs to bring the best and most efficient ways to deliver goods, save time and increase profits.