Help for a newbie? view.goTo not working

kclarkGIS — Tue, 31 Oct 2023 14:51:24 GMT

Hello,

I am very new to using the ArcGIS JavaScript API, but wanted to utilize it to challenge myself for a final project in a course I'm taking. I am building a React application. For the MenuPanel component, the shenandoahHikesLayer and sceneView props are passed from the parent "HomePage" component.

What I am trying to accomplish is to create a dropdown menu and populating the values in the dropdown by querying the feature layer and pulling the "hikeName" attribute information for the dropdown values. (currently working). However, I want the sceneView to zoom to that feature when that option is selected from the dropdown, and that's what I can't get to work. Nothing is happening in the sceneView at all when I select various options from the dropdown menu.

Here is the code for the MenuPanel component:

import React, { useEffect, useState } from "react"; import { loadModules } from "esri-loader"; import Auth from "../utils/auth"; import "../styles/menuPanel.css"; const MenuPanel = ({ shenandoahHikesLayer, sceneView }) => { const [featureData, setFeatureData] = useState([]); const [selectedFeature, setSelectedFeature] = useState(""); useEffect(() => { if (shenandoahHikesLayer) { loadModules(["esri/rest/query"]).then(([Query]) => { let query = shenandoahHikesLayer.createQuery(); query.returnGeometry = true; query.outFields = ["hikeName"]; shenandoahHikesLayer.queryFeatures(query).then((result) => { const featuresData = result.features.map((feature) => ({ name: feature.attributes.hikeName, geometry: feature.geometry.toJSON(), // Convert geometry to JSON })); setFeatureData(featuresData); }); }); } }, [shenandoahHikesLayer]); const zoomToFeature = (geometry) => { sceneView.goTo({ target: geometry, scale: 10000, tilt: 60, }); }; const handleDropdownChange = (event) => { const selectedName = event.target.value; setSelectedFeature(selectedName); const selectedFeatureData = featureData.find( (feature) => feature.name === selectedName ); if (sceneView && selectedFeature) { zoomToFeature(selectedFeature.geometry); } }; return ( <div className="menu-panel"> <select value={selectedFeature} onChange={handleDropdownChange}> <option value="">Select a Hike</option> {featureData.map((feature) => ( <option key={feature.name} value={feature.name}> {feature.name} </option> ))} </select> {Auth.loggedIn() && selectedFeature !== "" && ( <div> <span className="divider-menu-panel"></span> <button type="button" className="btn btn-dark btn-menu-panel"> I completed this hike! </button> <button type="button" className="btn btn-dark btn-menu-panel"> Add this hike to my wishlist </button> </div> )} </div> ); }; export default MenuPanel;

Here are some screenshots:

Correctly pulling the hikeName information from the feature layer (right now only two features). But nothing changes in the sceneView when I click on the names in the dropdown.

As far as I can tell both the map and the layers are in Spatial Reference wkid 4269.

Any help would be greatly appreciated! Thank you so much!!

Re: Help for a newbie? view.goTo not working

dani — Wed, 01 Nov 2023 16:37:05 GMT

Hi,

As far as I can tell, the issue you're encountering stems from line 20 above, where you convert the geometry data to JSON.

feature.geometry.toJSON()

If you just get the feature's geometry without converting it to JSON, your zoomToFeature function then works as-is.

Please let us know if this doesn't resolve your issue.

Dani

Re: Help for a newbie? view.goTo not working

kclarkGIS — Wed, 01 Nov 2023 22:49:41 GMT

Thanks for the response! I eventually got it to work, my main issue was how I had set up the menu panel component to access the map/scene view prop, I wasn't passing it in from the correct parent component.

topic Re: Help for a newbie? view.goTo not working in ArcGIS JavaScript Maps SDK Questions

Help for a newbie? view.goTo not working

Re: Help for a newbie? view.goTo not working

Re: Help for a newbie? view.goTo not working