TileMill, el estudio cartográfico¶

TileMill es un herramienta que permite un acercamiento al diseño cartográfico a través de un lenguaje que es familiar a los desarrolladores web. Se trata de un producto de escritorio (aunque se puede ejecutar para acceder vía web). El objetivo de TileMill es diseñar cartografía de la forma más sencilla y atractiva posible generando como productos finales diferentes visualizaciones, tal y como se verá más adelante.

TilMill es software libre, está desarrollado por Mapbox y el código fuente está disponible en su repositorio en GitHub.

Iniciando TileMill¶

Nota

Este taller está diseñado para ejecutarse en OSGeo Live 7.0

Arrancamos TileMill seleccionando la opción del menú Geospatial ‣ Spatial Tools ‣ TileMill

Secciones¶

La interfaz de TileMill dispone de las siguientes secciones:

Editor:: Es el espacio de trabajo del estudio, donde se cargan datos y se a estilo a la cartografía.
Projects:: Espacio para administrar los proyectos que tenemos cargados en TileMill. Solo podemos tener cargado un proyecto cada vez en el editor.
Manual:: Documentación integrada con diversos apartados sobre cómo funciona TileMill.
Plugins:: Sección para activar funcionalidad adicional de TileMill.
Settings:: Configuración de TileMill.

Creando el proyecto¶

TileMill carga por defecto la pestaña de Projects y en ella tenemos el botón + New Project que pulsaremos definir nuestro proyecto.

Nos muestra la ventana de información del proyecto en la que deberemos introducir los datos básicos que lo identifiquen.

Filename: cfp2014
Name: Curso TileMill CFP 2014
Description: Mapa de Nottingham
File format: PNG 24
Default data: Dejar marcado

Y pulsamos el botón Add

Al abrir el proyecto, pulsando sobre el en la pestaña Projects vemos que se han cargado una capa de países por defecto y que tiene un nivel de visualización bastante alto.

Añadiendo datos¶

El primer paso siempre es añadir datos y el primer paso para añadirlos es tener claros sus metadatos, siempre hay que poner especial atención a:

Formato
Tamaño
Sistema de referencia

La confusión en cualquiera de los tres campos puede llevarnos a que la cartografía no se pueda cargar o no quede alineada correctamente.

TileMill no puede reproyectar los datos que usa como origen de información de los mapas que componen, por lo que siempre se le deben proporcionar en uno de los SRS soportados que son EPSG:900913 (EPSG:3857) y WGS84 (EPSG:4326) aunque existe la posibilidad de forzar la reproyección introduciendo los valores adecuados para proj4 que suelen poder conseguirse en http://epsg.io.

Formatos vectoriales admitidos¶

CSV: Se trata de archivos de hoja de cálculo con variables separadas por comas y que tienen la información geográfica en columnas que se llaman «lat» o «latitude» o incluso «geo_longitude», TileMill reconoce automáticamente el nombre de esas columnas.
ESRI Shapefile: Uno de los formatos vectoriales más populares antiguamente. Si el archivo .prj no está presente TileMill intentará averiguar el SRS de la información contenida.
KML: Este formato soportado, tiene algunas limitaciones para ser usado en TileMill ya que no reconoce algunas de las funcionalidades avanzadas de los KMLs (estilos embebidos, imágenes, modelos 3D). Tampoco reconoce el formato KMZ.
GeoJSON: Es uno de los formatos más populares actualmente, es un formato basado solamente en texto con una estructura flexible.

Formatos raster admitidos¶

GeoTIFF: Es uno de los formatos más conocidos para almacenar imágenes aéreas, satélite y modelos de elevación del terreno. Para manipular la información raster TileMill emplea GDAL que es una potentisima biblioteca de acceso a datos raster.

Bases de datos admitidas¶

SQLite: Es el sistema de bases de datos basadas en un solo archivo más popular del Software Libre. Estas bases de datos se pueden generar empleando un software de escritorio como QGis.
PostGIS: Literalmente el elefante en la habitación. El mayor proyecto de base de datos relacional geográfica del Software Libre.

