You are previewing OpenLayers 2.10.
O'Reilly logo
OpenLayers 2.10

Book Description

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

  • 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

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.

Table of Contents

  1. OpenLayers 2.10
    1. Table of Contents
    2. OpenLayers 2.10
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What you need for this book
      2. What this book covers
      3. Who this book is for
      4. How to read this book
      5. Conventions
      6. Time for action – heading
        1. What just happened?
        2. Pop quiz – heading
        3. Have a go hero – heading
      7. Reader feedback
      8. Customer support
      9. Downloading the example code for this book
        1. Errata
        2. Piracy
        3. Questions
    8. 1. Getting Started with OpenLayers
      1. What is OpenLayers?
        1. Why use OpenLayers?
      2. What, technically, is OpenLayers?
        1. Client side
        2. Library
      3. Anatomy of a web-mapping application
        1. Web map client
        2. Web map server
      4. Relation to Google / Yahoo! / and other mapping APIs
        1. Layers in OpenLayers
        2. What is a Layer?
      5. The OpenLayers website
      6. Time for action – downloading OpenLayers
        1. What just happened?
        2. Making our first map
      7. Time for action – creating your first map
        1. What just happened?
      8. How the code works
        1. Understanding the code—Line by line
        2. JavaScript object notation
      9. Behind the scenes—Object Oriented Programming (OOP)
        1. Interaction happens with objects
        2. MadLibs
      10. Time for Action – play MadLibs
        1. What Just Happened?
        2. Programming with OOP
        3. Subclasses
      11. Now what?
        1. API docs
      12. Where to go for help
        1. This book's website
        2. Mailing lists
        3. IRC
      13. OpenLayers source code repository
      14. Summary
    9. 2. Squashing Bugs With Firebug
      1. What is Firebug?
      2. Setting up Firebug
      3. Time for Action – downloading Firebug
        1. What Just Happened?
      4. Firebug controls
        1. Panels
          1. Console panel
          2. HTML panel
            1. How it works
            2. HTML panel contents
          3. CSS panel
          4. Script panel
          5. DOM panel
          6. Net panel
            1. Request list
              1. Parameters
              2. BBOX parameter
        2. Pop Quiz– panel
      5. Panel conclusion
      6. Using the Console panel
      7. Time for Action – executing code in the Console
        1. What Just Happened?
      8. Time for Action – creating object literals
        1. What Just Happened?
        2. Object literals
      9. Time for Action – interacting with a map
        1. What Just Happened?
        2. Have a Go Hero – experiment with functions
        3. API documentation
      10. Summary
    10. 3. The 'Layers' in OpenLayers
      1. What's a layer?
      2. Layers in OpenLayers
        1. Base layer
        2. Overlay layers
      3. Time for Action – creating a map with multiple layers
        1. What Just Happened?
      4. Creating layer objects
        1. Layer.WMS class
          1. WMS layer parameters:
            1. Name
            2. URL
            3. Params
              1. Possible params keys and values
            4. Options
        2. Parameters versus arguments
      5. Time for Action – configuring the options parameter
        1. What Just Happened?
      6. Configuring layer options
        1. wms_state_lines layer options
          1. Scale dependency
        2. wms_layer_labels layer options
          1. The visibility property
          2. The opacity property
      7. Map tiles
        1. Many images make up a map
      8. Available layer properties
        1. Data types
        2. OpenLayers.Layer class properties
          1. Modifying layer properties
      9. The OpenLayers.Layer class
        1. Subclasses
        2. Layer Class—Sub and super classes
      10. Other layer types
        1. Layer.ArcGIS93Rest
        2. Layer.ArcIMS
        3. Layer.Google
      11. Time for Action – creating a Google Maps layer
        1. What Just Happened?
        2. Layer.Grid
        3. Layer.Image
      12. Time for Action – using the image layer
        1. What Just Happened?
        2. Image layer parameters
        3. Have a Go Hero – make your own image based maps
        4. Layer.MapGuide
        5. Layer.TileCache
        6. Layer.Vector
        7. Layer.VirtualEarth
        8. Layer.WFS
        9. Layer.WMS
        10. Layer.Yahoo
      13. Accessing layer objects
      14. Time for Action – accessing map.layers
        1. What Just Happened?
      15. Time for Action – accessing layer objects in Firebug
        1. What Just Happened?
        2. Accessing layer properties
          1. map.layers
          2. Storing references to layer objects
        3. Pop Quiz – working with Variable Scope
      16. Layer class methods
      17. Time for Action – defining a global layer object variable
        1. What Just Happened?
        2. Layer class method definitions
        3. Have a Go Hero – call some functions
      18. Summary
    11. 4. Wrapping Our Heads Around Projections
      1. Map projections
        1. Why on earth are Projections used?
        2. Projection characteristics
          1. Area
          2. Scale
          3. Shape
          4. Other characteristics
        3. Types of projections
          1. EPSG codes
      2. Time for Action – using different projection codes
        1. What Just Happened?
        2. Specifying a different projection
        3. Pop Quiz – projections
        4. Longitude/Latitude
          1. Latitude
          2. Longitude
      3. Time for Action – determining LonLat coordinates
        1. What Just Happened?
      4. OpenLayers projection class
        1. Creating a projection object
          1. Parameters
          2. Functions
      5. Transforming projections
      6. Time for Action – coordinate transforms
        1. What Just Happened?
        2. The Proj4js library
      7. Time for Action – setting up Proj4js.org
        1. What Just Happened?
        2. Defining custom projections
      8. Summary
    12. 5. Interacting with Third Party APIs
      1. Third party mapping APIs
        1. Map mashups
        2. OpenLayers and third party APIs
      2. Google Maps
        1. Differences between Google Maps version 2 and version 3
      3. Time for Action – using Goole Maps V3 (standard way)
        1. What Just Happened?
        2. Creating a Google Map layer object
        3. Google layer properties
          1. sphericalMercator {Boolean}
          2. type {GmapType}
            1. V3 GMapType values
          3. V2 GMapType values
      4. Time for Action – creating a Google Map layer with V2 (Deprecated)
        1. What Just Happened?
      5. Yahoo! Maps API
      6. Time for Action – using the Yahoo! Maps Layer
        1. What Just Happened?
        2. Yahoo! Maps Layer class properties
          1. Yahoo! Maps Layer types
      7. Microsoft's mapping API
      8. Time for Action – creating a Bing/Virtual Earth Layer
        1. What Just Happened?
        2. VirtualEarth layer class properties
          1. Possible type values
      9. OpenStreetMap
      10. Time for Action – creating an OpenStreetMap Layer
        1. What Just Happened?
        2. Accessing your own OSM tiles
      11. Spherical Mercator
        1. Spherical Mercator—EPSG code
      12. Time for Action – using Spherical Mercator
        1. What Just Happened?
        2. Map properties with Spherical Mercator layers
          1. maxExtent
          2. maxResolution
          3. units
          4. projection
      13. Using Google Maps and other layers
      14. Time For Action – creating your first mashup
        1. What Just Happened?
        2. WMS with Spherical Mercator/third party map layers
      15. Summary
    13. 6. Taking Control of Controls
      1. What are controls?
        1. Using controls in OpenLayers
      2. Adding controls to your map
      3. Time for Action – creating a map with no controls
        1. What Just Happened?
      4. Time for Action – adding controls to a map
        1. What Just Happened?
        2. Have a go hero – add controls
        3. Adding controls by passing in an array of controls
        4. Adding controls to map with addControl() and addControls()
        5. Removing controls
      5. OpenLayers.Control class
        1. OpenLayers.Control properties
        2. OpenLayers.Control functions
      6. OpenLayers.Control subclasses
        1. OpenLayers.Control.ArgParser
        2. OpenLayers.Control.Permalink
        3. OpenLayers.Control.Attribution
          1. Attribution properties
      7. Time for Action – using attributions
        1. What Just Happened?
        2. OpenLayers.Control.EditingToolbar
        3. OpenLayers.Control.Graticule
          1. Graticule properties
        4. OpenLayers.Control.KeyboardDefaults
          1. KeyboardDefaults properties
        5. OpenLayers.Control.LayerSwitcher
          1. LayerSwitcher properties
          2. LayerSwitcher functions
        6. OpenLayers.Control.MousePosition
          1. MousePosition properties
        7. OpenLayers.Control.Navigation
          1. Navigation properties
        8. OpenLayers.Control.NavigationHistory
          1. NavigationHistory properties
          2. NavigationHistory functions
      8. Time for Action – using the NavigationHistory control
        1. What Just Happened?
        2. OpenLayers.Control.NavToolbar
        3. OpenLayers.Control.OverviewMap
          1. OverviewMap properties
          2. OverviewMap functions
        4. OpenLayers.Control.PanPanel
          1. PanPanel properties
        5. OpenLayers.Control.PanZoom
        6. OpenLayers.Control.PanZoomBar
          1. PanZoomBar properties
        7. OpenLayers.Control.Scale
          1. Scale properties
        8. OpenLayers.Control.ScaleLine
          1. ScaleLine properties
        9. OpenLayers.Control.ZoomPanel
      9. Panels
        1. Control types
      10. Time for Action – using Panels
        1. What Just Happened?
        2. Pop Quiz – zoomBox control type
        3. OpenLayers.Control.Panel
          1. Panel properties
          2. Panel functions
        4. Now what?
      11. Creating our own controls
        1. OpenLayers.Control.Button
          1. Button properties
          2. Button functions
      12. Creating a custom button
      13. Time for Action – creating a simple button
        1. What Just Happened?
        2. Other control types
          1. Process for creating other button control types
      14. Events
        1. Event listeners and handlers
        2. Custom events
        3. Creating a TYPE_TOGGLE control
      15. Time for Action – creating a custom TYPE_TOGGLE control
        1. What Just Happened?
      16. Summary
    14. 7. Styling Controls
      1. What is CSS?
        1. Ideas behind CSS and HTML
        2. Editing CSS
        3. HTML elements
          1. HTML—IDs and classes
            1. HTML IDs
            2. HTML classes
        4. Styling HTML elements with CSS
        5. Using CSS in your code
      2. Time for Action – using external CSS files
        1. What Just Happened?
        2. Have a Go Hero – view HTML and CSS in Firebug
        3. Cascading Style Sheets—Inheritance
          1. Order of inheritance
          2. Referencing elements
        4. Pop Quiz – how to reference elements
      3. OpenLayers and CSS
        1. Styling OpenLayers—using themes
        2. Creating your own themes
          1. OpenLayers—class names and IDs
            1. Generated class names
            2. Generated IDs
      4. Time for Action – styling controls
        1. What Just Happened?
      5. Time for Action – styling the LayerSwitcher control
        1. What Just Happened?
        2. Have a Go Hero – add layers
      6. Other resources
      7. Summary
    15. 8. Charting the Map Class
      1. The Map class
        1. Creating a map object
      2. Map class properties
        1. Map properties
          1. allOverlayers
          2. controls
          3. displayProjection
          4. div
      3. Time for Action – using the allOverlays Map property
        1. What Just Happened?
        2. eventListeners
        3. fallThrough
        4. layers
        5. maxExtent
        6. minExtent
        7. restrictedExtent
        8. numZoomLevels
      4. Time for Action – setting zoom levels and maxExtent
        1. What Just Happened?
        2. Map properties—Continued
          1. Resolutions
      5. Time for Action – using resolutions array
        1. What Just Happened?
        2. Map/Layer property inheritance
        3. Map properties discussion—Continued
          1. maxResolution
          2. minResolution
      6. Time for Action – using Min and Max resolution
        1. What Just Happened?
        2. scales
        3. maxScale
        4. minScale
      7. Time for Action – Using scales
        1. What Just Happened?
        2. panMethod
        3. panDuration
      8. Time for Action – working with Pan animations
        1. What Just Happened?
        2. Have a Go Hero – use different animation types
        3. projection
        4. theme
        5. tileSize
        6. unit
      9. Map functions
        1. Control related
      10. Time for Action – using control methods
        1. What Just Happened?
        2. Extent/Coordinate/Bounds related
          1. Methods
      11. Time for Action – using coordinate related functions
        1. What Just Happened?
        2. Pop Quiz – using coordinate related functions
        3. Layer related functions
        4. Other functions
      12. Doing stuff with events
        1. Map event types
        2. Using map events
          1. Using the eventListeners property
      13. Time for Action – using eventListeners
        1. What Just Happened?
        2. Using map.events.register
        3. Event object
      14. Time for Action – working with Map events
        1. What Just Happened?
      15. Multiple maps
        1. Using multiple map objects
      16. Time for Action – using multiple map objects
        1. What Just Happened?
        2. Multiple maps and custom events
      17. Time for Action – creating a multiple map and custom event application
        1. What Just Happened?
      18. Summary
    16. 9. Using Vector Layers
      1. What is the Vector Layer?
        1. What makes the Vector Layer special?
          1. The Vector Layer is client side
        2. Other uses
        3. What is a 'Vector'?
      2. Time for Action – creating a Vector Layer
        1. What Just Happened?
        2. Pop Quiz – why use a Vector Layer?
      3. How the Vector Layer works
        1. How the Vector Layer is rendered
          1. SVG
          2. Canvas
          3. VML
        2. 'Renderers' array
      4. Time for Action – changing the Renderers array
        1. What Just Happened?
      5. Vector Layer class
        1. OpenLayers.Layer.Vector properties
        2. OpenLayers.Layer.Vector methods
          1. Working with features
      6. Time for Action – adding features
        1. What Just Happened?
        2. Have a Go Hero – create more points
        3. Vector Layer methods (Continued)
      7. Time for Action – destroying features
        1. What Just Happened?
        2. Vector Layer methods (Continued)
      8. Time For Action – working with feature events
        1. What Just Happened?
      9. Vector Layer class events
        1. Vector Layer event types
      10. Time For Action – using Vector Layer events
        1. What Just Happened?
      11. Time For Actions – working with more events
        1. What Just Happened?
      12. Geometry and Feature classes
        1. Geometry class
          1. Geometry subclasses—Theory
          2. Geometry class methods
      13. Time for Action – using Geometry class methods
        1. What Just Happened?
        2. Geometry subclasses
        3. Geometry subclass methods
        4. Feature class
          1. How the Feature class works
          2. Feature subclasses
          3. Feature functions
          4. Instantiating a feature object
          5. Interacting with Features using Control.SelectFeature
      14. Time For Action – using the SelectFeature control
        1. What Just Happened?
        2. Control.SelectFeature class
          1. SelectFeature control properties
          2. SelectFeature control methods
      15. The Vector class, part two
        1. Format, protocol, and strategy classes
          1. Who invited these classes over?
          2. Brief overview of the three classes
            1. Protocol class
            2. Format class
            3. Strategy class
          3. How these three classes interact
          4. Example instantiation
      16. Time for Action – creating a Vector Layer
        1. What Just Happened?
        2. Cross server requests
          1. Using a proxy host
      17. Using the Vector Layer without a Protocol class
      18. Time for Action – using the Format and Strategy classes alone
        1. What Just Happened?
      19. Format class
        1. Format class properties
        2. Format class methods
        3. Format subclasses
      20. Strategy class
        1. Strategy.BBOX
        2. Strategy.Cluster
        3. Strategy.Filter
        4. Strategy.Fixed
        5. Strategy.Paging
        6. Strategy.Refresh
        7. Strategy.Save
      21. Summary
    17. 10. Vector Layer Style Guide
      1. Styling the Vector Layer
        1. Applying styles
          1. What are symbolizers?
      2. Time For Action – applying some basic Styling
        1. What Just Happened?
      3. The StyleMap class
        1. What is an 'intent'?
      4. The Style class
        1. Symbolizer properties
          1. List of common symbolizer properties
      5. Time for Action – common style examples
        1. What Just Happened?
        2. Have a Go Hero – style layers
        3. Remaining symbolizer properties
        4. Pop Quiz – determining which attributes to use
      6. Attribute replacement
      7. Time For Action – working with attribute replacement
        1. What Just Happened?
      8. Rules and filters
        1. How do we follow rules?
        2. Using addUniqueValueRules
        3. Calling the addUniqueValueRules function
          1. The intent parameter
          2. The property parameter
          3. The symbolizer_lookup parameter
          4. The context parameter
      9. Time For Action – using addUniqueValueRules
        1. What Just Happened?
      10. Rules and filters
        1. How do they work?
        2. How do we use them?
      11. Time for Action – using rules and filters
        1. What Just Happened?
      12. OpenLayers.Rule class
      13. OpenLayers.Filter class
        1. Filter Subclasses
          1. Filter.Comparison
            1. Filter.Comparison Value property
            2. Filter Comparison types
              1. Filter Type: BETWEEN
              2. Filter Type: EQUAL_TO
              3. Filter Type: GREATER_THAN
              4. Filter Type: GREATER_THAN_OR_EQUAL_TO
              5. Filter Type: LESS_THAN
              6. Filter Type: LESS_THAN_OR_EQUAL_TO
              7. Filter Type: LIKE
              8. Filter Type: NOT_EQUAL_TO
          2. Filter.FeatureId
          3. Feature.Logical
      14. Time For Action – figuring out logical filters
        1. What Just Happened?
          1. Feature.Spatial
      15. Summary
    18. 11. Making Web Map Apps
      1. Development strategies
      2. Creating a web map application using Flickr
        1. Note on APIs
          1. Accessing the Flickr public data feeds
            1. Specifying data
        2. How we'll do it
      3. Time For Action – getting Flickr data
        1. What Just Happened?
        2. Have a Go Hero – accessing the Flickr API
        3. Why did we do this?
          1. Reducing possible errors
      4. Time for Action – adding data to your map
        1. What Just Happened?
      5. Time for Action – extract style
        1. What Just Happened?
      6. Turning our example into an application
        1. Adding interactivity
          1. Selecting features
      7. Time for Action – adding some interactivity
        1. What Just Happened?
      8. Using real time data with a ProxyHost
      9. Time for Action – getting dynamic data
        1. What Just Happened?
      10. Wrapping up the application
        1. Recap
        2. The plan
          1. Changing the URL
      11. Time For Action – adding dynamic tags to your map
        1. What Just Happened?
      12. Deploying an application
      13. Building the OpenLayers Library file
        1. Always try to serve small files
        2. Using the OpenLayers build file
          1. Configuring the build script
      14. Time for Action – building a Config file
        1. What Just Happened?
        2. Pop Quiz – using the Build script
          1. Running the build script
      15. Time for Action – running the Build script
        1. What Just Happened?
      16. Summary
    19. Index