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:

2015-11-27 22_17_26-Notificación nueva

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.

2015-11-27 22_43_41-TileMill

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

2015-11-27 22_45_29-Notificación nueva

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

2015-11-27 22_47_13-TileMill

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

2015-11-27 22_50_05-TileMill

Genera un fichero road-trip.mbtiles que convertimos a nuestras teselas con: mbutilCon 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

2015-11-27 23_18_24-Administrador_ Símbolo del sistema 2015-11-27 23_16_55-Administrador_ Símbolo del sistemaSi entramos en nuestra carpeta road, podremos ver las teselas organizadas según niveles de zoom:

2015-11-27 23_21_30-6

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:

2015-11-27 23_42_37-127.0.0.1_50258_Road_Trip_index.html

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

1 comentario
  1. Andrés dijo:

    Buenas,
    podría cambiar las teselas de cualquier aplicación que haya creado con leaflet? Me gustaría cambiar el tamaño a las de mi mapa para que no aparezcan tantas etiquetas en cada elemento.
    Muchas gracias,
    Saludos

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: