OpenLayers 2.10 Beginner's Guide

OpenLayers 2.10 Beginner's Guide
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • Learn how to use OpenLayers through explanation and example
  • Create dynamic web map mashups using Google Maps and other third-party APIs
  • Customize your map's functionality and appearance
  • Deploy your maps and improve page loading times
  • A practical beginner's guide, which also serves as a reference with the necessary screenshots and exhaustive code explanations

Book Details

Language : English
Paperback : 372 pages [ 235mm x 191mm ]
Release Date : March 2011
ISBN : 1849514127
ISBN 13 : 9781849514125
Author(s) : Erik Hazzard
Topics and Technologies : All Books, Web Development, Beginner's Guides, Open Source

Table of Contents

Chapter 1: Getting Started with OpenLayers
Chapter 2: Squashing Bugs With Firebug
Chapter 3: The 'Layers' in OpenLayers
Chapter 4: Wrapping Our Heads Around Projections
Chapter 5: Interacting with Third Party APIs
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
Appendix: Pop Quiz Answers
  • 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
    • Where to go for help
      • This book's website
      • Mailing lists
      • IRC
    • OpenLayers source code repository
    • Summary
    • Chapter 2: Squashing Bugs With Firebug
      • What is Firebug?
      • Setting up Firebug
      • Time for Action – downloading Firebug
      • Firebug controls
        • Panels
          • Console panel
          • HTML panel
          • CSS panel
          • Script panel
          • DOM panel
          • Net panel
      • 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
        • 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:
          • Parameters versus arguments
        • Time for Action – configuring the options parameter
        • Configuring layer options
          • wms_state_lines layer options
            • Scale dependency
          • wms_layer_labels layer options
            • The visibility property
            • The opacity property
        • Map tiles
          • Many images make up a map
        • Available layer properties
          • Data types
          • OpenLayers.Layer class properties
            • Modifying layer properties
        • 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
        • Layer class methods
        • Time for Action – defining a global layer object variable
          • Layer class method definitions
        • Summary
        • Chapter 4: Wrapping Our Heads Around Projections
          • Map projections
            • Why on earth are Projections used?
            • Projection characteristics
              • Area
              • Scale
              • Shape
              • Other characteristics
            • Types of projections
              • EPSG codes
          • Time for Action – using different projection codes
            • Specifying a different projection
            • Longitude/Latitude
              • Latitude
              • Longitude
          • Time for Action – determining LonLat coordinates
          • OpenLayers projection class
            • Creating a projection object
              • Parameters
              • Functions
          • Transforming projections
          • Time for Action – coordinate transforms
            • The Proj4js library
          • Time for Action – setting up
            • Defining custom projections
          • Summary
          • 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
            • 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
            • Microsoft's mapping API
            • Time for Action – creating a Bing/Virtual Earth Layer
              • VirtualEarth layer class properties
                • Possible type values
            • OpenStreetMap
            • 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
            • 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
              • 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
              • Time for Action – using attributions
                • OpenLayers.Control.EditingToolbar
                • OpenLayers.Control.Graticule
                  • Graticule properties
                • OpenLayers.Control.KeyboardDefaults
                  • KeyboardDefaults properties
                • OpenLayers.Control.LayerSwitcher
                  • LayerSwitcher properties
                  • LayerSwitcher functions
                • OpenLayers.Control.MousePosition
                  • MousePosition properties
                • OpenLayers.Control.Navigation
                  • Navigation properties
                • OpenLayers.Control.NavigationHistory
                  • NavigationHistory properties
                  • NavigationHistory functions
              • Time for Action – using the NavigationHistory control
                • OpenLayers.Control.NavToolbar
                • OpenLayers.Control.OverviewMap
                  • OverviewMap properties
                  • OverviewMap functions
                • OpenLayers.Control.PanPanel
                  • PanPanel properties
                • OpenLayers.Control.PanZoom
                • OpenLayers.Control.PanZoomBar
                  • PanZoomBar properties
                • OpenLayers.Control.Scale
                  • Scale properties
                • OpenLayers.Control.ScaleLine
                  • ScaleLine properties
                • OpenLayers.Control.ZoomPanel
              • Panels
                • Control types
              • Time for Action – using Panels
                • OpenLayers.Control.Panel
                  • Panel properties
                  • Panel functions
                • Now what?
              • Creating our own controls
                • OpenLayers.Control.Button
                  • Button properties
                  • Button functions
              • 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
              • Chapter 7: Styling Controls
                • What is CSS?
                  • Ideas behind CSS and HTML
                  • Editing CSS
                  • HTML elements
                    • HTML—IDs and classes
                  • 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
                • OpenLayers and CSS
                  • Styling OpenLayers—using themes
                  • Creating your own themes
                    • OpenLayers—class names and IDs
                • Time for Action – styling controls
                • Time for Action – styling the LayerSwitcher control
                • Other resources
                • Summary
                • Chapter 8: Charting the Map Class
                  • The Map class
                    • Creating a map object
                  • Map class properties
                    • Map properties
                      • allOverlayers
                      • controls
                      • displayProjection
                      • div
                  • 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
                  • Time for Action – using resolutions array
                    • Map/Layer property inheritance
                    • Map properties discussion—Continued
                      • maxResolution
                      • minResolution
                  • 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
                  • 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
                  • Time for Action – using eventListeners
                    • Using
                    • 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
                    • What is the Vector Layer?
                      • What makes the Vector Layer special?
                        • The Vector Layer is client side
                      • 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
                      • 'Renderers' array
                    • Time for Action – changing the Renderers array
                    • Vector Layer class
                      • OpenLayers.Layer.Vector properties
                      • OpenLayers.Layer.Vector methods
                        • Working with features
                    • 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
                    • 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
                    • The Vector class, part two
                      • Format, protocol, and strategy classes
                        • Who invited these classes over?
                        • Brief overview of the three classes
                        • How these three classes interact
                        • Example instantiation
                    • 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
                      • Styling the Vector Layer
                        • Applying styles
                          • What are symbolizers?
                      • Time For Action – applying some basic Styling
                      • The StyleMap class
                        • What is an 'intent'?
                      • The Style class
                        • Symbolizer properties
                          • List of common symbolizer properties
                      • Time for Action – common style examples
                        • Remaining symbolizer properties
                    • 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
                    • 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
                    • Time For Action – figuring out logical filters
                      • Feature.Spatial
                    • Summary
                      • Chapter 11: Making Web Map Apps
                        • Development strategies
                        • Creating a web map application using Flickr
                          • Note on APIs
                            • Accessing the Flickr public data feeds
                          • How we'll do it
                        • Time For Action – getting Flickr data
                          • Why did we do this?
                            • Reducing possible errors
                        • Time for Action – adding data to your map
                        • Time for Action – extract style
                        • Turning our example into an application
                          • Adding interactivity
                            • Selecting features
                        • 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
                        • 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
                        • Time for Action – building a Config file
                          • Running the build script
                      • Time for Action – running the Build script
                      • Summary
                        • Appendix: Pop Quiz Answers
                          • 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

                          Erik Hazzard

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

                          Code Downloads

                          Download the code and support files for this book.

                          Submit Errata

                          Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                          - 5 submitted: last submission 05 Nov 2013

                          Errata type: Techinal    Page No: 173

                          With this code, we're creating a div element with an ID of 'map'
                          Should be:
                          With this code, we're creating a div element with an ID of 'map_element'


                          Errata type: Typo    Page No: 21

                          Line [14]:  'WMS Layer Title',

                          Should be

                          Line [14]:  'OpenLayers WMS ',

                          Errata type: Code    Page No: 18

                          The following:


                          should be


                          Errata type: Code    Page No: 16

                          The following (line 22 code):


                          should be:


                          Errata type: Code    Page No: 293

                          The following (point 6 in the code):

                          vector_style_map.addUniqueValueRules('default', 'settlement_type', feature_symbolizers_lookup);

                          It should be:

                          vector_style_map.addUniqueValueRules('default', 'settlement_type', symbolizers_lookup);

                          Sample chapters

                          You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                          Frequently bought together

                          OpenLayers 2.10 Beginner's Guide +    Machine Learning with R =
                          50% Off
                          the second eBook
                          Price for both: £26.35

                          Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                          What you will learn from this book

                          • Learn how to set up OpenLayers and use it to create your own web maps
                          • Debug your map to find out how it works and how to fix things that break
                          • Investigate the multitude of different layer types OpenLayers supports out of the box
                          • Customize your map's settings to support different projections, resolutions, controls, and more
                          • Learn about what projections are and how to work with them
                          • Use Google, Bing, Yahoo, and other third-party maps directly in your own map
                          • Understand the numerous map controls provided out of the box and learn how to develop and customize your own
                          • Add real-time, client-side interaction with the Vector layer and customize its appearance
                          • Work with external data formats like KML, GeoJSON, and many others
                          • Develop a complex web map application using external data sources from Flickr, Twitter, and more
                          • Learn how to deploy and optimize your web map

                          In Detail

                          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.


                          This is a beginner's guide with the essential screenshots and clearly explained code, which also serves as a reference.

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

                          Code Download and Errata
                          Packt Anytime, Anywhere
                          Register Books
                          Print Upgrades
                          eBook Downloads
                          Video Support
                          Contact Us
                          Awards Voting Nominations Previous Winners
                          Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                          Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software