Open Layers ¿por qué no poner un mapa en tu web?
Jorge Sanz [email_address] Vicent Sanjaime [email_address]
prodevelop http://www.prodevelop.es
geomaticblog.net http://geomaticblog.net
¿qué es Open Layers?
«una biblioteca para añadir mapas a páginas web»
<ul><li>software libre  (licencia tipo BSD)
proyecto de la fundación  OSGeo
toma algunas piezas de </li><ul><li>Prototype.js
Rico </li></ul><li>según ohloh.net: </li><ul><li>10  desarrolladores
127.592  líneas de código js </li></ul></ul>
http://www.ohloh.net/p/openlayers
¿cómo funciona?
<ul><li>en cualquier parte de tu web </li><ul><li><div id= ' map ' /> </li></ul></ul><ul><li>en un script </li><ul><li>map...
... </li></ul></ul>luego veremos más
¿qué puedo hacer con OpenLayers? <ul><li>al objeto de tipo map se le puede añadir: </li><ul><li>capas tipo Google Maps, Op...
datos vectoriales: puntos, líneas y polígonos
controles de navegación e información
… </li></ul><li>algunos controles pueden ir fuera del mapa </li></ul>
http://is.gd/6WHqY ejemplo básico
¿qué no hace/es Open Layers? <ul><li>no es una biblioteca generalista de  widgets
no lee ni escribe en tu sistema
no hace peticiones XML fuera de tu sistema </li></ul>todo esto lo puedes hacer con otros componentes
¿qué no hace/es Open Layers? <ul><li>no es una biblioteca generalista de  widgets </li><ul><li>ExtJS, GWT, etc </li></ul><...
capas de imágenes
capas de geometrías
un ejemplo: Aventura Oceánica  http://is.gd/6sg99
un poco de historia http://vimeo.com/7126247
recursos
documentación http://is.gd/6WF6S
galería de ejemplos http://openlayers.org/dev/examples/
galería de ejemplos http://openlayers.org/dev/examples/
y por supuesto, el código fuente
proyectos  relacionados
<ul><li>proj4js  permite realizar transformaciones </li><ul><li>de sistemas de coordenadas (Lat/Lon a Mercator)
de sistema de referencia (WGS84 a ED50) </li></ul></ul><ul><li>mapfish  y  geoExt  proporcionan widgets </li><ul><li>tabla...
paneles
opciones de visualización en capas
barras de herramientas </li></ul></ul>
http://dev.geoext.org/trunk/geoext/examples/tree.html
Upcoming SlideShare
Loading in...5
×

Open Layers, ¿por qué no poner un mapa en tu web?

6,594

Published on

Presentación de Open Layers realizada con Vicente Sanjaime en Barcamp Valencia.