Introducción al lenguaje CartoCSS¶

CartoCSS es el lenguaje que utiliza TileMill para aplicar estilos a las primitivas cartográficas. Está basado en Cascadenik que es un pre-procesador de estilos más antiguo. CartoCSS utiliza la biblioteca de renderizado de cartografía Mapnik, otro excelente componente de software libre.

Mapnik se configura directamente mediante ficheros XML, pero poca gente entiende XML así que hace un tiempo que aparecieron estas herramientas que generan su XML a partir de un lenguaje más sencillo y expresivo, en definitiva para hacer «la vida más fácil» a los usuarios de Mapnik.

TileMill usa Mapnik por debajo y CartoCSS es el lenguaje con el que le comunica cómo deben quedar las cosas.

Pintando puntos¶

#osm_puntos {
  marker-width: 6;
  marker-fill: #EE0000;
  marker-line-color: #55060f;
}

Existen dos tipos de puntos Point y Marker entre los dos suman 30 propiedades.

Pintando lineas¶

#osm_lineas {
  line-width:1;
  line-color:#168;
}

Existen 19 propiedades distintas para las ĺíneas.

Pintando áreas¶

#osm_buildings {
    line-color: darken(#ccc,40%);
    line-width: 2;
    polygon-opacity: 1;
    polygon-fill: #ccc;
}

Existen 5 propiedades distintas para las áreas.

Pintando con clase¶

También se pueden usar clases y condiciones para filtrar las propiedades por atributos o por el nivel de zoom en el que nos encontremos. Finalmente los selectores se pueden anidar para compartir propiedades. Más información en la documentación sobre selectores.

En el ejemplo siguiente se seleccionan todos los puntos de la capa osm_puntos que tengan algún dato en el campo tourism (pidiendo que sea distinto a la cadena de texto vacía) y se aplicará solo a partir del nivel de zoom 14. En ese selector se establecen unas propiedades generales de tamaño y color del borde y a continuación se anidan selectores por cada una de las clases a renderizar estableciendo solo la propiedad que va a cambiar, es decir, el color del símbolo.

#osm_puntos[tourism!=""][zoom>13]{
    /** propiedades generales **/
    marker-width: 8;
    marker-line-color: #000;

    /** temático por tipo de turismo **/
    [tourism="artwork"]{
      marker-fill: #a6cee3;
    }
    [tourism="attraction"]{
      marker-fill: #1f78b4;
    }
    [tourism="gallery"]{
      marker-fill: #b2df8a;
    }
    [tourism="hostel"]{
      marker-fill: #33a02c;
    }
    [tourism="museum"]{
      marker-fill: #e31a1c;
    }
}

Y alguna cosilla más¶

El uso de @ te permite definir variables

/** colores para agua y bosque**/
@water : #c0d8ff;
@forest: #cea;

/** estilos para usos del suelo
    de para agua y bosque **/
#landusage{
    /* características generales */
    line-color: #000;
    line-width: 2;
    polygon-opacity: 1;

    [type="water"]{
      polygon-fill: @water;
    }
    [type="wood"]{
      polygon-fill: @forest;
    }
}

Y existen funciones para operar sobre los colores para aclararlos, oscurecerlos, etc. (referencia de color) :

@border-water: darken(@water,50%);

En algo como esto:

@water  : #c0d8ff;
@forest : #cea;

/** los bordes más oscuros **/
@border-water  : darken(@water,50%);
@border-forest : darken(@forest,50%);

#landusage{
    /* características generales */
    line-width      : 2;
    polygon-opacity : 1;

    [type="water"]{
      polygon-fill : @water;
      line-color   : @border-water;
    }
    [type="wood"]{
      polygon-fill : @forest;
      line-color   : @border-forest;
    }
}

Taller¶

En las siguientes secciones se espera que el alumno repita las acciones propuestas para cargar los distintos tipos de datos soportados por TileMill y aplicando estilos similares a los indicados.

