Bing Maps 101

This is a continuation of my write up on mail-apps 101. Earlier, we setup a bare-bones mail compose app. Now we are going to make some more spikes, this time to get an idea of how the Bing Maps API’s work.

Good-Guy-Google will let you use their Maps API without needing to register an auth key. Bad-Guy-Bing won’t :(. Having worked with both API’s though, I do find Bing’s to be easier, and fortunately the setup of a Bing auth key is easy. Just go here and login with a Windows Live Microsoft Account. Select “Basic” key type, and choose windows store app (since that’s pretty much what we’re making here…Office store app, Windows store app, its all One-Microsoft right?).

A Basic Spike:

Ok, so here is our basic spike of a web page using Bing Maps.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script 
      charset="UTF-8" 
      type="text/javascript" 
      src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1&mkt=fr-fr">
    </script>
    <script type="text/javascript">

      function GetMap()
      {
        var map = new Microsoft.Maps.Map(
          document.getElementById("mapDiv"), 
          {
            credentials:"Your_Auth_Key_Here",
            disableBirdseye: true,
            enableClickableLogo: false,
            enableSearchLogo: false,
            showDashboard: false,
            zoom: 5
          });
      }

    </script>
  </head>
  <body onload="GetMap();" style="margin: 0; border: 0; padding: 0;"> 
    <div id='mapDiv' style="position:absolute; width:100%; height:100%;"></div>
  </body>
</html>

Note line 8 is highlighted. This is where we actually load the Maps API. Now, I know in advance that there are going to be some things we need to satisfy for our Mail App, so I’ve taken some shortcuts here.

Firstly, Mail Apps will require everything to be HTTPS. To make Bing Maps HTTPS, we need to set the src link to start with HTTPS, but we also need to append &s=1 parameter onto the end. This ensures that all future communication of the API to fetch maps as you pan around are also over HTTPS.

Also, Mail Apps will operate in various markets (languages). This is a parameter that’s passed into the mail app. In the code above, I added an &mkt=fr-fr to the end of the map. This allows us to see how setting the market works, and indeed we can see that when the map loads, the names are localized to French.

More on setting the market can be found here. Things worth noting, is that you can set a backup language (such as en-us) to use when localization isn’t available for a particular name. It is also possible to set the backup language to ngt, which will display country labels in that countries native language underneath the localized label.

Also in the code above, I pass in a lot of optional parameters, this prevents all the extra junk from displaying on the map.

Handling Events:

We’ll need to handle click events. Left click is used to drag the map around, but lets make right-click add a pushpin at the current location of the mouse. To do this, lets update our spike above, insert the following code inside but at the end of our GetMaps() function.

    Microsoft.Maps.Events.addHandler(map, 'rightclick', function(e) {
      if(e && e.isSecondary && e.targetType == "map") {
        var point = new Microsoft.Maps.Point(e.getX(), e.getY());
        var loc = e.target.tryPixelToLocation(point);

        var pushpin= new Microsoft.Maps.Pushpin(loc, null); 
        map.entities.push(pushpin);
      }
    });

So this code runs immediately when the map is initialized, and adds a handler to collect click events. It binds the function(e) to those clicks (where e is the click event-data getting passed in). We verify that we have event data, and that the event was a left-click on the map. We then use the getX/Y() API functionality to convert the physical pixel location on the screen to Latitude/Longitude location that Bing needs in order to place a PushPin.

Hey presto, pushpins!

Next we’ll look at some of Bing REST API’s, this will allow us to convert street addresses to Lat/Long locations, get routes, and find stuff nearby.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: