<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
UtilityNetworkTrace widget | Sample | ArcGIS Maps SDK for JavaScript 4.28
</title>
<link
rel="stylesheet"
/>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/WebMap",
"esri/views/MapView",
"esri/widgets/UtilityNetworkTrace",
"esri/config",
"esri/widgets/LayerList",
"esri/core/reactiveUtils"
], (WebMap, MapView, UtilityNetworkTrace, esriConfig, LayerList, reactiveUtils) => {
// Set the hostname to the on-premise portal
// Initialize the WebMap and pass in the webmap id
// Credentials to sign in to the webmap:
// username: viewer01
// password: I68VGU^nMurF
const webmap = new WebMap({
portalItem: {
// autocasts as new PortalItem()
id: "471eb0bf37074b1fbb972b1da70fb310" // webmap id
}
});
// Initialize the view
const view = new MapView({
container: "viewDiv",
map: webmap
});
const layerlist = new LayerList({
view: view
})
view.ui.add(layerlist, {position: 'top-left'})
// Initialize the UtilityNetworkTrace widget without any set parameters
const utilityNetworkTrace = new UtilityNetworkTrace({
view: view,
resultAreaProperties: {
show: true
},
enableResultArea: true
});
// Add the widget to the view
view.ui.add(utilityNetworkTrace, "top-right");
utilityNetworkTrace.on('add-result-area', test) // working
//utilityNetworkTrace.on('add-result-area', test) // not working
reactiveUtils.watch(() => view.layerViews, () => {
alert('Getting the Trace Result area')
})
function test(graphic){
console.log(graphic)
alert('Getting the Trace Result area')
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
