open layers

OPEN LAYERS

HistoryGoogle Maps◦ Announced on February 2005◦ Possibility to explore the world

OpenLayers◦ First release on June 2006◦Open alternative to Google Maps and Bing made by a group of MetaCarta

employees

History

2004 20072005

Google

Maps

2006

Yahoo

! Map

s API

Microso

ft Virtu

al Ea

rth API

Yahoo

! Map

s API

V2

Microso

ft Live

Local

Kosm

osnim

ki

NASA W

orld W

ind

Microso

ft Live

Local

3D

Géopo

rtail

Géopo

rtail 3

D

Google

Acqu

ires K

eyho

le

Bayern

Viewer

Bayern

Viewer

3D

OpenL

ayer

s

What is OpenLayer?◦an API for building web mapping applications◦pure client-side object-oriented JavaScript, using components

from Prototype.js and the Rico library ◦AJAX (Asynchronous JavaScript and XML)◦efficient tiling◦BSD licensed (standard licence for open source software)

The Map….◦The map is the central piece on a web mapping application

and is represented by instances of the OpenLayers.Map class◦The map has some important properties: 

projection, resolutions(zoom levels), units, etc◦A map contains one or more layers◦A map can contain one or more controls

The Map….

The Map….

The Map…The map has plenty of methods to deal with:

◦LayersaddLayer(), getLayer(), removeLayer(), ...◦ControlsaddControl(), getControl(), removeControl(), ...◦To move around:zoomTo(), zoomIn(), zoomOut(), pan(), panTo(), ...

The Layers…

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

◦All layers inherit from the base class OpenLayers.Layer

The Layers…defines some common properties for all subclasses:

The Layers…We can classify layers in two main categories:◦Raster (for imagery) Raster layers show imagery from different service providers: Google, Bing, a WMS server, OSM, etc

◦Vector (for features)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, ...

The Layers…

Raster Layers…

Vector Layers…

The Layers…◦The protocol determines the way a vector layer

communicates with a data source (HTTP,…). It must be an instance of some of the OpenLayers.Protocol subclasses

◦The format determines how features must be read or written. It must be an instance of some of the OpenLayers.Format subclasses

The Layers…When a layer must be drawn:◦The layer calls the protocol so it can load the data◦The protocol communicates with the data source and reads

the data◦The protocol uses the specified format to transform the data

into features and add them to the layer◦The layer delegates to the renderer the task to render

the features◦The renderer draws each feature

The Layers…

OpenLayers differentiates two kinds of layers: 

Base layers and Overlays

The Layers…

The Layers…

◦Base layers are mutually exclusive, only one can be shown at a time

◦There can be any number of OverLays◦The isBaseLayer() property inherited from OpenLayers.Layer

determines the kind of the Layer

The Truth About OpenLayer…

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

The Truth About OpenLayer…

The Controls…

◦Controls allows to interact with the Map◦All controls inherits from base class OpenLayers.Control

The Controls…

◦Controls allows to interact with the Map◦All controls inherits from base class OpenLayers.Control◦OpenLayers offers controls for almost any required

action: navigation, zoom, feature selection,feature edition, etc

The Controls…

Here is the output

Another output ( Vector layer )

Thanks for You Attention…