ola-maps-react v1.0.1

React Components for the Ola Maps

This is a JavaScript library to integrate the Ola Maps into your React application. It comes with a collection of React components to create maps and markers (more if not lazy)

Inspired by Google-react-maps

Installation

This library is available on npm as ola-maps-react.

npm install ola-maps-react

Usage

First create an OlaMaps account, Create a project and get an API KEY.

Install the package, create an .env file with in your react project and assign API KEY to REACT_APP_OLA_MAPS_API_KEY variable to auto pickup the APIKEY after installing the package

To render a simple map, add a Map component and wrap it inside a div

For more advanced use-cases you can even add your own components to the map using react-map-gl package

1. Using .env for API KEY

import { Map } from "ola-maps-react";

const App = () => {

  return (
    <div style={{width:"500px", height:"500px", position:"relative"}}>
      <Map/>
    </div>
  );
}

export default App;

2. Using apikey attribute for APIKEY

import { Map } from "ola-maps-react";

const App = () => {

  return (
    <div style={{width:"500px", height:"500px", position:"relative"}}>
      <Map apiKey="APIKEY"/>      
    </div>
  );
}

export default App;

3. USing .env for API KEY with attributes

import { Map } from "ola-maps-react";

const App = () => {

  return (
    <div style={{width:"500px", height:"500px", position:"relative"}}>
      <Map zoom={7} center={{lat:28.7041,lng:77.1025}} apiKey="APIKEY" tilt={0} heading={0}/>      
    </div>
  );
}

export default App;

Examples

Working on it.

Contact

niranjanjgowda1@gmail.com for any kind of support regarding usage Call -> Get on a call