This recipe will make use of every other recipe in this chapter and build on them. We are going to make an interactive map with four layers on it. Two maps, the Canadian provinces from the previous recipe and a layer with some Canadian cities. We will also add a control to show or hide the individual layers.
Since this recipe is going to make use of everything in the previous recipes, it is advised to read the beginning of this chapter.
The following are the steps required to add multiple layers to a map:
- Start by generating the data. Use the region data from the previous recipe and we will create data for Canadian cities using the following site as reference, http://www.infoplease.com/ipa/A0001796.html. The following code snippet shows you how to store one city:
dataCity.push( new LongLat("Calgary", new Coordinate("W", 114, 1), new Coordinate("N", 51, 1))); - Instantiate a
Mapclass just as we have been doing this entire chapter. - Create the two
Binglayers, one as a road map and the other as an aerial map. - Go over to the region data and create the visuals for the provinces that will go into our region layer.
- Create the last layer: the city layer. Much like the Adding points of interest to a map recipe, where we added points of interest to a map, here our markers will represent cities. Create the class
CityMarkerto be the visual forCustomMarkers. - Add a
LayerManagercontrol so that we can turn on and off different layers on our map. We add it as shown in the following code snippet:_map.addControl(new LayerManager());
What we want to create here is a map that has multiple layers of information that you can toggle on and off. To do so we will create four layers. The two base layers will be maps from Bing. The map that is going to be beneath all the others is the aerial one. The second map will be the road map. You should notice that we gave the road map an alpha of 0.6 so that we can see the map under it a bit. By playing with the alpha you can give a different look to your background layer.
Another point to notice is that when you create a Bing map layer, you don't need to give it a layerName value or an identifier like other layers. This will actually cause problems with the LayerManager control that we will add later on. To solve these problems, you can manually set the layerName value and the identifier yourself as shown in the following code snippet:
bing.layerName = "Bing Aerial"; bing.identifier = "Bing Aerial";
Note that you have to use "Bing Aerial" and "Bing Road" for their respective layers as other Strings will generate errors with the LayerManager control.
We are ready to add our third layer, the region layer that we created in the previous recipe.
The last layer will hold the city marker for some cities in Canada. The CityMarker class shows how to use DisplayObject, in this case a Sprite class, to make a marker. This marker is even interactive as it displays the name of the city as the user rolls over it. In order to make this work properly, we modified the CustomMarker class in its draw function. We removed the fact that it was centering the marker as it was causing problems when we added and removed the label. Instead we use the offset parameters to center our marker.
Finally step 6 shows how to add a LayerManager so that the user can control what data is displayed on the map.
The LayerManager control is useful but you could make a better one.
The LayerManager control provided by OpenScales is useful and quick to get on a map, but it can be quite cumbersome to use (the sliders are not that smooth). By promoting the layers to class members (now they are only local variables) you could easily create your own LayerManager control that could better suit you needs.