OpenLayers 2.10 Beginner's Guide

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

OpenLayers 2.10 Beginner's Guide

Beginner's Guide
Erik Hazzard

Create, optimize, and deploy stunning cross-browser web maps with the OpenLayers JavaScript web mapping library
$26.99
$44.99
RRP $26.99
RRP $44.99
eBook
Print + eBook
$12.99 p/month

Get Access

Get Unlimited Access to every Packt eBook and Video course

Enjoy full and instant access to over 3000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

+ Collection
Free Sample

Book Details

ISBN 139781849514125
Paperback372 pages

About This Book

  • 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

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.

Table of Contents

Chapter 1: Getting Started with OpenLayers
What is OpenLayers?
What, technically, is OpenLayers?
Anatomy of a web-mapping application
Relation to Google / Yahoo! / and other mapping APIs
The OpenLayers website
Time for action – downloading OpenLayers
Time for action – creating your first map
How the code works
Behind the scenes—Object Oriented Programming (OOP)
Time for Action – play MadLibs
Now what?
Where to go for help
OpenLayers source code repository
Summary
Chapter 2: Squashing Bugs With Firebug
What is Firebug?
Setting up Firebug
Time for Action – downloading Firebug
Firebug controls
Panel conclusion
Using the Console panel
Time for Action – executing code in the Console
Time for Action – creating object literals
Time for Action – interacting with a map
Summary
Chapter 3: The 'Layers' in OpenLayers
What's a layer?
Layers in OpenLayers
Time for Action – creating a map with multiple layers
Creating layer objects
Time for Action – configuring the options parameter
Configuring layer options
Map tiles
Available layer properties
The OpenLayers.Layer class
Other layer types
Time for Action – creating a Google Maps layer
Time for Action – using the image layer
Accessing layer objects
Time for Action – accessing map.layers
Time for Action – accessing layer objects in Firebug
Layer class methods
Time for Action – defining a global layer object variable
Summary
Chapter 4: Wrapping Our Heads Around Projections
Map projections
Time for Action – using different projection codes
Time for Action – determining LonLat coordinates
OpenLayers projection class
Transforming projections
Time for Action – coordinate transforms
Time for Action – setting up Proj4js.org
Summary
Chapter 5: Interacting with Third Party APIs
Third party mapping APIs
Google Maps
Time for Action – using Goole Maps V3 (standard way)
Time for Action – creating a Google Map layer with V2 (Deprecated)
Yahoo! Maps API
Time for Action – using the Yahoo! Maps Layer
Microsoft's mapping API
Time for Action – creating a Bing/Virtual Earth Layer
OpenStreetMap
Time for Action – creating an OpenStreetMap Layer
Spherical Mercator
Time for Action – using Spherical Mercator
Using Google Maps and other layers
Time For Action – creating your first mashup
Summary
Chapter 6: Taking Control of Controls
What are controls?
Adding controls to your map
Time for Action – creating a map with no controls
Time for Action – adding controls to a map
OpenLayers.Control class
OpenLayers.Control subclasses
Time for Action – using attributions
Time for Action – using the NavigationHistory control
Panels
Time for Action – using Panels
Creating our own controls
Creating a custom button
Time for Action – creating a simple button
Events
Time for Action – creating a custom TYPE_TOGGLE control
Summary
Chapter 7: Styling Controls
What is CSS?
Time for Action – using external CSS files
OpenLayers and CSS
Time for Action – styling controls
Time for Action – styling the LayerSwitcher control
Other resources
Summary
Chapter 8: Charting the Map Class
The Map class
Map class properties
Time for Action – using the allOverlays Map property
Time for Action – setting zoom levels and maxExtent
Time for Action – using resolutions array
Time for Action – using Min and Max resolution
Time for Action – Using scales
Time for Action – working with Pan animations
Map functions
Time for Action – using control methods
Time for Action – using coordinate related functions
Doing stuff with events
Time for Action – using eventListeners
Time for Action – working with Map events
Multiple maps
Time for Action – using multiple map objects
Time for Action – creating a multiple map and custom event application
Summary
Chapter 9: Using Vector Layers
What is the Vector Layer?
Time for Action – creating a Vector Layer
How the Vector Layer works
Time for Action – changing the Renderers array
Vector Layer class
Time for Action – adding features
Time for Action – destroying features
Time For Action – working with feature events
Vector Layer class events
Time For Action – using Vector Layer events
Time For Actions – working with more events
Geometry and Feature classes
Time for Action – using Geometry class methods
Time For Action – using the SelectFeature control
The Vector class, part two
Time for Action – creating a Vector Layer
Using the Vector Layer without a Protocol class
Time for Action – using the Format and Strategy classes alone
Format class
Strategy class
Summary
Chapter 10: Vector Layer Style Guide
Styling the Vector Layer
Time For Action – applying some basic Styling
The StyleMap class
The Style class
Time for Action – common style examples
Attribute replacement
Time For Action – working with attribute replacement
Rules and filters
Time For Action – using addUniqueValueRules
Rules and filters
Time for Action – using rules and filters
OpenLayers.Rule class
OpenLayers.Filter class
Time For Action – figuring out logical filters
Summary
Chapter 11: Making Web Map Apps
Development strategies
Creating a web map application using Flickr
Time For Action – getting Flickr data
Time for Action – adding data to your map
Time for Action – extract style
Turning our example into an application
Time for Action – adding some interactivity
Using real time data with a ProxyHost
Time for Action – getting dynamic data
Wrapping up the application
Time For Action – adding dynamic tags to your map
Deploying an application
Building the OpenLayers Library file
Time for Action – building a Config file
Time for Action – running the Build script
Summary

