React NGW Map

React integration for @nextgis/ngw-map. It provides the common map component, context, hooks, layer components, and controls used by the engine-specific React packages.

Most applications should use react-ngw-leaflet, react-ngw-ol, or react-ngw-maplibre-gl. Use this package directly when supplying a map adapter or building reusable React components around the common NgwMap API.

Installation

npm install @nextgis/react-ngw-map
Copy

Install one map engine and its adapter as well. This example uses OpenLayers:

npm install ol @nextgis/ol-map-adapter
Copy

Usage

import { createRoot } from 'react-dom/client';
import { ReactNgwMap } from '@nextgis/react-ngw-map';

import MapAdapter from '@nextgis/ol-map-adapter';
import 'ol/ol.css';

function App() {
  return (
    <ReactNgwMap
      mapAdapter={new MapAdapter()}
      baseUrl="https://demo.nextgis.com"
      resources={[{ resource: 6118, id: 'webmap', fit: true }]}
      style={{ width: '100%', height: '100%' }}
      whenCreated={(ngwMap) => {
        // The map is initialized and exposes the common NgwMap/WebMap API.
      }}
    />
  );
}

createRoot(document.getElementById('app')!).render(<App />);
Copy

Components rendered as children can access the map through useNgwMapContext(). The package also exports ReactNgwLayer, MapControl, ButtonControl, and ToggleControl.

See the API Documentation and the package architecture guide.

Commercial support

Need to fix a bug or add a feature to @nextgis/react-ngw-map? We provide custom development and support for this software. Contact us to discuss options!