Open Layers.2.10.Beginners.Guide

User Manual: Pdf

Open the PDF directly: View PDF .
Page Count: 372

Download
Open PDF In Browser	View PDF

OpenLayers 2.10
Beginner's Guide

Create, optimize, and deploy stunning cross-browser web
maps with the OpenLayers JavaScript web-mapping library

Erik Hazzard

OpenLayers 2.10
Beginner's Guide

Copyright © 2011 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system,
or transmitted in any form or by any means, without the prior written permission of the
publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the
information presented. However, the information contained in this book is sold without
warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers
and distributors will be held liable for any damages caused or alleged to be caused directly or
indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the
companies and products mentioned in this book by the appropriate use of capitals. However,
Packt Publishing cannot guarantee the accuracy of this information.

First published: March 2011

Production Reference: 1110311

Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-849514-12-5
www.packtpub.com

Cover Image by Jose Argudo (josemanises@gmail.com)

Credits
Author
Erik Hazzard
Reviewers
Xurxo Méndez Pérez
Alan Palazzolo
Ian Turton

Editorial Team Leader
Aanchal Kumar
Project Team Leader
Priya Mukherji
Project Coordinator
Jovita Pinto

Couzic Mikael
Proofreader
Acquisition Editor

Steve Maguire

Usha Iyer
Graphics
Development Editor

Nilesh Mohite

Maitreya Bhakal
Production Coordinator
Technical Editors

Adline Swetha Jesuthas

Pallavi Kachare
Cover Work
Indexers
Hemangini Bari
Rekha Nair

Adline Swetha Jesuthas

About the Author
Erik Hazzard is a web developer—designer, Open Source advocate, and VI user. He
loves to learn, teach, and occasionally blogs on his website at http://vasir.net/.
As a professional web developer of five years, Erik specializes in Python and JavaScript,
using open source software whenever possible. When he's not developing web applications,
he's often developing or designing video games.
He works at FREAC (Florida Resources and Environmental Analysis Center), a great place
with great people that does all kinds of GIS and web development work.

I'd like to thank the developers of OpenLayers, who continually do a
fantastic job of developing the best web-mapping framework. I'd like to
also thank my friends and mentors Ian Johnson and David Arthur for giving
me the confidence and support I needed to get into web development.
I'd like to thank Georgianna Strode and Stephen Hodge for their guidance,
advice, and providing me with the opportunity to become a better web
developer. I could not have written this book without the help of the great
team at Packt; I hope every author can be as lucky as me to have such an
excellent group of people to work with. I'd like to thank my parents for
their never ending support. Lastly, I'd like to thank my love, Alisen, for her
understanding and taking the time to help me make sure that the book is
as easy to read as possible.

About the Reviewers
Xurxo Méndez Pérez was born in 1983 in Ourense, a little town in the south of Galicia,
Spain. He lived there until he started the study for a degree in IT in the University of A
Coruña, which finalized in 2008.
For the last two years he has been working, at the Computer Architecture Group of the
University of A Coruña developing GIS applications (making intensive use of many OGC
standards) like Sitegal and SIUXFor (web GIS based applications to manage land properties
and promote their good uses in the Galician region), MeteoSIX (a GIS system that provides
access to geolocated observed and forecasted meteorological data in Galicia) and others.
He also has large experience (3+ years) as a developer of mobile applications, having played
first with JavaME, but nowadays he specializes in Google Android, with more than a dozen
developed applications, some of them combining concepts like GIS and geolocation, real
time responsiveness, and multiuser needs.

Alan Palazzolo has been building web applications big and small for over five years,
most of which have been with the open source, content management system Drupal, and
along the way has picked up some experience in data visualization and mapping. He is a
strong believer and advocate for the open source methodology in software and in life. He
was involved in starting a Free Geek chapter in the Twin Cities, and constantly tries to use
technology, and specifically the Internet, to enhance the lives of those that are less fortunate
than most.

Ian Turton is a geography researcher at the Pennsylvania State University. He became a
geographer by accident nearly 20 years ago and hasn't managed to escape yet. During that
period he was a co-founder of the GeoTools open source Java toolkit that is now used as
the basis of many geographic open source projects. He continues to serve on the Project
Steering Committee for the project as well as committing new code and patches. He has also
taught the very popular course "Open Web Mapping" using open standards and open source
programs at the Pennsylvania State University and the University of Leeds.

www.PacktPub.com
Support files, eBooks, discount offers, and more
You might want to visit www.PacktPub.com for support files and downloads related to your
book.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub
files available? You can upgrade to the eBook version at www.PacktPub.com and as a print
book customer, you are entitled to a discount on the eBook copy. Get in touch with us at
service@packtpub.com for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a
range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book
library. Here, you can access, read and search across Packt's entire library of books.

Why Subscribe?
‹‹

Fully searchable across every book published by Packt

‹‹

Copy and paste, print and bookmark content

‹‹

On demand and accessible via web browser

Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access
PacktLib today and view nine entirely free books. Simply use your login credentials for
immediate access.

Table of Contents
Preface
Chapter 1: Getting Started with OpenLayers
What is OpenLayers?
Why use OpenLayers?
What, technically, is OpenLayers?
Client side
Library
Anatomy of a web-mapping application
Web map client
Web map server
Relation to Google / Yahoo! / and other mapping APIs
Layers in OpenLayers
What is a Layer?
The OpenLayers website
Time for action – downloading OpenLayers
Making our first map
Time for action – creating your first map
How the code works
Understanding the code—Line by line
JavaScript object notation
Behind the scenes—Object Oriented Programming (OOP)
Interaction happens with objects
MadLibs
Time for Action – play MadLibs
Programming with OOP
Subclasses
Now what?
API docs

1
7
8
8
8
8
9
9
10
10
11
11
12
12
13
15
15
17
18
21
24
25
25
25
26
26
27
28

Table of Contents

Where to go for help
This book's website
Mailing lists
IRC
OpenLayers source code repository
Summary

28
28
28
29
29
30

Chapter 2: Squashing Bugs With Firebug
What is Firebug?
Setting up Firebug
Time for Action – downloading Firebug
Firebug controls
Panels

31
32
32
32
34
34

Console panel
HTML panel
CSS panel
Script panel
DOM panel
Net panel

35
35
37
37
38
38

Panel conclusion
Using the Console panel
Time for Action – executing code in the Console
Time for Action – creating object literals
Object literals
Time for Action – interacting with a map
API documentation
Summary

Chapter 3: The 'Layers' in OpenLayers

41
42
42
43
44
45
47
47

49

What's a layer?
Layers in OpenLayers
Base layer
Overlay layers
Time for Action – creating a map with multiple layers
Creating layer objects
Layer.WMS class
WMS layer parameters:

50
50
51
51
51
54
55
55

Parameters versus arguments
Time for Action – configuring the options parameter
Configuring layer options
wms_state_lines layer options
Scale dependency

57
58
61
61
61

wms_layer_labels layer options

62

The visibility property

62
[ ii ]

Table of Contents
The opacity property

62

Map tiles
Many images make up a map
Available layer properties
Data types
OpenLayers.Layer class properties

62
63
65
66
66

Modifying layer properties

71

The OpenLayers.Layer class
Subclasses
Layer Class—Sub and super classes
Other layer types
Layer.ArcGIS93Rest
Layer.ArcIMS
Layer.Google
Time for Action – creating a Google Maps layer
Layer.Grid
Layer.Image
Time for Action – using the image layer
Image layer parameters
Layer.MapGuide
Layer.TileCache
Layer.Vector
Layer.VirtualEarth
Layer.WFS
Layer.WMS
Layer.Yahoo
Accessing layer objects
Time for Action – accessing map.layers
Time for Action – accessing layer objects in Firebug
Accessing layer properties
map.layers
Storing references to layer objects

71
71
72
72
72
73
73
73
75
76
76
77
78
79
79
79
80
80
80
80
80
82
82
82
83

Layer class methods
Time for Action – defining a global layer object variable
Layer class method definitions
Summary

85
85
86
88

Chapter 4: Wrapping Our Heads Around Projections

89

Map projections
Why on earth are Projections used?
Projection characteristics

90
90
90

Area

90
[ iii ]

Table of Contents
Scale
Shape
Other characteristics

91
91
91

Types of projections

92

EPSG codes

92

Time for Action – using different projection codes
Specifying a different projection
Longitude/Latitude
Latitude
Longitude

93
94
95
96
96

Time for Action – determining LonLat coordinates
OpenLayers projection class
Creating a projection object
Parameters
Functions

96
97
97
97
98

Transforming projections
Time for Action – coordinate transforms
The Proj4js library
Time for Action – setting up Proj4js.org
Defining custom projections
Summary

99
99
100
101
102
102

Chapter 5: Interacting with Third Party APIs
Third party mapping APIs
Map mashups
OpenLayers and third party APIs
Google Maps
Differences between Google Maps version 2 and version 3
Time for Action – using Goole Maps V3 (standard way)
Creating a Google Map layer object
Google layer properties
sphericalMercator {Boolean}
type {GmapType}
V2 GMapType values

103
103
104
104
104
105
105
108
108
109
109
110

Time for Action – creating a Google Map layer with V2 (Deprecated)
Yahoo! Maps API
Time for Action – using the Yahoo! Maps Layer
Yahoo! Maps Layer class properties
Yahoo! Maps Layer types

111
113
113
115
115

Microsoft's mapping API
Time for Action – creating a Bing/Virtual Earth Layer
VirtualEarth layer class properties
Possible type values

115
115
117
118

OpenStreetMap

118
[ iv ]

Table of Contents

Time for Action – creating an OpenStreetMap Layer
Accessing your own OSM tiles
Spherical Mercator
Spherical Mercator—EPSG code
Time for Action – using Spherical Mercator
Map properties with Spherical Mercator layers
maxExtent
maxResolution
units
projection

