topic Add Features to Drop Down List in ArcGIS JavaScript Maps SDK Questions

Add Features to Drop Down List

DominikEbenstreit — Wed, 26 Jun 2019 10:51:19 GMT

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);
                    }
                  });
                });
              }
            });
          });
        });

Re: Add Features to Drop Down List

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:36:34 GMT

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);
								}
							});
						});
					}
				});
			});
		});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Add Features to Drop Down List

DominikEbenstreit — Tue, 02 Jul 2019 11:19:09 GMT

Robert,

thank you for your fast answer, it worked very well!