Your SlideShare is downloading. ×

Mapas digitales

742
views

Published on

Parte práctica del taller "Geolocalización y servicios basados en la localización en unidades de información" impartido en el COBDC sobre mapas digitales.

Parte práctica del taller "Geolocalización y servicios basados en la localización en unidades de información" impartido en el COBDC sobre mapas digitales.

Published in: Education

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
742
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
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. Geolocalització i serveis basats en la localització en unitats d’informació: mapes digitals rubenalcarazmartinez@gmail.com Twitter: @ralcarazm 26/02/2014
  • 2. Google Maps Engine Lite https://mapsengine.google.com/map 2
  • 3. Fundamentos • Capa: Organizan el contenido permitiendo mostrar u ocultar diferentes tipos de contenidos. • Marcadores (POI): Punto de ubicación específico. • Líneas: Para marcar caminos, ríos, crear polígonos, etc. • Polígonos: Permiten destacar una zona en el mapa. • Indicaciones: Podemos marcar recorridos entre dos o más puntos. 3
  • 4. Fundamentos 4
  • 5. Importar marcadores 5
  • 6. Compartir el mapa • Botón compartir > Hacer público en la web o dar privilegios a usuario • Si lo hacemos público lo podemos incrustar en nuestro web 6
  • 7. Resultado 7
  • 8. MapBox https://www.mapbox.com/ 8
  • 9. MapBox • Aplicación en línea que nos permite crear mapas digitales. • Basado en leaflet y OpenStreetMaps. • API utilizada por Foursquare para generar sus mapas. 9
  • 10. MapBox https://www.mapbox.com/plans/ 10
  • 11. MapBox Crear un nuevo proyecto Resumen de la cuenta (estadísticas, actividad, etc.) Lista de proyectos , edición y Posibilidad de crear nuevas creación de nuevos proyectos. capas y utilizarlas en nuestros mapas mediante una aplicación de escritorio. 11
  • 12. MapBox Guardar Salir Estilo (color, capas, idioma, etc.) Añadir marcadores Buscar 12
  • 13. MapBox Editar el proyecto Compartir en redes sociales, enlace o incrustar en un web. Borrar 13
  • 14. Mapbox.js • Construido a partir de Leaflet, su API debe ser interpretada a partir de la de esa biblioteca (http://leafletjs.com/reference.html). • API: https://www.mapbox.com/mapbox.js/api/v1.5.0/ • Ejemplos: https://www.mapbox.com/mapbox.js/example/v 1.0.0/ • Iconos para Mapbox: https://www.mapbox.com/maki/ 14
  • 15. OpenStreetMap 15
  • 16. OpenStreetMap • OpenStreetMap (OSM) es un proyecto iniciado en 2004 por Steve Coast, y mantenido desde 2006 por la OpenStreetMap Foundation, que tiene como objetivo fomentar el crecimiento, desarrollo y distribución de datos geoespaciales libres. • Filosofía similar a la de Wikipedia, en el que cualquier persona puede registrarse y colaborar desinteresadamente en la creación de un mapamundi digital libre, de una manera similar a la que la Fundación Wikimedia intenta crear una enciclopedia libre. • Desde 2009 colaboran enlazando contenidos en ambos sentidos • En enero de 2013 había más de 1 millón de usuarios registrados 16
  • 17. OpenStreetMap Editar OSM Capas Leyenda Compartir Notas 17
  • 18. OpenStreetMap Enlace Incrustar Generar imagen estática 18
  • 19. OpenStreetMap Datos sobre el elemento añadido Añade POI al mapa Elementos lineales (autopistas, calles, canales, etc. Parques, edificios, lagos, etc. 19
  • 20. Otros recursos • Kroski, Ellyssa (2013). “Do-It-Yourself GIS: 20 Free Tools & Data Sources for Creating Data Maps”. iLibrarian. http://oedb.org/ilibrarian/do-it-yourself-gis20-free-tools-data-sources-for-creating-datamaps/ 20
  • 21. Google Maps Api v3 21
  • 22. Google Maps Api v3 • API basada en AJAX y JavaScript, que permite a terceros desarrolladores la creación de aplicaciones basadas en los servicios de Google Maps. • Documentación: https://developers.google.com/maps/docume ntation/javascript/tutorial?hl=es 22
  • 23. Estructura básica • Elementos – Obligatorios • HTML • CSS • JS – Opcionales • Imágenes, iconos… 23
  • 24. El archivo HTML • Debe cargar la API de Google Maps desde la cabecera. • Una buena práctica consiste en separar el estilo (CSS) y el código de programación (JS) del HTML. <link type="text/css" href="css/estilo.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="js/mapa.js"></script> 24
  • 25. El archivo HTML • Para que el mapa aparezca en una página web, se debe reservar un lugar para él. Normalmente, lo hacemos mediante la creación de un elemento div con nombre y la obtención de una referencia a este elemento en el modelo de objetos de documento (DOM) del navegador <body> <div id="mapa"></div> </body> 25
  • 26. La hoja de estilo Determina el estilo (dimensiones, borde, márgenes, etc.) de nuestro mapa #mapa { width: 100%; height: 500px; border: 1px solid #000; } 26
  • 27. Google Maps Api v3 window.onload = function() { … } Nos permite inicializar el código javascript cuando carga la página 27
  • 28. Google Maps Api v3 window.onload = function() { … } Nos permite inicializar el código javascript cuando carga la página 28
  • 29. Google Maps Api v3 var catalunya = new google.maps.LatLng(41.652393,1.691895); var mapOptions = { center: catalunya, zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('mapa'), mapOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(41.381269, 2.138956), map: map, title: 'Facultat de Biblioteconomia', icon: 'iconos/green.png‘ }); var infowindow = new google.maps.InfoWindow({ content:'<h1>Facultat de Biblioteconomia i Documentaci&oacute;</h1><p>Adre&ccedil;a: Carrer de Melcior de Palau, 140, 08014 Barcelona.</p><p>Tel&egrave;fon: 934 03 57 70.</p><img src="imagenes/bid.png" alt="Facultat de Biblioteconomia i Documentaci&oacute;">' }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); 29
  • 30. Ejemplos y tutoriales • https://developers.google.com/maps/docume ntation/javascript/examples/?hl=es • http://code-tutor.appspot.com/maps_api • http://snazzymaps.com/ 30
  • 31. Librerías de Javascript • http://openlayers.org/ • http://leafletjs.com/ 31