118
119
120
120
121
122
122
122
123
123

Using Google Maps and other layers
Time For Action – creating your first mashup
WMS with Spherical Mercator/third party map layers
Summary

Chapter 6: Taking Control of Controls

123
124
127
127

129

What are controls?
Using controls in OpenLayers
Adding controls to your map
Time for Action – creating a map with no controls
Time for Action—Adding controls to a map
Adding controls by passing in an array of controls
Adding controls to map with addControl() and addControls()
Removing controls
OpenLayers.Control class
OpenLayers.Control properties
OpenLayers.Control functions
OpenLayers.Control subclasses
OpenLayers.Control.ArgParser
OpenLayers.Control.Permalink
OpenLayers.Control.Attribution
Attribution properties

130
130
130
131
132
135
135
136
136
137
137
138
138
139
139
139

Time for Action – using attributions
OpenLayers.Control.EditingToolbar
OpenLayers.Control.Graticule

140
141
141

Graticule properties

142

OpenLayers.Control.KeyboardDefaults

143

KeyboardDefaults properties

143

OpenLayers.Control.LayerSwitcher

143

LayerSwitcher properties
LayerSwitcher functions

143
144

OpenLayers.Control.MousePosition

144

MousePosition properties

144
[v]

Table of Contents

OpenLayers.Control.Navigation

145

Navigation properties

145

OpenLayers.Control.NavigationHistory

146

NavigationHistory properties
NavigationHistory functions

146
146

Time for Action – using the NavigationHistory control
OpenLayers.Control.NavToolbar
OpenLayers.Control.OverviewMap
OverviewMap properties
OverviewMap functions

146
147
147
148
150

OpenLayers.Control.PanPanel

150

PanPanel properties

151

OpenLayers.Control.PanZoom
OpenLayers.Control.PanZoomBar

151
151

PanZoomBar properties

151

OpenLayers.Control.Scale

151

Scale properties

152

OpenLayers.Control.ScaleLine

152

ScaleLine properties

152

OpenLayers.Control.ZoomPanel
Panels
Control types
Time for Action – using Panels
OpenLayers.Control.Panel

153
153
153
154
157

Panel properties
Panel functions

158
159

Now what?
Creating our own controls
OpenLayers.Control.Button

159
159
159

Button properties
Button functions

160
161

Creating a custom button
Time for Action – creating a simple button
Other control types
Process for creating other button control types

Events
Event listeners and handlers
Custom events
Creating a TYPE_TOGGLE control
Time for Action – creating a custom TYPE_TOGGLE control
Summary

[ vi ]

161
161
165
165

165
165
166
166
166
170

Table of Contents

Chapter 7: Styling Controls

171

What is CSS?
Ideas behind CSS and HTML
Editing CSS
HTML elements

172
172
172
173

HTML—IDs and classes

173

Styling HTML elements with CSS
Using CSS in your code
Time for Action – using external CSS files
Cascading Style Sheets—Inheritance
Order of inheritance
Referencing elements

174
175
176
178
178
179

OpenLayers and CSS
Styling OpenLayers—using themes
Creating your own themes

180
180
181

OpenLayers—class names and IDs

181

Time for Action – styling controls
Time for Action – styling the LayerSwitcher control
Other resources
Summary

Chapter 8: Charting the Map Class

182
186
188
189

191

The Map class
Creating a map object
Map class properties
Map properties

192
192
192
193

allOverlayers
controls
displayProjection
div

193
193
194
194

Time for Action – using the allOverlays Map property
eventListeners
fallThrough
layers
maxExtent
minExtent
restrictedExtent
numZoomLevels
Time for Action – setting zoom levels and maxExtent
Map properties—Continued
Resolutions

194
196
197
197
198
198
198
198
199
200
200

Time for Action – using resolutions array
Map/Layer property inheritance
[ vii ]

201
201

Table of Contents

Map properties discussion—Continued
maxResolution
minResolution

202
202
202

Time for Action – using Min and Max resolution
scales
maxScale
minScale
Time for Action – Using scales
panMethod
panDuration
Time for Action – working with Pan animations
projection
theme
tileSize
unit
Map functions
Control related
Time for Action – using control methods
Extent/Coordinate/Bounds related
Methods

202
204
204
204
205
206
207
207
208
208
208
208
209
209
210
210
211

Time for Action – using coordinate related functions
Layer related functions
Other functions
Doing stuff with events
Map event types
Using map events
Using the eventListeners property

213
214
214
215
216
216
217

Time for Action – using eventListeners
Using map.events.register
Event object
Time for Action – working with Map events
Multiple maps
Using multiple map objects
Time for Action – using multiple map objects
Multiple maps and custom events
Time for Action – creating a multiple map and custom event application
Summary

Chapter 9: Using Vector Layers

217
218
218
219
220
220
221
223
223
225

227

What is the Vector Layer?
What makes the Vector Layer special?

228
229

The Vector Layer is client side
[ viii ]

Table of Contents

Other uses
What is a 'Vector'?
Time for Action – creating a Vector Layer
How the Vector Layer works
How the Vector Layer is rendered
SVG
Canvas
VML

229
230
230
232
233
233
233
233

'Renderers' array
Time for Action – changing the Renderers array
Vector Layer class
OpenLayers.Layer.Vector properties
OpenLayers.Layer.Vector methods
Working with features

233
234
235
235
237
237

Time for Action – adding features
Vector Layer methods (Continued)
Time for Action – destroying features
Vector Layer methods (Continued)
Time For Action – working with feature events
Vector Layer class events
Vector Layer event types
Time For Action – using Vector Layer events
Time For Actions – working with more events
Geometry and Feature classes
Geometry class
Geometry subclasses—Theory
Geometry class methods

237
239
239
241
242
243
244
246
247
248
249
249
250

Time for Action – using Geometry class methods
Geometry subclasses
Geometry subclass methods
Feature class
How the Feature class works
Feature subclasses
Feature functions
Instantiating a feature object
Interacting with Features using Control.SelectFeature

Time For Action – using the SelectFeature control
Control.SelectFeature class
SelectFeature control properties
SelectFeature control methods

251
253
255
255
255
256
256
256
257

257
262
262
264

The Vector class, part two
Format, protocol, and strategy classes

264
265

Who invited these classes over?

265
[ ix ]

Table of Contents
Brief overview of the three classes
How these three classes interact
Example instantiation

266
267
267

Time for Action – creating a Vector Layer
Cross server requests
Using the Vector Layer without a Protocol class
Time for Action – using the Format and Strategy classes alone
Format class
Format class properties
Format class methods
Format subclasses
Strategy class
Strategy.BBOX
Strategy.Cluster
Strategy.Filter
Strategy.Fixed
Strategy.Paging
Strategy.Refresh
Strategy.Save
Summary

Chapter 10: Vector Layer Style Guide

268
269
270
270
273
273
273
274
274
274
274
275
275
275
275
276
276

277

Styling the Vector Layer
Applying styles

277
278

What are symbolizers?

278

Time For Action – applying some basic Styling
The StyleMap class
What is an 'intent'?
The Style class
Symbolizer properties
List of common symbolizer properties

279
281
281
281
282
282

Time for Action – common style examples
Remaining symbolizer properties

284
286

Attribute replacement
Time For Action – working with attribute replacement
Rules and filters
How do we follow rules?
Using addUniqueValueRules
Calling the addUniqueValueRules function
The intent parameter
The property parameter
The symbolizer_lookup parameter
The context parameter

287
287
289
289
290
290
290
290
291
291

[x]

Table of Contents

Time For Action – using addUniqueValueRules
Rules and filters
How do they work?
How do we use them?
Time for Action – using rules and filters
OpenLayers.Rule class
OpenLayers.Filter class
Filter Subclasses
Filter.Comparison
Filter.FeatureId
Feature.Logical

291
294
295
295
295
298
299
299
299
303
303

Time For Action – figuring out logical filters
Feature.Spatial

304
308

Summary

309

Chapter 11: Making Web Map Apps

311

Development strategies
Creating a web map application using Flickr
Note on APIs
Accessing the Flickr public data feeds

311
312
312
312

How we'll do it
Time For Action – getting Flickr data
Why did we do this?

313
313
314

Reducing possible errors

314

Time for Action – adding data to your map
Time for Action – extract style
Turning our example into an application
Adding interactivity
Selecting features

315
317
318
319
319

Time for Action – adding some interactivity
Using real time data with a ProxyHost
Time for Action – getting dynamic data
Wrapping up the application
Recap
The plan
Changing the URL

319
325
325
326
326
327
327

Time For Action – adding dynamic tags to your map
Deploying an application
Building the OpenLayers Library file
Always try to serve small files
Using the OpenLayers build file
Configuring the build script

327
330
330
330
331
331

Time for Action – building a Config file

332
[ xi ]

Table of Contents
Running the build script

333

Time for Action – running the Build script
Summary

Appendix: Pop Quiz Answers

333
334

335

Chapter 2: Squashing Bugs With Firebug
Chapter 3: The 'Layers' in OpenLayers
Chapter 4: Wrapping Our Heads Around Projections
Chapter 6: Taking Control of Controls
Chapter 7: Styling Controls
Chapter 8: Charting the Map Class
Chapter 9: Using Vector Layers
Chapter 10: Vector Layer Style Guide
Chapter 11: Making Web Map Apps

Index

335
335
335
335
336
336
336
336
336

337

[ xii ]

