Mega tutorial TileMill: Crea mapas online con TileMill + PostGIS + Mapbox

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 Mapniknode.jsbackbone.jsexpress y CodeMirror.

Mapnik es la librería de renderizado que utilizan tanto OpenStreetMap como MapQuest. Mapnik soporta colores RGBA, fuentes trueType y transformaciones SVG.

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

Para manipular datos geoespaciales que serán utilizados posteriormente TileMill, necesitaremos utilizar otro software GIS como (QGIS, ArcGIS….). También podemos utilizar bases de datos espaciales como PostGIS o SQL Lite para usar con grandes conjuntos de datos e integrarlos en TileMill.

¿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)

new_project

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

newproject

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)

layers

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:

  • 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.

parámetros_postgis

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

ciudades

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.

css_inicial

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

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

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.

rampa de colores

Este es el color del borde del marcador.

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:

features

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:

Pincha en Save para guardar los cambios:

ciudaddes_CSS

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.

templates

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

teaser

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

cities_teaser

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:

teaser_cities

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.

dublin

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.

templates

La pestaña Legend se abre por defecto:

legend

Introducimos nuestro texto en el campo de la leyenda:

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

legend_resultado

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:

export

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.

conf_export

Para finalizar pinchamos en Export.

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

exportando

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.

save

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.

Si no tienes una cuenta en Mapbox, puedes crear una sin coste que nos ofrece 3000 vistas de mapa al mes, 20 objetos geográficos por mapa (puntos, líneas o polígonos) y 50 mb de almacenamiento total.

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.

data

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).

upload file

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:

preview

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.

share

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:

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

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:

Este el resultado de nuestro visor incrustado en la web:

Fuentes y más información:

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

Let’s connect!

Date de alta en nuestro newsletter
y recibe este ebook gratuito

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

16 comentarios en “Mega tutorial TileMill: Crea mapas online con TileMill + PostGIS + Mapbox”

  1. es que para empezar no puedo poner nombre al file. Que horror!
    Me aparece Forbidden al poner Puntos de nombre en el File.
    Decirme sinceramente si mejor olvidarme de
    esta posibilidad.
    Sé que cuando algo se quiere algo cuesta, pero no sé si es absurdo
    intentar algo que no voy a poder llevar a cabo.
    Gracias y disculpad las molestias.

  2. Hola a tod@s.
    Os explico mi caso.
    Necesito hacer un mapa cartográfico con la geolocalización de varios puntos de la ciudad de barcelona.
    Sé y quiero saber que és algo muy fácil, pero todo y leerme el tutorial y descargarlo todo no sé por donde empezar.
    El mapa tendría que convertirse en una imagen estática para la web de mi proyecto, http://www.puntosciegosbcn.weebly.com. Es una web creada para un proyecto de arte documental.
    Voy provando pero ya os digo, soy artista multidisciplinar pero sin idea de programación.
    Alguien podria darme unas instrucciones de como hacerlo.
    Me encantaria situar las cabinas de la once para que situen a los participantes del proyecto.

    Muchas gracias por este blog y magnifico tutorial.

  3. Hola. Estoy creando un mapa por mapbox en la web, pero me gustaría que en un lateral apareciera la leyenda con la simbología empleada, ¿cómo puedo hacerlo?

    Gracias

  4. Hola, Aurelio:

    A mí, a igual que a Francisco me aparece el siguiente error:

    Postgis Plugin: could not connect to server: Connection refused (0x0000274D/10061)
    Is the server running on host «localhost» (::1) and accepting
    TCP/IP connections on port 5432?
    could not connect to server: Connection refused (0x0000274D/10061)
    Is the server running on host «localhost» (127.0.0.1) and accepting
    TCP/IP connections on port 5432?
    host=localhost port=5432 dbname=world user=postgres password=postgres connect_timeout=4

    ¿Qué puedo hacer? Espero tus comentarios.

    Un saludo,
    Andrés

    • Hola Andrés, Para que la importación tenga éxito debes tener en tu PC PostGIS y haber creado una base de datos ESPACIAL denominada world y por último una capa de ciudades (cities). Sino tienes esto vas a obtener un error.
      Si no lo tienes prueba con la importación de un shapefile, que será más fácil.
      Saludos!

  5. Hola, primero gracias por el tutorial. Segundo, tengo un problema con la parte de PostGis donde hay que introducir [ dbname=world host=localhost port=5432 user=postgres password=postgres ] me sale el siguiente error :
    Postgis Plugin: could not connect to server: Connection refused (0x0000274D/10061)
    Is the server running on host «localhost» (::1) and accepting
    TCP/IP connections on port 5432?
    could not connect to server: Connection refused (0x0000274D/10061)
    Is the server running on host «localhost» (127.0.0.1) and accepting
    TCP/IP connections on port 5432?
    host=localhost port=5432 dbname=world user=postgres password=postgres connect_timeout=4

    Qué puedo hacer?
    Saludos!

    • Hola Francisco, Para seguir el tutorial necesitas tener instalado PostgreSQL + PostGIS; una base de datos denominada world y una capa de ciudades. Sino tienes esto te va a dar error.
      Puedes utilizar una capa vectorial (un shp) que será más sencillo.
      Saludos!

  6. Pero que buena pinta.
    Al final te ha dado tiempo a investigarlo antes que a mí.

    Que gran trabajo Aurelio.

    Cuídate

    • Hola Ángel,
      Muchas gracias! Ya tienes este tutorial para que estés entretenido un rato, además TileMill está más orientado a informáticos o desarrolladores como tú. Si te fijas, las capas de este tutorial y el estilo basado en condiciones también te sonará…

Los comentarios están cerrados.