Bing Maps, previously known as Virtual Earth, is the mapping service provided by Microsoft.
In the same way as Google Maps, OpenLayers offers an OpenLayers.Layer.Bing class, which brings us the possibility to add Bing imagery in our projects.
Bing Maps requires you to register as a consumer user. Once registered, you will get an API key needed to initialize the OpenLayers.Layer.Bing layer and that will be used with every request to authenticate you against the Bing Maps service.
Opposite to Google Maps, Bing does not require any JavaScript code and the OpenLayers.Layer.Bing class does not act as a wrapper. Bing Maps offer a REST service to directly access tiles using your API key.
Note
You can find out how to register as a user at http://msdn.microsoft.com/en-us/library/ff428642.aspx.
In addition you can learn about Bing Maps REST Services at http://msdn.microsoft.com/en-us/library/ff701713.aspx.
At this point, it is assumed that you have an API key to be used in the next code.
In this section we will see how to use Bing imagery. To use Bing imagery, perform the following steps:
- Create an HTML file and add the OpenLayers dependencies.
- Add a
DOMelement to place the map, as follows:<div id="ch2_bing" style="width: 100%; height: 100%;"></div>
- Within a
scriptelement create the map instance and add a layer switcher control, as follows:<script type="text/javascript"> // Create the map using the specified DOM element var map = new OpenLayers.Map("ch2_bing"); map.addControl(new OpenLayers.Control.LayerSwitcher()); - Create some Bing layers, add to the map and center the map's viewport, as follows:
var bingApiKey = "your_bing_API_must_be_put_here"; var road = new OpenLayers.Layer.Bing({ name: "Road", type: "Road", key: bingApiKey }); var hybrid = new OpenLayers.Layer.Bing({ name: "Hybrid", type: "AerialWithLabels", key: bingApiKey }); var aerial = new OpenLayers.Layer.Bing({ name: "Aerial", type: "Aerial", key: bingApiKey }); map.addLayers([road, hybrid, aerial]); map.setCenter(new OpenLayers.LonLat(0, 0), 2); </script>
The main point to take into account in this recipe is that we are using Microsoft services. We request an URL using our API key and get a tile. Because of this, every Bing layer must include a key parameter while instantiating, as follows:
var bingApiKey = "your_bing_API_must_be_put_here";
var road = new OpenLayers.Layer.Bing({
name: "Road",
type: "Road",
key: bingApiKey
}); We know about the name parameter as it is common in all layers. The name parameter is used to put a descriptive name for the layer and it will be used by switcher control.
As previously mentioned, the key parameter is used on every tile request and identifies us as registered Bing consumer users.
The type parameter is necessary to specify the kind of tile we want to get from Bing Maps. Bing offers Road, Aerial, or AerialWithLabels among other types.
Note
You can find more information about Bing Maps layer types at http://msdn.microsoft.com/en-us/library/ff701716.aspx.
- The Using Google Maps imagery recipe
- The Adding WMS layer recipe
- The Understanding base and non-base layers recipe in Chapter 1, Web Mapping Basics