Ola-Maps-Web SDK Setup

This documentation provides setup guide for ola maps web SDK

Setup

CDN Usage

Inject the minified script into your app using script tag

<script src="https://www.unpkg.com/olamaps-web-sdk@latest/dist/olamaps-web-sdk.umd.js"></script>

Using Package Manager

Install via npm

npm install olamaps-web-sdk

Import OlaMaps class

import { OlaMaps } from 'olamaps-web-sdk'

If you are using Next.js then import sdk as below.

import('olamaps-web-sdk').then((module) => {
  const { OlaMaps } = module 
  // initialize and render map here
})

Initialization

Get Api Key from credentials and initialize OlaMaps

const olaMaps = new OlaMaps({
    apiKey: [YOUR_API_KEY],
})

Call init method to render the map

const myMap = olaMaps.init({
  style: [ADD THE LINK OF TILES STYLE JSON HERE],
  container: [MAP CONTAINER ID],
  center: [INITIAL LAT LAN POSITION],
  zoom: [SET ZOOM NUMBER]
})

If you encounter any issues while integrating the SDK, please report them on our GitHub Issues page.

Example

const myMap = olaMaps.init({
  style: "https://api.olamaps.io/tiles/vector/v1/styles/default-light-standard/style.json",
  container: 'map',
  center: [77.61648476788898, 12.931423492103944],
  zoom: 15,
})

If you want to render map in local languages, check the languages we support in style json in vector map tiles APIs. You need to add -[LANGUAGE CODE] to styleName.

const myMap = olaMaps.init({
    style: "https://api.olamaps.io/tiles/vector/v1/styles/default-light-standard-mr/style.json",
    container: 'map',
    center: [77.61648476788898, 12.931423492103944],
    zoom: 15,
    })

To initialize 3d maps, we need to use additional parameter `'mode'` and need to give the tileset endpoint.

const olaMaps3D = new OlaMaps({
  apiKey: [YOUR_API_KEY],
  mode: "3d",
  threedTileset: "https://api.olamaps.io/tiles/vector/v1/3dtiles/tileset.json",
})

const myMap = olaMaps.init({
  style: "https://api.olamaps.io/tiles/vector/v1/styles/default-light-standard/style.json",
  container: 'map-3d',
  center: [72.84185896191035, 19.04116993331655],
  zoom: 15,
})