Contexto

Cuando Google abrió su servicio de mapas en el año 2005 provocó un gran impacto en cuanto a la democratización de la distribución de información espacial, gracias a la sencillez que brinda para la creación de mapas a través de Internet. Por al menos cinco años (mucho tiempo en escala Internet), el formato y la intefaz de Google Maps se transformó en el estándar para las representaciones cartográficas en la Web, ya que el año 2010 con el lanzamiento de MapBox descubrimos que además de la sencillez para la creación de mapas, también necesitabamos de un diseño de mayor calidad que enrriqueciera la «narrativa cartográfica». Precisamente cuando ya no fue suficiente el solamente compartir datos espaciales en Internet, es que nacen servicios como MapBox, CartoDB o MapZen, que buscan además entregar mejores herramientas para la visualización del contenido geográfico.

En este tutorial vamos aprender a crear mapas base utilizando MapBox. Usaremos dicha plataforma por la comodidad que representa a la hora de poder utilizar nuestros diseños en otras plataformas online y offline, como el ya mencionado CartoDB o QGis. Algunos ejemplos de la potencialidad que nos brinda MapBox para la creación de mapas base, lo podemos ver en el servicio que ha creado Roveda Piergiorgio, donde provee diseños creados en MapBox principalmente para su uso en la Web. Puedes visitarlo aquí.

El foco de éste tutorial será guiarte en cómo utilizar el mapa base que diseñes en MapBox para cartografías offline, es decir, para mapas impresos o imagenes estáticas utilizando el software de análisis espacial QGis.