Preface
Web mapping is the process of designing, implementing, generating, and delivering maps
on the World Wide Web and its products. OpenLayers is a powerful, community driven,
open source, pure JavaScript web-mapping library. With it, you can easily create your
own web map mashup using WMS, Google Maps, and a myriad of other map backends.
Interested in knowing more about OpenLayers? This book is going to help you learn
OpenLayers from scratch.
OpenLayers 2.10 Beginner's Guide will walk you through the OpenLayers library in the easiest
and most efficient way possible. The core components of OpenLayers are covered
in detail, with examples, structured so that you can easily refer back to them later.
The book starts off by introducing you to the OpenLayers library and ends with developing
and deploying a full-fledged web map application, guiding you through every step of the way.
Throughout the book, you'll learn about each component of the OpenLayers library. You'll
work with backend services like WMS, third-party APIs like Google Maps, and even create
maps from static images. You'll load data from KML and GeoJSON files, create interactive
vector layers, and customize the behavior and appearance of your maps.
There is a growing trend in mixing location data with web applications. OpenLayers 2.10
Beginner's Guide will show you how to create powerful web maps using the best web
mapping library around.
This book will guide you to develop powerful web maps with ease using the open source
JavaScript library OpenLayers.

Preface

What you need for this book

The only thing you'll need for this book is a computer and text editor. Your operating system
will come with a text editor, and any will do, but if you are using Windows I recommend
using Notepad++ (http://notepad-plus-plus.org/), VI if you are using Linux, and
Textmate if on OSX. An Internet connection will be required to view the maps, and you'll
also need a modern web browser such as Firefox, Google Chrome, Safari, or Opera. While a
modern browser is required to get the most of the library, OpenLayers even provides support
for non standards based browsers such as Internet Explorer (even IE6, to some extent).
No knowledge of Geographic Information Systems (GIS) is required, nor is extensive
JavaScript experience. A basic understanding of JavaScript syntax and HTML / CSS will greatly
aid in understanding the material, but is not required.

What this book covers

Chapter 1: Getting Started with OpenLayers. This chapter will introduce OpenLayers and
some programming concepts behind it. It covers how to create a map, walking through
how to set up the code and configure various settings.
Chapter 2: Squashing Bugs with Firebug. This chapter will cover setting up the Firebug
plugin, which we'll use throughout the book, so that we can do simple debugging and
better understand how OpenLayers works behind the scenes.
Chapter 3: The 'Layers' in OpenLayers. Here, we'll cover one of the core classes of
OpenLayers—the Layer class. We'll discuss what a 'Layer' is, how to work with layers
and the different layer classes.
Chapter 4: Wrapping our Heads Around Projections. This chapter will cover a few basic
geography concepts and why understanding them will help us use OpenLayers. We'll also
cover projections, why they are used, and how to use them.
Chapter 5: Interacting With Third Party APIs. This chapter will focus on creating an
OpenLayers map using different third party APIs, such as Google Maps and OpenStreetMaps.
Chapter 6: Taking Control of Controls. We'll cover another core class of OpenLayers, the
Control class. We'll cover what controls are and discuss the various types of controls, along
with how to work with the events.
Chapter 7: Giving Controls Some Style. This chapter will walk through how OpenLayers uses
CSS to style controls.

[2]

Preface

Chapter 8: Charting the Map Class. This chapter will discuss another core component of
OpenLayers—the Map class. We'll learn about how to map functions and their properties,
along with how to set up multiple maps on the same page.
Chapter 9: Using Vector Layers. Here, we'll learn what a Vector layer is and how it works.
We'll also cover how to work with the data, such as KML files.
Chapter 10: Vector Layer Style Guide. In this chapter we'll cover how to style the vector
layer and how to use the Rule and Filter classes.
Chapter 11: Creating Web Map Applications. This final chapter will go over how to build
a web-mapping application from scratch, and how to use the OpenLayers build file.

Who this book is for

This book is for anyone who has any interest in using maps on their website, from hobbyists
to professional web developers. OpenLayers provides a powerful, but easy-to-use, pure
JavaScript and HTML (no third-party plug-ins involved) toolkit to quickly make crossbrowser web maps. A basic understanding of JavaScript will be helpful, but there is no prior
knowledge required to use this book. If you've never worked with maps before, this book
will introduce you to some common mapping topics and gently guide you through the
OpenLayers library. If you're an experienced application developer, this book will also serve
as a reference to the core components of OpenLayers.

How to read this book

This book is primarily designed to be read from start to finish, with chapters building on each
other and increasing in complexity. At the same time, however, the chapters are modular
so that each can also serve as reference once you've learned the material. This book should
preferably be read straight through first, of course, and then serve as a reference later.

Conventions

In this book, you will find several headings appearing frequently.

[3]

Preface

To give clear instructions of how to complete a procedure or task, we use:

Time for action – heading
1.

Action 1

2.

Action 2

3.

Action 3

Instructions often need some extra explanation so that they make sense, so they are
followed with:

What just happened?
This heading explains the working of tasks or instructions that you have just completed.
You will also find some other learning aids in the book, including:

Pop quiz – heading
These are short questions intended to help you test your own understanding.

Have a go hero – heading
These set practical challenges and give you ideas for experimenting with what you have
learned.
You will also find a number of styles of text that distinguish between different kinds of
information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "You can download it as either a tar.gz or .zip."
A block of code is set as follows:
Lines [21] to [23]
if(!map.getCenter()){
map.zoomToMaxExtent();
}

When we wish to draw your attention to a particular part of a code block, the relevant lines
or items are set in bold:
var wms_layer = new OpenLayers.Layer.WMS(
'WMS Layer Title',
'http://vmap0.tiles.osgeo.org/wms/vmap0',
[4]

Preface
{layers: 'basic'},
{}
);

New terms and important words are shown in bold. Words that you see on the screen, in
menus or dialog boxes for example, appear in the text like this: "By default, your map adds
an argParser control which will try to pull information from a permalink.".
Warnings or important notes appear in a box like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this
book—what you liked or may have disliked. Reader feedback is important for us to
develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to feedback@packtpub.com, and
mention the book title via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in
the SUGGEST A TITLE form on www.packtpub.com or e-mail suggest@packtpub.com.
If there is a topic that you have expertise in and you are interested in either writing or
contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you
to get the most from your purchase.

Downloading the example code for this book

You can download the example code files for all Packt books you have purchased from your
account at http://www.PacktPub.com. If you purchased this book elsewhere, you can
visit http://www.PacktPub.com/support and register to have the files e-mailed directly
to you.

[5]

Preface

Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do
happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—
we would be grateful if you would report this to us. By doing so, you can save other readers
from frustration and help us improve subsequent versions of this book. If you find any
errata, please report them by visiting http://www.packtpub.com/support, selecting
your book, clicking on the errata submission form link, and entering the details of your
errata. Once your errata are verified, your submission will be accepted and the errata will
be uploaded on our website, or added to any list of existing errata, under the Errata section
of that title. Any existing errata can be viewed by selecting your title from http://www.
packtpub.com/support.

Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media.
At Packt, we take the protection of our copyright and licenses very seriously. If you come
across any illegal copies of our works, in any form, on the Internet, please provide us with
the location address or website name immediately so that we can pursue a remedy.
Please contact us at copyright@packtpub.com with a link to the suspected
pirated material.
We appreciate your help in protecting our authors, and our ability to bring you
valuable content.

Questions
You can contact us at questions@packtpub.com if you are having a problem with any
aspect of the book, and we will do our best to address it.

[6]

1

Getting Started with OpenLayers
Within the past few years, the popularity of interactive web maps has exploded.
In the past, creating interactive maps was reserved for large companies or
experts with lots of money. But now, with the advent of free services like Google
and Yahoo! Maps, online mapping is easily accessible to everyone. Today,
with the right tools, anyone can easily create a web map with little or even no
knowledge of geography, cartography, or programming.
Web maps are expected to be fast, accurate, and easy to use. Since they
are online, they are expected to be accessible from anywhere on nearly any
platform. There are only a few tools that fulfill all these expectations.
OpenLayers is one such tool. It's free, open source, and very powerful. Providing
both novice developers and seasoned GIS professionals with a robust library,
OpenLayers makes it easy to create modern, fast, and interactive web-mapping
applications.

In this chapter we will
‹‹

Learn what OpenLayers is

‹‹

Discuss some web mapping application concepts

‹‹

Make our First Map

‹‹

Cover concepts behind OpenLayers, such as Object Oriented Programming

‹‹

Provide information on resources outside of this book

Getting Started with OpenLayers

What is OpenLayers?
OpenLayers is an open source, client side JavaScript library for making interactive web
maps, viewable in nearly any web browser. Since it is a client side library, it requires no
special server side software or settings—you can use it without even downloading
anything! Originally developed by Metacarta, as a response, in part, to Google Maps, it
has grown into a mature, popular framework with many passionate developers and a very
helpful community.

Why use OpenLayers?
OpenLayers makes creating powerful web-mapping applications easy and fun. It is very
powerful but also easy to use—you don't even need to be a programmer to make a great
map with it. It's open source, free, and has a strong community behind it. So if you want to
dig into the internal code, or even improve it, you're encouraged to do so. Cross browser
compatibility is handled for you—it even works in IE6.
OpenLayers is not tied to any proprietary technology or company, so you don't have to
worry so much about your application breaking (unless you break it). At the time of writing,
support for modern mobile and touch devices is in the works (with many proof of concept
examples), and should be in the official library in the near future—if they aren't by the time
you're reading this.
OpenLayers allows you to build entire mapping applications from the ground up, with the
ability to customize every aspect of your map—layers, controls, events, etc. You can use a
multitude of different map server backends together, including a powerful vector layer. It
makes creating map 'mashups' extremely easy.

What, technically, is OpenLayers?
We said OpenLayers is a client side JavaScript library, but what does this mean?

Client side
When we say client side we are referring to the user's computer, specifically their web browser.
The only thing you need to have to make OpenLayers work is the OpenLayers code itself and
a web browser. You can either download it and use it on your computer locally, or download
nothing and simply link to the JavaScript file served on the site that hosts the OpenLayers
project (http://openlayers.org). OpenLayers works on nearly all browsers and can be
served by any web server or your own computer. Using a modern, standard-based browser
such as Firefox, Google Chrome, Safari, or Opera is recommended.

[8]

Download from Wow! eBook 

Chapter 1

Library
When we say library we mean that OpenLayers is an API (Application Programmer
Interface) that provides you with tools to develop your own web maps. Instead of building
a mapping application from scratch, you can use OpenLayers for the mapping part, which is
maintained and developed by a bunch of brilliant people.
For example, if you wanted to write a blog you could either write your own blog engine,
or use an existing one such as WordPress or Blogger and build on top of it. Similarly, if you
wanted to create a web map, you could write your own from scratch, or use software that
has been developed and tested by a group of developers with a strong community behind it.
By choosing to use OpenLayers, you do have to learn how to use the library (or else you
wouldn't be reading this book), but the benefits greatly outweigh the costs. You get to use
a rich, highly tested and maintained code base, and all you have to do is learn how to use it.
Hopefully, this book will help you with that.
OpenLayers is written in JavaScript, but don't fret if you don't know it very well. All you really
need is some knowledge of the basic syntax, and we'll try to keep things as clear as possible
in the code examples.
If you are unfamiliar with JavaScript, Mozilla provides phenomenal
JavaScript documentation at https://developer.mozilla.
org/en/javascript.

Anatomy of a web-mapping application
First off—what is a 'web-mapping application'? To put it bluntly, it's some type of Internet
application that makes use of a map. This could be a site that displays the latest geo-tagged
images from Flickr (we'll do this in Chapter 11), a map that shows markers of locations
you've traveled to, or an application that tracks invasive plant species and displays them. If it
contains a map and it does something, you could argue that it is a web map application. The
term can be used in a pretty broad sense.

[9]

Getting Started with OpenLayers

So where exactly does OpenLayers fit in? We know OpenLayers is a client side mapping
library, but what does that mean? Let's take a look at the following screenshot:

This is called the Client / Server Model and it is, essentially, the core of how all web
applications operate. In the case of a web map application, some sort of map client (e.g.,
OpenLayers) communicates with some sort of web map server (e.g., a WMS server or the
Google Maps backend).

Web map client
OpenLayers lives on the client side. One of the primary tasks the client performs is to get
map images from a map server. Essentially, the client has to ask a map server for what you
want to look at. Every time you navigate or zoom around on the map, the client has to make
new requests to the server—because you're asking to look at something different.
OpenLayers handles this all for you, and it is happening via asynchronous JavaScript (AJAX)
calls to a map server. To reiterate—the basic concept is that OpenLayers sends requests to a
map server for map images every time you interact with the map, then OpenLayers pieces
together all the returned map images so it looks like one big, seamless map. In Chapter 2,
we'll cover this concept in more depth.

Web map server
A map server (or map service) provides the map itself. There are a myriad of different map
server backends. A small sample includes WMS, Google Maps, Yahoo! Maps, ESRI ArcGIS,
WFS, and OpenStreet Maps. If you are unfamiliar with those terms, don't sweat it. The basic
principle behind all those services is that they allow you to specify the area of the map you
want to look at (by sending a request), and then the map servers send back a response
containing the map image. With OpenLayers, you can choose to use as many different
backends in any sort of combination as you'd like.
OpenLayers is not a web map server; it only consumes data from them. So, you will need to
be able to access some type of web map service. Don't worry though. Fortunately, there are
a myriad of free and/or open source web map servers available that are remotely hosted or
easy to set up yourself, such as MapServer.

[ 10 ]

Chapter 1

Throughout this book, we'll often use a freely available web mapping service
from OSGeo, so don't worry about having to provide your own.

With many web map servers you do not have to do anything to use them—just supplying
a URL to them in OpenLayers is enough. OSGeo, OpenStreet Maps, Google, Yahoo!, and
Bing Maps, for instance, provide access to their map servers (although, some commercial
restrictions may apply with various services in some situations).

Relation to Google / Yahoo! / and other mapping APIs
The Google, Yahoo!, Bing, and ESRI Mappings API allow you to connect with their map
server backend. Their APIs also usually provide a client side interface (at least in the
case of Google Maps).
The Google Maps API, for instance, is fairly powerful. You have the ability to add markers,
plot routes, and use KML data (things you can also do in OpenLayers)—but the main
drawback is that your mapping application relies totally on Google. The map client and map
server are provided by a third party. This is not inherently a bad thing, and for many projects,
Google Maps and the like are a good fit.
However, there are quite a few drawbacks.
‹‹

You're not in control of the backend

‹‹

You can't really customize the map server backend, and it can change at any time

‹‹

There may be some commercial restrictions, or some costs involved

‹‹

These other APIs also cannot provide you with anything near the amount
of flexibility and customization that an open source mapping application
framework (i.e., OpenLayers) offers

Layers in OpenLayers
So, what's with the Layer in OpenLayers? Well, OpenLayers allows you to have multiple
different 'backend' servers that your map can use. To access a web map server, you create
a layer object and add it to your map with OpenLayers.
For instance, if you wanted to have a Google Maps and a WMS service displayed on your
map, you would use OpenLayers to create a GoogleMaps layer object and a WMS layer
object, and then add them to your OpenLayers map. We'll soon see an example with a
WMS layer, so don't worry if you're a little confused.

[ 11 ]

Getting Started with OpenLayers

What is a Layer?
Like layers of an onion, each layer is above and will cover up the previous one; the order
that you add in the layers is important. With OpenLayers, you can arbitrarily set the overall
transparency of any layer, so you are easily able to control how much layers cover each other
up, and dynamically change the layer order at any time.
For instance, you could have a Google map as your base layer, a layer with satellite imagery
that is semi-transparent, and a vector layer all active on your map at once. A vector layer is
a powerful layer that lets us add markers and various geometric objects to our maps—we'll
cover it in Chapter 9. Thus, in this example, your map would have three separate layers. We'll
go into much more depth about layers and how to use and combine them in Chapter 3.

The OpenLayers website
The website for OpenLayers is located at http://openlayers.org/. To begin, we need to
download a copy of OpenLayers (or, we can directly link to the library—but we'll download a
local copy). You can download the compressed library as either a .tar.gz or .zip, but both
contain the same files.

[ 12 ]

Chapter 1

Let's go over the links:
‹‹

Link to the hosted version: If you do not want to actually download OpenLayers,
you can instead link to the OpenLayers library by adding this script URL to your site
in a 
7.

27.
28.
29.
30.

31.

32.
33.

3.

Open up index.html in your web browser. You should see something similar to:

[ 16 ]

Chapter 1

What just happened?
We just created our first map using OpenLayers! If it did not work for you for some reason,
try double checking the code and making sure all the commas and parentheses are in place.
You can also refer to the Preface where a link to code samples used in the book is given. By
default, we're given a few controls if we don't specify any. We will use the file we created as
a template for many examples throughout the book, so save a copy of it so you can easily
reference it later.
The control on the left side (the navigation buttons) is called the PanZoom control. You can
click the buttons to navigate around the map, drag the map with your mouse/use the scroll
wheel to zoom in, or use your keyboard's arrow keys. We'll cover controls in far greater detail
in Chapter 6.

How the code works
Now, let's take a look at the code—line by line. Before we do that, let's include a quick
reference to the line numbers at which the requirements from the previous section occur at.
These are the core things that you need to do to have a functioning map.

[ 17 ]

Getting Started with OpenLayers

We'll denote line numbers with brackets—[x], where x is the line number.

1. Including the OpenLayers library files:
Line [6]


2. Creating an HTML element for our map:
Lines [30] and [31]



3. Creating a map object from the Map class:
Line [12]
map = new OpenLayers.Map('map_element', { });

4. Creating a layer object from a Layer class:
Lines [13] to [18]
var wms_layer = new OpenLayers.Layer.WMS(
'WMS Layer Title',
'http://vmap0.tiles.osgeo.org/wms/vmap0',
{layers: 'basic'},
{}
);

5. Adding the layer to the map:
Line [20]
map.addLayer(wms_layer);

6. Defining the map's extent:
Lines [21] to [23]
if(!map.getCenter()){
map.zoomToMaxExtent();
}

Understanding the code—Line by line
Lines [1] to [5]: Sets up the HTML page. Every HTML page needs an  and  tag,
and the extraneous code you see specifies various settings that inform your browser that this
is an HTML5 compliant page. For example, we include the DOCTYPE declaration in line [1] to
specify that the page conforms to standards set by the WC3. We also specify a 


3.

Now, we'll need to create a body tag which will contain our page's actual content.
We'll also put in some div tags, which act as content blocks. Each div element will
have a unique ID. Each div will also have at least one class. Classes can be used by
multiple elements, and you can apply multiple classes to an element by separating
the class name with a space:


Hello world!


The cake is a lie.

Hello, world.





4.

Create a file called ex1_style.css and put in the following code. We'll specify a
background and text color property for the body tag. Because elements inherit
style from their parent element, every single element will also receive these two
properties (but they can be overwritten):
[ 176 ]

Chapter 7
body {
background:#ffffff;
color:#000000;
}

5.

Let's specify styles for elements by IDs, which we'll designate with a # sign. IDs are
used to specify a single element. This will cause the element that has the specified
ID to be styled; however, we will define it. We'll also specify styles for classes by
using a period (.). In CSS, classes are used to apply styles to multiple elements:
#title {
font-size:1.5em;
font-variant: small-caps;
}
#content {
background:#ababab;
color:#f0f0f0;
font-weight:bold;
text-align:right;
}
#message {
background:#336699;
}
.background_green {
background: #22dd22;
}
.align_left {
text-align:left;
}

6.

You should see something like this:

What Just Happened?
We've demonstrated what we've been talking about so far in this chapter, including an
external CSS file and using IDs and class names to reference elements. You might be
wondering why some styles got applied and others did not. Let's quickly go over why
that happens, and then move onwards to learn about how OpenLayers uses CSS.
[ 177 ]

Styling Controls

In CSS, you can use /* to begin a comment, and */ to end it. For example,
/* This is a comment */

Have a Go Hero – view HTML and CSS in Firebug
Open up Firebug and go to any website. Firebug will automatically build an HTML tree and
populate the Style tab with the site's style information. Poke around and try changing values
with Firebug, and you'll be able to immediately see the site's appearance change based on
the styles you apply with Firebug.

Cascading Style Sheets—Inheritance
CSS uses inheritance in a similar way our classes in JavaScript do. With CSS, child elements
can inherit properties of their parent elements, as well as override them. So, as in the
example above, our body element had a text color (the color property) of black (#000000).
This means that any element inside the body element (which is, practically, every HTML
element on the page) will receive the color:#000000 property unless overwritten.
This is a situation where the 'cascading' part of CSS comes in. Styles 'cascade' downwards,
so the properties found in the child element (the 'bottom' most elements) will override
properties which it inherits from its parents (the elements above it).

Order of inheritance
When trying to determine which style an element will receive, any styles from the class
name will overwrite base element styles, and any styles from the ID will overwrite class
styles. Take a look at the following code:
 Some text 


In this code, the element will have a final color of #ff0000. The base element (the div
style) will be overwritten by the .random_class class style, and then the class style will
be overwritten by the #my_element ID style. So, the order of importance is ID > class > base
element type.
Using the !important statement after the value of a property will ensure that the
property is not overwritten by any of its children. If however, one of the children contains
an !important statement on that property, then it will be overwritten.
[ 178 ]

Chapter 7

Referencing elements
One very useful thing we can do with CSS is to use the inheritance we just talked about.
More specifically, we can write:
#my_element div {
background: #2222ff;
}

