Introduction to utility networks

With the ArcGIS Maps SDK for JavaScript , you can display a utility network, view associations, and execute traces in your applications.

The UtilityNetwork contains metadata such as domain network names and shared named trace configurations, along with methods to obtain tier names and terminal configurations. See What is a utility network? for more information on utility networks.

Configure Map component with WebMap

A UtilityNetwork can be obtained from a WebMap containing a utility network layer. See Publish a utility network layer for more information on configuring and publishing a utility network layer. The first step is to load the webmap. The following code snippet demonstrates how to load a webmap hosted on ArcGIS Enterprise.

// Import the WebMap class
const [WebMap, config] = await $arcgis.import([
  "@arcgis/core/WebMap.js",
  "@arcgis/core/config.js",
]);
// Set the hostname to the portal instance
config.portalUrl = "https://myHostName.domain.com/portal";
// Get the Map component from HTML
const mapElement = document.querySelector("arcgis-map");
// Create the WebMap and set it on the Map component
const webMap = new WebMap({
  // Define the web map reference
  portalItem: {
    id: "myWebmapId",
  },
});
// Load the WebMap
await webMap.load();
// Set mapElement to webMap
mapElement.map = webMap;

Load the utility network

The webmap must finish loading before accessing the utility network from the WebMap.utilityNetworks property. Use the load() method to access the UtilityNetwork and its properties. The following document may help as it provides detailed Object Model Diagrams (OMDs) of the Utility Network classes, interfaces and enumerations exposed in the ArcGIS Maps SDK for JavaScript: Utility Network OMD

Additional topics