En este mega tutorial Tilemill te explicamos qué es TileMill, que peculiaridades tiene y por qué es diferente a cualquier otra aplicación SIG, te explicaremos cómo añadir capas de PostGIS, como dar estilo a nuestras capas, y cómo crear tooltips y leyendas. Por último publicaremos nuestras composiciones en Mapbox y crearemos un sencillo visor web con la API de Mapbox.

¿Qué es TileMill?

TileMill es una aplicación de escritorio pensada para crear bonitos y elegantes mapas web interactivos.

TileMill permite un acercamiento al diseño cartográfico a través del lenguaje CSS, apto tanto para periodistas, diseñadores de páginas web, investigadores o incluso cartógrafos con experiencia.

TileMill está construido sobre un conjunto de librerías open source incluyendo Mapnik, node.js, backbone.js, express y CodeMirror.

TileMill no pretende ser un cliente SIG de uso general, sino que se centra en el diseño de mapas.

¿Qué tipos de datos podemos añadir a TileMill?

Podemos añadir objetos geográficos de cualquiera ed estas fuentes:

• CSV
• Shapefile de ESRI
• KML
• GeoJSON
• GeoTIFF
• Bases de datos SQLite y PostGIS

Enriquece tus mapas

Estilo con CartoCSS

CartoCSS es el lenguaje que utiliza TileMill para aplicar estilos a las capas.

Basado en CSS, Carto nos proporciona todo el control que necesitamos sobre el diseño de la cartografía. Con Carto podemos crear filtros, variables y funciones. TileMill incluye un editor de código.

Bajo las sábanas, TileMill usa Mapnik y Mapnik solo entiende XML. Como escribir y entender XML es difícil para la mayor parte del público, se utiliza Carto como pre-procesador para comunicar cómo debe ser el estilo final.

Mapas interactivos

TileMill nos permite una interactuar con el mapa creando tooltips flotantes y al hacer clic sobre un elemento mostrar popups con la tecnología de red UTF-8.

Incrusta gráficos o imágenes

TileMill también permite insertar gráficos interactivos, imágenes, enlaces y otro contenido en nuestros mapas.

Comparte tus mapas

Publicación de mapas

Los principales resultados que genera TileMill son mapas de teselas (millones de imágenes de 256 píxeles por 256 píxeles) que se pueden cargar rápidamente en mapas interactivos – exportados en formato MBTiles. Los mapas de teselas son la tecnología básica que hay detrás detrás del mejor desplazamiento y zoom sobre los mapas en la web.

También podemos exportar a PNG y PDF desde TileMill para obtener salidas estáticas.

Integración con Mapbox

Con un clic podemos renderizar y cargar nuestros mapas a una cuenta Mapbox.

Comenzamos!

Lo primero que necesitaremos será instalar TileMill. TileMill está disponible para instalar sobre Windows, Ubuntu y Mac Os X

Una vez instalado abrimos TileMill (Inicio > Programas > TileMill) y vemos su interfaz:

1. Barra de herramientas principal
2. Previsualización de mapa
3. Herramientas de edición
4. Editor de hojas de estilo

Importar datos a TileMill

Clic en el botón New Project de la pantalla principal (Projects > New Project)

Introduce un nombre para el proyecto en el campo Filename y pincha en Add

Pinchamos en el proyecto que acabamos de crear para abrirlo. El proyecto contiene una capa por defecto denominada #countries con un código CartoCSS de ejemplo.

Para agregar una capa (independientemente si es un archivo CSV, PostGIS.. ) primero hacemos clic en el botón «Layers» (1), situado en la parte inferior izquierda para abrir el panel Layers y a continuación clic sobre Add Layer(2)

Seleccionamos la opción PostGIS. Verás que los campos cambian.

• Introducimos el nombre cities en el campo “ID”. Este Id se utilizará como referencia a la capa en el selector CartoCSS, en nuestro caso vamos a añadir una capa ciudades que tenemos en una base de datos PostGIS.
• En el apartado Connection introducimos los parámetros de conexión. Necesitamos introducir servidor, puerto, usuario y contraseña:

dbname=world host=localhost port=5432 user=postgres password=postgres

• En tabla o subconsulta escribimos una consulta para acceder a los datos. Este campo actua como una subconsulta. El nombre que especificamos como alias, después del “AS” es arbitrario y no afecta al capo ID que proporcionamos antes. En la subconsulta ( SELECT * from cities ) AS ciudades, seleccionamos todos los campos  de la tabla ciudades.
• Unique key field. Este es el campo de la base de datos que contiene una clave única para la tabla. Normalmente será gid.
• geometry field. En este campo introducimos el nombre del campo de la geometría de nuestra tabla. Este nombre será geom.
• Como Sistema de referencia espacial (SRS) escogemos WGS84 para nuestra capa de ciudades.

