mappls-maps-openlayers
v1.0.0
Published
[<img src="https://cdn.mapmyindia.com/mappls_web/logos/2x/mappls-logo.svg" height="60"/> </p>](https://www.mapmyindia.com/api)
Downloads
13
Readme
Introduction
Easy To Integrate MapmyIndia Mappls map to your openlayer applications.
Our APIs, SDKs, and live updating map data available for 200+ nations and territories give developer-friendly, easy-to-integrate plugins to add capabilities like intelligent search and routes on map, to your web or mobile applications.
Package name : mappls-maps-openlayers
Sign up for Mappls
Not a mappls user yet? Sign up for an account here. Once you're signed in, all you need to start building is a mappls key. You can create and manage your access tokens on your Mappls Account page.
API Usage
Your MapmyIndia Maps SDK usage needs a set of license keys (get them here ) and is governed by the API terms and conditions. As part of the terms and conditions, you cannot remove or hide the MapmyIndia logo and copyright information in your project. Please see branding guidelines on MapmyIndia website for more details. The allowed hits are described on the plans page. Note that your usage is shared between platforms, so the API hits you make from a web application, Android app or an iOS app all add up to your allowed daily limit.
Version History
| Version | Last Updated | Author | Remarks | | ---- | ---- | ---- | ---- | | 1.0.0 | 05 May, 2023 | MapmyIndia API Team | Initial Commit |
Supported Technologies
Node.js based OpenLayer map plugin
Supported Platforms
Web
Supported Zoom Levels
Between 2-22 ie. minZoom:2
Installation
npm i mappls-maps-openlayers
Import Package
import { initialize, initMapplsStyle } from 'mappls-maps-openlayers'
Usage
Loading a Map and a Marker
- Angular Sample
import { Component, OnInit } from '@angular/core';
import { initialize, initMap } from 'mappls-maps-openlayers'
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {useGeographic} from 'ol/proj.js';
import VectorSource from 'ol/source/Vector.js';
import Feature from 'ol/Feature.js';
import Point from 'ol/geom/Point.js';
import {Icon, Style} from 'ol/style.js';
import {Vector as VectorLayer} from 'ol/layer.js';
useGeographic();
@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 {
title = 'mappls-ol-angular';
ngOnInit() {
initialize( 'token')
.then(() => {
let mbLayer = initMap('map'); //div id for map
map.getLayers().insertAt(0, mbLayer.layer);
})
.catch((error:any) => {
console.log(error);
});
//Map
const map = new Map({
target: 'map',
view: new View({
center: [77.2689480979551, 28.55082571701708],
zoom: 3,
minZoom:2
}),
});
//Marker
const iconFeature = new Feature({
geometry: new Point([77,28]),
name: 'Null Island',
});
const iconStyle = new Style({
image: new Icon({
anchor: [0.5, 46],
scale: 0.4,
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'https://www.mappls.com/images/general.png',
}),
});
iconFeature.setStyle(iconStyle);
const vectorSource = new VectorSource({
features: [iconFeature],
});
const vectorLayer = new VectorLayer({
source: vectorSource,
});
map.addLayer(vectorLayer);
}
}
- React JS Sample
import { useEffect, useRef } from 'react';
import { initialize, initMap} from 'mappls-maps-openlayers'
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {useGeographic} from 'ol/proj.js';
import Feature from 'ol/Feature.js';
import Point from 'ol/geom/Point.js';
import {Icon, Style} from 'ol/style.js';
import {Vector as VectorLayer} from 'ol/layer.js';
import VectorSource from 'ol/source/Vector.js';
function App() {
const styleMap = { width: '99%', height: '99vh', display: 'inline-block' };
const mapRef = useRef(null);
useGeographic();
useEffect(() => {
initialize( 'token')
.then(() => {
let mbLayer = initMap('map');
map.getLayers().insertAt(0, mbLayer.layer);
})
.catch((error) => {
console.log(error);
});
//Map
const map = new Map({
target: 'map',
view: new View({
center: [77.2689480979551, 28.55082571701708],
zoom: 3,
minZoom:2
}),
});
//Marker
const iconFeature = new Feature({
geometry: new Point([77,28]),
name: 'Null Island',
});
const iconStyle = new Style({
image: new Icon({
anchor: [0.5, 46],
scale: 0.4,
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'https://www.mappls.com/images/general.png',
}),
});
iconFeature.setStyle(iconStyle);
const vectorSource = new VectorSource({
features: [iconFeature],
});
const vectorLayer = new VectorLayer({
source: vectorSource,
});
map.addLayer(vectorLayer);
}, []);
return <div id="map" style={styleMap} ref={mapRef}></div>;
}
export default App;
Learn more about Features
That's All !
For any queries and support, please contact:
Email us at [email protected]
Support Need support? contact us!