How to remove highlight on previously selected feature in geojson data on Azure Map polygon layer
I’ve been trying to fix the following code so that when a user clicks on a feature in the geojson data, the selected polygon is highlighted. And when user clicks on another polygon, the previously selected polygon/feature is no longer highlighted and the currently selected polygon is highlighted. Can anybody see what I’m doing wrong?
map.events.add(‘ready’, function () {
//Change the cursor of the mouse when it is over the map to be a pointer.
map.getCanvasContainer().style.cursor = ‘pointer’;
//Create a data source and add it to the map.
ds = new atlas.source.DataSource();
//Load jsonData file
fetch(jsonData)
.then(response => response.json())
.then(results => {
if (results.features[1].properties.CNTY == county_name) {
ds.add(results.features);
}
})//end then
.catch(error => console.error(‘Error loading GeoJSON:’, error));
//Add jsonData to sources
map.sources.add(ds);
//Add a layer for rendering a different color polygon when clicked
var polygonLayer = new atlas.layer.PolygonLayer(ds, null, {
fillColor: “rgba(176,48,96, 0.5)” //maroon
})
map.layers.add(polygonLayer, ‘labels’);
var selectedLine = new atlas.layer.LineLayer(ds, null, {
strokeColor: ‘black’,
strokeWidth: 1
});
map.layers.add(selectedLine, ‘labels’);
//Add click events to polygonLayer
map.events.add(‘click’, polygonLayer, function (e) {
selected = e.shapes[0];
//Add a layer for rendering a different color polygon when clicked
var polygonClickedLayer = new atlas.layer.PolygonLayer(ds, null, {
fillColor: ‘rgb(102, 255, 0)’, //green
//Only polygons with a “FUID” property with a value of selectedID will be rendered.
filter: [‘==’, [‘get’, ‘FUID’], selected.properties.FUID]
})
map.layers.add(polygonClickedLayer, ‘labels’);
//Add a layer for rendering a different polygon border color when clicked
var selectedLineLayer = new atlas.layer.LineLayer(ds, null, {
strokeColor: ‘orange’,
strokeWidth: 2,
//Only polygons with a “FUID” property with a value of selectedID will be rendered.
filter: [‘==’, [‘get’, ‘FUID’], selected.properties.FUID]
});
map.layers.add(selectedLineLayer, ‘labels’);
ftrCentroid = calculateFieldCentroid(selected);
map.setCamera({
zoom: 15,
center: ftrCentroid
});
});
});
I’ve been trying to fix the following code so that when a user clicks on a feature in the geojson data, the selected polygon is highlighted. And when user clicks on another polygon, the previously selected polygon/feature is no longer highlighted and the currently selected polygon is highlighted. Can anybody see what I’m doing wrong?map.events.add(‘ready’, function () {
//Change the cursor of the mouse when it is over the map to be a pointer.
map.getCanvasContainer().style.cursor = ‘pointer’;
//Create a data source and add it to the map.
ds = new atlas.source.DataSource();
//Load jsonData file
fetch(jsonData)
.then(response => response.json())
.then(results => {
if (results.features[1].properties.CNTY == county_name) {
ds.add(results.features);
}
})//end then
.catch(error => console.error(‘Error loading GeoJSON:’, error));
//Add jsonData to sources
map.sources.add(ds);
//Add a layer for rendering a different color polygon when clicked
var polygonLayer = new atlas.layer.PolygonLayer(ds, null, {
fillColor: “rgba(176,48,96, 0.5)” //maroon
})
map.layers.add(polygonLayer, ‘labels’);
var selectedLine = new atlas.layer.LineLayer(ds, null, {
strokeColor: ‘black’,
strokeWidth: 1
});
map.layers.add(selectedLine, ‘labels’);
//Add click events to polygonLayer
map.events.add(‘click’, polygonLayer, function (e) {
selected = e.shapes[0];
//Add a layer for rendering a different color polygon when clicked
var polygonClickedLayer = new atlas.layer.PolygonLayer(ds, null, {
fillColor: ‘rgb(102, 255, 0)’, //green
//Only polygons with a “FUID” property with a value of selectedID will be rendered.
filter: [‘==’, [‘get’, ‘FUID’], selected.properties.FUID]
})
map.layers.add(polygonClickedLayer, ‘labels’);
//Add a layer for rendering a different polygon border color when clicked
var selectedLineLayer = new atlas.layer.LineLayer(ds, null, {
strokeColor: ‘orange’,
strokeWidth: 2,
//Only polygons with a “FUID” property with a value of selectedID will be rendered.
filter: [‘==’, [‘get’, ‘FUID’], selected.properties.FUID]
});
map.layers.add(selectedLineLayer, ‘labels’);
ftrCentroid = calculateFieldCentroid(selected);
map.setCamera({
zoom: 15,
center: ftrCentroid
});
});
}); Read More