none
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

Answers

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

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <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.
            map.entities.push(polygon);
            //Add a click event to the polygon which will remove it from the map.
            Microsoft.Maps.Events.addHandler(polygon, 'click', function (e) { removePolygon(e.target) });
            //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="http://www.w3.org/2000/svg" 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.
            map.entities.push(labelPin);
        }
        function removePolygon(polygon) {
            if (polygon.metadata && polygon.metadata.label) {
                map.entities.remove(polygon.metadata.label);
            }
            map.entities.remove(polygon);
        }
        </script>
        <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[YOUR_BING_MAPS_KEY]' async defer></script>
    </head>
    <body>
        <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.
        </fieldset>
    </body>
    </html>


    Tuesday, April 10, 2018 12:58 PM
    Moderator