This recipe will show how to display a map using the API found at http://www.openscales.org.
Download the latest library code for OpenScales from their website. It is better to download it directly from their repository: https://bitbucket.org/gis/openscales/downloads, as the download link on their homepage isn't always up-to-date.
The following are the steps needed to show an OpenScales map:
- Instantiate the map:
_map = new Map(); _map.size = new Size(1200, 700); //this is the area in pixel that will be shown on the screen _map.center = new Location(-73.98,40.77, "EPSG:4326"); //these are longitudes and latitudes coordinates _map.resolution = new Resolution(100, "EPSG:900913"); _map.maxResolution = new Resolution(10000, "EPSG:900913"); _map.minResolution = new Resolution(2, "EPSG:900913");
- Create the layers that will be inside this map:
var mapnik:Mapnik=new Mapnik("Mapnik"); //_map.addLayer(mapnik); var bing:Bing = new Bing("Ar3-LKk-acyISMevsF2bqH70h21mzr_FN9AhHfi7pS26F5hMH1DmpI7PBK1VCLBk"); _map.addLayer(bing); bing = new Bing("Ar3-LKk-acyISMevsF2bqH70h21mzr_FN9AhHfi7pS26F5hMH1DmpI7PBK1VCLBk","Aerial"); //_map.addLayer(bing); - Add some controls to interact with the map:
_map.addControl(new WheelHandler()); _map.addControl(new DragHandler()); _map.addControl(new Pan(new Pixel(10,10)));
- Add the map to the stage:
addChild(_map);
For this recipe and all recipes using 2D maps, we decided to use OpenScales, available at http://www.openscales.org. Google Maps are probably the most used online maps but they decided to deprecate their ActionScript 3 API. OpenScales is an abstraction over multiple online mapping solutions such as OpenStreetMap and Bing, and we thought that this would be a sturdy API to use.
As we said, OpenScale abstracts the map concept to apply it to any solution. If you look at the first step, we create a Map instance, but if you only do this, nothing will show up when you compile. The Map class is only a holder for visual layers that can be real maps (from other services such as Bing) or markers and indications.
After we created the Map class, we can start setting its properties. Setting the size is pretty straightforward, but setting the center of the map and the zoom level can be trickier. You can see, in the code for both those properties, a strange String value that starts with EPSG. This string tells the API what kind of unit you are using (well it is a bit more complicated than this; it actually indicates what projection you are using, but that is outside the scope of this book). The EPSG code 4326 indicates that you are using degrees and seconds for your longitude and latitudes while the code 900913 (notice how the numbers seems to spell the name of its creator, that is, GOOGLE) uses meters as unit.
To set the zoom level, use the resolution property as shown in the code. We use the minResolution and maxResolution methods to restrict how the user will be able to zoom.
In step 2,
we added layers to our map. In the code you can see that we created three layers but that we are using just one. This was done to show you that we can use multiple maps. In this instance we use OpenStreetMap (Mapnik in the code) and two variations of the Bing map. You can uncomment the lines where we add the other layers to see what they look like. As a side note if you are going to use Bing maps, you should get your own API key; the following page instructs you how to do it: http://msdn.microsoft.com/en-us/library/ff428642.aspx.
Lastly, in step 3 we add the controls to let the user interact with the map. You don't have to do this; you could just zoom to the correct resolution and not allow the user to change the map. That way you can make sure he always sees what you want to show. In the case of our example, we let the user drag the map, use the mouse wheel to zoom in and out, and add arrows to let him pan.
The OpenScales API offers many options such as creating your own controls and using different maps.
The OpenScale library comes with some basic controls implemented for panning and zooming, but they are somewhat simple and probably not styled with the proper branding. You could easily create your own controls that could animate or control the map exactly as you want it. To do so just create your own classes for those controls and use the Map class API to modify the map.
This recipe show how to use three different maps: OpenStreetMap, Bing road, and Bing Aerial. OpenScales APIs have many more maps. The following is the code to use a map from NASA:
var nasa:WMSC = new WMSC("Nasa", "http://openscales.org/geoserver/ows", layers = "bluemarble")Go and explore the OpenScales API to find many more.