This will apply a background color only to div elements that are children of #my_element.
This nesting can be as deep as you'd like—just separate elements by a space. This, for
example:
#my_element #my_inner_element .random_class a {
font-weight: bold;
}

This would be applied to all a elements (an anchor tag, specified by ) inside all elements
with a class of random_class inside an element with an ID of my_inner_element inside
of an element with the ID my_element. If we want to apply the same style to multiple
elements, we have to simply specify the elements and place a comma in between them:
#my_element1, #my_element2, .random_class {
color:#cdcdcd;
}

Alright, we've covered the basics behind CSS and HTML element referencing, so let's see
how OpenLayers uses CSS.

Pop Quiz – how to reference elements
Take a look at the following code. Try to think of at least three different ways you could
reference the inner_most span element. Hint—think of ways to access it with inheritance
as well.









[ 179 ]

Styling Controls

OpenLayers and CSS
OpenLayers applies class names and IDs to most every HTML element it creates, so
customizing your map's UI is quite easy once we know how it generates class names and IDs.
Before we talk about how to override styles though, we need to know where the style files
themselves are.

Styling OpenLayers—using themes
In OpenLayers, themes are used to control the appearance of your UI elements. A theme is
comprised of a CSS file and any related user interface images. OpenLayers applies a lot of
styles to your map by default, using a theme called default. Creating your own theme is
easy though.
If you want to create custom UI styles for your map, you'll essentially need to either create
a 'theme folder' which will contain a CSS file and images for your UI controls to use (e.g.,
pan arrow images), or manually overwrite certain default styles. The theme folder can be
anywhere you'd like, just keep in mind what its path is when referencing it in your HTML file.
To use your own theme, you just need to do three things:
1. After including OpenLayers in your page, add a link to your CSS file which includes
your customized map styles.
2. You must tell OpenLayers where to find the images you use for your map. To do this,
specify the location of the folder your images are in (your theme folder) by adding
the follow to your JavaScript code. The path is relative to the location of the file
containing the JavaScript code:
OpenLayers.ImgPath = 'path/to/your/theme_folder/';