What You Will Learn

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

Authors

Table of Contents

Chapter 1: Getting Started with OpenLayers
What is OpenLayers?
What, technically, is OpenLayers?
Anatomy of a web-mapping application
Relation to Google / Yahoo! / and other mapping APIs
The OpenLayers website
Time for action – downloading OpenLayers
Time for action – creating your first map
How the code works
Behind the scenes—Object Oriented Programming (OOP)
Time for Action – play MadLibs
Now what?
Where to go for help
OpenLayers source code repository
Summary
Chapter 2: Squashing Bugs With Firebug
What is Firebug?
Setting up Firebug
Time for Action – downloading Firebug
Firebug controls
Panel conclusion
Using the Console panel
Time for Action – executing code in the Console
Time for Action – creating object literals
Time for Action – interacting with a map
Summary
Chapter 3: The 'Layers' in OpenLayers
What's a layer?
Layers in OpenLayers
Time for Action – creating a map with multiple layers
Creating layer objects
Time for Action – configuring the options parameter
Configuring layer options
Map tiles
Available layer properties
The OpenLayers.Layer class
Other layer types
Time for Action – creating a Google Maps layer
Time for Action – using the image layer
Accessing layer objects
Time for Action – accessing map.layers
Time for Action – accessing layer objects in Firebug
Layer class methods
Time for Action – defining a global layer object variable
Summary
Chapter 4: Wrapping Our Heads Around Projections
Map projections
Time for Action – using different projection codes
Time for Action – determining LonLat coordinates
OpenLayers projection class
Transforming projections
Time for Action – coordinate transforms
Time for Action – setting up Proj4js.org
Summary
Chapter 5: Interacting with Third Party APIs
Third party mapping APIs
Google Maps
Time for Action – using Goole Maps V3 (standard way)
Time for Action – creating a Google Map layer with V2 (Deprecated)
Yahoo! Maps API
Time for Action – using the Yahoo! Maps Layer
Microsoft's mapping API
Time for Action – creating a Bing/Virtual Earth Layer
OpenStreetMap
Time for Action – creating an OpenStreetMap Layer
Spherical Mercator
Time for Action – using Spherical Mercator
Using Google Maps and other layers
Time For Action – creating your first mashup
Summary
Chapter 6: Taking Control of Controls
What are controls?
Adding controls to your map
Time for Action – creating a map with no controls
Time for Action – adding controls to a map
OpenLayers.Control class
OpenLayers.Control subclasses
Time for Action – using attributions
Time for Action – using the NavigationHistory control
Panels
Time for Action – using Panels
Creating our own controls
Creating a custom button
Time for Action – creating a simple button
Events
Time for Action – creating a custom TYPE_TOGGLE control
Summary
Chapter 7: Styling Controls
What is CSS?
Time for Action – using external CSS files
OpenLayers and CSS
Time for Action – styling controls
Time for Action – styling the LayerSwitcher control
Other resources
Summary
Chapter 8: Charting the Map Class
The Map class
Map class properties
Time for Action – using the allOverlays Map property
Time for Action – setting zoom levels and maxExtent
Time for Action – using resolutions array
Time for Action – using Min and Max resolution
Time for Action – Using scales
Time for Action – working with Pan animations
Map functions
Time for Action – using control methods
Time for Action – using coordinate related functions
Doing stuff with events
Time for Action – using eventListeners
Time for Action – working with Map events
Multiple maps
Time for Action – using multiple map objects
Time for Action – creating a multiple map and custom event application
Summary
Chapter 9: Using Vector Layers
What is the Vector Layer?
Time for Action – creating a Vector Layer
How the Vector Layer works
Time for Action – changing the Renderers array
Vector Layer class
Time for Action – adding features
Time for Action – destroying features
Time For Action – working with feature events
Vector Layer class events
Time For Action – using Vector Layer events
Time For Actions – working with more events
Geometry and Feature classes
Time for Action – using Geometry class methods
Time For Action – using the SelectFeature control
The Vector class, part two
Time for Action – creating a Vector Layer
Using the Vector Layer without a Protocol class
Time for Action – using the Format and Strategy classes alone
Format class
Strategy class
Summary
Chapter 10: Vector Layer Style Guide
Styling the Vector Layer
Time For Action – applying some basic Styling
The StyleMap class
The Style class
Time for Action – common style examples
Attribute replacement
Time For Action – working with attribute replacement
Rules and filters
Time For Action – using addUniqueValueRules
Rules and filters
Time for Action – using rules and filters
OpenLayers.Rule class
OpenLayers.Filter class
Time For Action – figuring out logical filters
Summary
Chapter 11: Making Web Map Apps
Development strategies
Creating a web map application using Flickr
Time For Action – getting Flickr data
Time for Action – adding data to your map
Time for Action – extract style
Turning our example into an application
Time for Action – adding some interactivity
Using real time data with a ProxyHost
Time for Action – getting dynamic data
Wrapping up the application
Time For Action – adding dynamic tags to your map
Deploying an application
Building the OpenLayers Library file
Time for Action – building a Config file
Time for Action – running the Build script
Summary

Book Details

ISBN 139781849514125
Paperback372 pages
Read More