naksha-component-react-restructured-2

![Dependencies](https://img.shields.io/david/strandls/naksha-components-react.svg)

Usage no npm install needed!

<script type="module">
  import nakshaComponentReactRestructured2 from 'https://cdn.skypack.dev/naksha-component-react-restructured-2';
</script>

README

Naksha Components React Restructured

Dependencies

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: https://www.npmjs.com/package/naksha-components-react

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 https://github.com/strandls/naksha-components-react.git

cd naksha-components-react

yarn install

📚 Storybook


yarn storybook

This loads the stories from ./stories.

📦 Usage


import Naksha from  "naksha-components-react";

  

<Naksha

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

loadToC={true}

showToC={false}

mapboxApiAccessToken="pk.xxx"

nakshaApiEndpoint="/naksha-api/api"

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

layers={[

{

id: "global-observations",

title: "Global Observations",

isAdded: true,

source: {

type: "grid",

endpoint:

"/your-api-endpoint?t={top}&l={left}&b={bottom}&r={right}&p={precision}"

}

}

]}

/>;

🔧 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