3. Specify the location of your theme folder when creating your map object via the
theme property. The path is relative to the location of the file containing the
JavaScript code. For example:
var map = new OpenLayers.Map('map_element', {theme:
'theme_folder'});

[ 180 ]

Chapter 7

Creating your own themes
Now we know how to use themes, but how do we create a theme? Well, the answer for
that is simple—we just create a CSS file, some images, and create a folder that will house
them. The images will go in a folder called img inside your theme folder. Then, we just tell
OpenLayers to use that theme. The expected structure of the theme folder may change
with later versions of OpenLayers, so the best way to figure what images are provided
by default (and their names) is to look in the default theme folder. You can find it in the
theme | default folder of your downloaded OpenLayers folder.
But the bigger question is how do we refer to the user interface elements? The answer lies
in knowing how OpenLayers generates class names and IDs for the elements it creates.

OpenLayers—class names and IDs
To style an element, you must refer to it. If we want to refer to a specific div, we need to
know its class and/or it's ID. OpenLayers generates class names and IDs, so we need to just
know how the names are generated. The most common way is to style your controls using
the generated class names.

Generated class names
The class names that OpenLayers generates for your controls follow the form of
.olControlControlNameExtra

This means that .olControl is always at the beginning of the class name, and
ControlName is the name of the control class itself. The Extra refers to any additional
descriptions or elements of the control (such as 'Inactive' and 'Active' added after many
controls, especially button controls).
So, for instance, if we wanted to style the scale control line control, we would refer to it as
.olControlScaleLine

As we've encountered before, for button type controls we add 'Inactive' or 'Active'
at the end. Other controls, such as the OverviewMap control, also contain an
OverviewMapElement class name—the element refers to the generated HTML container
of the overview control. There are other similar cases, such as the LayerSwitcher control. A
quick way to figure out the class name of an element is to use Firebug to inspect your page
and find the element.
We'll go over the class names of common controls soon, but first let's talk about another way
to reference your control elements: by ID.

[ 181 ]

Styling Controls

Generated IDs
Referring to control elements by class name is the preferred way of styling controls, but
styling by ID is also possible. There are two ways to accomplish this:
‹‹

Wrong way: Using the generated ID. The ID is generated in the form of
OpenLayers.Control.ControlName_XX where XX is a number that is assigned
based on various things, such as control order. The number is likely to change based
on how you make your map. So, if you use it in your style declarations and the ID
changes, then the style will no longer be applied.

‹‹

Right way: Passing in an ID when creating the control and referring to it - in other
words, when you create a new control, pass the id property with some string value
which you will use as the element's ID. This way, we don't have to worry about the
generated XX numbers changing, and we can be sure what the ID will be.

Alright, so we know how to refer to elements now, and how OpenLayers generates class
names and IDs, so let's take a look at an example to solidify the concepts.

Time for Action – styling controls
Let's work with styling some OpenLayers controls. We won't be creating a theme here;
instead, we'll just link to an external CSS file which will overwrite the default styles of the
elements we wish to style.

1.

Let's start off with creating a new page. We're going to also put all our custom styles
in a file called control_style.css. So, whenever we add a style, be sure to put it in the
control_style.css. Also, make sure to include the CSS file in the  section with:


2.

Now, let's create our map object. We'll specify the controls array when we
instantiate it since we do not want the PanZoombar control in this example.
We also are not using a custom theme (we are just overriding styles with the
external CSS file), but if we were we would specify the theme property as well.
map = new OpenLayers.Map('map_element', {
controls: [new OpenLayers.Control.Navigation()]
});

3.

Alright, let's create some controls. We'll go over each control individually so we can
see all the steps involved. First, let's create a ScaleLine control. In our JavaScript
code, use the following to create a default ScaleLine control object:
map.addControl(new OpenLayers.Control.ScaleLine());

[ 182 ]

Download from Wow! eBook 

Chapter 7

4.

Now, let's apply some style to it. Because we haven't passed in a class name or ID,
we'll use the class name that gets automatically generated. This is a standard control
that does not have any 'active' or 'inactive' states, so we can just use the name
generated by default, olControlScaleLine. In your control_style.css file,
add the following:
.olControlScaleLine {
background: #777777;
color:#ffffff;
}

5.

Most controls can be styled by just using their main class name (i.e.,
.olControlControlName). Other controls, such as buttons and controls with
active/inactive states have additional class names. This is a good thing—you usually
want a button to have a different style when it's clicked. Let's use the NavToolbar
control—in your JavaScript code, input the following:
map.addControl(new OpenLayers.Control.NavToolbar());

6.

Now, let's style the NavToolbar control. We have to style two things—the
NavToolbar control itself (which is actually a panel) and the Inactive/Active states
of the buttons it contains. The NavToolbar control also contains a ZoomBox control,
which we'll need to style as well. It also contains Inactive/Active states that we'll
need to style.
By default, the buttons have a left and top property. We'll replace those values
with 0 and add the !important value, which will make sure our newly set values
are not overwritten. In your CSS file, add:
.olControlNavToolbar {
top: 0;
}
.olControlNavigationItemInactive {
background: #787878 !important;
border: 2px solid #232323;
cursor: pointer;
left:0 !important;
top:0 !important;
}
.olControlNavigationItemActive {
background: #dedede !important;
border: 2px solid #787878;
cursor: pointer;
left:0 !important;
top:0 !important;
}
[ 183 ]

Styling Controls
.olControlZoomBoxItemInactive {
background: #336699 !important;
border: 2px solid #232323;
cursor: pointer;
left:0 !important;
top:0 !important;
}
.olControlZoomBoxItemActive {
background: #77aadd !important;
border: 2px solid #5588aa;
cursor: pointer;
left:0 !important;
top:0 !important;
}

7.

Let's create an OverviewMap control. In your JavaScript code, add the following:
map.addControl(new OpenLayers.Control.OverviewMap());

8.

