Book Image

OpenLayers Cookbook

Book Image

OpenLayers Cookbook

Overview of this book

Data visualization and analysis has become an important task for many companies. Understanding the basic concepts of GIS and knowing how to visualize data on a map is a required ability for many professionals today. OpenLayers is a JavaScript library to load, display, and render maps from multiple sources on web pages."OpenLayers Cookbook" teaches how to work with OpenLayers, one of the most important and complete open source JavaScript libraries.Through an extensive set of recipes, this book shows how to work with the main concepts required to build a GIS web applicationñ maps, raster and vector layers, styling, theming, and so on."OpenLayers Cookbook" includes problem solving and how-to recipes for the most common and important tasks. A wide range of topics are covered.The range of recipes includes: creating basic maps, working with raster and vector layers, understanding events and working with main controls, reading features from different data sources, styling features, and understanding the underlying architecture."OpenLayers Cookbook" describes solutions and optimizations to problems commonly found.
Table of Contents (15 chapters)
OpenLayers Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Restricting the map extent


Often, there are situations where you are interested to show data to the user but only for a specific area, which your available data corresponds to (a country, a region, a city, and so on).

In this case, there is no point in allowing the user to explore the whole world, so you need to limit the extent the user can navigate.

In this recipe, we present some ways to limit the area a user can explore.

How to do it...

  1. Create a map instance. Take a look at the couple of properties used in the constructor:

    var map = new OpenLayers.Map("ch1_restricting_view", {
        maxExtent: OpenLayers.Bounds.fromString("-180,-90,180,90"),
        restrictedExtent: OpenLayers.Bounds.fromString("-180,-90,180,90")
    });
    
  2. As always, add some layer to see content and center the view:

    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(0, 0), 2);
  3. Add the functions that will be executed when buttons are clicked:

    function updateMaxExtent() {
        var left = dijit.byId('left_me').get('value');
        var bottom = dijit.byId('bottom_me').get('value');
        var right = dijit.byId('rigth_me').get('value');
        var top = dijit.byId('top_me').get('value');      
        map.setOptions({
            maxExtent: new OpenLayers.Bounds(left, bottom, right, top)
        });
    }
    function updateRestrictedExtent() {
        var left = dijit.byId('left_re').get('value');
        var bottom = dijit.byId('bottom_re').get('value');
        var right = dijit.byId('rigth_re').get('value');
        var top = dijit.byId('top_re').get('value');
        map.setOptions({
            restrictedExtent: new OpenLayers.Bounds(left, bottom, right, top)
        });
    }

How it works...

As you have seen, the map has been instantiated using the two properties maxExtent and restrictedExtent, which are responsible for limiting the area of the map we can explore.

Although similar, these two properties have different meanings. Setting the maxExtent property limits the viewport so its center cannot go outside the specified bounds. By setting the restrictedExtent property the map itself cannot be panned beyond the given bounds.

The functions that react when buttons are clicked get the values from the input fields and apply the new values through the map.setOptions() method:

map.setOptions({
    maxExtent: new OpenLayers.Bounds(left, bottom, right, top)
});

We can pass the same properties we use when creating a new OpenLayers.Map instance to the map.setOptions() method and it will take care to update them.

There's more...

Limiting the map extent is not the only way to limit the information we show to the user. The layers have also similar properties to filter or limit the information they must render.

See also

  • The Moving around the map view recipe