@hungpvq/react-map-dataset

React UI for map datasets. Same core as Vue: @hungpvq/map-dataset. Vue package: @hungpvq/vue-map-dataset.

Docs (shared): Getting started · GIS worker · Components · Menus · Attribute table

Install

npm install @hungpvq/react-map-dataset @hungpvq/react-map-core @hungpvq/map-dataset @hungpvq/map-core

import '@hungpvq/react-map-core/style.css';
import '@hungpvq/react-map-dataset/style.css';

Register built-in components once (legend, opacity, add-to-group, export, attribute table, …):

import { createDatasetRegistryPlugin } from '@hungpvq/react-map-dataset';

createDatasetRegistryPlugin().install();

Create-layer reads GIS files and reprojects CRS in a Web Worker. Apps that install the published package need mapDatasetGisWorker() from @hungpvq/map-dataset/vite. In this Nx workspace use worker.format: 'es' + nxViteTsPaths() on worker.plugins — see GIS worker.

Usage

import type { MapSimple } from '@hungpvq/map-core';
import { Map } from '@hungpvq/react-map-core';
import {
  LayerControl,
  useMapDataset,
  createRootDataset,
  createDatasetPartListViewUiComponentBuilder,
} from '@hungpvq/react-map-dataset';

function Page() {
  function onMapLoaded(map: MapSimple) {
    const { addDataset } = useMapDataset(map.id);
    const dataset = createRootDataset('Sample');
    dataset.add(createDatasetPartListViewUiComponentBuilder('Layer').build());
    addDataset(dataset);
  }

  return (
    <Map onMapLoaded={onMapLoaded}>
      <LayerControl position="top-left" show />
    </Map>
  );
}

Pass app state into menu conditions:

<LayerControl menuContext={{ role: 'admin', canUsePen: true }} />

Or wrap with MenuConditionProvider from @hungpvq/react-map-dataset.

License

MIT