Mapas digitales
-
Upload
ruben-alcaraz-martinez -
Category
Education
-
view
799 -
download
6
description
Transcript of Mapas digitales
![Page 1: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/1.jpg)
Geolocalització i serveis basats en la localització en unitats d’informació:
mapes digitals
[email protected]: @ralcarazm
26/02/2014
![Page 3: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/3.jpg)
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.
![Page 4: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/4.jpg)
4
Fundamentos
![Page 5: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/5.jpg)
5
Importar marcadores
![Page 6: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/6.jpg)
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
![Page 7: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/7.jpg)
7
Resultado
![Page 9: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/9.jpg)
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.
![Page 11: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/11.jpg)
11
MapBox
Resumen de la cuenta (estadísticas, actividad, etc.)
Lista de proyectos , edición y creación de nuevos proyectos.
Posibilidad de crear nuevas capas y utilizarlas en nuestros mapas mediante una aplicación de escritorio.
Crear un nuevo proyecto
![Page 12: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/12.jpg)
12
MapBox
Salir Estilo (color, capas, idioma, etc.)
Añadir marcadores Buscar
Guardar
![Page 13: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/13.jpg)
13
MapBox
Compartir en redes sociales, enlace o incrustar en un web.
Editar el proyecto Borrar
![Page 14: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/14.jpg)
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/v1.0.0/
• Iconos para Mapbox: https://www.mapbox.com/maki/
![Page 15: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/15.jpg)
15
OpenStreetMap
![Page 16: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/16.jpg)
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
![Page 17: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/17.jpg)
17
OpenStreetMap
Capas Leyenda Compartir NotasEditar OSM
![Page 18: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/18.jpg)
18
OpenStreetMap
Enlace Incrustar Generar imagen estática
![Page 19: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/19.jpg)
19
OpenStreetMap
Añade POI al mapa Elementos lineales (autopistas, calles, canales, etc.
Parques, edificios, lagos, etc.
Datos sobre el elemento añadido
![Page 20: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/20.jpg)
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-gis-20-free-tools-data-sources-for-creating-data-maps/
![Page 21: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/21.jpg)
21
Google Maps Api v3
![Page 22: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/22.jpg)
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/documentation/javascript/tutorial?hl=es
![Page 23: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/23.jpg)
23
Estructura básica
• Elementos– Obligatorios• HTML• CSS• JS
– Opcionales• Imágenes, iconos…
![Page 24: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/24.jpg)
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>
![Page 25: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/25.jpg)
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>
![Page 26: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/26.jpg)
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;
}
![Page 27: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/27.jpg)
27
Google Maps Api v3
window.onload = function() {…}
Nos permite inicializar el código javascript cuando carga la página
![Page 28: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/28.jpg)
28
Google Maps Api v3
window.onload = function() {…}
Nos permite inicializar el código javascript cuando carga la página
![Page 29: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/29.jpg)
29
Google Maps Api v3var 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ó</h1><p>Adreça: Carrer de Melcior de Palau, 140, 08014 Barcelona.</p><p>Telèfon: 934 03 57 70.</p><img src="imagenes/bid.png" alt="Facultat de Biblioteconomia i Documentació">'
});
google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker);});
![Page 30: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/30.jpg)
30
Ejemplos y tutoriales
• https://developers.google.com/maps/documentation/javascript/examples/?hl=es
• http://code-tutor.appspot.com/maps_api
• http://snazzymaps.com/
![Page 31: Mapas digitales](https://reader036.fdocuments.es/reader036/viewer/2022062319/557b6ad8d8b42a12578b4e86/html5/thumbnails/31.jpg)
31
Librerías de Javascript
• http://openlayers.org/
• http://leafletjs.com/