Añadiendo una capa de puntos¶

Procederemos ahora a añadir nuestra primera capa de puntos, para lo que desplegaremos el menú de capas pulsando en el botón y seleccionamos + Add layer

En la ventana que aparece seleccionaremos la opción de PostGIS y rellenamos los campos como se indica.

ID: osm_puntos
Class: puntos
Connection: dbname=nott-osm host=localhost port=5432 user=user password=user
Table or subquery: osm_places
Unique key field: osm_id
Geometry field: geometry
SRS: Seleccionamos 900913

Y pulsamos Save & Style para que añada los datos con un estilo por defecto.

Veremos como inmediatamente aparece un punto en la zona de Inglaterra.

Corrigiendo la visualización por defecto¶

En realidad nuestra zona de trabajo es bastante más pequeña que la que muestra por defecto TileMill, por lo que modificaremos las preferencias para que muestre por defecto una zona más ajustada a nuestro juego de datos. Para ello pulsaremos en el botón de configuración del proyecto y lo configuramos de la siguiente forma:

Zoom: Desplazar las barras para que los niveles de zoom estén entre 12 y 20
Center: -1.1476,52.9531,12
Bounds: -1.2488, 52.9083, -1.0771, 53.0076

Añadiendo elementos lineales¶

Para representar las calles utilizaremos una de las ayudas que proporciona ImpOSM; como ya hemos dicho, por defecto separa las vías en varias tablas, pero también crea una vista de PostGIS que aglutina toda la información relativa a estas.

Añadiremos una nueva capa de PostGIS que lea la información de la tabla osm_roads

Para obtener todos los distintos tipos de vía podemos usar emplearemos pgAdmin III donde podemos lanzar la consulta:

SELECT type as tipo, count(type) as total
FROM osm_roads
GROUP BY type
ORDER BY total DESC, tipo;

Añadiremos una entrada para cada tipo de vía.

residential
footway
service
cycleway
tertiary
unclassified
primary
steps

Para representarlo usaremos el código como el siguiente:

#osm_lineas {
    line-width:1;
    line-color:#cce;
    [type = 'footway'], [type = 'cycleway'] {
          line-color:#f2f974;
    }
    [type = 'residential'],     [type = 'service']  {
          line-color:#aaa;
    }
    [type = 'steps'] {
          line-color:#7cc7fd;
    }
    [type = 'unclassified'] {
          line-color:#ff9f3b;
    }
    [type = 'primary'] {
          line-width:2;
          line-color:darken(#ff9f3b, 30%);
    }
    [type = 'tertiary'] {
          line-width:1.5;
          line-color:darken(#8beb18, 10%);
    }
}

Añadiendo los edificios¶

Añadiremos ahora los edificios, que están en la tabla osm_buildings.

#osm_edificios {
  line-color:#a71b62;
  line-width:0.5;
  polygon-opacity:1;
  polygon-fill:#d86ebb;
}

Importante

El orden de renderizado de las capas es el orden en el que aparecen en el gestor de capas , para cambiar el orden basta pulsar en el indicador del tipo de capa (puntos, líneas y áreas) que hay junto al nombre y arrastrar hacia arriba o hacia abajo la capa.

Añadiendo etiquetas¶

Por último, añadiremos los nombres de las calles, para lo cual primero tenemos que definir una variable, preferentemente al principio de todas las definiciones, que tenga el nombre de la fuente y las posibles fuentes sustitutas si la fuente no está instalada en el sistema.

@futura_med: "Futura Medium","Function Pro Medium","Ubuntu Regular","Trebuchet MS Regular","DejaVu Sans Book";

TileMill incorpora un gestor de fuentes que nos permite ver qué fuentes hay instaladas en el sistema al que se accede empleando el botón de fuentes , las fuentes instaladas aparecen en negrita y el gestor nos permite copiar y pegar literalmente el nombre de la fuente.

