OpenLayers Cookbook

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.

OpenLayers Cookbook

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Web Mapping Basics

Introduction

Creating a simple full screen map

Different ways to include OpenLayers

Understanding base and non-base layers

Avoiding the need of a base layer

Playing with the map's options

Managing map's stack layers

Managing map's controls

Moving around the map view

Restricting the map extent

Adding Raster Layers

Introduction

Using Google Maps imagery

Using Bing imagery

Adding WMS layer

Wrapping the date line options

Changing the zoom effect

Changing the layer opacity

Using WMS with single tile mode

Buffering the layer data to improve the map navigation

Creating an image layer

Setting the tile size in WMS layers

Working with Vector Layers

Introduction

Adding a GML layer

Adding a KML layer

Creating features programmatically

Reading and creating features from a WKT

Adding markers to the map

Using point features as markers

Working with popups

Adding features from a WFS server

Using the cluster strategy

Filtering features in WFS requests

Reading features directly using Protocols

Working with Events

Introduction

Creating a side-by-side map comparator

Implementing a work in progress indicator for map layers

Listening for vector layer features' events

Listening for non-OpenLayers events

Adding Controls

Introduction

Adding and removing controls

Adding a navigation history control

Working with geolocation

Placing controls outside the map

Editing features on multiple vector layers

Modifying features

Measuring distances and areas

Getting feature information from data source

Getting information from the WMS server

Theming

Introduction

Understanding how themes work using the img folder

Understanding how themes work using the theme folder

Delimiting tiles in a raster layer

Creating a new OpenLayers theme

Starting actions outside the controls

Styling Features

Introduction

Styling features using symbolizers

Improving style using StyleMap and the replacement of feature's attributes

Playing with StyleMap and the render intents

Working with unique value rules

Defining custom rules to style features

Styling clustered features

Beyond the Basics

Introduction

Working with projections

Retrieving remote data with OpenLayers.Request

Creating a custom control

Creating a custom renderer

Selecting features intersecting with a line

Making an animation with image layers

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Managing map's controls

OpenLayers comes with lots of controls to interact with the map: pan, zoom, show overview map, edit features, and so on.

In the same way as layers, the OpenLayers.Map class has methods to manage the controls attached to the map.

How to do it...

Follow the given steps:

Create a new HTML file and add the OpenLayers dependencies.

Now, add the required code to create the buttons and div element to hold the map instance:

<div class="sample_menu" dojoType="dijit.MenuBar">
    <span class="title">Controls: </span>
    <div dojoType="dijit.form.ToggleButton" iconClass="dijitCheckBoxIcon" onChange="updateMousePosition">MousePosition</div>
    <div dojoType="dijit.form.ToggleButton" iconClass="dijitCheckBoxIcon" onChange="updatePanPanel">PanPanel</div>
    <div dojoType="dijit.form.ToggleButton" iconClass="dijitCheckBoxIcon" onChange="updateZoomPanel">ZoomPanel</div>
</div>
<!-- Map DOM element -->
<div id="ch1_managing_controls" style="width: 100%; height: 500px;"></div>

Within the script element section, create the map instance:

var map = new OpenLayers.Map("ch1_managing_controls", {
    controls: [
    new OpenLayers.Control.Navigation()
    ]
});

Add some layers to the map and center the view:

var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic", "http://vmap0.tiles.osgeo.org/wms/vmap0",
{
    layers: 'basic'
},
{
    wrapDateLine: false
});
map.addLayer(wms);
// Center the view
map.setCenter(OpenLayers.LonLat.fromString("0,0"),3);

Finally, add the actions code associated to the buttons:

function updateMousePosition(checked) {
    if(checked) {
        map.addControl(new OpenLayers.Control.MousePosition());
    } else {
        var controls = map.getControlsByClass("OpenLayers.Control.MousePosition");
        console.log(controls);
        map.removeControl(controls[0]);
    }
}
function updatePanPanel(checked) {
    if(checked) {
        map.addControl(new OpenLayers.Control.PanPanel());
    } else {
        var controls = map.getControlsByClass("OpenLayers.Control.PanPanel");
        map.removeControl(controls[0]);
    }
}
function updateZoomPanel(checked) {
    if(checked) {
        // Place Zoom control at specified pixel
        map.addControl(new OpenLayers.Control.ZoomPanel(), new OpenLayers.Pixel(50,10));
    } else {
        var controls = map.getControlsByClass("OpenLayers.Control.ZoomPanel");
        map.removeControl(controls[0]);
    }
}

How it works...

Every button action function checks if the toggle button is checked or unchecked and depending on the value we add or remove the control to the map:

if(checked) {
    // Place Zoom control at specified pixel
    map.addControl(new OpenLayers.Control.ZoomPanel(), new OpenLayers.Pixel(50,10));
} else {
    var controls = map.getControlsByClass("OpenLayers.Control.ZoomPanel");
    map.removeControl(controls[0]);
}

Adding a control is fairly simple through the map.addControl() method, which, given a control instance—and, optionally a OpenLayers.Pixel instance—adds the control to the map at the specified position.

Note

Usually, a control position is controlled by modifying the top and left values in the CSS class used by the control. If you use a OpenLayers.Pixel value to position the control, then that value will overwrite the CSS ones.

To remove a control we need to have a reference to the instance that has to be removed. The method map.getControlsByClass() returns an array of controls of the specified class and helps us to get a reference to the desired control. Next, we can remove it with map.removeControl().

There's more...

Note, in this recipe we have centered the map's view passing a OpenLayers.LonLat instance created in a different way. Instead of using the new operator, we have used the method OpenLayers.LonLat.fromString, which created a new instance from a string:

map.setCenter(OpenLayers.LonLat.fromString("0,0"),3);

In addition, the map instance created in this recipe has initialized with only one control, OpenLayers.Control.Navigation(), which allows us to navigate the map using the mouse:

var map = new OpenLayers.Map("ch1_managing_controls", {
    controls: [
    new OpenLayers.Control.Navigation()
    ]
});

Note

Passing an empty array to the controls property creates a map instance without any control associated with it. In addition, without specifying the controls property, OpenLayers creates a set of default controls for the map, which includes the OpenLayers.Control.Navigation and OpenLayers.Control.PanZoom controls.

OpenLayers Cookbook

OpenLayers Cookbook

Overview of this book

Related Content you might be interested in

Current Title:

OpenLayers Cookbook

Managing map's controls

How to do it...

How it works...

Note

There's more...

Note

See also