Help for a newbie? view.goTo not working
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!!