Now, let's style it. This is a control comprised of a few different elements, but they
all have class names, so we can style it however we'd like. We'll style the background
of the overview map when it's opened (via .olControlOverviewMap), the extent
rectangle on the overview map, and the location of the minimize/maximize buttons.
Add this to your CSS:
.olControlOverviewMapMaximizeButton,
.olControlOverviewMapMinimizeButton{
bottom:0 !important;
}
.olControlOverviewMapElement {
background: #cdcdcd !important;
}
.olControlOverviewMapExtentRectangle {
background:rgba(60,90,120,.7);
border:2px dashed #22dd22 !important;
}

9.

Open up your map, move around, and look at your controls. You should see
something like this:

[ 184 ]

Chapter 7

What Just Happened?
We made a few controls and added styles to them. We applied styles in the following three
different ways:
‹‹

Styling the controls themselves based on their class name (e.g.,
olControlScaleLine)

‹‹

Styling button controls (their Inactive and Active states)

‹‹

Styling various other elements created by the control

It may not always be immediately obvious what class names to use to refer to a control, but
it is always possible to figure it out. One of the quickest and easiest ways to do so is to use
Firebug (or other web development tools) to inspect your page's generated HTML and look
for elements that have the control's name in the class name.

[ 185 ]

Styling Controls

Time for Action – styling the LayerSwitcher control
Let's take a look now at how to style the LayerSwitcher control. Unlike the previous example,
we'll place this control in a div element outside the map.

1.

Start a new page. We'll link to an external CSS file that will override the base
LayerSwitcher control style, like in the previous example. Include a  tag that
references a file called ex3_layerswitcher_style.css, which we'll create soon.

2.

Next, we'll need to create a div element that will house our control. Create a div tag
after the map_element div:


3.

Now, in your JavaScript code, create the map and WMS layer object as normal. Add
a LayerSwitcher control, and pass in the layer_switcher_control element as
the div property:
map.addControl(new OpenLayers.Control.LayerSwitcher({
div: document.getElementById('layer_switcher_control')
}));

4.

Now, if you open up the map you should see the map with the layer switcher control
beneath it:

5.

By default, it looks pretty plain. It also has a border with rounded corners. First, we'll
need to disable the rounded corners by passing in roundedCorner: false.
map.addControl(new OpenLayers.Control.LayerSwitcher({
div: document.getElementById('layer_switcher_control'),
[ 186 ]

Chapter 7
roundedCorner: false
}));

6.

Let's create the ex3_layerswitcher_style.css file now. We'll specify the control's style
here. As we have manually specified the div property when creating the control,
the first thing we'll style is the div we passed in (with an ID of layer_switcher_
control). Because we passed this in ourselves, OpenLayers does not apply any
default styles to it. Let's give it a solid border and some padding. Add this to the
style file:
#layer_switcher_control {
border:2px solid #454545;
padding:2px;
}

7.

Now we need to start overriding the styles the control inherits from OpenLayers.
First, we'll need to get the relevant class names. We can use Firebug to see that the
'Base Labels' text is inside a div with a class of baseLbl. Since it's a heading
that lists base layers below it, let's make it a bit bigger and give it a background. It
also falls inside our layer_switcher_control div, so when we specify it in the
CSS let's be as specific as we can:
#layer_switcher_control .baseLbl {
background:#cdcdcd;
font-size:1.3em;
font-weight:bold;
}

8.

Let's also style the label text for the actual layer names. Using Firebug, we can see
that the label text is inside a  tag with a class of labelSpan, which is a child
element of a div with the class baseLayersDiv. All base layers will show up in this
div, while any overlay layers will show up in a div called dataLayersDiv. Using
this information, let's apply a style to it, specifying the inheritance to access the
element:
#layer_switcher_control .baseLayersDiv .labelSpan {
font-style: italic;
font-weight:bold;
}

[ 187 ]

Styling Controls

9.

Open up the page now and you should see the styled layer switcher div:

What Just Happened?
We just added a LayerSwitcher control outside the map and styled it. We saw how to style
the div element that we created, along with styling the elements by grabbing the class
names that OpenLayers generates. The LayerSwitcher control along with some others such as
OverviewMap, have more elements to style than other controls. It may not be immediately
obvious what elements need to be styled, but we can always use Firebug to inspect the
HTML and determine the class names.

Have a Go Hero – add layers
Add more layers to the map you just created. Notice how there is now another set of
elements for the overlay layers, in an element with a class that starts with 'dataLayers'. All
your overlay layers are considered to be 'data layers' and will show up here, while base layers
show up in the baseLayersDiv. Using what you learned in the previous example, apply
your own styles to the overlay layers div elements.

Other resources
A comprehensive coverage of CSS is outside the scope of this book, but hopefully
this chapter has provided necessary information for styling OpenLayers elements.
More extensive information on CSS can be found at the W3Schools site, located at
http://www.w3schools.com/css/default.asp.

[ 188 ]

Chapter 7

A developer that has proficient design skills is not a common thing—fortunately, there are
resources that provide high quality, professional user interface elements. GeoExt is a third
party library that integrates ExtJS, a popular JavaScript framework, with OpenLayers, and
includes numerous user interface and OpenLayers map components. It does, however,
require a bit of familiarity with the ExtJS library. GeoExt can be found at http://www.
geoext.org/index.html, and the ExtJS can be found at http://www.sencha.com/
products/js/.

Summary
In this chapter, we talked about what CSS is and what it's used for. We learned how to use
CSS and HTML together, along with how to refer to elements in CSS. Then, we discussed
how OpenLayers uses CSS, and how control elements get their names. Lastly, we created
and applied our own custom styles to some controls.
The goal of this chapter was to provide a foundation for understanding how we style controls
with CSS. If you haven't worked much with CSS before or if you're unsure how to style other
types of controls then don't worry. We'll be styling controls throughout the book using the
same principles we introduced in this chapter, so you'll get a lot more exposure to it.

[ 189 ]

8

Charting the Map Class
The Map class is, as you have probably figured out by now, the core piece
behind your map. The map object(s) you create is the most important thing
behind your map, as without a map object you can't do anything with layers or
controls. In this chapter, we'll be talking about the Map class, which we've been
taking for granted so far.
Understanding the Map class will enable us to do even more cool things with
our applications, and provides a way for us to programmatically tell our maps
what to do.

We've been using the Map class throughout the book so far without really knowing how or
why. This chapter aims to not only explain how and why we've been doing things (such as
using map.zoomToMaxExtent()), but also provide a thorough coverage of one of the core
parts of OpenLayers—the Map class. We'll take a look at
‹‹

What the Map class is

‹‹

How the Map class relates to the other classes we've discussed

‹‹

Accessing the Map class' properties

‹‹

Using functions of the Map class

‹‹

Working with events to define and extend map behavior

‹‹

Creating a simple application that contains multiple maps

Charting the Map Class

The Map class
OpenLayers' Map class is what drives our maps. All the things we'd like to do with our
maps—moving them, zooming, adding layers—all these things are made possible by this
class. We've worked extensively with it already by creating a map object, adding controls and
layers to it, then telling the map to zoom to the max extent. While we've covered Layers and
Controls in pretty good detail, we have yet to really discuss the functionality behind the Map
class, the core component of our applications.
In OpenLayers, control and layer objects belong to a map object. Control and layer objects
must be hooked up to a map if we want them to do anything. So, we need a map object to
actually make a useful map—and as you might imagine, we'll see later in the chapter that it
is possible to make an application that uses multiple map objects.

Creating a map object
Before we jump in, let's review the base code for instantiating a map object. We've done
this many times before, but a little review won't hurt.
var map = new OpenLayers.Map('html_element', { options });

The first parameter is a string consisting of the ID of the HTML element you wish the map to
be placed in (almost always a div element). The second parameter is optional, and consists
of an object literal, or anonymous object, (key:value pairs) containing property and value
settings.
So, there's not much new here yet. This is, essentially, all you need to set up your map
object. However, as we've mentioned before, if you're using a projection other than
EPSG:4326, such as spherical Mercator, you're going to have to set some other properties
as well (such as maxExtent and units), when creating the map object.
This chapter will cover most of the properties and functions available to us through the Map
class, so let's start with the properties.

Map class properties
There is a vast array of possible properties that you can pass in, and we've already seen a few
of them throughout the book. There are also quite a few properties which are pretty useful
which we haven't yet covered. I'll start off by introducing a few properties, and then we'll see
them in action with some examples.

[ 192 ]

Chapter 8

Throughout the explanation of properties and methods, I'll typically refer to an arbitrary map
object as map. If your map object is called something else, then you would simply replace
map with the name of your map object. Another quick note; while we will be talking about all
these properties in the context of passing them in while creating the map object, you can call
any of them at any time to get the value (e.g., calling map.tileSize will return the map's
tile size).
While we'll cover all the properties and functions relevant to all the examples
and discussions in the book, for an always up to date and complete list you
can visit the docs at http://dev.openlayers.org/docs/files/
OpenLayers/Map-js.html.

Map properties
Let's go over the map properties that are typically passed in when creating a map object.
There are other properties that we can access but shouldn't pass in at instantiation time—
we'll cover those next. For now, let's focus on properties to use when instantiating map
objects.

allOverlayers
allOverlays: {Boolean} Default

is false

The allOverlays property specifies whether or not the map can function without any base
layers. So far, we've been using base layers in all our examples, either explicitly or implicitly
(letting our layers be set as base layers automatically). By setting this property, all layers will
act as overlay layers.
There may be times when you wish to use this—just keep in mind, when using this property,
users have the ability to disable all layers and they could, in effect, see an empty map. By
setting this property to true, third party API layers will also act as overlay layers. So, if you
wish, you could use a Google maps layer as an overlay layer and make it semi transparent.

controls
controls: {Array {OpenLayers.Control}}

We covered controls in Chapter 6, so we don't need to go into too much depth here. We
can define our map's controls when we create the map object, or we can add them via
addControl(s) after the map object has been instantiated. After the map is instantiated,
we can access its controls by calling map.controls. If you do not specify an array of
controls for the map to use when you create it, your map will receive four default controls:
Navigation, PanZoom, ArgParser, and Attribution.
[ 193 ]

