************************
Bootstrap - Mapa Leaflet
************************
.. note::
================= ====================================================
Fecha Autores
================= ====================================================
14 Febrero 2017 * Wladimir Szczerban
================= ====================================================
©2017 Wladimir Szczerban
Excepto donde quede reflejado de otra manera, la presente documentación se halla bajo licencia: Creative Commons (Creative Commons - Attribution - Share Alike: http://creativecommons.org/licenses/by-sa/3.0/deed.es)
Bootstrap - Mapa Leaflet
========================
Crearemos una página Web que contiene un template básico de Bootstrap y un mapa de Leaflet a pantalla completa.
#. Crear una carpeta llamada *visor* dentro del directorio htdocs del Apache. ::
C:\ms4w\Apache\htdocs\visor
#. Crear el archivo *movil.html* dentro de la carpeta visor. En este archivo crearemos la estructura básica del nuestro html con el template básico de Bootstrap. Para ello escribir los siguiente: ::
visor responsivo con Leaflet
Hola mundo, Bootstrap!
#. Abrir el navegador y ver que se muestra la barra de navegación de nuestra aplicación. Podemos ver que el texto *Hola mundo, Bootstrap!* queda debajo de la barra de navegación. ::
http://localhost:81/visor/movil.html
#. Cargar la librería de Leaflet. Debajo de donde cargamos la librería de bootstrap, escribir lo siguiente: ::
#. Cargar la hoja de estilo de Leaflet. Debajo de donde cargamos la hoja de estilo css del bootstrap, escribir lo siguiente: ::
#. Sustituir el elemento h1 que se encuentra dentro del contenedor por el elemento *div* que contendrá el mapa. Debemos copiar lo siguiente dentro del container: ::
#. Agregar los estilos para obtener un mapa a pantalla completa. En el apartado de estilos (style) debemos lo siguiente:
#. Justo al inicio del estilo ::
html, body, #container {
height: 100%;
width: 100%;
overflow: hidden;
}
#. Al final del estilo ::
#mapid {
display: block;
width: auto;
height: 100%;
}
#. Crear el objeto mapa y cargar la capa de OpenStreetMap. Para ellos escribir lo siguiente en el apartado de javascript (script) al final de la página. ::
var map = L.map('mapid').setView([41.68, 1.85], 9);
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
#. Recargamos la página en el navegador y debemos ver el mapa. Podemos observar que el mapa tiene un espacio en blanco en la parte superior y en los lados.
.. |logo_border| image:: _images/mapa_bordes.png
:align: middle
:alt: mapa con bordes
+---------------+
| |logo_border| |
+---------------+
#. Para eliminar estos espacios en blanco y tener el mapa a pantalla completa debemos modificar el estilo *body > .container-fluid*, para ellos escribir: ::
body > .container-fluid {
padding: 50px 0 0 0;
}
#. Ahora si recargamos la página veremos el mapa a pantalla completa.
.. |logo_full_map| image:: _images/mapa_pantalla_completa.png
:align: middle
:alt: mapa pantalla completa
+-----------------+
| |logo_full_map| |
+-----------------+
Ejercicios
##########
#. Agregar 2 capas provenientes de servicios WMS.