Uno de los beneficios de la cartografía en JavaScript es que los dispositivos móviles pueden ejecutar el código en un navegador web estándar sin ningún tipo de aplicaciones o plugins externas.
Leaflet se puede ejecutar en dispositivos móviles, como iPhone, iPad y dispositivos Android.
Cualquier página web con un mapa Leaflet trabajarán en un dispositivo móvil sin ningún cambio; aunque también es posible personalizar y ajustar el aspecto de un mapa de Leaflet en un móvil, de tal forma que al funcionar parezca que fue construido específicamente para el móvil.
La clase L.map () de Leaflet es la clase central del Leaflet. Se utiliza para crear un mapa y manipularlo. Pues bien esta clase dispone de un método de geolocalización: el método locate (), que utiliza la W3C Geolocation API. Esta API de Geolocalización permite encontrar y rastrear una ubicación de usuario mediante la dirección IP, la información de la red inalámbrica, o el GPS de un dispositivo. No es necesario saber cómo utilizar la API; Leaflet se encarga de todo cuando se invoca al método locate ().
Ajuste de las dimensiones del mapa a la pantalla del móvil
Si no has trabajado antes con Leaflet te recomendamos leer este artículo: Cómo crear un mapa con Leaflet en el que te explicamos cómo crear una estructura básica de un visor web, utilizando HTML, CSS y JavaScript. Continuaremos trabajando sobre esta base.
El primer lugar debemos convertir el mapa Leaflet a una versión para móvil de tal forma que podamos verlo correctamente.
El aspecto visual se controla mediante el código CSS. CSS es un lenguaje que trabaja junto a HTML para otorgar estilos visuales a los elementos del documento, como tamaño, color, fondos, bordes,etc.
Debemos cambiar la parte comprendida entre las etiquetas <style> por el siguiente código.
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
</style>
Con este código lo que hacemos es indicar que el cuerpo (body) de nuestro mapa ocupe todo el espacio disponible sin dejar ningún tipo de margen. Para entender los conceptos de padding y margin observa el siguiente diagrama:
- El atributo margin indica qué distancia debe haber entre el borde y el contenido exterior que lo rodea.
- El atributo padding indica qué distancia debe haber entre el borde y el contenido interno del elemento.
Estableciendo ambos atributos al valor 0, hacemos que el mapa ocupe toda la pantalla.
Además estamos asignando al html, body y <div id =»map»> un valor height del 100%, es decir le estamos asignando todo el ancho disponible.
El último paso para poder visualizar correctamente el mapa consiste en añadir el siguiente código en <head>.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximumscale=1.0, user-scalable=no" />
El código anterior modifica la vista de la página. Este código equipara la ventana gráfica a la anchura del dispositivo y lo hace en una proporción de 1: 1. Por último, se desactiva la posibilidad de cambiar el tamaño de la página web, lo cual, sin embargo, no afecta a la capacidad de hacer zoom en el mapa.
Utilizando la geolocalización
Hasta el momento hemos configurado la página con HTML y CSS para que el mapa de Leaflet sea visible en un móvil de forma correcta.
Ahora vamos a iniciar la escritura del código en JavaScript. Lo que buscamos es que aparezca nuestra localización en el mapa a través de la API de Geolocalización. Vamos a hacerlo en seis pasos:
1.- Creamos una instancia a map, pero no usamos setView:
var map = L.map('map');
2.- Añadimos la capa de OpenStreetMap:
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
3. Definimos una función para cuando la búsqueda de la ubicación se realiza con éxito.
function buscarLocalizacion(e) {
L.marker(e.latlng).addTo(map);
}
4. Definimos una función para cuando no es posible encontrar la ubicación.
function errorLocalizacion(e) {
alert("No es posible encontrar su ubicación. Es posible que tenga que activar la geolocalización.");
}
La función alert () crea un pop-up (ventana emergente) en el navegador con el mensaje que se ha pasado como parámetro. Si el navegador no es capaz de localizar al usuario, mostrará el mensaje. En algunas ocasiones el dispositivo solicitará un permiso para compartir la ubicación. Será necesario darle permiso para poder continuar.
5. Añadimos un evento para las funciones que hemos creado.
map.on('locationerror', errorLocalizacion);
map.on('locationfound', buscarLocalizacion);
Un evento es la respuesta que da el programa ante una acción realizada por el usuario (por ejemplo un clic con el ratón). En esta ocasión usamos .on que es el alias de addEventListener.
6. Usamos el método locate() para establecer la vista del mapa. Locate tiene varias opciones de las que aquí utilizamos dos: setView y maxZoom.
- La opción setView de locate admite dos valores: true/false. Si es verdad, establece automáticamente la vista de mapa para la ubicación del usuario con respecto a la exactitud de la detección, o devuelve una vista del mundo si no es posible la geolocalización.
- MaxZoom es el zoom máximo para el ajuste automático de la vista cuando se utiliza la opción `setView`.
map.locate({setView: true, maxZoom:12});
En resumen lo que hacen los códigos precedentes es lo siguiente: Creamos un mapa y le añadimos una capa (OpenStreetMap). A continuación, creamos unas funciones y definimos un evento que intenta localizar usuario:
- Si es capaz de localizar al usuario, se ejecuta el código en buscarLocation () y establece la vista del mapa para la latitud y longitud del usuario.
- Si no encuentra el usuario, se ejecuta el código en errorLocalizacion ().
Vamos a analizar con un poco más de detalle el código generado en el punto 3:
function buscarLocalizacion(e) {
L.marker(e.latlng).addTo(map);
}
Este código funcionará cuando se encuentre la ubicación del usuario. La función buscarLocalizacion(e) es un evento de objeto. Es enviada cuando un evento es disparado por la función responsable de manejar los eventos. Contiene la información sobre el evento que es lo que necesitamos conocer.
A continuación, el código crea un marcador (L.marker). La latitud y la longitud se almacenan en e.latlng. A continuación, añadimos el marcador al mapa con .addTo.
El resultado final es algo como esto, donde vemos un marcador con nuestra situación.
Abre una navegador web en un tú móvil (nosotros lo hemos probado con Firefox) y accede al mapa haciendo clic aquí:
http://mappinggis.com/visores_webmapping/leaflet_basic.html
Para obtener el html y el código haz botón derecho sobre el enlce anterior > Guardar enlace como…
Let’s connect!
Date de alta en nuestra newsletter y te enviaremos GRATIS el ebook que te ayudará a impulsar tu perfil GIS:
Vitaminas MappingGIS
Tan solo una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos
Licenciado en Geografía. Máster en Sistemas de Información Geográfica. Consultor GIS desde el año 2004. En MappingGIS desde el año 2012 para ayudarte a impulsar tu perfil GIS y diferenciarte de la competencia. Echa un vistazo a todos nuestros cursos de SIG online.
Buenas noches, una vez mas me es «Muy Útil» el contenido publicado sobre LEAFLET, estoy iniciándome en el Webmapping, y mas concretamente con la API de Leaflet. Hace ya tiempo empecé a trabajar con este PLUGIN, pero al parecer el tema HTTPS que no utiliza Chrome +50 y Safari 10 son un problema para hacer funcionar el GPS del dispositivo con esos navegadores y hacerlo compatible. Sabes si hay opción alternativa a este problema para hacer correr en ambos Navegadores??
Gracias de antemano, y una vez más enhorabuena por los contenidos compartidos 🙂
Excelente entrada al blog, me parece super interesante lo que indicas. Muchas Gracias por tus aportes, por favor no desistan, gracias a ustedes he aprendido bastante de GIS