OpenLayers – Using Different Levels of Detail on Different Zoom Levels

cartographyopenlayers-2

I want display different detail(layers) on different zoom level on OpenLayers map. I mean when zoom in should display lot of layers and when zoom out those unsuitable layers should hide automatically. Different layers should display on different zoom level ,not using layer switcher.

Can this do using OpenLayers?

If not what is the open source solution?
If yes, pls give some example or links to get some idea

Thanks for reading and answering

Best Answer

you can do this with some programmatic way as registering map with zoomend :

eventListeners

{Object} If set as an option at construction, the eventListeners object will be registered with .

EVENT_TYPES

{Array(String)} Supported application event types. Register a listener for a particular event with the following syntax:

map.events.register(type, obj, listener);

Listeners will be called with a reference to an event object. The properties of this event depends on exactly what happened.

Solution Code:

var layer1 = new OpenLayers.Layer.WMS( "OpenLayers WMS",
        "http://vmap0.tiles.osgeo.org/wms/vmap0",
        {layers: 'basic'}, {'displayInLayerSwitcher':false} );

var layer2 = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
    "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
    {layers: "landsat7"}, {'isBaseLayer': false});

var layer3 = new OpenLayers.Layer.WMS( "DM Solutions Demo",
    "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
    {layers: "bathymetry,land_fn,park,drain_fn,drainage," +
             "prov_bound,fedlimit,rail,road,popplace",
     transparent: "true", format: "image/png" });


layer2.setVisibility(false);
layer3.setVisibility(false);

map.addLayers([layer1, layer2, layer3]);

map.events.register('zoomend', this, function (event) {
        var zLevel = map.getZoom();     

        if( zLevel == 13 || zLevel == 14 || zLevel == 15  )
        {
            layer2.setVisibility(true);
        }
        if( zLevel == 16 || zLevel == 17 || zLevel == 18)
        {
            layer2.setVisibility(false);
            layer3.setVisibility(true);
        }

    });

i hope it helps you...

Related Question