Bing Maps Polygon RRS feed

  • Question

  • Hi There,

    Is there any custom identifier we can assign to the polygon we draw so we can refer them later on?

    I want to assign our own id's to them and later refer them to change their properties .

    Tuesday, April 10, 2018 9:50 AM


  • This sample code should help. You can create a label using the metadata property to store the reference.

    <!DOCTYPE html>
        <meta charset="utf-8" />
        <script type='text/javascript'>
        var map, polygons;
        function GetMap() {
            map = new Microsoft.Maps.Map('#myMap', {});
            //Load the Spatial Math module.
            Microsoft.Maps.loadModule("Microsoft.Maps.SpatialMath", function () {
                //Generate some random polygons and add then to the map with labels.
                polygons = Microsoft.Maps.TestDataGenerator.getPolygons(5, map.getBounds());
                for (var i = 0; i < polygons.length; i++) {
                    addPolygonWithLabel(polygons[i], 'Polygon ' + i);
        function addPolygonWithLabel(polygon, label) {
            //Add the polygon to the map.
            //Add a click event to the polygon which will remove it from the map.
            Microsoft.Maps.Events.addHandler(polygon, 'click', function (e) { removePolygon( });
            //Calculate the centroid of the polygon.
            var centroid = Microsoft.Maps.SpatialMath.Geometry.centroid(polygon);
            //Create a pushpin that has a transparent icon and a title property set to the label value.
            var labelPin = new Microsoft.Maps.Pushpin(centroid, {
                icon: '<svg xmlns="" width="1" height="1"></svg>',
                title: label
            //Store a reference to the label pushpin in the polygon metadata. <----- this is most likely what you are looking for
            polygon.metadata = { label: labelPin };    
            //Add the label pushpin to the map.
        function removePolygon(polygon) {
            if (polygon.metadata && polygon.metadata.label) {
        <script type='text/javascript' src='[YOUR_BING_MAPS_KEY]' async defer></script>
        <div id="myMap" style=";width:800px;height:600px;"></div>
        <fieldset style="width:800px;margin-top:10px;">
            <legend>Polygon with Label Sample</legend>
            This sample shows how to add a label to a polygon by using a pushpin. A click event has been added to each polygon which will remove it and its label from the map.

    Tuesday, April 10, 2018 12:58 PM