Tras una nueva actualización en nuestro proyecto webmapping damos paso a un nuevo tutorial dónde descifraremos la manera de implementar la función para geolocalizar nuestra posición en nuestro visor web de mapas mediante un botón de control.
El plugin lo podemos encontrar en el repositorio de Leaflet con el nombre “Leaflet Locate” publicado por Dominik Moritz y sobre el que es posible extender una amplia variedad de funciones para mejorar su apariencia y funcionalidad.
Nos descargaremos la carpeta de código en nuestro directorio de datos y desde el archivo README podremos seguir los pasos para implementar el código en nuestro proyecto. Aquí podréis ver el código en el que hemos servido la capa de OSM y a la que le hemos añadido el plugin “Leaflet Locate”.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximumscale=1.0, user-scalable=no" />
<!--Incorporar a nuestra página web archivos externos -->
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="recursos/css/estilos.css">
<link rel="stylesheet"href="recursos/css/leaflet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="recursos/css/L.Control.Locate.min.css"/>
<!-- Libreria JS -->
<script src="recursos/js/leaflet.js"></script>
<script src="recursos/js/L.Control.Locate.min.js"></script>
<script src="https://unpkg.com/togeojson@0.14.2"></script>
</head>
<body>
<div id ="map"> </div>
<script>
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');
var map = L.map('map', {
center: [38.085, -0.946],
zoom: 15,
layers: osm });
<!-- Añadiendo geolocalización mediante JS-->
var lc = L.control.locate({
position: 'topleft',
strings: {
title: "Show me where I am!"
}
}).addTo(map);
</script>
</body>
</html>Si ejecutamos el código esta sería su apariencia visual.
Os recordamos que podéis seguir el proyecto completo en la siguiente dirección web. Al mismo tiempo os recordamos las publicaciones que hemos realizado de nuestro proyecto, y que puedes seguir paso a paso.
1. Cómo empezar con un proyecto de Visor Webmapping. Trabajando sobre la librería Leaflet.
2. Insertando nuestro primer mapa base con Leaflet.
3. Añadiendo funcionalidad a un proyecto de Leaflet (Mapa de Localización y controles).
Add Comment