Here is a sample of my code. I tried to get ride of everything that would still reproduce the error:
<!DOCTYPE html>
<html lang="en">
<head>
</script>
<script>
require([ // require loads modules
"esri/Map",
"esri/views/MapView",
"esri/widgets/BasemapToggle",
"esri/layers/OGCFeatureLayer",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/Point",
], function(Map, MapView, BasemapToggle, OGCFeatureLayer, Graphic, GraphicsLayer, Point) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-68.80500, 47.02700], // longitude, latitude
zoom: 7
});
//load stations info:
var stations = [];
$.ajax({ // TODO: fix CORS Error — and How the Access-Control-Allow-Origin Header
type: "GET",
async: false,
contentType: 'application/json; charset=utf-8',
success: function(json) {
stations = json;
}
});
//load regions
var layer_regions = new OGCFeatureLayer({
url: "http://localhost:32768/geoserver/OGSL/ogc/features/",
collectionId: "OGSL:test_create_shp_exposed",
legendEnabled: true,
popupEnabled: true,
name: "layer_regions",
visible: true,
title: "regions",
renderer: {
type: "simple",
symbol: {
type: "simple-fill",
},
}
});
map.add(layer_regions);
view.on("click",
function(event) {
//console.log(event)
view.hitTest(event).then(getGraphics).then(buildLayer);
});
function getGraphics(response) {
// On vérifie s'il y a déjà une couche des stations d'affichée
var foundLayers = map.allLayers.find(function(layer) {
return layer.name === "stationsLayerTrue";
});
console.log("foundlayers", foundLayers)
//Si on clique sur un couche de type polygone
if (response.results[0].graphic.geometry) {
if (response.results[0].graphic.geometry.type === "polygon") {
var geometry = response.results[0].graphic.geometry
// Si une couche des stations est déjà présente, on la supprime
if (foundLayers) {
map.remove(foundLayers)
}
// On zoom sur le poylgone cliqué
view.goTo(response.results[0].graphic.geometry);
var popupActive = false
return geometry;
}
} else {
var foundLayers = map.allLayers.find(function(layer) {
return layer.name === "stationsLayerTrue";
});
if (foundLayers) {
map.remove(foundLayers)
}
return null
}
}
function buildLayer(polygoneClique) {
//console.log("poly", polygoneClique)
if (polygoneClique) {
// On crée une couche qui va contenir les stations
var stationsLayerTrue = new GraphicsLayer({
visible: true,
title: "stationsLayerTrue",
name: "stationsLayerTrue"
});
map.add(stationsLayerTrue);
for (i = 0; i < stations.length; i++) {
var point = new Point({
longitude: stations[i]["longitude"],
latitude: stations[i]["latitude"],
spatialReference: {
wkid: 3857
}
})
var intersects = polygoneClique.contains(point)
if (intersects) {
var pointGraphicTrue = new Graphic({
geometry: point,
symbol: {
type: "simple-marker",
color: "#d7191c" //red
},
popupTemplate: {
title: "{officialName}"
},
attributes: {
id: stations[i]["id"],
officialName: stations[i]["officialName"],
}
});
stationsLayerTrue.add(pointGraphicTrue);
}
}
}
}
});
</script>
<style>
html,
body,
#viewDiv {
position: absolute;
left: 0;
right: 0px;
top: 0;
bottom: 0;
height: 100%;
}
.esri-legend__layer-caption {
display: none;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
So as you can see, if you click on one region and then click on a point, the highlight works fine. But if you then click on the other region and then on a point, the error shows up.
Any idea of why this is happening?
Thank you !
Julien