[GIS] How to zoomToExtent and then zoom out

html5javascriptopenlayers-2

I use openlayers 2.12

I use HTML5's geolocation API to get the coords and then I insert them in a layer as feature (point). After that, I zoom in , since the layer has no other feature.

map.zoomToExtent(geoloc.getDataExtent());

geoloc is the name of the layer…

My problem is, how do I zoom-out automatically after the zoomToExtent?

Because the map zooms in too much and I can see just the point and very little details. It would be more user-friendly to zoom out a bit

Thanks

Best Answer

If you want to ZoomTo a specific ZoomLevel , you can use Map.zoomTo like this:

map.zoomTo(level); \\where level is an integer, indicating the zoom level

If you just want to Zoom out one level, you can use Map.zoomOut like this:

map.zoomOut()

Related Solutions

OpenLayers Canvas Renderer Performance Issues – Redraws All Features

I can confirm that OL Canvas renderer redraws the whole layer when even a single feature needs to be redrawn. The exact point of the sources where this is implemented is this one in drawFeature.

This has probably to do with the fact that the canvas is simply a bitmap so redrawing on top of it can produce artifacts if the new image is not perfectly placed on top of the old one (this could happen due to rounding and antialiasing, but this is just me speculating).

Workarounds:

Use the SVG renderer which does not exhibit the redraw behavior on feature selection
Or add another Vector layer on top just for the purpose of highlighting features. Hook into the SelectFeature control onSelect event so that the selected feature is added to this highlight layer

@tomfumb , as per your kind request here's the snippet:

var selectControl = new OpenLayers.Control.SelectFeature(
  layer, {
     clickout: true, multiple: false, hover: false, box: false,
     onBeforeSelect: function(feat) {
        // add code to add feature to highlight layer
        return false;
     },
     onUnselect: function(feat) {
        // add code to remove feature from highlight layer
     }
  }
);

OpenLayers – Using Different Levels of Detail on Different Zoom Levels

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...

Best Answer

Related Solutions

OpenLayers Canvas Renderer Performance Issues – Redraws All Features

OpenLayers – Using Different Levels of Detail on Different Zoom Levels

Related Question