View associations

What are associations?

The utility network associations model connectivity, containment, and structural attachment relations between assets. Associations do not have a spatial presence, so the ArcGIS Maps SDK for JavaScript ArcGIS Maps SDK for JavaScript, previously known as ArcGIS API for JavaScript, is a developer product for building mapping and spatial analysis applications for the web. Learn more provides a function which, given a specific extent, synthesizes and returns the association geometries in it. This guide page will showcase how to return and visualize associations in a WebMap containing a utility network.

Define the query parameters

Use the SynthesizeAssociationGeometriesParameters class to define the parameters for querying associations. First, make sure to load the utility network from a WebMap, as demonstrated in Introduction to utility networks. In the following code snippet, the parameters are set to return the structural attachment and connectivity associations. The example returns a maximum of 500 associations within the current view extent.

const viewElement = document.querySelector("arcgis-map");
viewElement.addEventListener("arcgisViewReadyChange", () => {
  // Check if webMap contains utility networks
  if (webMap.utilityNetworks.length > 0) {
    // Assigns the utility network at index 0 to utilityNetwork
    utilityNetwork = webMap.utilityNetworks.getItemAt(0);

    // Triggers the loading of the UtilityNetwork instance
    await utilityNetwork.load();

    // Define parameters needed to query associations
    const associationParameters = new SynthesizeAssociationGeometriesParameters({
      extent: view.extent,
      returnAttachmentAssociations: true,
      returnConnectivityAssociations: true,
      returnContainerAssociations: false,
      outSR: utilityNetwork.spatialReference,
      maxGeometryCount: 500,
    });
  }
});

Obtain the associations

Next, the defined query parameters must be passed into the synthesizeAssociationGeometries() method. This method will return the associations within a specified extent.

// Obtain the associations returned
const viewAssociationsResult =
  await synthesizeAssociationGeometries.synthesizeAssociationGeometries(
    utilityNetwork.networkServiceUrl,
    associationParameters,
  );

Add the results as graphics

Then, render the associations returned from synthesizeAssociationGeometries() as graphics. Each association is converted to a graphic using the returned geometries. In the following example, the associationType determines the color of the line symbology for the association graphics.