Charting the Map Class

displayProjection
displayProjection: {OpenLayers.Projection}

This is a property that is used mainly by controls which show coordinate information. By
setting this property on the map object, any control that has a displayProjection
property will be set to this value. Controls, such as the MousePosition control, can display
coordinates in the displayProjection. So, your map could be in a different projection
than what you wish to display the coordinates in. However, to use a displayProjection
other than EPSG:4326 or EPSG:900913, Proj4js must be included on your page.
This property comes in very handy if, for instance, your map is in a spherical Mercator
projection (i.e., EPSG:900913), but you might wish to display coordinates in another
projection, like EPSG:4326 (to display lon/lat coordinates).

div
div: {HTML Element or String}

So far, we've been creating our maps like this:
var map = new OpenLayers.Map('map_element', {});

With the div property, we can instead pass in an HTML element (or the ID of the element,
as above) in the options; i.e.,
var map = new OpenLayers.Map({'div': 'map_element'});

One of the advantages of doing it this way is that the div property is optional, so you can
create a map object and choose not to place it in any div. If you do this, you can place your
map in a div later by using the render() method.
This is actually almost the same thing OpenLayers is doing for us automatically when we pass
in an HTML element during map object instantiation. When we do specify this div property,
OpenLayers simply calls the render() method right then—we're just delaying this from
happening and calling it manually if we choose not to specify a div. This can be useful when
we only want to show the map after a user clicks on a button, for instance.

Time for Action – using the allOverlays Map property
Let's take a look at using the allOverlays property and not specifying a div when creating
a map.

1.

In your init() function, let's create our map object with allOverlays set to
true and with some controls passed in. We will also not specify an HTML element:
var map = new OpenLayers.Map({
[ 194 ]

Chapter 8
allOverlays: true,
controls: [new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoom(),
new OpenLayers.Control.LayerSwitcher()]
});

2.

Now, let's create a couple of layers so we can see how the allOverlays property
works. We'll assume that you will add WMS layers to your maps for future examples.
var wms_layer_all = new OpenLayers.Layer.WMS(
'OpenLayers WMS',
'http://vmap0.tiles.osgeo.org/wms/vmap0',
{layers: 'basic'},
{}
);
var wms_layer_labels = new OpenLayers.Layer.WMS(
'Labels',
'http://vmap0.tiles.osgeo.org/wms/vmap0',
{layers: 'clabel,ctylabel,statelabel',
transparent:true},
{}
);
map.addLayers([wms_layer_all, wms_layer_labels]);

3.

Since we didn't specify a div when instantiating our map object, we'll have to call
the render() function to place the map inside a div. The function takes in either an
HTML element or the string of the element's ID, so let's pass in the element's ID.
map.render('map_element');

4.

Finally, check to see if a center is set. If it is not, zoom to the max extent. We'll
assume you do this step in future examples. You can place the call to the render()
function after this bit if you'd like, and it will still zoom to the center or the max
extent—the order in which you call render() and set the map's location is up to
you.
if(!map.getCenter()){
map.zoomToMaxExtent();
}

[ 195 ]

Charting the Map Class

5.

Take a look at the map and open the layer switcher—you should be able to turn off
both layers and see an empty map now. Because we don't have a base layer and all
the Overlayers are disabled by default, you'll just see a blank map until you enable
a layer.

What Just Happened?
We have just looked at a few of the properties we brought up—allOverlays, controls,
and (leaving out) the div property. We also saw how the user can potentially see no map at
all by turning off all the layers.
The map will not automatically render, because we did not pass in an HTML element.
Instead, we called the render() method and passed in an HTML element after our map
object was created. There may be times when you wish to delay rendering the map, such
as waiting for a user to click a button, and in those cases this is a good way to do it. We'll
talk more about map methods later in this chapter, but let's get back to discussing map
properties.

eventListeners
eventListeners: {Object}

This property accepts an anonymous object containing key:value pairs of event types (as
the key) and functions to call (the values) when those events are fired. We saw this property
briefly in Chapter 6, and it behaves the same way here. An example would be:
var map = new OpenLayers.Map('map_element', {
eventListeners: { 'moveend': my_moveend_function }
});

The above code assumes that a function named my_moveend_function exists. We will
cover this property in much more detail, along with the possible event types, later in this
chapter in the section on events.

[ 196 ]

Chapter 8

fallThrough
fallThrough: {Boolean} Default: true

The fallThrough property determines whether or not OpenLayers will allow events on
the map to propagate downwards (i.e., 'fall through') to other elements on your page.
Let's go over the meaning with an example. Say your map_element div has an event
attached to it that will show an alert when you click on it. This event is outside of
OpenLayers. Now, let's assume you create a map object and attach it to that map_element
div. If fallThrough is set to true (it is by default), you will receive the original alert by
clicking on the map—the mouse click event will be allowed to 'fall through'. If it is set to
false, you will not receive the alert, as OpenLayers will consume that mouse click event.

layers
layers: {Array {OpenLayers.Layer}}

We've encountered this property, to some degree, already. After the map is instantiated,
we can access its layers by calling map.layers. So far, we've been creating our map object,
then our layer objects, then adding the layers to the map with addLayer(). We can,
however, use the layers property when instantiating our map and pass in an array of
layer objects.
Passing in layers using this property when we create our map object or calling addLayers
essentially does the same thing—use whichever method you're most comfortable with. An
example would be:
var map = new OpenLayers.Map('map_element', {
layers: [my_layer_1, new OpenLayers.Layer.WMS({ … })]
});

You can pass in layer objects that have already been created (e.g., my_layer_1, assuming
a layer object with that name has been created), or by instantiating a layer object in the call
itself (e.g., new OpenLayers.Layer.WMS({...})).
In the example above, the … would be replaced with the options
for the WMS layer.

[ 197 ]

Charting the Map Class

maxExtent
maxExtent: {OpenLayers.Bounds} Default: bounds in decimal degrees,
(-180, -90, 180, 90)

Setting this will specify the maximum extent of your map. Tiles that fall outside of the
maximum extent will not be requested, nor can users pan to a coordinate that lies outside
the maxExtent. If you are using a different projection than the default projection, you will
need to change this to reflect the world's coordinates in your desired projection.
The maxExtent property's data type is an OpenLayers.Bounds object. The OpenLayers.
Bounds class is used to create a 'bounds' object, which contains four coordinates that
make up a bounding box. The four coordinates are minimum x (left), minimum y (bottom),
maximum x (right), and maximum y (top). To instantiate a bounds object, you just pass in
the coordinates in the order of:
var bounds_object = new OpenLayers.Bounds(minx, miny, maxx, maxy);

minExtent
minExtent: {OpenLayers.Bounds}

Setting the minExtent will specify the minimum extent of the map. There is no default
value for this property. You will usually not need to set this, unless you are specifying
custom resolutions using maxResolution—in such case, you will usually set the values
to (-1, -1, 1, 1).

restrictedExtent
restrictedExtent: {OpenLayers.Bounds}

This property specifies the bounds the user can navigate in—meaning that the user will be
able to only pan around inside the bounds specified by the restrictedExtent property
(if it is given, and if restricting their navigation is possible).
Setting this property will still allow the user to zoom out and see parts of the map that are
outside the restricted extent, but the map's center will be set to the restricted extent. If you
want to limit the zoom level, you could set the resolutions array, maxResolution, or
scales properties (covered in the following pages). This property is similar to maxExtent,
however, tiles outside the restrictedExtent will still be requested, but the user won't
necessarily be able to pan to them.

numZoomLevels
numZoomLevels: {Integer} Default: 16
[ 198 ]

Chapter 8

The numZoomLevels property specifies the amount of possible zoom levels that your map
will have. For many applications, giving users 16 zoom levels is not always desirable. In most
cases, just specifying the numZoomLevels (along with maxExtent, if using a different
projection) is all you need to do to set the number of zoom levels. We'll see, as we look at
other properties, more ways to specify the number of zoom levels (some without using this
property at all). However, let's look at how to use this property to set the number of zoom
levels—it's pretty easy!

Time for Action – setting zoom levels and maxExtent
1.

Create your map object, by specifying the numZoomLevels and adding a
PanZoomBar control. We'll also set the numZoomLevels property to 8, meaning
that only eight zoom levels will be available. Lastly, we'll set the maxExtent
property to include just a subset of the world, like the following:
map = new OpenLayers.Map('map_element', {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher()
],
numZoomLevels: 8,
maxExtent: new OpenLayers.Bounds(-100, -30, 40, 30)
});

2.

Open up the page, and you should see something like this:

[ 199 ]

Charting the Map Class

