Hallo,
I would like to integrate list entries of my map layers to a drop down box menu. The list features should be available in the respective categories on the left side of the website. If you press one of these list items, it should zoom to the 3D extent of the feature and highlight it. But the list items would never be loaded there. I've tried several versions of codes from a ESRI tutorial (Highlight SceneLayer | ArcGIS API for JavaScript 4.11 ), but it doesn't work for any of them.
Below is the corresponding part of the code.
All components are included in the following link: https://codepen.io/dominike18/full/dBVGgo
Could someone help me?
Thank you.
// This variable will store the highlight handle that is used to remove the highlight
var highlight = null;
view.when(function() {
// Get DOM element where list items will be placed
var container = document.getElementById("Gastroliste");
// Highlight is set on the layerView, so we need to detect when the layerView is ready
view.whenLayerView(gebLayer).then(function(LayerView) {
// Wait for the layer view to finish updating
LayerView.watch("updating", function(value) {
if (!value) {
// Query the features available for drawing and get all the attributes
var query = new Query({
outFields: ["*"]
});
LayerView.queryFeatures(query).then(function(result) {
// Empty the list DOM element
container.innerHTML = "";
// For each returned feature that is of type office create a list item and append it to the container
result.features.forEach(function(feature) {
var attributes = feature.attributes;
// We only want to add features of type Office to the list
if (attributes.Kategorie === "Fashion") {
// Create list element
var li = document.createElement("li");
li.innerHTML = attributes.Firma19;
li.addEventListener("click", function(event) {
var target = event.target;
var objectId = feature.attributes.OBJECTID;
// Create an extent query on the layer view that will return the 3D extent of the feature
var queryExtent = new Query({
objectIds: [objectId]
});
LayerView
.queryExtent(queryExtent)
.then(function(result) {
// Zoom to the extent of the feature
// Use the expand method to prevent zooming in too close to the feature
view.goTo(result.extent.expand(7), {
speedFactor: 0.5
});
});
// Remove the previous highlights
if (highlight) {
highlight.remove();
}
// Highlight the feature passing the objectId to the method
highlight = LayerView.highlight([objectId]);
});
container.appendChild(li);
}
});
});
}
});
});
});
Solved! Go to Solution.
Dominik,
Here are some code changes to get you going.
You need to return all fields or at least all the ones you will use in your code for your layer.
// Geschäftsflächen von Lienz (polygons)
var gebLayer = new FeatureLayer({
url: "https://services5.arcgis.com/m1u2UHLCJqbrBAsc/arcgis/rest/services/geschaeft/FeatureServer/0",
title: "Shops",
outFields: ["*"],
renderer: renderer
});
Your Object Id field for your shops layer is FID not OBJECTID
view.when(function () {
// Get DOM element where list items will be placed
var container = document.getElementById("Gastroliste");
// Highlight is set on the layerView, so we need to detect when the layerView is ready
view.whenLayerView(gebLayer).then(function (LayerView) {
// Wait for the layer view to finish updating
LayerView.watch("updating", function (value) {
if (!value) {
LayerView.queryFeatures().then(function (result) {
// Empty the list DOM element
container.innerHTML = "";
// For each returned feature that is of type office create a list item and append it to the container
result.features.forEach(function (feature) {
var attributes = feature.attributes;
// We only want to add features of type Office to the list
if (attributes.Kategorie === "Fashion") {
// Create list element
var li = document.createElement("li");
li.innerHTML = attributes.Firma19;
li.addEventListener("click", function (event) {
var target = event.target;
var objectId = feature.attributes.FID;
// Create an extent query on the layer view that will return the 3D extent of the feature
var queryExtent = new Query({
objectIds: [objectId]
});
LayerView
.queryExtent(queryExtent)
.then(function (result) {
// Zoom to the extent of the feature
// Use the expand method to prevent zooming in too close to the feature
view.goTo(result.extent.expand(7), {
speedFactor: 0.5
});
});
// Remove the previous highlights
if (highlight) {
highlight.remove();
}
// Highlight the feature passing the objectId to the method
highlight = LayerView.highlight([objectId]);
});
container.appendChild(li);
}
});
});
}
});
});
});
Dominik,
Here are some code changes to get you going.
You need to return all fields or at least all the ones you will use in your code for your layer.
// Geschäftsflächen von Lienz (polygons)
var gebLayer = new FeatureLayer({
url: "https://services5.arcgis.com/m1u2UHLCJqbrBAsc/arcgis/rest/services/geschaeft/FeatureServer/0",
title: "Shops",
outFields: ["*"],
renderer: renderer
});
Your Object Id field for your shops layer is FID not OBJECTID
view.when(function () {
// Get DOM element where list items will be placed
var container = document.getElementById("Gastroliste");
// Highlight is set on the layerView, so we need to detect when the layerView is ready
view.whenLayerView(gebLayer).then(function (LayerView) {
// Wait for the layer view to finish updating
LayerView.watch("updating", function (value) {
if (!value) {
LayerView.queryFeatures().then(function (result) {
// Empty the list DOM element
container.innerHTML = "";
// For each returned feature that is of type office create a list item and append it to the container
result.features.forEach(function (feature) {
var attributes = feature.attributes;
// We only want to add features of type Office to the list
if (attributes.Kategorie === "Fashion") {
// Create list element
var li = document.createElement("li");
li.innerHTML = attributes.Firma19;
li.addEventListener("click", function (event) {
var target = event.target;
var objectId = feature.attributes.FID;
// Create an extent query on the layer view that will return the 3D extent of the feature
var queryExtent = new Query({
objectIds: [objectId]
});
LayerView
.queryExtent(queryExtent)
.then(function (result) {
// Zoom to the extent of the feature
// Use the expand method to prevent zooming in too close to the feature
view.goTo(result.extent.expand(7), {
speedFactor: 0.5
});
});
// Remove the previous highlights
if (highlight) {
highlight.remove();
}
// Highlight the feature passing the objectId to the method
highlight = LayerView.highlight([objectId]);
});
container.appendChild(li);
}
});
});
}
});
});
});
Robert,
thank you for your fast answer, it worked very well!