none
V7 event on polygon (get the id or something) RRS feed

  • Question

    1. Hello everybody,

      I'm playing with the bing map API v7. I'm adding few polygon on the map- I've put the "click" event on all the polygon. BUt the problem is in the Handler, i've no Idea How to detect "which" poly has been clicked on ??

      In the v6.3 when i add a polygon there was the possibility to add an "index" and that idex was easily retrieved in the mouse handler, but with the v7 how ??

      I use map.entities.push(polygon) to add a polygon

       

      Thanks


    • Moved by Ricky_Brundritt Friday, March 9, 2012 3:25 PM (From:Bing Maps: Map Control and Web services Development)
    Friday, February 11, 2011 9:53 AM

Answers

  • I was thinking something more like this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
     <script type="text/javascript">
      function GetMap() {
       // Create a new map
       var map = new Microsoft.Maps.Map(
        document.getElementById("mapDiv"),
        {
         credentials: "YourBingMapsKey",
         center: new Microsoft.Maps.Location(0, 0),
         zoom: 2
        }
       );
       // Add first polygon to the map
       var triangle = new Microsoft.Maps.Polygon([new Microsoft.Maps.Location(-30, -120), new Microsoft.Maps.Location(-30, -90), new Microsoft.Maps.Location(30, -110), new Microsoft.Maps.Location(-30, -120)]);
       triangle.index = 1; // Assign an index property
       map.entities.push(triangle);
    
       // Add another polygon to the map
       var square = new Microsoft.Maps.Polygon([new Microsoft.Maps.Location(-30, 90), new Microsoft.Maps.Location(-30, 120), new Microsoft.Maps.Location(30, 120), new Microsoft.Maps.Location(30, 90), new Microsoft.Maps.Location(-30, 90)]);
       square.index = 2; // Assign an index property
       map.entities.push(square);
    
       // Attach a click handler to the map
       Microsoft.Maps.Events.addHandler(map, 'click', clickCallback);
      }
    
      function clickCallback(e) {
       if (e.targetType == "polygon") {
       alert('clicked on polygon index ' + e.target.index);
       }
      }
     </script>
    </head>
    <body onload="GetMap();">
     <div id='mapDiv' style="position: relative; width: 800px; height: 640px;"></div>
    </body>
    </html>
    
    


    Beginning Spatial with SQL Server http://www.apress.com/book/view/1430218290
    Friday, February 11, 2011 12:26 PM
    Moderator

All replies

  • Add an handler that listens to the "click" event of the layer in which you're adding your polygons. The callback function from this event will receive a single parameter - check the target property of this parameter to check any of the properties of the shape on which you clicked.
    Beginning Spatial with SQL Server http://www.apress.com/book/view/1430218290
    Friday, February 11, 2011 11:41 AM
    Moderator
  • Hmm, I've managed to fix my problem, i m doing like that

     

    var id = regionsCollection.indexOf(e.target);
    var polygon = regionsCollection.get(id);
      polygon.setOptions({...

     

    it works, but i dont know if there is a better solution

    Friday, February 11, 2011 11:53 AM
  • I was thinking something more like this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
     <script type="text/javascript">
      function GetMap() {
       // Create a new map
       var map = new Microsoft.Maps.Map(
        document.getElementById("mapDiv"),
        {
         credentials: "YourBingMapsKey",
         center: new Microsoft.Maps.Location(0, 0),
         zoom: 2
        }
       );
       // Add first polygon to the map
       var triangle = new Microsoft.Maps.Polygon([new Microsoft.Maps.Location(-30, -120), new Microsoft.Maps.Location(-30, -90), new Microsoft.Maps.Location(30, -110), new Microsoft.Maps.Location(-30, -120)]);
       triangle.index = 1; // Assign an index property
       map.entities.push(triangle);
    
       // Add another polygon to the map
       var square = new Microsoft.Maps.Polygon([new Microsoft.Maps.Location(-30, 90), new Microsoft.Maps.Location(-30, 120), new Microsoft.Maps.Location(30, 120), new Microsoft.Maps.Location(30, 90), new Microsoft.Maps.Location(-30, 90)]);
       square.index = 2; // Assign an index property
       map.entities.push(square);
    
       // Attach a click handler to the map
       Microsoft.Maps.Events.addHandler(map, 'click', clickCallback);
      }
    
      function clickCallback(e) {
       if (e.targetType == "polygon") {
       alert('clicked on polygon index ' + e.target.index);
       }
      }
     </script>
    </head>
    <body onload="GetMap();">
     <div id='mapDiv' style="position: relative; width: 800px; height: 640px;"></div>
    </body>
    </html>
    
    


    Beginning Spatial with SQL Server http://www.apress.com/book/view/1430218290
    Friday, February 11, 2011 12:26 PM
    Moderator
  • Hooo, ok, I see. I didn't know that there was a .index method :O (in the polygon class ref there is no such thing)

     

    thank you

    Friday, February 11, 2011 12:53 PM
  • There is no index property defined for the polygon class. I just added it in this line:

    triangle.index = 1;

    Unlike some languages, javascript allows you to dynamically create and assign any properties you want on an existing object.

    If you'd prefer, you could assign triangle.fruit = "apple", and then retrieve the fruit property of each polygon in the callback :)


    Beginning Spatial with SQL Server http://www.apress.com/book/view/1430218290
    Friday, February 11, 2011 3:05 PM
    Moderator