Aunque la capa de calles ya tiene el campo name que es el que vamos a utilizar, es siempre muy recomendable volver a añadir la capa y usarla exclusivamente para las etiquetas. En este caso rellenaremos los campos con los siguientes datos:

ID: calles_nombres
Class: nombres
Connection: dbname=nott-osm host=localhost port=5432 user=user password=user
Table or subquery: (SELECT * FROM osm_roads WHERE name IS NOT NULL) AS foo
Unique key field: osm_id
Geometry field: geometry
SRS: Seleccionamos 900913

En esta ocasión en vez de la tabla, hemos usado una subconsulta, de forma que solo carguemos en memoria las entidades que tengan algún valor en el campo name. A las subconsultas hay que añadirles un alias para que TileMill las reconozca.

TileMill habrá asignado a la capa un estilo por defecto para capas de líneas, aunque nosotros lo vamos a modificar para que represente textos:

#calles_nombres {
    text-name: "[name]";
    text-face-name: @futura_med;
    text-placement: line;
}

Estos son los elementos mínimos para que una etiqueta aparezca en TileMill, aunque si vamos a la ayuda del programa y vemos la sección text veremos que las etiquetas tienen 30 opciones de configuración distintas.

Más sobre el lenguaje CartoCSS¶

Usando iconos como marcadores¶

Para usar los iconos deben referenciarse con una ruta relativa a la carpeta del proyecto

Por ejemplo para pintar puntos de interés

.amenity.place[zoom=15] {
  [type='police']{
    point-file: url(../res/comi-9px.png);
  }
  [type='fuel'] {
    point-file: url(../res/petrol-9px.png);
  }
  [type='townhall'],
  [type='university'] {
    point-file: url(../res/poi-9px.png);
  }
}

Pintando cajas de carretera¶

.highway[TYPE='motorway'] {
  .line[zoom>=7]  {
    line-color:spin(darken(@motorway,36),-10);
    line-cap:round;
    line-join:round;
  }
  .fill[zoom>=10] {
    line-color:@motorway;
    line-cap:round;
    line-join:round;
  }
}

.highway[zoom=13] {
  .line[TYPE='motorway']      { line-width: 2.0 + 2; }
  .fill[TYPE='motorway']      { line-width: 2.0; }
}

Extra: OSM-Bright¶

Mapbox ha liberado un proyecto en TileMill para presentar datos de OSM con un estilo atractivo y bien documentado. Para poder usar este proyecto debemos descargar algunos datos base (línea de costa y límites administrativos) y luego ejecutar un script configurando algunos parámetros en un fichero.

En este caso usaremos como fuente de datos de nuevo el fichero de extracción de OSM de Nottingham, creando una nueva base de datos e importando el fichero usando imposm y un fichero de mapping de etiquetas proporcionado por OSM-Bright.

En primer lugar nos esplazamos a la carpeta de trabajo y activamos un entorno virtual con imposm 2.5.0 instalado:

$ cd /home/user/tallerimposm
$ source venv/bin/activate
(venv)$ imposm --version
Enabling Shapely speedups.
imposm 2.5.0

A continuación descargamos OSM-Bright y lo descomprimimos obteniendo una carpeta osm-bright-master a la que nos desplazaremos:

(venv)$ wget -O osmbright.zip "https://github.com/mapbox/osm-bright/archive/master.zip"
(venv)$ unzip osmbright.zip
...
(venv)$ cd osm-bright-master

En esta carpeta descargaremos tres ficheros con cartografía (puede tardar un rato, uno de ellos es bastante pesado):

(venv)$ wget http://tilemill-data.s3.amazonaws.com/osm/coastline-good.zip
(venv)$ wget http://tilemill-data.s3.amazonaws.com/osm/shoreline_300.zip
(venv)$ wget http://mapbox-geodata.s3.amazonaws.com/natural-earth-1.3.0/physical/10m-land.zip

Creamos la base de datos nott-osm-2 y activamos la extensión de PostGIS:

