Usage no npm install needed!

<script type="module">
  import nakshaComponentReactRestructured2 from '';


Naksha Components React Restructured


Bundle Size

typed with TypeScript

code style: prettier

Mapbox GL Components for IndiaBiodiversity

This is a restructured version of the Naksha Components React which is available at:

Whats New

  • This implements integration with new restructured API
  • Changes in TOC

As of now full documentation is only available via TypeScript autocomplete but we are working on adding complete documentation

Grid Layer

Grid layer that accepts geohashes and plots grid according to it

Grid Layer

Geoserver Vector Layer

Vector layer that shows geoserver vector layer

Geoserver Vector Layer

  • Render grid layer from geohashed data (ideal for elasticsearch)

  • Render vector tiles directly from geoserver

  • Multiple View

  • Multi Style

📦 Setup

git clone

cd naksha-components-react

yarn install

📚 Storybook

yarn storybook

This loads the stories from ./stories.

📦 Usage

import Naksha from  "naksha-components-react";



viewPort={{ latitude: 20, longitude: 79, zoom: 3, bearing: 0, pitch: 0 }}





geoserver={{ endpoint: "/geoserver", store: "ibp", workspace: "biodiv" }}



id: "global-observations",

title: "Global Observations",

isAdded: true,

source: {

type: "grid",







🔧 Configuration

Code quality checks are done with prettier, husky, and lint-staged.

🤠 Credits

🙏 Contributing

Contributions/Suggestions are always welcome!

📄 License

Apache-2.0 © Strand Life Sciences