npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

6

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!