Unable to remove a polygon from Bing map

Question

I have a screen in my application from where I am managing the polygons and information related to polygons using Bing map.

I wanted to display the polygon details when somebody clicks on the polygons. So I added a click event on the polygons and its working fine.

I also want to allow user to edit the polygon while viewing/modifying the other information after click event. So I planned to remove the polygon after click event from map's entities and add it to drawing manager for further edition. However I am not able to remove a particular polygon from map's entities. I tried preparing the same polygon and pass it to map's entities remove function but its not working. Below is sample code for same and my application is developed in angular:

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    credentials: 'Your Bing Maps Key'
});

var polygon1 = new Microsoft.Maps.Polygon([
    new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude - 0.03),
    new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude - 0.11),
    new Microsoft.Maps.Location(center.latitude + 0.05, center.longitude - 0.07)
]);
polygon1.entity = { id: 1 };
map.entities.push(polygon1);

var polygon2 = new Microsoft.Maps.Polygon([
    new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude + 0.03),
    new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude + 0.11),
    new Microsoft.Maps.Location(center.latitude + 0.05, center.longitude + 0.07)
]);
polygon2.entity = { id: 2 };
map.entities.push(polygon2);    

Microsoft.Maps.Events.addHandler(polygon, 'click', function (e) {   
    var geoId = e.target.entity.id;
    //Here I want to find the polygon with provided Id and remove it so that I can add it to drawing manager for further modification
    //Code to remove the polygon
    var polygonToRemove = new Microsoft.Maps.Polygon([
        new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude - 0.03),
        new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude - 0.11),
        new Microsoft.Maps.Location(center.latitude + 0.05, center.longitude - 0.07)
    ]);
    polygonToRemove.entity = { id: 1 };
    map.entities.remove(polygonToRemove);
    //Code to add the polygon to drawing manager
});

rbrundritt rbrundritt · Accepted Answer · 2017-07-10T23:12:26

In your click event handler you are creating a new polygon which may have the same locations as another polygon, but is a different object none the less. You have to pass in an instance of the actual shape object you want removed not a copy of it. Here is a modified version of your code:

Microsoft.Maps.Events.addHandler(polygon, 'click', function (e) {   
    map.entities.remove(e.target);
});

Unable to remove a polygon from Bing map

1 Answers