In previous sections, we displayed layers based on a standards compliant WMS and a custom tile cache. Online mapping (or at least the tiled map client) was largely popularized by the availability of proprietary map tile services. OpenLayers provides layer types that work with these proprietary services through their APIs.
In this section, we’ll build on the example developed in the previous section by adding a layer using tiles from Virtual Earth, and we’ll toss in a layer switcher so you can decide which layers you want visible.
Let’s add a Virtual Earth (a.k.a. bing) layer.
Tasks
In your map.html file, find where the OSM layer is added in the map initialization code. Below the map.addLayer(osm); line, add the following:
var bing = new OpenLayers.Layer.VirtualEarth("VE Streets", {
sphericalMercator: true
});
map.addLayer(bing);
Since we can’t access these tiles directly (and instead need to go through the JavaScript API that Virtual Earth provides), we need to include an additional script tag in our page. Somewhere in the <head> of your document, add the following:
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>
Now that we have more than one layer in our map, it is time to add a layer switcher that controls layer visibility. Somewhere in your map initialization code (below the part where we create the map), include the following to create a layer switcher and add it to the map:
map.addControl(new OpenLayers.Control.LayerSwitcher());
Save your changes and reload map.html in your browser: http://localhost:8080/ol_workshop/map.html
Open the Layer Switcher at the upper right-hand corner of the map view, and select “VE Streets”.
A map with a bing layer and OpenStreetMap tiles.
Your revised map.html file should look something like this:
<html>
<head>
<title>My Map</title>
<link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css">
<style>
#map-id {
width: 512px;
height: 256px;
}
.olControlAttribution {
font-size: 10px;
bottom: 5px;
right: 5px;
}
</style>
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>
<script src="openlayers/lib/OpenLayers.js"></script>
</head>
<body>
<h1>My Map</h1>
<div id="map-id"></div>
<script>
var geographic = new OpenLayers.Projection("EPSG:4326");
var mercator = new OpenLayers.Projection("EPSG:900913");
var world = new OpenLayers.Bounds(-180, -89, 180, 89).transform(
geographic, mercator
);
var barcelona = new OpenLayers.LonLat(2.17, 41.39).transform(
geographic, mercator
);
var options = {
projection: mercator,
units: "m",
maxExtent: world
};
var map = new OpenLayers.Map("map-id", options);
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
var bing = new OpenLayers.Layer.VirtualEarth("VE Streets", {
sphericalMercator: true
});
map.addLayer(bing);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(barcelona, 9);
</script>
</body>
</html>
Next we’ll move on from raster layers and begin working with vector layers.