NOTA: para este tutorial necesitas algunos conocimientos básicos de QGis (instalar un plugin - aquí un buen tutorial para saber cómo hacerlo en el caso que no sepas) y CSS (básicamente saber qué son los colores expresados en Hexadecimal, como por ejemplo "Blanco: #fffff".

Preparando las herramientas

Para crear este mapa base personalizado necesitamos de algunas herramientas gratuitas como lo son MapBox Studio y QGis. De no utilizar ya estos servicios, puedes de manera sencilla y gratuita crear una cuenta en MapBox. Así mismo puedes descargar, también de forma gratuita el software de análisis espacial QGis desde aquí.

Además para la personalización del mapa base utilizaremos lo siguiente:

  • IOS7 Pallete: paleta de colores en códigos hexadecimal usados en IOS7 (sistema operativo Apple).
  • QuickMapService QGis Plugin: extensión o plugin de QGis que entrega una lista de mapas base en QGis. El plugin puede ser descargado desde aquí o instalado a través de QGis (ver más).
  • Procesador de Texto (yo usé Notepad++): cualquier procesador de texto es suficiente para este ejercicio, como Notepad si usas Windows. Prefiero utilizar Notepad++ ya que es el software que utilizo para crear código regularmente. Lo puedes descargar gratos aquí.

Diseño en MapBox

Una vez que hayas ingresado a MapBox con tu cuenta, debes ir a la opción "Styles" (sí, mi cuenta está en inglés). Verás una ventana como esta:

MapBox

Haz click en "New Style" o "Nuevo Estilo" en la siguiente pantalla:

Aplicando nuevo estilo en MapBox

Como ves se despliegan ocho estilos predeterminados y uno "vacío" o empty. Para este ejercicio yo escogí el tema predeterminado «dark».

Cuando se abre el editor de MapBox verás un mapa de todo el mundo. Puedes acercar el mapa con el mouse al área que quieras visualizar mientras editas, o buscar un lugar específico con el menú del costado superior derecho, presionando en la lupa. He escogido Madrid como el centro del mapa en esta ocasión, sin embargo debes tener presenta que el mapa base desplegará tu diseño para cualquier área del planeta, es decir, que los colores que escojas por ejemplo para los ríos, será el mismo color en Madrid como en cualquier ciudad del mundo:

Cambio de estilo en MapBox

Comenzar a editar el mapa tiene una curva de aprendizaje en mi opinión corta, o sea te toma poco tiempo reconocer que funciona como cualquier otro editor de imágenes, como por ejemplo Photoshop. Lo que me ha resultado más sencillo es escoger con el mouse el atributo que quiero modificar, por ejemplo presiono sobre una ruta para que se desplieguen las características de ese atributo, para luego proceder a editarlo. Tal como se muestra en la siguiente imagen:

editando en Mapbox

Para mantener la sencillez de éste tutorial he modificado en este caso solamente los colores del mapa base. Sin embargo puedes modificar el mapa agregando texturas en formato .svg, los márgenes, sombras, íconos y fuentes de los textos:

editando en MapBox

Para modificar los colores utilizando la paleta IOS7, solo debes copiar el código del color y copiarlo en el atributo en el campo "color". Los cambios se efectuarán de forma automática en el mapa sin necesidad de guardar a cada momento:

Paleta de colores de IOS7

colores en Mapbox

Una vez que estas a gusto con los cambios que has realizado, debes presionar en la esquina superior izquierda en la pestaña «Publish» o «Publicar». Antes de aquello puedes cambiar el nombre de tu estilo por el que tu prefieras, en este caso yo escogí el nombre «Madrid_IOS7». Se desplegará una ventana que te mostrará el tema original y los cambios que has realizado en él. Si está todo OK, presiona publicar en esta nueva ventana (si publicas como un nuevo tema o simplemente lo publicas, no se pierde el mapa base original, que en este caso era «Dark»):

Publicando en Mapbox

Felicidades! Has creado un nuevo mapa base. Ahora puedes compartirlo, usarlo en una aplicación web o móvil, o utilizarlo como un mapa base en QGis, que es lo que haremos ahora. Para esto la ruta que te entrega MapBox, en la opción de la derecha bajo la pestaña «CartoDB». Copia y guarda dicha ruta, que es la que utilizaremos para agregar este mapa base a QGis:

accediendo al mapa creado en Mapbox

Puedes ver el mapa base que he creado para este ejercicio en el siguiente link.

Agregar nuestro estilo a Quick Map Service

Para agregar nuestro estilo al plugin QuickMapService en QGis, debes primero (antes de abrir el programa QGis) ir a la carpeta en donde descargaste QGis en tu ordenador. En mi caso dicha ruta es «Users>CrisHMill>QGis2>QuickMapService». En dicha carpeta encontrarás dos subcarpetas que contienen los mapa base alojados en QuickMapService. Nos centraremos en la carpeta «User» que es el lugar en donde alojaremos nuestro estilo.

Para efecto de resumir este tutorial puedes aprender en detalle como realizar este paso en el muy buen video tutorial preparado por «QGis Tips». Por otro lado puedes descargar los archivos necesarios que ya he preparado aquí, y solo pegarlos en las carpetas correspondientes como te explicaré a continuación:

  • Descarga las carpetas con el estilo Madrid_IOS7 aquí
  • Abre en el procesador de texto que prefieras los archivos Metadata y Madrid_IOS7. Deberías ver lo siguiente:

captura de pantalla

captura de pantalla

  • Debes editar el archivo Metadata.ini, y copiar la ruta que guardamos en el paso anterior. En específico la ruta CartoDB. QGis buscará en dicho link el estilo para pedirle a MapBox desplegarlo.
NOTA: puedes dejar la url tal como está y ocupar el estilo que yo he creado por esta vez, si es que solamente deseas probar esta funcionalidad.

El paso final es insertar o pegar las carpetas «Madrid_IOS7» en las carpetas correspondientes en QuickMapService, a saber: «Data Source» y «Group». Al descargar los archivos (link a la descarga), habrán notado que hay una imagen para cada uno de ellos. En este caso el logo de «Nosolosig». Dicha imagen será que el ícono que luego veremos en QGis par activar nuestro mapa base.

El orden para agregar nuestros archivos a QuickMapService es el siguiente: (i) La carpeta «Madrid_IOS7» que contiene los archivos «Madrid_IOS7.ini y LogoNoSoloSIG.png» pegar en la carpeta que se encuentra en la ruta QuickMapServive/User/Group; (ii) La carpeta «Madrid_IOS7» que contiene los archivos "Metadata.ini y LogoNoSoloSIG.png" pegar en QuickMapService/USer/Data Source. El resultado debiese ser el siguiente:

cambiando icono

cambiando icono

Comenzar a utilizar nuestro mapa base

Ahora que nuestros archivos ya estan editados y en la ubicación correcta dentro de nuestra carpeta del plugin QuickMapService en QGis, podemos abrir el programa para comenzar a utilizar nuestro mapa base personalizado.

Cuando QGis esté completamente abierto, abre un nuevo proyecto y haz click en la opción QuickMapService:

QGIS

Voilá! Podemos ahora comenzar a utilizar nuestro mapa base. Podemos reconocerlo en la lista que nos provee QuickMapServer en QGis con el nombre que le hemos dado a nuestra creación, que en este caso es Madrid_IOS7. Además por el ícono que le hemos asignado, que es el logo de del blog Nosolosig.

Otras consideraciones

  • El mapa base que hemos creado modifica los atributos para todo el planeta. Es decir que estos estilos los puedes usar en tus cartografías alrededor del mundo
  • Recuerda siempre en tus versiones en línea y en impresiones o imagenes estáticas copiar la licencia de atribución, que corresponde a MapBox y OpenStreetMap. De esta forma mantenemos estos dos muy buenos servicios OpenSource con nosotros por más tiempo. Puedes saber más sobre la atribución aquí.
  • Recomiendo para el caso de utilizar mapas base en QGis como una imagen estática, remover los «labels» o nombre de los lugares como los nombre de barrios y ciudad, ya que dichas etiquetas están diseñadas para responder a distintos niveles de zoom en el explorador, y no en QGis, por lo que pierden su estilo. Si tu intención es usar tu mapa base en línea, potencia tu creatividad con el uso de fuentes, colores y contornos
Tutorial creado por Cris Hernandez, experto en análisis de datos espaciales y visualización de datos. Este tutorial se ha publicado también en Github TutorialMapaBase