Existen varios servicios para publicar datos GIS en la nube sin necesidad de saber programar, que nos permiten visualizar cartografía en internet e interactuar con el mapa y con los datos.
Sin embargo, estos servicios tienen ciertas limitaciones: menor personalización, no hay posibilidad de incluir nuevas herramientas, botones o más de fuentes de datos o mapas base y el control sobre las capas será menor.
Una API como OpenLayers o Leaflet tiene un conjunto de funciones y procedimientos que sirven para crear potentes aplicaciones GIS.
Para crear una aplicación web mappping necesitaremos escribir código. Los lenguajes que es necesario conocer son HTML, CSS y JavaScript.
- HTML es el lenguaje de marcado de páginas Web y define la estructura del contenido de una página Web.
- ¿Qué es lo que hace bonita a una página web? Eso es CSS (Cascading Style Sheets u hojas de estilo en cascada).
- JavaScript es el lenguaje de programación Web para crear aplicaciones que se ejecutan en el navegador y le da funcionalidad a las aplicaciones.
Índice
HTML
HTML significa HyperText Markup Language (lenguaje de marcado de hipertexto).
Un lenguaje de marcado es un lenguaje de programación usado para que el texto haga más que solamente aparecer en una página; puede convertir el texto en imágenes, enlaces, tablas, listas, y mucho más.
Cada página web que ves está escrita en un lenguaje llamado HTML. Al igual que cualquier otro lenguaje, tiene su propia sintaxis (reglas para la comunicación).
Un navegador web transformará nuestro texto escrito en HTML en una página web reconocible. El navegador sabe cómo distribuir la página, siguiendo la sintaxis HTML.
CSS
CSS (cuyas siglas significan Cascading Style Sheets, u Hojas de Estilo en Cascada) es un lenguaje usado para describir la apariencia y el formato de tu HTML.
Una hoja de estilo es un archivo que describe como debería verse un archivo HTML.
Decimos que estas hojas de estilo están en cascada porque las hojas pueden aplicar el formato cuando corresponde más de un estilo.
El archivo stylesheet.css contiene toda la información de estilo de CSS: en dónde deberían ir los elementos de HTML, qué color deberían tener, qué tamaño deberían tener, y más.
CSS es un lenguaje muy utilizado por los diseñadores web y en los últimos años se está incorporando en el mundo GIS. La edición de estilos en MapBox Studio Classic o en CartoDB se realiza utilizando CartoCSS.
Como su nombre indica, CartoCSS es como CSS, el lenguaje utilizado para dar estilo a HTML. CartoCSS es el CSS para los datos espaciales.
CartoCSS es un lenguaje utilizado por Mapbox Estudio Classic para construir los clásicos estilos. Utilizando CartoCSS elegimos los colores, aplicamos una simbología en función del nivel de zoom, y en general aplicamos estilos a los datos vectoriales.
Otro ejemplo de uso del lenguaje CSS es la posibilidad de dar simbología a las capas servidas por GeoServer mediante el uso del complemento CSS para GeoServer.
JavaScript
Es uno de los lenguajes de programación más importante. ¿Por qué? Porque en él se programan las aplicaciones para internet y la Web.
JavaScript es el lenguaje líder de interfaces web para crear aplicaciones que se ejecutan en el navegador, es usado en el 95% de las páginas web.
La popularidad del lenguaje de programación, basada en una encuesta StackOverflow para 2021: https://insights.stackoverflow.com/survey/2021#most-popular-technologies-language-prof
Utilizado tanto por Google Maps como por los principales clientes de mapas web open source (OpenLayers o Leaflet).
Podríamos decir que la relación entre JavaScript y el webmapping es análogo a la relación existente entre Python y los SIG de escritorio.
¿Para qué podemos usar JavaScript?
- Para crea sitios web que respondan a las interacciones del usuario.
- Crear aplicaciones webmapping (Openlayers, por ejemplo)
- Acceder a información en Internet (por ejemplo, encontrar las palabras más populares en Twitter según el tema)
- Organizar y presentar datos (por ejemplo, automatizar el trabajo de las hojas de cálculo; o la visualización de datos)
El estándar de la industria para las librerías de JavaScript ha sido la API de Google Maps.
Sin embargo, las bibliotecas JavaScript abiertas (OpenLayers o Leaflet) no están sujetas a los cambios de los planes de pago de soluciones comerciales.
Te recomendamos echar un vistazo al post las mejores APIs JavaScript para webmapping.
Vamos a ver cómo se integran los 3 lenguajes en un único archivo HTML para crear una aplicación web de mapas:
En el ejemplo anterior, vemos cómo se añaden las librerías de Leaflet, se define un estilo para el mapa (ancho y alto) y en el script, es decir, en el fragmento reservado para el código JavaScript, se crea un sencillo mapa, centrado en la coordenada latitud 41,66 y longitud -4.72, con un nivel de zoom de factor 13 y que incluye una capa de OpenStreetMap.
Puedes ver en más detalle cómo crear un sencillo mapa, bien con OpenLayers o con Leaflet.
En nuestros cursos online desarrollo de aplicaciones webmapping y web mapping interactivo con Leaflet te enseñamos a crear y personalizar tus propias aplicaciones SIG en la web.
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.
Gracias.
He estado mirando la opción de trabajar con CARTO, creo que tiene una opción multiusuario, de esta forma diferentes personas de una comunidad podrían acceder i con filtros generar diferentes mapas a partir de la información que yo haya incluido. Pero no consigo averiguar si esta opción multiusuario es también gratuita.
gracias
Aurelio, soy principiante en todo esto y estoy lleno de dudas.
Estoy buscando la forma de crear un visor web o una aplicación web mapping, a parte de la posibilidad de mostrar la información en diferentes capas, me gustaría que tuviera funciones como: mostrar solo los puntos que cumplen una característica (por ejemplo que de todos los edificios de la base de datos muestre solamente los edificios de una antigüedad X, o los situados a una altitud determinada). Que busque elementos situados en un bufer de unos metros determinados al rededor de un punto, etc.
Cual seria la opción mas sencilla para ello. Además debería tratarse de herramientas gratuitas y que no deban alojarse en servidores de pago.
gracias
Hola José,
Para realizar una aplicación que cumpla los requisitos de ser sencillo y además sea gratuito nos limitamos a la versión gratuita de CARTO, que te permite almacenar capas y hacer filtros SQL sobre ellas y análisis espacial.
Otra opción más avanzada es utilizar Leaflet.js en conjunción con Turf.js una librería que permite realizar análisis espacial, te permite . Ëchale un vistazo a nuestro curso online de Leaflet por si fuera de tu interés. En él te enseñamos a publicar tus visores webmapping en internet utilizando un servidor gratuito. Un saludo!
Muy buen articulo, me parece bien aunque considero que le falta, no esta todo dicho aqui, pero me gusto… saludos