a web-map with OpenLayers (part 3)

In the first two parts in our series on “getting to know openlayers” we concentrated on the question on layer consumption in form of basemaps and labels. We will enhance this a little in this tutorial. First of all we will use the famous modis products to serve our webmap, we will adjust the visible area of our web-map, set different parameters regarding the initial look and feel of our web-map and distribute it through our webpage. if you are not familiar with the initial frame in our html-document see this page.
First of all we will use this famous blue marble image set as our basemap:

var basemap = new OpenLayers.Layer.WMS(
                'Global Imagery',
                'http://maps.opengeo.org/geowebcache/service/wms',
                {layers: 'bluemarble'},
                {isBaseLayer: true}
                );

We will display a second layer with adjusted options. Second we will call just a subset of layers of the available wms as we want to display country and city names only. setting the opacity to 0.3 will increase visibility of the underlying features:

        var layer_labels = new OpenLayers.Layer.WMS(
            'Labels',
            'http://vmap0.tiles.osgeo.org/wms/vmap0',
            {layers: 'clabel,ctylabel')
			transparent: true},
            {visibility: false, opacity:0.3}
);

We have seen some of these options in previous examples. But lets go on with more options. Lets introduce a possible to change visibvility in the layerswitcher and set it to false. The layer itself will only show up if you have zoomed nearer than the given value. The possible zoom steps and scales depend on the base layer.

        var boundary = new OpenLayers.Layer.WMS(
            'State Line Layer',
            'http://labs.metacarta.com/wms/vmap0',
            {layers: 'stateboundary',
			transparent: true},
            {displayInLayerSwitcher: false, 
			minScale: 10000000}
        );

At the moment the drawing of boundaries when zooming is static. you can adjust this by using the “transitionEffect”:

        var boundary = new OpenLayers.Layer.WMS(
            'State Line Layer',
            'http://labs.metacarta.com/wms/vmap0',
            {layers: 'stateboundary',
			transparent: true},
            {displayInLayerSwitcher: false, 
			minScale: 10000000,
			transitionEffect:'resize'
}
        );

And another layer which will provide some informations on infrastructure:

        var roads = new OpenLayers.Layer.WMS(
            'Primary Roads',
            'http://labs.metacarta.com/wms/vmap0',
            {layers: 'priroad',
		transparent: true},
            {displayInLayerSwitcher: true, 
			minScale: 8000000
}
        );

And in the end: add everything to your map:

map.addLayers([basemap,boundary,layer_labels,roads]);

And one great thing in the end. Let us assume you want to show some area first. You can adjust the initial view with the function setCenter. In the following line we will concentrate on 20°, 52°N and we will set the initial zoom level on “5”:

map.setCenter(new OpenLayers.LonLat(20, 52), 5);

Enjoy the example3 here: