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 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.

Or a utility network and associations to model a storm water 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.

Use dark colors for code blocksCopy
view.when(async () => {
  // 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.

Use dark colors for code blocksCopy
// 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.

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

            // Synthesize associations
            const associationResults = await synthesizeAssociationGeometries.synthesizeAssociationGeometries(utilityNetwork.networkServiceUrl, associationParameters);

            // Loop through returned associations and create graphics with the geometries
            // Association type decides what color the line symbol
            const associationGraphics = associationResults.associations.map((association) => {
              return new Graphic({
                geometry: {
                  type: "polyline",
                  paths: association.geometry.paths,
                  spatialReference: association.geometry.spatialReference,
                },
                symbol: {
                  type: "simple-line", // autocasts as SimpleLineSymbol()
                  style: "dot",
                  color: (association.associationType === "connectivity") ? [190, 41, 236] : [57, 255, 20], // Connectivity: Purple; Attachment: Green
                  width: 4
                }
              });
            });

            // Add the graphics to the view
            view.graphics.addMany(associationGraphics);
Expand