Marker Plugin for Mappls Web Maps¶
Easy To Integrate Maps & Location APIs & SDKs For Web & Mobile Applications
Powered with India's most comprehensive and robust mapping functionalities. Now Available for 200+ nations and territories accross the world.
Getting Access¶
Before using the Plugin in the your solution, please ensure that the related access is enabled in the Mappls Console, in the same project you set up for the Maps SDK.
- Copy and paste the generated
access tokenfrom your API keys available in the dashboard in the sample code for interactive map development.- This APIs follow OAuth2 based security.
Access Tokencan be generated using Token Generation API.- To know more on how to create your access tokens, please use our authorization API URL. More details available here
- The
access tokenis a valid by default for 24 hours from the time of generation. This can be configured by you in the API console.
- The sample codes are provided on our domain to help you understand the very basic functionality of Mappls Marker Plugin. See Sample Codes here
Document Version History¶
| Version | Remarks | Author |
|---|---|---|
| 3.0 | Document Added | Mappls API Team (MS) |
| 3.0 | Document Update | SDK Product Team (PK) |
Introduction¶
A simple plugin to render places on map as markers. The Marker plugin for Mappls Web Maps JS library is provided as a means to enable rendering of searched Places via eLoc as markers top of Mappls Maps.
The plugin can be used in combination with our Interactive Map JS libraries.
The SDK offers the following basic functionalities: 1. Ability to render places directly using eLoc on Mappls Maps SDK. 2. A Mappls.elocMarker() method to initiate rendering of Places on the map specified with eLoc(s) on the map. 3. Ability to add listeners on marker events, remove markers, customize icons and get fitbounds of the markers. 4. Ability to make markers draggable and add annotations (info popups + customizable popups).
Live Demo¶
Visit the following link for visiting the live demo:
Web sdk implementation : Mappls Live Demo
React JS Implementation Live Video : CodeSandbox
Add the Marker plugin¶
Implementation¶
React JS¶
import { mappls, mappls_plugin } from "mappls-web-maps";
import { useEffect, useRef, useState } from "react";
const mapplsClassObject = new mappls();
const mapplsPluginObject = new mappls_plugin();
const PinmarkerPlugin = ({ map }) => {
const pinMarkerRef = useRef(null);
useEffect(() => {
if (map && pinMarkerRef.current) {
pinMarkerRef.current.remove();
mapplsClassObject.removeLayer({ map, layer: pinMarkerRef.current });
}
pinMarkerRef.current = mapplsPluginObject.pinMarker(
{
map: map,
pin: "mmi000",
popupHtml: '<h1 style="color:green">MapmyIndia</h1>',
},
(e) => {
console.log(e);
}
);
return () => {
if (map && pinMarkerRef.current) {
mapplsClassObject.removeLayer({ map, layer: pinMarkerRef.current });
}
};
}, [map]);
};
const App = () => {
const mapRef = useRef(null);
const [isMapLoaded, setIsMapLoaded] = useState(false);
const loadObject = { map: true, plugins: ["pinMarker"] };
useEffect(() => {
mapplsClassObject.initialize("<Add your Token>", loadObject, () => {
const newMap = mapplsClassObject.Map({
id: "map",
properties: {
center: [28.633, 77.2194],
zoom: 4,
},
});
newMap.on("load", () => {
setIsMapLoaded(true);
});
mapRef.current = newMap;
});
return () => {
if (mapRef.current) {
mapRef.current.remove();
}
};
}, []);
return (
<div
id="map"
style={{ width: "100%", height: "99vh", display: "inline-block" }}
>
{isMapLoaded && <PinmarkerPlugin map={mapRef.current} />}
</div>
);
};
export default App;
## Angular
import { Component, OnInit } from '@angular/core';
import { mappls, mappls_plugin } from 'mappls-web-maps';
@Component({
selector: 'app-root',
template: `<div
id="map"
style="width: 99%; height: 99vh; background-color: white;"
></div>`,
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
mapObject: any;
marker: any;
mapplsClassObject = new mappls();
mapplsPluginObject = new mappls_plugin();
mapProps = {
center: [28.633, 77.2194],
traffic: false,
zoom: 4,
geolocation: false,
clickableIcons: false,
};
ngOnInit() {
const loadObject = {
map: true,
plugins: ['pinMarker'],
};
this.mapplsClassObject.initialize(
'<----- Add your token here ------>',
loadObject,
() => {
this.mapObject = this.mapplsClassObject.Map({
id: 'map',
properties: this.mapProps,
});
this.mapObject.on('load', () => {
var obj = this.mapplsPluginObject.pinMarker(
{
map: this.mapObject,
pin: 'mmi000',
popupHtml: '<h1 style="color:green">MapmyIndia</h1>',
},
(e: any) => {
console.log(e);
}
);
});
}
);
}
}
Mandatory Parameters¶
map: object > vector map or raster map object from respective Mappls Map JS.pin: array of strings containing the eLoc(s) which need to be showcased on the map. e.g.
[‘mmi000’,’123zrrr’]
Optional Parameters¶
html: (string or html) Text which needs to be written over the marker or if there is a need for further customization, then this param can also take in HTML div. e.g.
'mappls'
OR
[“<b>MMI</b>”,”<b>AGRA</b>”]
popupHtml: (string or HTML) What needs to be displayed when marker is clicked. e.g.
[“<h1>Mappls</h1>”,”<p>Agra</p>”]
popupOptions: (object) if the popup/annotation needs to be customized further. The following are the sub-params for the object:className: the class name of the annotation object.offset: the offset positioning from the marker.openPopup: (boolean) indicating if the pop needs to be open on addition of marker or not as default. e.g.
{
className:'myClass',
offset:{},
openPopup:true //open popup as default with add marker
}
-
icon: (object) the customized marker icon options. The following are the sub-params for the object:url: the URL specifying the marker image.width: width of the marker icon.height: height of the marker icon.offset: offset positioning of the marker's anchor.popupAnchor: positioning of the marker popup's anchor.
e.g.
{
url:'https://apis.mappls.com/map_v3/2.png',
width:30,
height:40,
offset:[20,40],
popupAnchor:[-5,-40]
}
draggable: (boolean) to set the marker(s) as draggable or not.
2. Method for getting all markers to fit in a viewbound¶
Method¶
fitbounds()
pinMarkerObj.fitbounds(options); //options are optional e.g. {padding:100}
padding: option can be used to setup a padding around the viewbound to fit the markers in.
3. Method for removing markers with callback¶
Method¶
remove()
pinMarkerObj.remove();
4. Method for adding event listeners on the marker¶
Method¶
addListener()
pinMarkerObj.addListener(event,callback);
Example:
pinMarkerObj.addListener(‘click’,function(data){console.log(data);});
5. Method for removing event listeners on the marker¶
Method¶
removeListener()
pinMarkerObj.removeListener(event);
Example:
pinMarkerObj.removeListener(‘click’);
6. Method for setting icons for markers¶
Method¶
setIcon()
pinMarkerObj.setIcon(‘url.png’); //replaces all marker's icon.
OR
pinMarkerObj.setIcon(‘url.png’,’mmi000’); //replaces single marker's icon for the provided eLoc.
7. Method for setting popuphtml for markers¶
Method¶
setPopup()
pinMarkerObj.setPopup({content:"<h1>Mappls</h1>"}); //replaces all marker's pop up values.
OR
pinMarkerObj.setPopup({content:"<h1>Agra</h1>",pin:'123zrr'}); //replaces single marker's popup value for the provided Pin.
That's All !
For any queries and support, please contact:
Email us at apisupport@mappls.com
Support
Need support? contact us!
