Bing Maps

I was looking at Bing Maps last week. In general I do not enjoy working on code which has a significant UI component, but I had a blast investigating Bing Maps. One of the hardest issues for me as a Bing newbie was to get an overview of the several different ways there are to use Bing Maps. As far as I’ve been able to determine (and I’m sure I’m not 100% correct at this point), the three main options are 1.) use Bing Maps AJAX (creates a Web page with an interactive map; requires active Internet connection), 2.) use Bing Maps Silverlight (creates a Silverlight thing with an interactive map which can be placed in a Web page or a desktop application; requires active Internet connection), 3.) use Bing Maps SOAP (creates a Web page or a desktop application with a non-interactive map; requires active Internet connection). There is also Bing Maps REST, and Bing Maps Spatial but I haven’t had a chance to look at those yet.

Anyway, I decided to do a hello world by using notepad (in other words avoid the overhead and mysteries of Visual Studio) and the many examples found on the Internet:

1 – <html>
2 –  <head>
3 –  <title>Hello World Bing Maps</title>
4 –  <script type=”text/javascript”
5 – </script>
6 –  <script type=”text/javascript”>
7 –   var map = null;
8 –   var points = new Array(
9 –    new VELatLong(47.60,-122.3295, 0, VEAltitudeMode.RelativeToGround),
10 –    new VELatLong(47.60,-122.0295, 0, VEAltitudeMode.RelativeToGround)
11 –   );
12 –
13 –   function MakeMap()
14 –   {
15 –     map = new VEMap(‘myMap’);
16 –     // map.SetCredentials(‘xxx’);
17 –     map.LoadMap();
18 –     map.SetZoomLevel(8);
19 –     map.SetMapStyle(VEMapStyle.Aerial);
20 –     map.SetCenter(new VELatLong(47.60,-122.3295, 0,
          VEAltitudeMode.RelativeToGround)); // Seattle
21 –     for (i = 0; i < points.length; ++i) {
22 –      dot = new VEShape(VEShapeType.Pushpin, points[i]);
23 –      dot.SetCustomIcon(“<div><img src=’squareYellow.gif’></div>”);
24 –      map.AddShape(dot);
25 –     }
26 –   }
27 –   </script>
28 –  </head>
29 –  <body onload=”MakeMap();”>
30 –   <div id=’myMap’ style=”position:relative; width:800px;
31 –  </body>
32 – </html>

One of the nice things about Bing Maps is that the code is very readable for the most part. On lines 9 and 10 I set up 2 points, Seattle, WA and an arbitrary point to the right – the latitude part is the up-down component and the longitude part is the left-right component so by going from -122.3 to -122.0 I increase the longitude (note the negative values) and move to the right. On line 16 I could have put in a Bing Maps key value if I wanted my Web page to be visible to the outside world. In this case I put this page named HelloWorldMap.html in a localhost Web application directory at C:\Inetpub\wwwroot\DummyWebSite on my local machine. One lines 20-24 I display the two points as square yellow boxes. I made it using Paint and saved as yellowSquare.gif. Anyway, Bing Maps are very cool.

This entry was posted in Machine Learning. Bookmark the permalink.