(venv)$ createdb -E UTF8 nott-osm-2
(venv)$ psql -d nott-osm-2 -c "create extension postgis"

Y ya estamos listos para cargar la base de datos usando imposm y el fichero e mapping que hay en la carpeta imposm-mapping.py:

(venv)$ imposm --user user -d nott-osm-2 -m imposm-mapping.py \
    --read --write --optimize --deploy-production-tables \
    /usr/local/share/data/osm/Nottingham.osm.bz2

El siguiente paso es configurar el fichero de OSM-Bright, para ello copiamos el archivo de ejemplo configure.py.sample y lo editamos con medit:

(venv)$ cp configure.py.sample configure.py
(venv)$ medit configure.py

En este fichero deberemos establecer:

imposm como el importador que hemos usado
Si queremos, un nombre para el proyecto
Los parámetros de conexión a la base de datos
Las coordenadas de la zona de interés, que para la zona de Nottingham son -139015.78, 6966053.88,-119902.22, 6984403.83

Con el fichero correctamente configurado estamos listos para crear el proyecto de TileMill. Simplemente en la misma carpeta ejecutamos el script make.py:

(venv)$ python make.py
installing to /home/user/Documents/MapBox/project/OSMBrightNottingham

A continuación podemos abrir TileMill y deberíamos de tener un nuevo proyecto. Al abrir este proyecto probablemente tarde unos segundos en responder ya que tiene que traer de la base de datos un buen número de elementos. Tras unos instantes podremos navegar por la cartografía. Si activamos el plugin tilemill-lots podremos además ver cómo cambia la simbología en los diferentes niveles de zoom.

La zona de trabajo usando OSM Bright y varios niveles de zoom.

La configuración de este proyecto es amplia y compleja, pero activando y desactivando capas y usando el mencionado plugin podemos ir repasando cómo se han ido filtrando los diferentes tipos, y cómo los diseñadores han ido jugando con los niveles de zoom para definir la simbología desde las escalas más pequeñas hasta las de mayor detalle.

Exportando los mapas¶

TileMill genera diferentes productos cartográficos a partir del diseño realizado. Es decir, una vez estamos satisfechos con la simbología, podemos exportar el mapa en diferentes formatos y que responden a diferentes necesidades.

Carga en Mapbox: subir las teselas al servicio de este proveedor para poder insertarlo fácilmente en nuestras aplicaciones web.
PNG: generar una única imagen, lista para insertar en cualquier informe, página web o cualquier otro documento.
PDF: genear una única imagen dentro de un documento en formato PDF.
MBTiles: renderizar las teselas en un fichero en formato MBTiles. Este fichero luego puede utilizarse en cualquier aplicación que soporte este formato.
SVG: la salida en este formato mantiene el formato vectorial y puede ser utilizado por ejemplo para impresiones de alta calidad al permitir su escalado sin perder detalle.
XML de Mapnik: esta salida no devuelve una imagen sino un fichero para la librería Mapnik que podemos luego utilizar con otras herramientas. En este fichero se encuentra definido todo lo necesario para acceder a los datos y darles la simbología seleccionada.

Montando un TMS¶

Como hemos visto, TileMill genera un fichero en formato MBTiles para poder llevar nuestra renderización de un sitio a otro fácilmente. En ocasiones por otro lado, resulta conveniente exportar las teselas almacenadas en la base de datos de este formato a una estructura de carpetas siguiendo el estándar TMS, ya que de esta forma puede resultar accesible por ejemplo por un cliente web como OpenLayers.

Para extraer las imágenes de este tipo de ficheros podemos usar la herramienta mbutil, desarrollada por Mapbox y que ofrece un ejecutable para la línea de comandos que exporta el fichero fácilmente.

Para instalarla teniendo un entorno virtual activado basta con ejecutar:

(venv)$ pip install mbutil

Para generar un TMS ejecutamos:

(venv)$ mb-util --scheme=tms exportado.mbtiles directorio/

Otras alimañas¶

Extensiones¶

