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.
Geolocalització i serveis basats en la localització en unitats d'informació: mapes digitals
1. Geolocalització i serveis basats en
la localització en unitats
d’informació:
mapes digitals
rubenalcarazmartinez@gmail.com
Twitter: @ralcarazm
26/02/2014
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
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
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
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
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
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
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
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
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ó</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);
});
29