Skip to main content

Network Editor with ArcGIS JS SDK

Derived from the sample code here: https://github.com/banuelosj/DevSummit-presentation/tree/main/2025/preset-templates-web-editing-react-map-components

Use Case

  1. User uploads a GIS file, i.e. Esri Shapefile.
  2. The GIS file is stored in ArcGIS Online.
  3. DWD Frontend allows the rendering and editing of this GIS file:
    1. CRUD Geometry (i.e. new pipes, move valves, ...)
    2. CRUD Attributes (i.e. diameter)
  4. DWD Frontend has an option to "write GIS file to EPANET inp file".
  5. This will generate and store a new "gold standard" input file for the current network in the configured blob storage.
  6. Subsequent runs will use the latest EPANET input file with an option to roll back to older versions.

Things to Consider

  • The GIS files will only have two data types: lines and points.
  • EPANET has Links and Nodes, but these don't always correlate one-to-one with lines and points.
  • We will need to ensure our conversion from GIS to EPANET is robust and reliable.
    • Consider using network-specific mappings for uniquely identifiable attributes, i.e. for IITD use attribute "foo" which maps like {'p': 'pipe'}, etc.
  • Eventually, we will need to implement the CRUD (API & Frontend) and UI (Frontend) for managing EPANET input file blobs.
  • Maybe we should store the raw shp files in blob too? It might be useful to keep the 1:1 mapping of GIS and EPANET files available.