locked
Maps v7: HTML text centered inside polygon (vs v6.3) RRS feed

  • Question

  • Hi, I’m upgrading from Bing Maps v6.3 to v7.

    How can I embed HTML into the polygon with the html/text is centered inside the shape?

    In v6 I would pass HTML to SetCustomIcon method for VEShape (polygon).  What is the v7 equivalent?  I want to bind jQuery events to the HTML too.

    -=Dan=-

    Wednesday, March 14, 2012 12:06 AM

Answers

  • There is no support for this out of the box however it is possible to do. In v6.3 we did this by setting the HTML for the pushpin associated with the polygon. In v7 there is no pushpin associated by default which is a good thing as it means there is a lot less objects on the map. What you can do though is create a pushpin and pass in text into the label of it and set the icon property to point to a transparent image. You can then add events to the pushpin. I'm not 100% sure custom HTML will work using this approach but you can get labels on the polygon. I'll see if I can put together a sample of this in the next day or two.

    http://rbrundritt.wordpress.com


    Wednesday, March 14, 2012 8:10 AM
  • In the code sample you provided the label is being put in place of the default pushpin that are created for Polygons in V6.3. In v7 there is no icon/pushpin tied to a polygon. Thus the reason why you would need a seperate pushpin. In addition to that there is no custom HTML pushpin functionality in Bing Maps v7 however setting the icon property of a pushpin to point to a transparent icon will get rid of the pin and you can set the text property to generate a label. You will be limited in how the text can be formated and will not be able to add custom HTMl.

    http://rbrundritt.wordpress.com

    Saturday, March 17, 2012 2:51 PM

All replies

  • There is no support for this out of the box however it is possible to do. In v6.3 we did this by setting the HTML for the pushpin associated with the polygon. In v7 there is no pushpin associated by default which is a good thing as it means there is a lot less objects on the map. What you can do though is create a pushpin and pass in text into the label of it and set the icon property to point to a transparent image. You can then add events to the pushpin. I'm not 100% sure custom HTML will work using this approach but you can get labels on the polygon. I'll see if I can put together a sample of this in the next day or two.

    http://rbrundritt.wordpress.com


    Wednesday, March 14, 2012 8:10 AM
  • Do you mean the pushpin is associated in the Microsoft code?  Here's some code for Bing Maps v6.3 that adds the HTML/text label into a polygon with no reference to pushpins.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <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=6.3"></script>
          <script type="text/javascript">
              var map = null;
    
              function GetMap() {
                  map = new VEMap('myMap');
                  map.LoadMap();
                  map.SetZoomLevel(10);
                  AddPolygon();
              }
    
              
    
              function AddPolygon() {
                  var ll = map.GetCenter();
                  var lat = ll.Latitude;
                  var lon = ll.Longitude;
    
                  var shape = new VEShape(VEShapeType.Polygon, [new VELatLong(lat, lon - 0.15),
                                                       new VELatLong(lat + 0.1, lon - 0.05),
                                                       new VELatLong(lat + 0.1, lon + 0.05),
                                                       new VELatLong(lat, lon + 0.15),
                                                       new VELatLong(lat - 0.1, lon + 0.05),
                                                       new VELatLong(lat - 0.1, lon - 0.05)]);
    
                  //Set the line color
                  var lineColor = new VEColor(Math.round(254 * Math.random()), Math.round(254 * Math.random()), Math.round(254 * Math.random()), Math.random());
                  shape.SetLineColor(lineColor);
    
                  //Set the line width
                  var lineWidth = Math.round(5 * Math.random() + 1);
                  shape.SetLineWidth(lineWidth);
    
                  //Set the fill color
                  var fillColor = new VEColor(Math.round(254 * Math.random()), Math.round(254 * Math.random()), Math.round(254 * Math.random()), Math.random());
                  shape.SetFillColor(fillColor);
    
                  //Set the icon
                  var label = "<div id='labelInPolygon' style='font-size:12px;font-weight:bold;border:solid 2px Black;background-color:Aqua;width:50px;'>Shape</div>";
                  shape.SetCustomIcon(label);
    
                  //Add the shape the the map
                  map.AddShape(shape);
    
                  // Bind click event to polygon label
                  document.getElementById('labelInPolygon').onclick = function () {
                      alert('Is this possible in Bing Maps v7?');
                  };
              }
          </script>
       </head>
       <body onload="GetMap();">
          <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
       </body>
    </html>
          

    -=Dan=-

    Wednesday, March 14, 2012 10:56 PM
  • I guess the custom solution you are suggestion could be to calculate the centroid of my polygon and push a new pushpin entity into the map.  Not the best solution but it's an option...

    -=Dan=-

    Wednesday, March 14, 2012 11:32 PM
  • In the code sample you provided the label is being put in place of the default pushpin that are created for Polygons in V6.3. In v7 there is no icon/pushpin tied to a polygon. Thus the reason why you would need a seperate pushpin. In addition to that there is no custom HTML pushpin functionality in Bing Maps v7 however setting the icon property of a pushpin to point to a transparent icon will get rid of the pin and you can set the text property to generate a label. You will be limited in how the text can be formated and will not be able to add custom HTMl.

    http://rbrundritt.wordpress.com

    Saturday, March 17, 2012 2:51 PM