Las demos se pueden ver en http://is.gd/7qwBH

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,594
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
132
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Open Layers, ¿por qué no poner un mapa en tu web?

  1. 1. Open Layers ¿por qué no poner un mapa en tu web?
  2. 2. Jorge Sanz [email_address] Vicent Sanjaime [email_address]
  3. 3. prodevelop http://www.prodevelop.es
  4. 4. geomaticblog.net http://geomaticblog.net
  5. 5. ¿qué es Open Layers?
  6. 6. «una biblioteca para añadir mapas a páginas web»
  7. 7. <ul><li>software libre (licencia tipo BSD)
  8. 8. proyecto de la fundación OSGeo
  9. 9. toma algunas piezas de </li><ul><li>Prototype.js
  10. 10. Rico </li></ul><li>según ohloh.net: </li><ul><li>10 desarrolladores
  11. 11. 127.592 líneas de código js </li></ul></ul>
  12. 12. http://www.ohloh.net/p/openlayers
  13. 13. ¿cómo funciona?
  14. 14. <ul><li>en cualquier parte de tu web </li><ul><li><div id= ' map ' /> </li></ul></ul><ul><li>en un script </li><ul><li>map = new OpenLayers.Map(' map ');
  15. 15. ... </li></ul></ul>luego veremos más
  16. 16. ¿qué puedo hacer con OpenLayers? <ul><li>al objeto de tipo map se le puede añadir: </li><ul><li>capas tipo Google Maps, OpenStreetMap, etc.
  17. 17. datos vectoriales: puntos, líneas y polígonos
  18. 18. controles de navegación e información
  19. 19. … </li></ul><li>algunos controles pueden ir fuera del mapa </li></ul>
  20. 20. http://is.gd/6WHqY ejemplo básico
  21. 21. ¿qué no hace/es Open Layers? <ul><li>no es una biblioteca generalista de widgets
  22. 22. no lee ni escribe en tu sistema
  23. 23. no hace peticiones XML fuera de tu sistema </li></ul>todo esto lo puedes hacer con otros componentes
  24. 24. ¿qué no hace/es Open Layers? <ul><li>no es una biblioteca generalista de widgets </li><ul><li>ExtJS, GWT, etc </li></ul><li>no lee ni escribe en tu sistema </li><ul><li>componentes en servidor </li></ul><li>no hace peticiones XML fuera de tu sistema </li><ul><li>web proxy </li></ul></ul>
  25. 25. capas de imágenes
  26. 26. capas de geometrías
  27. 27. un ejemplo: Aventura Oceánica http://is.gd/6sg99
  28. 28. un poco de historia http://vimeo.com/7126247
  29. 29. recursos
  30. 30. documentación http://is.gd/6WF6S
  31. 31. galería de ejemplos http://openlayers.org/dev/examples/
  32. 32. galería de ejemplos http://openlayers.org/dev/examples/
  33. 33. y por supuesto, el código fuente
  34. 34. proyectos relacionados
  35. 35. <ul><li>proj4js permite realizar transformaciones </li><ul><li>de sistemas de coordenadas (Lat/Lon a Mercator)
  36. 36. de sistema de referencia (WGS84 a ED50) </li></ul></ul><ul><li>mapfish y geoExt proporcionan widgets </li><ul><li>tablas de contenidos
  37. 37. paneles
  38. 38. opciones de visualización en capas
  39. 39. barras de herramientas </li></ul></ul>
  40. 40. http://dev.geoext.org/trunk/geoext/examples/tree.html
  41. 41. casos de éxito
  42. 42. http://www.cartociudad.es/visor
  43. 43. http://www.urbanresearchmaps.org/oasis/map.aspx
  44. 44. http://www.mapsherpa.com/map-maker
  45. 45. http://www.opencyclemap.org/
  46. 46. muchos más en http://gallery.openlayers.org/
  47. 47. veamos un ejemplo
  48. 48. mapa de hospitales en Puerto Príncipe
  49. 50. ¿qué vamos a ver? <ul><li>Inicializar un mapa
  50. 51. Añadir capas (TMS)
  51. 52. Añadir controles
  52. 53. Añadir una capa vectorial (hospitales)
  53. 54. Añadir popups con los atributos alfanuméricos </li></ul>
  54. 55. Open Layers ¿por qué no poner un mapa en tu web? ¡gracias!
  55. 56. créditos <ul><li>OpenLayers Vector Mayhem · Tim Schaub · FOSS4G 2009 </li><ul><li>http://tinyurl.com/vector-mayhem
  56. 57. http://blip.tv/file/2797899/ </li></ul></ul>
  57. 58. imágenes <ul><li>http://www.flickr.com/photos/70387215@N00/3707187124/
  58. 59. http://www.flickr.com/photos/18789396@N00/144251305/
  59. 60. http://www.flickr.com/photos/70606346@N00/3946004755/
  60. 61. http://www.flickr.com/photos/hawksanddoves/1423312308/
  61. 62. http://www.flickr.com/photos/shellysblogger/2621316845/
  62. 63. http://www.flickr.com/photos/shadybird/3835818941/
  63. 64. http://www.flickr.com/photos/un_photo/4295599257/
  64. 65. http://www.flickr.com/photos/tim_norris/2495859684/ </li></ul>
  65. 66. licencia Este trabajo se distribuye bajo la Creative Commons Atribución-Compartir Igual 3.0 http://creativecommons.org/licenses/by-sa/3.0/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×