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
Solved! Go to Solution.
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.
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.
Thank you very much, this is exactly what i wanted 3>