topic Re: hover on popup list in ArcGIS JavaScript Maps SDK Questions

topic Re: hover on popup list in ArcGIS JavaScript Maps SDK Questions https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-on-popup-list/m-p/1175770#M77406 <P>Hi <a href="https://community.esri.com/t5/user/viewprofilepage/user-id/400217">@LaurenBoyd</a> </P><P>Great! Thank you very much! </P> Thu, 19 May 2022 22:08:44 GMT rabeya08 2022-05-19T22:08:44Z hover on popup list https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-on-popup-list/m-p/1137736#M76116 <P>Hi,</P><P>I am trying to achieve this:</P><P>click on any point in the map, gives a popup menu list (no problem in this part).  </P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="rabeya08_0-1643246242787.jpeg" style="width: 400px;"><img src="https://community.esri.com/t5/image/serverpage/image-id/32432iED1DD77051C64E87/image-size/medium?v=v2&px=400" role="button" title="rabeya08_0-1643246242787.jpeg" alt="rabeya08_0-1643246242787.jpeg" /></span></P><P>Then if you hover on that popup menu, you will see the corresponding feature highlighted on map.</P><P>I am stuck with the hover on popup part, any help will be highly appreciated</P><P>Here is the sample code from  <A href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=featurelayer-query-basic" target="_blank" rel="noopener">https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=featurelayer-query-basic</A></P><P> </P><LI-CODE lang="markup"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title> Basic Querying in FeatureLayer | Sample | ArcGIS API for JavaScript 4.22 </title> <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.22/"></script> <style> html, body, #viewDiv { height: 100%; width: 100%; margin: 0; padding: 0; } #optionsDiv { background-color: white; color: black; padding: 6px; max-width: 400px; } </style> <script> require([ "esri/Map", "esri/Graphic", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/Legend" ], (Map, Graphic, MapView, FeatureLayer, Legend) => { // Crime in SF const layer = new FeatureLayer({ // autocasts as new PortalItem() portalItem: { id: "234d2e3f6f554e0e84757662469c26d3" }, outFields: ["*"] }); const map = new Map({ basemap: "gray-vector", layers: [layer] }); const view = new MapView({ container: "viewDiv", map: map, popup: { autoOpenEnabled: false, dockEnabled: true, dockOptions: { // dock popup at bottom-right side of view buttonEnabled: false, breakpoint: false, position: "bottom-right" } } }); const legend = new Legend({ view: view, layerInfos: [ { layer: layer } ] }); view.ui.add(legend, "bottom-left"); view.ui.add("optionsDiv", "top-right"); // additional query fields initially set to null for basic query let distance = null; let units = null; //create graphic for mouse point click const pointGraphic = new Graphic({ symbol: { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: [0, 0, 139], outline: { color: [255, 255, 255], width: 1.5 } } }); // Create graphic for distance buffer const bufferGraphic = new Graphic({ symbol: { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [173, 216, 230, 0.2], outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 255], width: 1 } } }); // when query type changes, set appropriate values const queryOpts = document.getElementById("query-type"); queryOpts.addEventListener("change", () => { switch (queryOpts.value) { // values set for distance query case "distance": distance = 0.5; units = "miles"; break; default: // Default set to basic query distance = null; units = null; } }); layer.load().then(() => { // Set the view extent to the data extent view.extent = layer.fullExtent; layer.popupTemplate = layer.createPopupTemplate(); }); view.on("click", (event) => { view.graphics.remove(pointGraphic); if (view.graphics.includes(bufferGraphic)) { view.graphics.remove(bufferGraphic); } queryFeatures(event); console.log(view.graphics); console.log("popup"); console.log(view.popup); }); function queryFeatures(screenPoint) { const point = view.toMap(screenPoint); layer .queryFeatures({ geometry: point, // distance and units will be null if basic query selected distance: distance, units: units, spatialRelationship: "intersects", returnGeometry: false, returnQueryGeometry: true, outFields: ["*"] }) .then((featureSet) => { // set graphic location to mouse pointer and add to mapview pointGraphic.geometry = point; view.graphics.add(pointGraphic); // open popup of query result view.popup.open({ location: point, features: featureSet.features, featureMenuOpen: true //fetchFeatures: true }); view.popup.container.onclick = function () { var menuLists = document.getElementsByClassName( "esri-popup__feature-menu-list" ); var ol = menuLists[0]; var node = ol.firstChild; var i = 1; while (node) { //console.log(node.textContent) node.addEventListener("click", itemClicked); node.ind = i; i = i + 1; node = node.nextSibling; } function itemClicked(e) { console.log("item clicked "); console.log(e.currentTarget.ind); } }; // console.log("popupdf") // }; if (featureSet.queryGeometry) { bufferGraphic.geometry = featureSet.queryGeometry; view.graphics.add(bufferGraphic); } }); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="optionsDiv" class="esri-widget"> <p> Select a query type and click a point on the map to view the results. </p> <select id="query-type" class="esri-widget"> <option value="basic">Basic Query</option> <option value="distance">Query By Distance</option> </select> </div> </body> </html></LI-CODE><P> </P> Thu, 27 Jan 2022 01:17:46 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-on-popup-list/m-p/1137736#M76116 rabeya08 2022-01-27T01:17:46Z Re: hover on popup list https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-on-popup-list/m-p/1137997#M76136 <P>Hi there, </P><P>This is not possible out of the box in the API. We can look into adding this for the popup feature menu. However, I do not know if this will be implemented or when it will be implemented. If we add this feature, I will be sure to update. </P><P>In meantime, do you think you can use approached used in this sample? <A href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=featurelayerview-query" target="_blank">https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=featurelayerview-query</A></P><P>You could update the sample to listen to mouseover event of the listNodes. listNode.addEventListener("mouseover", onListClickHandler);</P> Thu, 27 Jan 2022 18:40:43 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-on-popup-list/m-p/1137997#M76136 UndralBatsukh 2022-01-27T18:40:43Z Re: hover on popup list https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-on-popup-list/m-p/1138234#M76148 <P>Thank you for your reply and for the attached code link.</P><P>I will see if I can find a workaround.</P><P>Thank you.</P> Fri, 28 Jan 2022 07:17:02 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-on-popup-list/m-p/1138234#M76148 rabeya08 2022-01-28T07:17:02Z Re: hover on popup list https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-on-popup-list/m-p/1170756#M77220 <P>Hi <a href="https://community.esri.com/t5/user/viewprofilepage/user-id/500052">@rabeya08</a> -</P><P>The functionality to highlight features in the map that are corresponding to a hovered item in the popup feature menu will be available in version 4.24.</P> Wed, 04 May 2022 18:28:18 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-on-popup-list/m-p/1170756#M77220 LaurenBoyd 2022-05-04T18:28:18Z Re: hover on popup list https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-on-popup-list/m-p/1175755#M77405 <P><a href="https://community.esri.com/t5/user/viewprofilepage/user-id/500052">@rabeya08</a> - you can see the new functionality with the <A href="https://github.com/Esri/feedback-js-api-next" target="_self">"next" version</A> of the API. Here is the sample above showing the new highlight on feature menu hover functionality:  <A href="https://codepen.io/laurenb14/pen/BaYZBxW?editors=1000" target="_blank">https://codepen.io/laurenb14/pen/BaYZBxW?editors=1000</A></P> Thu, 19 May 2022 21:35:10 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-on-popup-list/m-p/1175755#M77405 LaurenBoyd 2022-05-19T21:35:10Z Re: hover on popup list https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-on-popup-list/m-p/1175770#M77406 <P>Hi <a href="https://community.esri.com/t5/user/viewprofilepage/user-id/400217">@LaurenBoyd</a> </P><P>Great! Thank you very much! </P> Thu, 19 May 2022 22:08:44 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/hover-on-popup-list/m-p/1175770#M77406 rabeya08 2022-05-19T22:08:44Z