Understanding base and non-base layers

One of the first things you need to have clear when working with OpenLayers is the base layer concept.

A base layer is a special kind of layer, which is always visible and determines some map properties such as projection and zoom levels.

A map can have more than one base layer but only one of them can be active at a time.

In addition, if you add more than one flagged base layer to the map, the first base layer added will be used as the map's active base layer.

This recipe will show you how to add layers to the map flagging them to be base layers. We are going to create a page with two maps side-by-side and every map will have a layer switcher control that allows you to control the map layers.

Getting ready

We assume you have created an index.html file and included the OpenLayers library as we have seen in the Different ways to include OpenLayers recipe.

How to do it...

1. Start by creating the necessary HTML code to have both our maps side-by-side:

   <table style="width: 100%; height: 100%;"> 
       <tr> 
           <td> 
               <p>Map with one non base layer:</p> 
               <div id="ch01_base_nonbase_map_a" style="width: 100%; height: 500px;"></div> 
           </td> 
           <td> 
               <p>Map with two base layers</p> 
               <div id="ch01_base_nonbase_map_b" style="width: 100%; height: 500px;"></div> 
           </td> 
       </tr> 
   </table>

2. After this, add a script element (<script type="text/javascript"></script>) with the necessary code to initialize every map. The map on the left will contain two layers, one base layer and one non-base layer:

   // 
   // Initialize left map 
   // 
       
   // Create the map using the specified DOM element 
   var map_a = new OpenLayers.Map("ch01_base_nonbase_map_a"); 
   // Add a WMS layer 
   var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic", "http://vmap0.tiles.osgeo.org/wms/vmap0", 
   { 
       layers: 'basic' 
   }); 
   map_a.addLayer(wms); 
   // Add a WMS layer 
   var topo = new OpenLayers.Layer.WMS("USA Topo Maps", "http://terraservice.net/ogcmap.ashx", 
   { 
       layers: "DRG" 
   }, 
   { 
       opacity: 0.5, 
       isBaseLayer: false 
   }); 
   map_a.addLayer(topo); 
   // Add LayerSwitcher control 
   map_a.addControl(new OpenLayers.Control.LayerSwitcher()); 
              
   // Set view to zoom maximum map extent 
   // NOTE: This will fail if there is no base layer defined 
   map_a.setCenter(new OpenLayers.LonLat(-100, 40), 5); 
   

3. The map on the right will contain two base layers:

   // 
   // Initialize right map 
   // 
       
   // Create the map using the specified DOM element 
   var map_b = new OpenLayers.Map("ch01_base_nonbase_map_b"); 
   // Add a WMS layer 
   var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic", "http://vmap0.tiles.osgeo.org/wms/vmap0", 
   { 
       layers: 'basic' 
   }); 
   map_b.addLayer(wms); 
   // Add a WMS layer 
   var topo = new OpenLayers.Layer.WMS("USA Topo Maps", "http://terraservice.net/ogcmap.ashx", 
   { 
       layers: "DRG" 
   }); 
   map_b.addLayer(topo); 
   // Add LayerSwitcher control 
   map_b.addControl(new OpenLayers.Control.LayerSwitcher()); 
              
   // Set view to zoom maximum map extent 
   // NOTE: This will fail if there is no base layer defined 
   map_b.setCenter(new OpenLayers.LonLat(-100, 40), 5);

How it works...

Let's take a look at the explanation for the map on the left. The first thing we have done is the creation of an OpenLayers.Map instance that will be rendered in the div element prepared for it, on the left side:

var map_a = new OpenLayers.Map("ch01_base_nonbase_map_a"); 

Next, we have created two layers and added them to the map. The magic to make the second layer a non-base layer comes with the properties specified in the constructor:

var topo = new OpenLayers.Layer.WMS("USA Topo Maps", "http://terraservice.net/ogcmap.ashx", 
{ 
    layers: "DRG" 
}, 
{ 
    opacity: 0.5, 
    isBaseLayer: false 
}); 

In OpenLayers, all layer classes are inherited from the base class OpenLayers.Layer. This class defines some properties common for all layers, such as opacity or isBaseLayer.

The Boolean isBaseLayer property is used by the map to know if a layer must act as a base or non-base layer.

Note

Non-base layers are also called overlays.

As you can imagine, the opacity property is a float value ranging from 0.0 to 1.0 and specifies the opacity of the layer. We have set it to 50% of the opacity to allow view through the overlay layer, that is, to be able to see the base layer.

For the right-hand map, we have added two layers without any specific property. This, by default, makes the WMS layer a base layer.

If you expand the layer switcher control, you will see that on the left map you can show/hide the overlay layer but you can't hide the base layer. In contrast, in the right map, both are base layers and they are mutually exclusive, which means only one can be active at a time.

There's more...

When you play with the layer switcher control, an internal call is made to the map's setBaseLayer(newBaseLayer) method. This method is responsible for changing the active base layer used by the map.

In addition to the specify properties at construction time, you can also use the setter methods setOpacity(opacity) and setIsBaseLayer(isBaseLayer) to change the values at runtime.

See also

• The Avoiding the need of a base layer recipe

• The Managing map's stack layers recipe