Bootstrap - Mapa Leaflet - Geolocalización¶

Bootstrap - Mapa Leaflet - Geolocalización¶

Añadiremos a nuestro mapa un control que permite la geolocalización del usuario, para ello utilizaremos el plugin de Leaflet Leaflet.Locate [1].

1. Agregar las hojas de estilo. En el head de nuestra página agregar las hojas de estilo, justo debajo de la hoja de estilo del Leaflet. Este plugin hace uso del conjunto de iconos fontawesome [2] por lo tanto también debemos cargar la hoja de estilo de fontawesome. Para ello copiar los siguiente:

   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet.locatecontrol/0.60.0/L.Control.Locate.min.css" />
   

2. Agregar la librería javascript del plugin. Al final de nuestra página debemos añadir la librería justo debajo de donde incluimos la librería de Leaflet. Para ellos escribimos lo siguiente:

   <script src="https://cdn.jsdelivr.net/leaflet.locatecontrol/0.60.0/L.Control.Locate.min.js" charset="utf-8"></script>
   

3. Inicializar el plugin. En el apartado de javascript de nuestra página luego de la declaración del objeto mapa agregamos:

   L.control.locate().addTo(map);
   

4. Abrir el navegador y ver que nos aparece un nuevo control en el mapa.

   http://localhost:81/visor/movil.html
   

5. Al presionar sobre el control nos aparece un mensaje del navegador preguntando si queremos compartir nuestra ubicación. Seleccionamos la opción de compartir y nuestra aplicación debe mostrar nuestra posición en el mapa.