ArcGIS Utility Networks

Use this skill for working with utility networks, tracing, and associations visualization.

Utility Network Basics

Utility networks model connected infrastructure like electric, gas, water, and telecom systems. Key concepts:

Network tracing - Follow connectivity through the network
Associations - Relationships between network features (connectivity, containment, structural attachment)
Subnetworks - Isolated portions of the network

Map Components Approach

Utility Network Trace Component

<arcgis-map item-id="471eb0bf37074b1fbb972b1da70fb310">
  <arcgis-utility-network-trace slot="top-right"></arcgis-utility-network-trace>
</arcgis-map>

Utility Network Associations Component

<arcgis-map item-id="e53b1054b29f4579baf878dcf2effe7a">
  <arcgis-utility-network-associations slot="top-right"></arcgis-utility-network-associations>
</arcgis-map>

Core API Approach

UtilityNetworkTrace Widget

import WebMap from "@arcgis/core/WebMap.js";
import MapView from "@arcgis/core/views/MapView.js";
import UtilityNetworkTrace from "@arcgis/core/widgets/UtilityNetworkTrace.js";
import esriConfig from "@arcgis/core/config.js";

// Configure portal (required for secured utility network services)
esriConfig.portalUrl = "https://www.arcgis.com";

// Load WebMap containing utility network
const webmap = new WebMap({
  portalItem: {
    id: "YOUR_WEBMAP_ID"
  }
});

const view = new MapView({
  container: "viewDiv",
  map: webmap
});

// Create trace widget
const utilityNetworkTrace = new UtilityNetworkTrace({
  view: view
});

view.ui.add(utilityNetworkTrace, "top-right");

UtilityNetworkAssociations Widget

import WebMap from "@arcgis/core/WebMap.js";
import MapView from "@arcgis/core/views/MapView.js";
import UtilityNetworkAssociations from "@arcgis/core/widgets/UtilityNetworkAssociations.js";
import TileInfo from "@arcgis/core/layers/support/TileInfo.js";

const webMap = new WebMap({
  portalItem: {
    id: "YOUR_WEBMAP_ID"
  }
});

// Create TileInfo for high zoom levels (required to see associations)
const tileInfo = TileInfo.create({
  spatialReference: { wkid: 102100 },
  numLODs: 32
});

const view = new MapView({
  container: "viewDiv",
  map: webMap,
  zoom: 25,
  constraints: {
    lods: tileInfo.lods,
    snapToZoom: false
  }
});

view.when(async () => {
  await webMap.load();

  // Check if webMap contains utility networks
  if (webMap.utilityNetworks.length > 0) {
    const utilityNetwork = webMap.utilityNetworks.getItemAt(0);
    await utilityNetwork.load();

    const unAssociations = new UtilityNetworkAssociations({
      view,
      utilityNetwork
    });

    view.ui.add(unAssociations, "top-right");
  }
});

Accessing Utility Networks

Get Utility Network from WebMap

await webMap.load();

// Check for utility networks
if (webMap.utilityNetworks && webMap.utilityNetworks.length > 0) {
  const utilityNetwork = webMap.utilityNetworks.getItemAt(0);
  await utilityNetwork.load();

  console.log("Network name:", utilityNetwork.title);
  console.log("Dataset name:", utilityNetwork.datasetName);
}

Utility Network Properties

const utilityNetwork = webMap.utilityNetworks.getItemAt(0);
await utilityNetwork.load();

// Access network properties
console.log("Title:", utilityNetwork.title);
console.log("Dataset name:", utilityNetwork.datasetName);
console.log("Domain networks:", utilityNetwork.domainNetworks);
console.log("Terminal configurations:", utilityNetwork.terminalConfigurations);
console.log("Network attributes:", utilityNetwork.networkAttributes);

Associations Widget Configuration

Visible Elements

const unAssociations = new UtilityNetworkAssociations({
  view,
  utilityNetwork,
  visibleElements: {
    maxAllowableAssociationsSlider: true,
    connectivityAssociationsSettings: {
      arrowsToggle: false,
      capSelect: false,
      colorPicker: true,
      stylePicker: true,
      widthInput: true
    },
    structuralAttachmentAssociationsSettings: {
      arrowsToggle: false,
      capSelect: false,
      colorPicker: true,
      stylePicker: true,
      widthInput: true
    }
  }
});

Association Types

// Connectivity - electrical/flow connections
// Containment - features inside other features
// Structural Attachment - features attached to structures

const unAssociations = new UtilityNetworkAssociations({
  view,
  utilityNetwork
});

Network Tracing

Trace Widget Configuration

const utilityNetworkTrace = new UtilityNetworkTrace({
  view: view,
  // Optional: specify which traces are available
  showSelectionAttributes: true,
  selectOnComplete: true
});

Trace Types

Common trace types available in utility networks:

Connected - Find all connected features
Upstream - Trace toward sources
Downstream - Trace away from sources
Subnetwork - Find features in same subnetwork
Isolation - Find isolation points
Loops - Find loops in network

High Zoom Level Support

Associations are only visible at high zoom levels. Configure additional LODs:

import TileInfo from "@arcgis/core/layers/support/TileInfo.js";

// Create tile info with 32 LODs for extreme zoom
const tileInfo = TileInfo.create({
  spatialReference: { wkid: 102100 },
  numLODs: 32
});

const view = new MapView({
  container: "viewDiv",
  map: webMap,
  zoom: 25, // High zoom to see associations
  constraints: {
    lods: tileInfo.lods,
    snapToZoom: false
  }
});

Complete Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Utility Network</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.34/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.34/"></script>
  <style>
    html, body, #viewDiv { height: 100%; margin: 0; }
  </style>
  <script type="module">
    import WebMap from "@arcgis/core/WebMap.js";
    import MapView from "@arcgis/core/views/MapView.js";
    import UtilityNetworkTrace from "@arcgis/core/widgets/UtilityNetworkTrace.js";
    import UtilityNetworkAssociations from "@arcgis/core/widgets/UtilityNetworkAssociations.js";
    import TileInfo from "@arcgis/core/layers/support/TileInfo.js";

    const webMap = new WebMap({
      portalItem: { id: "YOUR_WEBMAP_ID" }
    });

    const tileInfo = TileInfo.create({
      spatialReference: { wkid: 102100 },
      numLODs: 32
    });

    const view = new MapView({
      container: "viewDiv",
      map: webMap,
      constraints: {
        lods: tileInfo.lods,
        snapToZoom: false
      }
    });

    view.when(async () => {
      await webMap.load();

      if (webMap.utilityNetworks.length > 0) {
        const utilityNetwork = webMap.utilityNetworks.getItemAt(0);
        await utilityNetwork.load();

        // Add trace widget
        const trace = new UtilityNetworkTrace({ view });
        view.ui.add(trace, "top-right");

        // Add associations widget
        const associations = new UtilityNetworkAssociations({
          view,
          utilityNetwork
        });
        view.ui.add(associations, "bottom-right");
      }
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

Utility Network Components

Component	Purpose
`arcgis-utility-network-validate-topology`	Validate utility network topology

Reference Samples

utility-network-trace - Running utility network traces
utility-network-associations - Viewing utility network associations

Common Pitfalls

Authentication required: Utility network services typically require authentication
WebMap required: Utility networks must be accessed through a WebMap - they cannot be created client-side
High zoom for associations: Associations only display at very high zoom levels (use TileInfo with 32+ LODs)
Load order: Must load WebMap, then load UtilityNetwork before using widgets
Enterprise portals: Often hosted on ArcGIS Enterprise - configure esriConfig.portalUrl

arcgis-utility-networks