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

7,015 views
6,828 views

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
7,015
On SlideShare
0
From Embeds
0
Number of Embeds
828
Actions
Shares
0
Downloads
138
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/

×