Your SlideShare is downloading. ×

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

6,514

Published on

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

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,514
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
129
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×