Proyecto de un visor webmapping municipal utilizando la librería Leaflet y toda la potencialidad Open Source para mostrar datos geolocalizados y ayudar a la gestión y desarrollo del territorio.
¿Qué es Leaflet? Se trata de una librería JavaScript Opensource para crear mapas interactivos en un entorno móvil. Este entorno es utilizado por compañías como OSM, GIS Cloud, CARTO, Flickr, Wikimedia, entre otros.
Se trata de una API intuitiva y potente, con características básicas pero que da grandes resultados: ofrece soporte móvil, funciona en todos los navegadores web, posibilidad de desarrollo mediante plugins, existe bastante documentación en la web. Por ello, es mi opción preferida para el desarrollo de un visor web de mapas.
Antes de abordar cualquier proyecto con Leaflet es necesario conocer los lenguajes de programación que se emplean para el diseño y publicación de una página web, como son:
- HMTL: es un lenguaje de marcas para formatear y estructurar un documento, que puede leerse en cualquier navegador. Un documento HTML contiene tres etiquetas que describen su estructura general y nos ofrece información sencilla: <html>, <head> y <body>.
- CSS (Cascading StyleSheets u Hojas de Estilo en Cascada): se trata de un lenguaje usado para describir la apariencia y el formato de tu HTML. Esta hoja de estilo nos dice cómo debería de verse un archivo HTML.
- JavaScript: es un lenguaje de programación web, se trata de una de las partes más importantes ya que se encarga de crear aplicaciones o funciones y ejecutarlas en un navegador.
FASE INICIAL DEL PROYECTO
Comenzaremos creando nuestra propia apariencia de página web, con la intención de que se conozca la finalidad del proyecto e información relativa al mismo (descripción, título, autor, etc.). Es interesante, que aquellos desarrolladores de visores webmapping o interesados que quieran empezar a aprender con esta librería, sigan nuestra página web para estar al tanto de las publicaciones que se van lanzado en relación a este proyecto.
LA CABECERA <HEAD>
El contenido de nuestro archivo HTML irá dentro de las etiquetas de inicio <html> y de cierre </html>. En la cabecera (etiqueta de inicio <head> y de cierre </head> de nuestra página definiremos una serie de etiquetas como pueden ser:
- <TITLE>: nombre que aparece en la cabecera del visualizador y en los buscadores.
- <META>: Especifica la codificación usada en nuestra página web.
- <LINK>: Incorporar archivos externos, acompañados de los tributos rel (tipo de archivo) y href (ruta dónde se encuentra).
A continuación, os mostramos un ejemplo tipo de cabecera y en color verde, la explicación de cada uno de los pasos que damos:
<!-- Indicamos al navegador lenguaje HTML5 --> <!DOCTYPE html> <html> <head> <!--Codificación usada en nuestra página web --> <meta charset="UTF-8"> <!--Descripción del proyecto y palabras clave --> <meta name="description" content="Datos Abiertos Termino Municipal Orihuela"> <meta name ="Keywords" content="HTML, Leaflet, Open Data, ZoneGIS"> <!—Hoja de estilo incorporada a nuestra web --> <link rel="stylesheet" type="text/css" href="recursos/css/estilos.css"> <title>zonegis.es</title> <!-- CSS --> <!-- Libreria JS --> </head> </html>
El CUERPO <BODY>
El contenido que va inserto en el cuerpo es la parte que será visible en nuestra página web, y contendrá una serie de elementos a los que daremos identidad y forma (imágenes, encabezados, tablas, etc.).
Trataremos de darle forma con un encabezado bastante sencillo, compuesto por un título y el logo de nuestro Blog.
<body>
<div class="wrapper">
<!-- Encabezado -->
<header class="header">
<!-- Creamos una tabla para que el logo quede en la parte superior izquierda y el título centrado -->
<table>
<tr>
<!--Le colacamos una imagen en el encabezado y el título-->
<img id="logo" SRC="recursos/img/ZoneGIS.png">
<h1 align="center"> <id="titulo" strong>Visor Web Datos Abiertos T.M Orihuela (Alicante)</h1 strong>
<h2>Desarrollo de aplicación webmapping con Leaflet</h2>
</tr>
</table>
</header>
<!--Fin Encabezado -->
</body>
Si abrimos el código con cualquier navegador web podremos ver que la página web va cogiendo forma.
Tratamos de completar la estructura que sigue la hoja de estilo para el centro y pie de la página. En esta sección hemos definido una serie de etiquetas que describen la finalidad del proyecto y la persona que lo desarrolla, sin más. Es importante respetar la identación de nuestro código para no perdernos y mejorar su lectura.
<!—Centro de página -->
<div class="middle">
<div class="container">
<main class="content">
<div id="map" >
</main>
</div>
<aside class="left-sidebar">
<h2 strong>Información del Proyecto</h2 strong>
<p>Desarrollo de aplicación visor webmapping con Leaflet para publicar datos abiertos del término Municipal de Orihuela.</p>
<p>Se trata de una iniciativa personal para ayudar a la gestión municipal. ¿Cómo? Nuestro visor mostrará datos geolocalizados pudiendo abordar con mayor seguridad y agilidad estudios o proyectos, establecer prioridades y monitorear el territorio que nos rodea</p>
<div class="null">
</div
</aside>
</div>
<!—Fin centro página -->
<!--Pie de página -->
<footer class="footer">
<img align="left" id="logo" SRC="recursos/img/Escudo_de_Orihuela.png" width="100" height="100">
<br><br><br>
<p>Autor: José Enrique Rodríguez Vega</p>
</footer>
<!--Fin Pie de página -->
</div>
</body>
</html>
Si abrimos el código configurado con un lector HMTL como por ejemplo, un navegador web, nos mostraría el resultado visual de toda esa estructura que hemos visto paso por paso.
En la próxima publicación relacionada con el proyecto aprenderemos a añadir a nuestra página web un visor de mapas con algunas funciones, por lo que es importante que estéis atentos a las próximas noticias que lanzará ZoneGIS en el desarrollo de un visor webmapping con Leaflet.
Add Comment