What Just Happened?
Our map has only eight zoom levels and a maximum extent of (-100, -30, 40, 30). You
must have noticed that the map started at a zoom level that is zoomed in a couple of times.
This is mainly due to the fact that the furthest out zoom level would show more than the
maximum extent of the map. Let's quickly talk about what zoom levels are.
Zoom levels accessing the map.zoom property (or calling map.getZoom()) will show your
current zoom level (an {Integer} value). The zoom level numbers descend from 0 (the
'furthest out' zoom level—the level your map will usually start at) to the maximum zoom
value minus one (since the first value starts at 0, not 1).
In our example, the highest zoom value we can have is 7, because our numZoomLevel
setting is 8. Since the zoom values start at 0, not 1, we have to subtract one from the
maximum number of zoom levels to get the current zoom level value.
On the PanZoomBar control, the very bottom item on the slider represents the zoom level
further out (we'll call this the minimum zoom level). The highest you can go will be referred
to as the maximum zoom level. Now, if we're using a third party API layer, we can simply set
minZoomLevel and maxZoomLevel on those layer properties, but to set these values for
the map (and other non third party API layers), we use either scales or resolutions along
with min or maxScale, and min or maxResolution.

Map properties—Continued
Let's continue our discussion on map properties.

Resolutions
resolutions: {Array{Float}}

This is an array of resolutions the map will use. Each value in the array is a possible zoom
level. If you do not pass this in when instantiating your map (or layer), it will be automatically
determined based on other properties, such as maxExtent. Setting this property is another
way to specify the number of zoom levels on your map. The resolutions array descends
from high values to low values.
Resolution is the width/height in map units per pixel—so, for example, 150 miles divided
by 512 pixels would be a resolution of 0.29296875. If you are using a tile cache server,
you will need to specify the resolutions at which the tiles are cached (as well as set the
serverResolutions property, which specifies the resolutions at which the tiles are cached
on the server). Otherwise, you will often simply just define the numZoomLevels to specify
how many zoom levels you want.

[ 200 ]

Chapter 8

Another quick note on the resolutions array is that each value in the array
is half the value of the previous item. So, if the first item in your resolutions
array was 0.703125, the next value would be 0.3515625, the next
0.17578125, and so on.

Time for Action – using resolutions array
Setting the resolutions array is one way to specify the number of zoom levels. Let's see it in
action.

1.

In the map object definition specify the resolution array as the following:
map = new OpenLayers.Map('map_element', {
resolutions: [ 1.40625,0.703125, 0.703125, 0.3515625,
0.17578125, 0.087890625, 0.0439453125 ]
});

2.

Zoom around on the map. Because we've only provided five possible resolutions,
you should be able to zoom in five times.

What Just Happened?
Using the resolutions array, we were able to specify the number of zoom levels. Unless
we're using a cached tile service, this isn't necessarily the easiest way to specify the number
of zoom levels. We have mentioned earlier we can also use scales, and we can also use
minResolution and maxResolution.

Map/Layer property inheritance
Resolutions/scales/max extent etc. properties can be specified in the map object or layer
objects. Preferably, they should be specified in the map, as you won't have to worry about
which layers to apply the properties to. However, if you do not specify them in the map,
then the settings of the base layer will be applied to the map. This isn't necessarily bad, but
it can be a bit ambiguous as to what layers are controlling the resolutions, because if these
properties are set in overlay layers they won't necessarily be applied.
So, to be safe, if you set those properties on the map then you don't have to worry about
applying them to layers. The main exception is if you are using a third party API layer—in this
case, you must set those layer properties, such as minZoomLevel, maxZoomLevel, (two
third party API specific properties cannot be set on the map), and numZoomLevels.
If you want to set properties that mimic limiting the minimum or maximum zoom level, you
can use max/minResolution or max/minScale, which we'll cover now.
[ 201 ]

Charting the Map Class

Map properties discussion—Continued
Let's get back to looking at some of the remaining map properties.

maxResolution
maxResolution: {Float or String (with value of 'auto')}. Default: 360
degrees / 256 px

The maxResolution property specifies what the maximum resolution of the map can
be. Or, in other words, how far 'zoomed out' the map can be. Setting this property will
affect what the base zoom level is and how far you can zoom out. If you want to get
the value for this property, then you can zoom to the desired zoom level and call map.
getResolution(); or access the map.resolution; property in Firebug to get the
current zoom level's resolution.
Setting the maxResolution to 'auto' is one way to make sure the map's extent 'fits' your
map's div completely. Setting the property to 'auto' can also be used with other properties
to automatically generate zoom levels.

minResolution
minResolution: {Float or String (with value of 'auto')}

Specifying this property will limit the minimum resolution of the map—how far in the user can
zoom. This property can also be set to 'auto', but if it is then the minExtent property must
be set as well. If minResolution is not set, the number of zoom levels will be determined
either by the numZoomLevels setting, the resolutions array, or the scales property.

Time for Action – using Min and Max resolution
Let's look at how to use the minResolution and maxResolution properties and how they
affect our zoom levels.

1.

Instantiate your map object, by specifying the the min/max resolution properties:
//Create a map with an empty array of controls
map = new OpenLayers.Map('map_element', {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher()
],
minResolution: 0.02197265625,
maxResolution: 0.3515625
});
[ 202 ]

Chapter 8

2.

You should see something like this, with limited zoom levels:

3.

Now, let's recreate the map element and set the maxResolution and
numZoomLevels properties:
map = new OpenLayers.Map('map_element', {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher()
],
maxResolution: 0.3515625,
numZoomLevels:8
});

4.

The map should now show zoom levels like:

[ 203 ]

Charting the Map Class

What Just Happened?
We just used the minResolution and maxResolution properties to specify the zoom
levels of our map. There is another way, apart from using resolutions, to specify zoom levels
and that is by using the scales property.

scales
scales: {Array}

To specify the scales, pass in an array of scale values. When using this property, do not
use the minResolution, maxResolution, minScale, maxScale, numZoomLevels,
minExtent or resolutions properties. If these properties are set, they override the
scales property and it will not be used. You should also specify the unit property if your
projection is using units other than 'degrees'.
Like the resolutions array, scales are ordered from highest to lowest—most zoomed out
to most zoomed in. You can use map.getScale() to get the scale of the current zoom level.

maxScale
maxScale: {Float}

This specifies the maximum scale of the map. This property is similar to maxResolution—it
limits how far out the user can zoom the map. If you specify the maxScale property, setting
the maxResolution or minResolution properties may cause errors. Use either scales or
resolutions, but avoid mixing them.

minScale
minScale: {Float}

This property specifies the map's minimum scale. More specifically, it determines how
far the user can zoom in. If you set this property, the same idea applies as with
maxScales—do not mix scales and resolutions properties.
When setting maxScale and minScale, the minScale value should be

larger than the maxScale value.

[ 204 ]

Download from Wow! eBook 

Chapter 8

Time for Action – Using scales
Using scales is another way we can control the zoom levels on our map. Let's take a look.

1.

Create your map object using minScale and maxScale as follows:
map = new OpenLayers.Map('map_element', {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher()
],
maxScale: 27683990.15625,
minScale: 221471921.25
});

2.

You should see something like this:

3.

Now, let's go back to the code and recreate our map object. This time, we'll
pass in a scales array.
//Create a map with an empty array of controls
map = new OpenLayers.Map('map_element', {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher()
],
scales: [ 55367980.3125, 27683990.15625, 13841995.078125,
6920997.5390625],
});

[ 205 ]

Charting the Map Class

4.

You should see something like this:

What Just Happened?
We just used scales to determine the zoom levels of our map. Using scales or resolutions
comes in handy when you want to specify the maximum or minimum zoom levels, as well
as if you want to specify a hard-coded array of zoom level values (and especially when you
are working with a cached tile server). Let's talk about some other, non zoom level related
properties now.

panMethod
panMethod: {Function} Default: OpenLayers.Easing.Expo.easeOut

This property specifies what type of tween animation will be used when panning the map.
The default value is a function called OpenLayers.Easing.Expo.easeOut, which causes
the animation to 'ease out' (or slow down) when the panning is finished. At the time of
writing, the possible values are OpenLayers.Easing.Expo, OpenLayers.Easing.
Quad, and OpenLayers.Easing.Linear. Each of those three base functions are divided
into three further types: easeOut ('out' means when the animation is finished), easeIn (in
means when the animation starts), and easeInOut (which means the animation will happen
at both times). The docs at http://dev.openlayers.org/docs/files/OpenLayers/
Tween-js.html will contain the most up to date possible values.
When specifying this property, use the full combination of the base class and subclass, such
as OpenLayers.Quad.easeInOut. The animation effect will occur whenever the map is
panned, such as when using the pan arrow buttons, panning the map with your keyboard, or
calling panTo().

[ 206 ]

Chapter 8

panDuration
panDuration: {Integer} Default: 50

Specifying this will control how long panning takes to complete. Like the panMethod
property, this property only effects the panning animation of the map.

Time for Action – working with Pan animations
OpenLayers gives us the ability to use different types of animations when the user pans
the map. Using the properties we just discussed, let's learn how to customize the pan
animations.

1.

Create a new page from the template in Chapter 1. Define your map object like this,
passing panMethod and panDuration properties:
map = new OpenLayers.Map('map_element', {
panMethod: OpenLayers.Easing.Quad.easeInOut,
panDuration: 100
});

2.

Pan the map by clicking on one of the arrows in the control on the top left. In
Firebug, call the following panTo function to pan the map to pass in a coordinate:
map.panTo(new OpenLayers.LonLat(-18,42);)

3.

You should see an animation when panning the map.

What Just Happened?
We just used the panMethod and panDuration properties to customize our map's pan
animations. Changing the panDuration will affect how long the animation itself lasts,
and changing the panMethod determines which type of animation to use. By using these
properties, you can mimic the way Google Maps or other third party maps function.

Have a Go Hero – use different animation types
Using what we learned from the previous section, try changing the panMethod property
to various different possible values (such as OpenLayers.Expo.easeInOut) to see the
different animation styles. Also, change the panDuration to see how much different values
affect the speed of the animation.
Let's get back to some more map properties now.

[ 207 ]

Charting the Map Class

projection
projection: {String} Default: 'EPSG:4326'

We've covered this in depth in Chapter 4, our chapter on projections, so we don't need to
spend much time going over it here. Essentially, if you are using a projection other than
EPSG:4326, then you can set the EPSG code here to specify your map's projection. All your
layers should be in the same projection as your map's projection. If you do set the projection
here, you will also usually have to specify related properties such as the maxExtent,
maxResolution, and units (if the projection is not in degrees).

theme
theme: {String or null} Default: 'theme/default/style.css'

This property specifies the relative path (meaning, relative to the path your map page is in)
to the map's theme style file—a CSS file. If you are using your own theme file, you should
specify the path to the CSS file here, along with setting the OpenLayers.ImgPath (the path
of any custom map images).
This property can also be set to null, in which case you can simply include CSS file link tags
in your page (or put style information in