Para finalizar pinchamos sobre Save & Style para guardar nuestra conexión y comenzar a dar estilo con CartoCSS. Previsualizaremos los datos en el mapa:

Cambiando el estilo de los datos

Como hemos comentado TileMill utiliza CartoCSS para determinar el aspecto de un mapa. Colores, tamaños y formas pueden ser manipulados mediante la aplicación de  parámetros CSS relativos en el panel de hojas de estilos situado a la derecha del mapa.

Después de pinchar sobre el botón Save & Style se añaden varios parámetros a nuestro estilo y se les asigna un valor inicial.

#cities

Es la capa a la que se aplicarán los estilos (Es el valor ID que introdujimos anteriormente)

marker-width

Para ver los cambios debemos guardar el proyecto, haciendo clic en el botón Save, que se encuentra en la parte superior derecha.

marker-fill

Este es el color de la parte interior del marcador. Hay dos métodos para cambiar los valores de color:

• Podemos escribir un nuevo valor (en código “hex”), o
• Podemos utilizar las muestras de color en la parte inferior del panel CartoCSS.

marker-line-color

Este es el color del borde del marcador.

marker-allow-overlap

Esto permite que los marcadores puedan solaparse unos con otros. Si no se especifica o se establece en false, los marcadores potencialmente superpuestos no se mostrarán

Estilos basados en condiciones

Los estilos basados en condiciones en CartoCSS nos van a permitir cambiar la apariencia de los puntos en el mapa en base a los atributos de los datos.

Vamos a personalizar los puntos de las ciudades en base a su población.

Podemos revisar los datos disponibles de la capa en el inspector de elementos:

Que nos mostrará la tabla de atributos del objeto geográfico.

Añadimos la siguiente regla CartoCSS en la parte inferior de nuestra hoja de estilos. Esta regla CartoCSS establece un mayor marker-width para los elementos con mayor población:

#cities {
 [pop_max >= 100000] { marker-width:3; }
 [pop_max >= 1000000] { marker-width:6; }
 [pop_max >= 5000000] { marker-width:10; }
 [pop_max >= 10000000] { marker-width:14; }
 [pop_max >= 100000000]{ marker-width:20; }
 }

Pincha en Save para guardar los cambios:

Adición de tooltips y leyendas

Los tooltips y las leyendas nos permiten añadir interactividad, información adicional, y un contexto a nuestros mapas. vamos a ver cómo agregar cada uno a nuestro mapa

Tooltips

Un tooltip muestra información cuando el usuario pasa por encima o hace clic en un elemento. Pueden contener HTML y son útiles para mostrar más datos, imágenes u otros contenidos. 

Vamos a agregar tooltips que muestren el nombre de la ciudad y su población.

En primer lugar abrimos el panel Templates haciendo clic en el botón del puntero en la parte inferior izquierda.

A continuación hacemos clic sobre la pestaña Teaser:

Seleccionamos la capa «cities» para usarla para la interacción. TileMill sólo admite una capa interactiva a la vez.

Los campos de datos para la capa se visualiza envueltos entre etiquetas mostacho. Estas etiquetas serán reemplazadas por  datos cuando interactuemos con el mapa. Una vez localizados los campos que queremos utilizar, escribimos en la plantilla dichas etiquetas.

Escribimos el siguiente código en el campo Teaser y utiliza la vista previa para asegurarte de que se ve bien:

{{{name}}} - Población: <br/>{{{pop_max}}}

Hacemos clic en Save para guardar la configuración y actualizar el mapa. Cierra el panel de plantillas  haciendo clic en el botón de cierre (X) o pulsando la tecla ESC. Mueve el ratón sobre algunas ciudades para ver los tooltips.

Leyendas

Las leyendas son estáticas en el mapa y nos sirven para mostrar títulos y descripciones sobre el mapa. Se puede modificar su estilo mediante HTML y puede contener una imagen.

Vamos a añadir una leyenda que describa el tema de nuestro mapa.

Abrimos de nuevo el panel Templates, haciendo clic en el botón del puntero en la parte inferior izquierda.

La pestaña Legend se abre por defecto:

Introducimos nuestro texto en el campo de la leyenda:

<strong>Ciudades del mundo</strong><br/>El tamaño del círculo indica el número de habitantes.

Hacemos clic en Save y cerramos el panel. Ahora veremos una bonita leyenda en la esquina inferior derecha del mapa.

