OpenLayers 2.10 Beginner's Guide电子书

OpenLayers 2.10

Table of Contents

OpenLayers 2.10

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why Subscribe?

Free Access for Packt account holders

Preface

What you need for this book

What this book covers

Who this book is for

How to read this book

Conventions

Time for action – heading

What just happened?

Pop quiz – heading

Have a go hero – heading

Reader feedback

Customer support

Downloading the example code for this book

Errata

Piracy

Questions

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

What just happened?

Making our first map

Time for action – creating your first map

What just happened?

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

What Just Happened?

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

2. Squashing Bugs With Firebug

What is Firebug?

Setting up Firebug

Time for Action – downloading Firebug

What Just Happened?

Firebug controls

Panels

Console panel

HTML panel

How it works

HTML panel contents

CSS panel

Script panel

DOM panel

Net panel

Request list

Parameters

BBOX parameter

Pop Quiz– panel

Panel conclusion

Using the Console panel

Time for Action – executing code in the Console

What Just Happened?

Time for Action – creating object literals

What Just Happened?

Object literals

Time for Action – interacting with a map

What Just Happened?

Have a Go Hero – experiment with functions

API documentation

Summary

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

What Just Happened?

Creating layer objects

Layer.WMS class

WMS layer parameters:

Name

URL

Params

Possible params keys and values

Options

Parameters versus arguments

Time for Action – configuring the options parameter

What Just Happened?

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

What Just Happened?

Layer.Grid

Layer.Image

Time for Action – using the image layer

What Just Happened?

Image layer parameters

Have a Go Hero – make your own image based maps

Layer.MapGuide

Layer.TileCache

Layer.Vector

Layer.VirtualEarth

Layer.WFS

Layer.WMS

Layer.Yahoo

Accessing layer objects

Time for Action – accessing map.layers

What Just Happened?

Time for Action – accessing layer objects in Firebug

What Just Happened?

Accessing layer properties

map.layers

Storing references to layer objects

Pop Quiz – working with Variable Scope

Layer class methods

Time for Action – defining a global layer object variable

What Just Happened?

Layer class method definitions

Have a Go Hero – call some functions

Summary

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

What Just Happened?

Specifying a different projection

Pop Quiz – projections

Longitude/Latitude

Latitude

Longitude

Time for Action – determining LonLat coordinates

What Just Happened?

OpenLayers projection class

Creating a projection object

Parameters

Functions

Transforming projections

Time for Action – coordinate transforms

What Just Happened?

The Proj4js library

Time for Action – setting up Proj4js.org

What Just Happened?

Defining custom projections

Summary

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)

What Just Happened?

Creating a Google Map layer object

Google layer properties

sphericalMercator {Boolean}

type {GmapType}

V3 GMapType values

V2 GMapType values

Time for Action – creating a Google Map layer with V2 (Deprecated)

What Just Happened?

Yahoo! Maps API

Time for Action – using the Yahoo! Maps Layer

What Just Happened?

Yahoo! Maps Layer class properties

Yahoo! Maps Layer types

Microsoft's mapping API

Time for Action – creating a Bing/Virtual Earth Layer

What Just Happened?

VirtualEarth layer class properties

Possible type values

OpenStreetMap

Time for Action – creating an OpenStreetMap Layer

What Just Happened?

Accessing your own OSM tiles

Spherical Mercator

Spherical Mercator—EPSG code

Time for Action – using Spherical Mercator

What Just Happened?

Map properties with Spherical Mercator layers

maxExtent

maxResolution

units

projection

Using Google Maps and other layers

Time For Action – creating your first mashup

What Just Happened?

WMS with Spherical Mercator/third party map layers

Summary

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

What Just Happened?

Time for Action – adding controls to a map

What Just Happened?

Have a go hero – add controls

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

What Just Happened?

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

What Just Happened?

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

What Just Happened?

Pop Quiz – zoomBox control type

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

What Just Happened?

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

What Just Happened?

Summary

7. Styling Controls

What is CSS?

Ideas behind CSS and HTML

Editing CSS

HTML elements

HTML—IDs and classes

HTML IDs

HTML classes

Styling HTML elements with CSS

Using CSS in your code

Time for Action – using external CSS files

What Just Happened?

Have a Go Hero – view HTML and CSS in Firebug

Cascading Style Sheets—Inheritance

Order of inheritance

Referencing elements

Pop Quiz – how to reference elements

OpenLayers and CSS

Styling OpenLayers—using themes

Creating your own themes

OpenLayers—class names and IDs

Generated class names

Generated IDs

Time for Action – styling controls