TileMill es un software que dispone de extensiones conocidas como plugins. Esta funcionalidad se introdujo a partir de la versión 0.9 aprovechando que NodeJS, el software sobre el que está construído., facilitó el mecanismo para gestionarlos.

Las funcionalidades principales de TileMill se agrupan en cuatro extensiones básicas que no se pueden desactivar (marcadas como Core) y 7 extensiones opcionales disponibles que añaden funcionaliades diversas como poder ver el mapa en varios niveles de zoom a la vez, poder utilizar mapas de Mapbox como mapa base o poder ordenar las columnas en la vista de tabla.

Mapas interactivos¶

TileMill admite cierta interactividad que se puede configurar para cada mapa. Esta interactividad solo es útil si se va a subir el mapa al servicio de alojamiento de teselas de Mapbox, ya que en los productos generados revisados (imágenes, MBTiles, etc.) no se puede acceder a esta funcionaliad. El proyecto Geography Class está cargado por defecto en la instalación de TileMill y es un ejemplo excelente de interacción en el mapa.

Las dos características más interesantes a configurar son:

Leyenda: aparecerá sobre el mapa en la esquina inferior derecha. Se trata de un documento HTML estático que deberemos editar directamente en TileMill.
Tooltip: se configura una plantilla en HTML en la que se puede hacer referencia a los valores del objeto sobre el que el ratón se posiciona. El tooltip solo puede acceder a los campos de una única capa.

Estas opciones se establecen haciendo clic sobre el icono con forma de mano en la parte inferior izquierda de la interfaz de TileMill.

Ejercicio¶

Empleando la cartografía existente en la base de datos nott-osm se requiere realizar un diseño cartográfico que destaque los siguientes elementos:

Vías¶

Se destacará la red viaria de forma que exista una clasificación de carreteras que permita identificar visualmente los siguientes tipos:

motorway y motorway_link
trunk y trunk_link
primary y primary_link
secondary y secondary_link
tertiary
residential
pedestrian, path y cycleway
rail
resto

Tabla: osm_roads

Edificios¶

Se destacará el entramado urbano que permita diferenciar los siguientes tipos:

city_hall, conservatory y museum
college, library y university
flat, flats, house y residential
industrial, light_industry_units
retail, shop, shopping_mall y shops
resto

Tabla: osm_buildings

Áreas¶

Se destacarán con un color distinto debajo de la capa de edificios las siguientes áreas urbanas:

commercial, retail
hospital
industrial
nature_reserve, park, wood
residential
university

En caso de existir una correspondencia entre un tipo de edificios y un área, el área deberá ser un 20% más oscura que el edificio pero emplear el mismo tono, además los polígonos de área deberán tener una opacidad del 10%.

¿Qué tabla hay que emplear? Abre la aplicación Geospatial ‣ Databases ‣ pgAdminIII y explora la base de datos nott-osm para averiguar dónde está la información.

Lugares de interés¶

Para la simbología de lugares de interés emplearemos la biblioteca de símbolos Maki desarrollada también por la empresa Mapbox y el código que hemos visto en la sección Usando iconos como marcadores. Se representarán las comisarías de policía y los hospitales cada uno con su símbolo puntual distintivo.

La biblioteca de iconos Maki ha sido especialmente diseñada para ser empleada con TileMill y proporciona los iconos tanto en formato raster (.png) como en formato vectorial (.svg). En la página web está el enlace para descargar la biblioteca en ambos formatos en un archivo .zip. También se puede encontrar el enlace a un tutorial sobre las posibilidadesde empleo en TileMill.

Para usar las imágenes de Policía y Hospital:

Crearemos una carpeta imgs dentro del directorio del proyecto que podemos encontrar en /home/user/Documents/MapBox/project/cfp2014.
Descomprimimos el archivo .zip, que es una copia del repositorio de GitHub, y navegamos hasta la carpeta renders.
Copiaremos las imágenes police*.png y hospital*.png en el directorio imgs que hemos creado anteriormente.