Exportando nuestro mapa a MBTiles

TileMill puede exportar mapas a formatos MBTiles, PNG, PDF, SVG o Mapnik XML.

Vamos a exportar el mapa como MBTiles para crear un mapa totalmente interactivo.

Hacemos clic sobre el botón Export. Aparecerá un menú desplegable:

Seleccionamos la opción «MBTiles«.

• Elige un nombre para Filename.
• Selecciona el número de niveles de zoom. A mayor número de niveles de zoom, mayor espacio ocuparán las teselas.
• Selecciona un centro para el mapa. Esto determinará el centro inicial y un nivel de zoom cuando el mapa se abra por primera vez. Nosotros hemos marcado como centro España.

Para finalizar pinchamos en Export.

La siguiente ventana nos muestra el proceso de exportación:

Cuando el proceso de exportación se haya completado, la barra de progreso será reemplazada por el botón Save. Que nos permite guardar una copia del archivo en una ubicación especifica.

Guardamos el archivo.

Publicando nuestro mapa online con Mapbox

Para publicar nuestro mapa online debemos subir el archivo .MBTiles que acabamos de crear a nuestra cuenta de Mapbox.

Desde nuestra cuenta Mapbox, hacemos clic en la ficha Data en la parte superior derecha de la página junto a la información de la cuenta. Luego hacemos clic en el botón Upload MBTiles.

Clic en el botón Seleccionar archivo y buscamos el archivo MBTiles (también podemos arrastrar y soltar un archivo MBTiles desde el administrador de archivos en el área de carga de archivos).

Clic en el botón Upload file.

Una vez que el archivo MBTiles se ha subido a Mapbox, podemos hacer clic en la capa para ver detalles acerca de sus datos.

Desde aquí podemos Crear un proyecto a partir de nuestro archivo de teselas.

Hacemos clic en Create project:

Una vez creado el proyecto en MapBox lo primero que debemos hacer es asignar un nombre (Project > Settings) y guardar el proyecto (Save).

De este modo ya podremos compartir el mapa, embeberlo en nuestra web o utilizar el Map ID para crear nuestro propio visor. El Map ID es la información primaria que necesitamos para cargar el mapa como TileJSON, ver sus teselas, e incrustarlo en una página web.

Creando un visor webmapping

Mapbox tiene su propia API para crear visores web. Es interesante el uso de esta API, mediante la librería Mapbox.js (un plugin construido sobre Leaflet), que enlaza a una versión estable de Leaflet.

Aunque podemos utilizar la librería Leaflet sin utilizar Mapbox.js de este modo:

L.tileLayer('https://{s}.tiles.mapbox.com/v3/mappinggis.i02dc0eh/{z}/{x}/{y}.png') .addTo(map);

Para utilizar la composición que hemos creado con TileMill (capas, leyenda y tooltips) debemos incluir la librería mapbox.js y el CSS en la cabecera de nuestro HTML y crear el mapa incluyendo el Map ID

 <script>
// Create a map in the div #map
L.mapbox.map('map','mappinggis.i039bfb7');
</script>

La manera de crear un mapa con Mapbox.js es igual que la que hemos visto para crear un mapa en Leaflet, tan solo hay que cambiar la librería mapbox.js y el CSS en la cabecera.

Aquí vemos un ejemplo funcional:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A mapbox map</title>
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
  <link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
#map {
width: 1000px;
height: 500px;
box-shadow: 5px 5px 5px #888;
 }
</style>
</head>
<body>

<div id="map"></div>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibWFwcGluZ2dpcyIsImEiOiJnazhYaEtjIn0.vnzUw_b8IYuEBep4lZ4N9w';
var map = L.mapbox.map('map', 'mappinggis.i02dc0eh')
.setView([41, -4.72], 3);
map.scrollWheelZoom.disable();
</script>
</body>
</html>

Este el resultado de nuestro visor incrustado en la web:

Fuentes y más información:

• Qué es TileMill (Taller Josm + ImpOSM + Tilemill por Pedro-Juan Ferrer Matoses)
• Taller de TileMill (Taller Josm + ImpOSM + Tilemill por Pedro-Juan Ferrer Matoses)
• Documentación oficial de TileMill
• Manual de CartoCSS

Si te ha gustado esta entrada deja un comentario o compártela!

Let’s connect!

Date de alta en nuestra newsletter y te enviaremos GRATIS el ebook que te ayudará a impulsar tu perfil GIS:
Vitaminas MappingGIS

Tan solo una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos

SUSCRÍBETE

Aurelio Morales

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.