What Just Happened?

Time for Action – styling the LayerSwitcher control

What Just Happened?

Have a Go Hero – add layers

Other resources

Summary

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

What Just Happened?

eventListeners

fallThrough

layers

maxExtent

minExtent

restrictedExtent

numZoomLevels

Time for Action – setting zoom levels and maxExtent

What Just Happened?

Map properties—Continued

Resolutions

Time for Action – using resolutions array

What Just Happened?

Map/Layer property inheritance

Map properties discussion—Continued

maxResolution

minResolution

Time for Action – using Min and Max resolution

What Just Happened?

scales

maxScale

minScale

Time for Action – Using scales

What Just Happened?

panMethod

panDuration

Time for Action – working with Pan animations

What Just Happened?

Have a Go Hero – use different animation types

projection

theme

tileSize

unit

Map functions

Control related

Time for Action – using control methods

What Just Happened?

Extent/Coordinate/Bounds related

Methods

Time for Action – using coordinate related functions

What Just Happened?

Pop Quiz – 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

What Just Happened?

Using map.events.register

Event object

Time for Action – working with Map events

What Just Happened?

Multiple maps

Using multiple map objects

Time for Action – using multiple map objects

What Just Happened?

Multiple maps and custom events

Time for Action – creating a multiple map and custom event application

What Just Happened?

Summary

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

What Just Happened?

Pop Quiz – why use 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

What Just Happened?

Vector Layer class

OpenLayers.Layer.Vector properties

OpenLayers.Layer.Vector methods

Working with features

Time for Action – adding features

What Just Happened?

Have a Go Hero – create more points

Vector Layer methods (Continued)

Time for Action – destroying features

What Just Happened?

Vector Layer methods (Continued)

Time For Action – working with feature events

What Just Happened?

Vector Layer class events

Vector Layer event types

Time For Action – using Vector Layer events

What Just Happened?

Time For Actions – working with more events

What Just Happened?

Geometry and Feature classes

Geometry class

Geometry subclasses—Theory

Geometry class methods

Time for Action – using Geometry class methods

What Just Happened?

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

What Just Happened?

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

Protocol class

Format class

Strategy class

How these three classes interact

Example instantiation

Time for Action – creating a Vector Layer

What Just Happened?

Cross server requests

Using a proxy host

Using the Vector Layer without a Protocol class

Time for Action – using the Format and Strategy classes alone

What Just Happened?

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

10. Vector Layer Style Guide

Styling the Vector Layer

Applying styles

What are symbolizers?

Time For Action – applying some basic Styling

What Just Happened?

The StyleMap class

What is an 'intent'?

The Style class

Symbolizer properties

List of common symbolizer properties

Time for Action – common style examples

What Just Happened?

Have a Go Hero – style layers

Remaining symbolizer properties

Pop Quiz – determining which attributes to use

Attribute replacement

Time For Action – working with attribute replacement

What Just Happened?

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

What Just Happened?

Rules and filters

How do they work?

How do we use them?

Time for Action – using rules and filters

What Just Happened?

OpenLayers.Rule class

OpenLayers.Filter class

Filter Subclasses

Filter.Comparison

Filter.Comparison Value property

Filter Comparison types

Filter Type: BETWEEN

Filter Type: EQUAL_TO

Filter Type: GREATER_THAN

Filter Type: GREATER_THAN_OR_EQUAL_TO

Filter Type: LESS_THAN

Filter Type: LESS_THAN_OR_EQUAL_TO

Filter Type: LIKE

Filter Type: NOT_EQUAL_TO

Filter.FeatureId

Feature.Logical

Time For Action – figuring out logical filters

What Just Happened?

Feature.Spatial

Summary

11. Making Web Map Apps

Development strategies

Creating a web map application using Flickr

Note on APIs

Accessing the Flickr public data feeds

Specifying data

How we'll do it

Time For Action – getting Flickr data

What Just Happened?

Have a Go Hero – accessing the Flickr API

Why did we do this?

Reducing possible errors

Time for Action – adding data to your map

What Just Happened?

Time for Action – extract style

What Just Happened?

Turning our example into an application

Adding interactivity

Selecting features

Time for Action – adding some interactivity

What Just Happened?

Using real time data with a ProxyHost

Time for Action – getting dynamic data

What Just Happened?

Wrapping up the application

Recap

The plan

Changing the URL

Time For Action – adding dynamic tags to your map

What Just Happened?

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

What Just Happened?

Pop Quiz – using the Build script

Running the build script

Time for Action – running the Build script

What Just Happened?

Summary

Index