Forum Discussion

JadedBelle's avatar
JadedBelle
Copper Contributor
Jun 12, 2024

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
        }); 
        
    });   

});

1 Reply

  • Ricky_Brundritt's avatar
    Ricky_Brundritt
    Copper Contributor
    Jul 15, 2024

    JadedBelle Just seeing this now, note that the main technical forums for Azure Maps are on Microsoft Q&A here: https://learn.microsoft.com/en-us/answers/tags/209/azure-maps

     

    As for your issue, there are a couple of ways to resolve it. The main issue is that you are creating and adding errors from within the event handler of a click event. This means that each time you click on a polygon, another layer is created. 

     

    Option 1: 

    - Currently your "polygonClickedLayer" and "selectedLineLayer" variables are inside the event handler and not accessible outside of that handler. Make them global variables, and later pass those layers into the map.layers.remove function to clear the highlight state. This is a simple solution but you could still run into issues if you click a second time before removing the layers.

     

    Option 2: 

    - Create your layers once outside of the event handler and only set the filter using setOptions on the layers within the event handler. This is the most common approach used and will have less issues and better performance than Option 1. There is a code sample that does this here: https://samples.azuremaps.com/?sample=polygon-hover-style