Open Layers

por qu no poner un
mapa en tu web?

Jorge Sanzjsanz@prodevelop.esVicent Sanjaimevsanjaime@prodevelop.es

prodevelop

http://www.prodevelop.es

geomaticblog.net

http://geomaticblog.net

qu es Open Layers?

una biblioteca para aadir mapas a pginas web

software libre (licencia tipo BSD)

proyecto de la fundacin OSGeo

toma algunas piezas dePrototype.js

Rico

segn ohloh.net:10 desarrolladores

127.592 lneas de cdigo js

http://www.ohloh.net/p/openlayers

cmo funciona?

en cualquier parte de tu web

en un scriptmap = new OpenLayers.Map('map');

...

luego veremos ms

qu puedo hacer con OpenLayers?

al objeto de tipo map se le puede aadir:capas tipo Google Maps, OpenStreetMap, etc.

datos vectoriales: puntos, lneas y polgonos

controles de navegacin e informacin

algunos controles pueden ir fuera del mapa

http://is.gd/6WHqY

ejemplo bsico

qu no hace/es Open Layers?

no es una biblioteca generalista de widgets

no lee ni escribe en tu sistema

no hace peticiones XML fuera de tu sistema

todo esto lo puedes hacer
con otros componentes

qu no hace/es Open Layers?

no es una biblioteca generalista de widgetsExtJS, GWT, etc

no lee ni escribe en tu sistemacomponentes en servidor

no hace peticiones XML fuera de tu sistemaweb proxy

capas de imgenes

capas de geometras

un ejemplo: Aventura Ocenica

http://is.gd/6sg99

un poco de historia

http://vimeo.com/7126247

recursos

documentacin

http://is.gd/6WF6S

galera de ejemplos

http://openlayers.org/dev/examples/

galera de ejemplos

http://openlayers.org/dev/examples/

y por supuesto, el cdigo fuente

proyectos
relacionados

proj4js permite realizar transformacionesde sistemas de coordenadas (Lat/Lon a Mercator)

de sistema de referencia (WGS84 a ED50)

mapfish y geoExt proporcionan widgetstablas de contenidos

paneles

opciones de visualizacin en capas

barras de herramientas

http://dev.geoext.org/trunk/geoext/examples/tree.html

casos de
xito

http://www.cartociudad.es/visor

http://www.urbanresearchmaps.org/oasis/map.aspx

http://www.mapsherpa.com/map-maker

http://www.opencyclemap.org/

muchos ms en http://gallery.openlayers.org/

veamos
un ejemplo

mapa de hospitales
en Puerto Prncipe

qu vamos a ver?

Inicializar un mapa

Aadir capas (TMS)

Aadir controles

Aadir una capa vectorial (hospitales)

Aadir popups con los atributos alfanumricos

Open Layers

por qu no poner un
mapa en tu web?

gracias!

crditos

OpenLayers Vector Mayhem Tim Schaub FOSS4G 2009http://tinyurl.com/vector-mayhem

http://blip.tv/file/2797899/

imgenes

http://www.flickr.com/photos/70387215@N00/3707187124/

http://www.flickr.com/photos/18789396@N00/144251305/

http://www.flickr.com/photos/70606346@N00/3946004755/

http://www.flickr.com/photos/hawksanddoves/1423312308/

http://www.flickr.com/photos/shellysblogger/2621316845/

http://www.flickr.com/photos/shadybird/3835818941/

http://www.flickr.com/photos/un_photo/4295599257/

http://www.flickr.com/photos/tim_norris/2495859684/

licencia

Este trabajo se distribuye bajo la Creative Commons Atribucin-Compartir Igual 3.0

http://creativecommons.org/licenses/by-sa/3.0/