Shop popup on hover and unselect selected feature

Vakhtang_Zubiashvili — Thu, 29 Feb 2024 13:17:34 GMT

Hello Guyz,

I have changed click event to mouseover in this sample, here on mouse hover view goes to feature. Two thing i want to do are:

1) Open popup for selected feature, i tried view.openPopup({}), but i think i have missing something.

2) Deselect selected feature after mouse out on button.

this two thing, i think it will help others too in the future.

Thanks

Re: Shop popup on hover and unselect selected feature

JoelBennett — Thu, 29 Feb 2024 17:53:50 GMT

This probably has what you need to accomplish what you're trying to do, or at least get you closer to it anyways:

<html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title> Highlight point features | Sample | ArcGIS Maps SDK for JavaScript 4.29 </title> <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.29/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #paneDiv { position: absolute; bottom: 40px; width: 100%; text-align: center; background-color: transparent; color: white; } .esri-button-overwrite { width:auto; display: table-cell; margin: 4px; background-color: white; color: #0079c1; } </style> <script> require(["esri/Map", "esri/WebScene", "esri/views/SceneView"], ( Map, WebScene, SceneView ) => { // load webscene from portal item const webScene = new WebScene({ portalItem: { // autocasts as new PortalItem() id: "475a7161ed194460b5b52654e29581a2" } }); const view = new SceneView({ map: webScene, container: "viewDiv", // set highlightOptions like color and fillOpacity highlightOptions: { color: [255, 241, 58], fillOpacity: 0.4 } }); // these two highlight handlers are used for selection and hovering over features let highlightSelect; webScene.when(() => { // get layer from webScene const stationLayer = webScene.layers.getItemAt(1); // highlight is set on the layerView, so we need to detect when the layerView is ready view.whenLayerView(stationLayer).then((layerView) => { // creates the query that will be used to obtain the features needed for the highlight const queryStations = stationLayer.createQuery(); // features that are passed in the highlight function need to have an `objectID` // if the query is built using `new Query()` then `queryStations.outFields = ["objectID"]` should be set const buttons = document.querySelectorAll("button"); for (let i = 0, button = null; (button = buttons[i]); i++) { button.addEventListener("mouseover", onClick); button.addEventListener("mouseout", onMouseOut); } function onClick(event) { queryStations.where = `nom='${event.target.innerText}'`; stationLayer.queryFeatures(queryStations).then((result) => { if (typeof view.popup?.clear == "function") { view.popup.close(); view.popup.clear(); } // if a feature is already highlighted, then remove the highlight if (highlightSelect) { highlightSelect.remove(); highlightSelect = null; } // the feature to be highlighted const feature = result.features[0]; view.openPopup({ features: [feature] }); // use the objectID to highlight the feature highlightSelect = layerView.highlight( feature.attributes["OBJECTID"] ); /* // center the feature view .goTo( { target: feature.geometry, tilt: 70, zoom: 16 }, { duration: 2000, easing: "in-out-expo" } ) .catch((error) => { if (error.name != "AbortError") { console.error(error); } }); */ }); } function onMouseOut(evt) { if (typeof view.popup?.clear == "function") { view.popup.close(); view.popup.clear(); } if (highlightSelect) { highlightSelect.remove(); highlightSelect = null; } } }); }); }); </script> </head> <body> <div id="viewDiv"></div> <div id="paneDiv" class="esri-widget"> <h3>Subway stations</h3> <button class="esri-button esri-button-overwrite">Valmy</button> <button class="esri-button esri-button-overwrite"> St-Jean Vieux Lyon </button> <button class="esri-button esri-button-overwrite">Charpennes</button> <button class="esri-button esri-button-overwrite">Sans souci</button> <button class="esri-button esri-button-overwrite">Hôtel de Ville</button> <button class="esri-button esri-button-overwrite">Garibaldi</button> </div> </body> </html>

Note that adding and removing a highlight is redundant because the popup adds its own highlight as well. Therefore, in order to get rid of the popup's highlight, I added code to close the popup as well. I also commented out the part where the view zooms to the selected feature...otherwise, the popup would always appear over top of the feature, effectively hiding it.

Re: Shop popup on hover and unselect selected feature

Vakhtang_Zubiashvili — Mon, 04 Mar 2024 06:08:55 GMT

Thank you very much, this is exactly what i wanted 3>

topic Re: Shop popup on hover and unselect selected feature in ArcGIS JavaScript Maps SDK Questions

Shop popup on hover and unselect selected feature

Re: Shop popup on hover and unselect selected feature

Re: Shop popup on hover and unselect selected feature