Once Upon a Time... OpenLayers

About me...

I have a secret...

I am A Curious Animal !!!

About this presentation...

Both works are open !!!
Feel free to download and contribute to it !!!

OpenLayers

History

Google Maps

OpenLayers

References

OpenLayers Wiki here, Wikipedia entry here

Before to continue...

Remember...

The source code is the best place to learn
The code is the best place to learn

The Map

The Map

The map is the central piece on a web mapping application and is represented by instances of the OpenLayers.Map class.

An application can have one or more maps but instances of layers and controls attached to a map can't be used on another one
Map UML class diagram

Example

Create a HTML element for the map: Create a OpenLayers.Map instance:

The Map

The Methods

The map has plenty of methods to deal with:

Time for action...

Examples...

...from the Chapter 1 - Mapping Basics of the OpenLayers Cookbook source code:

Lets go to see the examples

The Layers

Layers

The concept of Layer allows us to group/classify the elements that must be rendered on the Map

All layers inherits from the base class OpenLayers.Layer, which defines some common properties for all subclasses:

Layer UML class diagram

Layers' Hierarchy

We can classify layers in two main categories:

Raster and vector layers

Base Layers and Overlays

OpenLayers differentiates two kinds of layers: Base layers and Overlays.

Base layer vs overlays

Time for action...

Examples...

...from the Chapter 1 - Mapping Basics of the OpenLayers Cookbook source code:

Lets go to see the examples

Raster Layers

Raster layers

OpenLayers raster layers hierarchy
OpenLayers raster layers hierarchy

Raster layers

Google Maps

OpenLayers raster Google layer

Bing

OpenLayers raster Bing layer

OpenStreetMap

OpenLayers raster OSM layer

WMS servers

OpenLayers raster WMS layer

MapQuest

OpenLayers raster MapQuest layer

Image file

OpenLayers raster layer from image file

Time for action...

Examples...

...from the Chapter 2 - Raster Layers of the OpenLayers Cookbook source code:

Lets go to see the examples

Vector Layers

Vector layers

Vector layers allows us to work with features loaded from a data source...

A feature is digital representation of something in the real world: city, river, mountain, ...
OpenLayers vector layers hierarchy

Notes

Vector layers

WFS

OpenLayers vector layer WFS

KML

OpenLayers vector layer KML

Features

OpenLayers vector layer features

Clusters

OpenLayers vector layer with clustering

Features

OpenLayers feature's hierarchy

Geometries

OpenLayers geometry's hierarchy

Note

Renderers

There exists different technologies to draw graphics in the browser (mainly HTML5 Canvas element and SVG)

A renderer abstracts the way a vector layer renders features (geometries) in the browser without worry on the technology to use.

OpenLayers renderer's hierarchy

Protocols & Formats

A vector layer can load data from many data source (HTTP, WFS, SOS, ...) and with many data formats (GeoJSON, GML, KML, ...)

OpenLayers protocol's hierarchy OpenLayers format's hierarchy

Styles, Rules & Filters

There are different ways to style a feature:

Strategies

Strategies allows us to determine some aspects of the vector layer's behavior

OpenLayers strategies hierarchy

Some common Strategies...

Let's make a summary...

Challenge Accepted Vector layer summary set of classes

When a layer must be drawn:

Time for action...

Examples...

Lets go to see the examples

...from the Chapter 3 - Vector Layers of the OpenLayers Cookbook source code:

More examples...

Lets go to see the examples

...from the Chapter 7 - Stylings of the OpenLayers Cookbook source code:

Events

The truth about OpenLayers...

Most of the JavaScript code we write with OpenLayers is transformed into HTML elements !!!

OMG Cat

Next JavaScript code...

becomes...

Events

Events are like the nerves in our applications (action -> reaction)

...and how OpenLayers components implements events ?

Listening...

How listen for DOM element events?

Given next HTML button:

We can use this JavaScript code:

How listen for OpenLayers events?

Remember to unregister your listeners !!!

Time for action...

Examples...

...from the Chapter 4 - Events of the OpenLayers Cookbook source code:

Lets go to see the examples

Controls

Controls

Controls allows to interact with the Map...

Controls can range from visible widgets (like a buttons) to actions (like the navigation or zoom controls)

Controls

Time for action...

Examples...

...from the Chapter 5 - Controls of the OpenLayers Cookbook source code:

Lets go to see the examples

References

References

Thanks for coming !!!

OpenLayers Presentation Weel Done Sir

Questions ???

/

#