Creando tus propias teselas para Leaflet (basadas en Mapbox) con TileMill

Explicamos la semana pasada un post sobre crear tus propias teselas para tus visores web partiendo de una imagen. Pero probablemente el post de hoy os será más útil si queréis crear un mapa base para vuestra web.

Para ello vamos a utilizar TilleMill, la aplicación de Mapbox en la que podemos crear nuestras teselas con el estilo que queramos, basadas en la cartografía de Mapbox.

Necesitamos descargar TilleMill, que tiene un aspecto similar a esto:

Al iniciarse nos da a elegir varios proyectos que ya vienen hechos como ejemplos, hemos elegido el denominado «Road Trip», para modificarlo un poco y adaptarlo a nuestras necesidades.

La gracia de esto es que el estilo del mapa es totalmente configurable, podemos crear nuestro propio estilo modificando el CSS del mapa que aparece a la derecha. Podemos crear diferentes estilos para las diferentes capas que agreguemos al mapa (abajo a la izquierda).

Por ejemplo, podemos modificar el color del borde de las fronteras, además de indicarle que grosor o estilo que tienen que tener a cada diferente nivel de zoom:

#country_border { line-color:#05fff1; }
#country_border[zoom<3] { line-width:0.5; }
#country_border[zoom=3] { line-width:0.6; }
#country_border[zoom=4] { line-width:0.8; }
#country_border[zoom=5] { line-width:1.0; }

Con #country_border estamos haciendo referencia a la capa con ese nombre.

También se pueden hacer estilos según valores de campos:

#road_na[zoom>5][TYPE='Primary'] {
line-color:#E63;
line-width:0.8;
}

Os podéis imaginar la cantidad de personalización que da esto.

Una vez tuviéramos nuestro mapa creado, para exportar estas teselas tendríamos que irnos arriba a la derecha y seleccionar Export – MBTiles.

Aquí podemos seleccionar cuantos niveles de zoom queremos crear para nuestras teselas, los límites del mapa, etc.

Tener cuidado que si elegís crear muchos niveles de zoom la cantidad de teselas aumenta considerablemente y con ello su tamaño.

Comenzará la preparación de los ficheros hasta que estén listos y aparecerá así:

Genera un fichero road-trip.mbtiles que convertimos a nuestras teselas con: mbutil. Con esta librería de Python lo que haremos es extraer las teselas del fichero mbd.

La podemos install con easy_install mbutil. Explican los pasos a seguir es su repositorio de Github-mbutil. Yo como siempre tengo problemas para instalarlo, me he descargado la librería de Github, me he ido a la carpeta de mbutil desde terminal, y he ejecutado el siguiente comando para extraer las teselas a una carpeta llamada road:

python mb-util C:\Temp\road-trip.mbtiles C:\Temp\road

Si entramos en nuestra carpeta road, podremos ver las teselas organizadas según niveles de zoom:

Ahora solo tenemos que abrir nuestro visor Leaflet, y asignarle que queremos usar las teselas que acabamos de crearle en la línea L.tileLayer. Quedando la parte de Javascript de nuestro código similar a esto:

var map = L.map( 'map', {
    center: [30, -100],
    minZoom: 2,
    zoom: 5,
    zoomControl: false
});

L.tileLayer( 'road/{z}/{x}/{y}.png', {
    attribution: 'Mapbox',
}).addTo( map );

Y por fin podemos ver nuestro visor funcionando con las teselas que hemos creado:

Incluyo para descarga el visor completo con estas teselas nuevas por si os interesa.