When you create a map to visualize data, there are some important things you need to take into account: projection to use, available zoom levels, the default tile size to be used by the layer requests, and so on.
Most of these important things are enclosed in the so-called map properties and, if you work in the allOverlays mode, you need to take them specially into account.
This recipe shows you how to set some of the most common map properties.
Before you continue, it is important to note that instances of the OpenLayers.Map class can be created in three ways:
- Indicating the identifier of the DOM element where the map will be rendered:
var map = new OpenLayers.Map("map_id"); - Indicating the identifier of the DOM element and also indicating a set of options:
var map = new OpenLayers.Map("map_id", {some_options_here}); - Only indicating a set of options. This way we can later set the DOM element where the map will be rendered:
var map = new OpenLayers.Map({some_options_here});
Perform the following steps:
- Create a DOM element to render the map:
<div id="ch1_map_options" style="width: 100%; height: 100%;"></div>
- Define some map options:
var options = { div: "ch1_map_options", projection: "EPSG:4326", units: "dd", displayProjection: new OpenLayers.Projection("EPSG:900913"), numZoomLevels: 7 }; - Create the map by passing
options:var map = new OpenLayers.Map(options);
- Add the
MousePositioncontrol to see the mouse position over the map:map.addControl(new OpenLayers.Control.MousePosition());
- Add a WMS layer and set the map view on some desired place:
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic", "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' }); map.addLayer(wms); map.setCenter(new OpenLayers.LonLat(-100, 40), 5);
In this case we have used five map options to initialize our OpenLayers.Map instance.
We have used the
div option to pass the identifier of the DOM element where the map will be rendered: div: "ch1_map_options".
The
projection option is used to set the projection used by the map to render data from layers: projection: "EPSG:4326". Take into account it must be a string with the projection code. On other classes or options it can also be an OpenLayers.Projection instance.
There are some implications with the map's projection. Firstly, the tiles to fill WMS layers will be requested using the map's projection, if no other projection is explicitly used by the layer. So you need to be sure the WMS server accepts the projection. Secondly, data from vector layers will be translated from the specific projection of every vector layer to the map's projection, so you will need to set the vector layer's projection options while creating them.
Note
For translations other than EPSG:4326 and EPSG:900913, you need to include the Proj4js project (http://proj4js.org) in your web application.
Teaching map projections is beyond the scope of this book. A great description can be found on Wikipedia (http://en.wikipedia.org/wiki/Map_projection).
EPSG codes are a way to name and classify the set of available projections. The site Spatial Reference (http://spatialreference.org) is a great place to find more information about them.
The units option specifies that the units used by the map are decimal degrees: units: "dd". This option is related to some resolution options.
The
displayProjection option allows us to specify the projection that must be used to show the mouse position: displayProjection: new OpenLayers.Projection("EPSG:900913"). In this case, our map is in the EPSG:4326 projection, also known as WGS84, with degree units but we show mouse position in EPSG:900913, also known as
Spherical Mercator, which is in meter unit coordinates.
Finally, the numZoomLevels sets the number of available zoom levels the user can change. A value of 7 means the user can go from zoom level 0 to zoom level 6.
Imagery from sources such as Google Maps or OpenStreetMap are special cases where the pyramid of images is previously created with the Spherical Mercator projection – EPSG:900913. This means you can't set the projection when requesting tiles because it is implicit.
If you put a layer in a different projection other than the one used by the map, it will be automatically disabled.
- The Understanding base and non-base layers, recipe
- The Managing map's stack layers, recipe
- The Managing map's controls, recipe
- The Working with projections, recipe in Chapter 8, Beyond the Basics.