cwmat / arcgis-js-react-with-zustand

Created with StackBlitz ⚡️

React Map Example with Zustand

📚 Overview

This repo shows a simplified example of using ArcGIS JS and React using a state management pattern with Zustand 🐻.

It simply:

• provides an example map config object
• renders a map (zoomed to a target map scale pulled from map config)
• adds a couple widgets to demonstrate a pattern
• loads a layer
• shows a pattern for dispatching events between map and UI with the layer toggle button

This is the pattern discussed at the Esri Dev Summit 2024 on Revolutionizing Flood Alert Systems in NCEM: Slide Deck

📂 Core Files

• src/components/Map.jsx - the core map component

• src/lib/* - folder that encapsulates any ArcGIS JS logic. mapManager.js is the "brains" and it passes off relevant work to layerService.js and widgets.js accordingly. This pattern can be extended for more advanced mapping functionality.

• src/stores/mapStore.js - a Zustand store that UI components can use to interact with the map without having to 'know' anyhting about ArcGIS JS.

🏃‍♀️ How to Run

Load the project on StackBlitz. Be patient the first load can take a while.

If you have cloned the project locally then:

• Install Node JS LTS

npm i
npm run dev