Naksha Components React 🗺️

Mapbox GL Components for IndiaBiodiversity

📦 Setup

git clone https://github.com/strandls/naksha-components-react.git
cd naksha-components-react
yarn install

📚 Storybook

Run inside another terminal:

yarn storybook

This loads the stories from ./stories.

As of now documentation is available via TypeScript intellisense but it will be added soon

📦 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" }}
  selectedLayers={object("Selected Layers", [])}
  layers={[
    {
      id: "global-observations",
      title: "Global Observations",
      isAdded: true,
      source: {
        type: "grid",
        endpoint:
          "/naksha-api/api/observation/aggregation?index=observation&type=recoards&geoField=location&top={top}&left={left}&bottom={bottom}&right={right}&precision={precision}"
      }
    }
  ]}
/>;

🔧 Configuration

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

🤠 Credits

• tsdx
• typescript
• theme-ui
• react-map-gl

🙏 Contributing

Contributions/Suggestions are always welcome!

📄 License

Apache-2.0 © Strand Life Sciences