IC8017 Sistemas de Información Geográfica - TEC

Appearance

Mapas en mosaico con TileMill ​

TileMill es una aplicación de escritorio para crear mapas web. Ha sido diseñada para integrarse fácilmente en los flujos de trabajo de los SIG existentes para mejorar las capacidades de diseño y la flexibilidad.

Diseño de mapas ​

El diseño de mapas es el núcleo de TileMill. Para manipular los datos geoespaciales que se utilizarán en los mapas de TileMill, es posible que se tenga que buscar fuera de la herramienta o integrarla con otro software SIG. Algunos datos espaciales pueden trabajarse en Microsoft Excel, y para otros puede ser necesario un software SIG como QuantumGIS o Grass GIS. También se puede utilizar software de bases de datos espaciales como PostGIS y SQLite para trabajar con grandes conjuntos de datos espaciales e integrarlos en TileMill.

El principal resultado de TileMill son los mapas en mosaico -millones de imágenes de 256 px por 256 px que pueden cargarse rápidamente en mapas interactivos- exportados en formato MBTiles. Los mapas en mosaico son la tecnología básica detrás de los mejores mapas de zoom en la web. También se pueden exportar archivos PNG y PDF desde TileMill para una salida estática o para su uso en presentaciones - utilizando los mismos estilos de mapa que potencian los mapas altamente interactivos.

MBTiles ​

Los mosaicos de mapas se almacenan en un archivo empacado, llamado archivo MBTiles. Esto permite comprimirlos, copiarlos y transferirlos fácilmente de un lugar a otro. A diferencia de la mayoría de los mapas en mosaico, los mapas que se crean en TileMill pueden ser interactivos: al pasar el ratón por encima de los mosaicos del mapa y hacer clic en ellos, se pueden activar ventanas emergentes e incluso la navegación por el sitio. Los datos de interactividad también se comprimen y almacenan en archivos MBTiles.

A diferencia de los mapas estáticos, los mapas en mosaico tienden a tener muchas capas de detalle - se querrá elegir qué características mostrar y ocultar en cada nivel de zoom. El lenguaje de estilo de TileMill, CartoCSS, facilita esta tarea, y es fácil de aprender y utilizar gracias al documento de referencia, el autocompletado y el resaltado de errores, y es aún más fácil si ya se conoce CSS.

Añadir capas ​

Las capas son la forma de añadir conjuntos de datos a un mapa en TileMill. Cada capa hace referencia a un único archivo o consulta de base de datos. Se pueden combinar múltiples capas una sobre otra para crear el mapa final.

TileMill actualmente soporta la creación de capas de mapas a partir de los siguientes tipos de archivos y bases de datos.

  • CSV: TileMill puede trazar puntos utilizando archivos de valores separados por comas (CSV) si contienen columnas de latitud y longitud. La primera fila del archivo debe contener los encabezados de las columnas que contienen las coordenadas. Cualquiera de los siguientes encabezados de columna son aceptables: latitud, longitud, lat, long,lon, x, y.

  • ESRI Shapefile: Normalmente se denomina simplemente "shapefile", y es el formato de archivo estándar de facto para el almacenamiento de datos SIG portátiles y es compatible con la mayoría de las aplicaciones de software SIG. Lo complicado es que un solo "shapefile" es en realidad una colección de al menos tres archivos (posiblemente más). Si la fuente de datos shapefile es una URL HTTP, los distintos archivos correspondientes deben almacenarse juntos en un archivo zip antes de poder añadirlos a un proyecto TileMill. En el caso de las fuentes de datos locales, se puede seleccionar sólo el archivo .shp y TileMill encontrará los archivos correspondientes siempre que estén en el mismo directorio que el .shp.

  • GeoJSON: GeoJSON es un formato para codificar información sobre características geográficas utilizando la Notación de Objetos de JavaScript. GeoJSON es un formato de texto y tiene un esquema flexible: las características de una misma colección pueden tener diferentes propiedades y diferentes tipos de geometría. El formato puede tratar características de tipo punto, línea y polígono.

  • GeoTIFF: GeoTIFF es un formato popular para almacenar imágenes rasterizadas geoespaciales, como fotografías de satélite, imágenes de teledetección y modelos digitales de elevación. Dado que TileMill no puede actualmente reproyectar fuentes de datos ráster, para cargarlas en TileMill hay que asegurarse de que están en proyección Web Mercator.

Estilos en datos ​

TileMill utiliza un lenguaje llamado CartoCSS para determinar el aspecto de un mapa. Los colores, tamaños y formas pueden ser manipulados aplicando sus parámetros relativos de CartoCS en el panel de la hoja de estilos a la derecha del mapa. Se puede utilizar CartoCSS para aplicar estilos a sus conjuntos de mosaicos, incluyendo la elección de colores, la aplicación de diferentes rendimientos en niveles de zoom específicos y el filtrado de sus datos.

En TileMill, se construye el estilo del mapa usando CartoCSS de manera similar a como construye el estilo de su página web usando CSS. CSS es un lenguaje de hojas de estilo utilizado para modificar la apariencia de los elementos HTML en una página web. En CSS, los selectores son patrones que se utilizan para seleccionar los elementos a los que se quiere dar estilo. Los estilos están delimitados por llaves {} y contienen propiedades y valores de estilo. Puede utilizar CartoCSS para elegir colores, aplicar una representación diferente a niveles de zoom específicos y, en general, aplicar estilos a los datos vectoriales.

La sintaxis del CSS es así:

css
selector {
  property: value;
}

Con CartoCSS, las capas individuales del tileset del mapa son los selectores. La sintaxis de CartoCSS es la siguiente:

css
#layer {
  property: value;
}

Para aplicar el mismo estilo a varias capas, se debe separar los ID de las capas con comas:

css
#layer_1,
#layer_2 {
  // styles will apply to all the objects in both layers
  property: value;
}

Niveles de zoom ​

Con muchas capas de datos, mostrar todas las características en cada nivel de zoom puede ser difícil de leer. Por ejemplo, si se hace zoom en la ciudad de Nueva York, las etiquetas de los números de los edificios quedan ocultas hasta que se hace zoom en un edificio concreto. Sin un nivel de zoom, las etiquetas de los números de las casas cubrirían el mapa.

Para evitar esto, puede aplicar estilos sólo a determinados niveles de zoom. Por ejemplo, este estilo sólo se aplicará cuando el mapa esté ampliado hasta el nivel de zoom 0:

css
#layer[zoom=0] { /* ... */ }

También puede especificar rangos de niveles de zoom utilizando dos filtros:

css
#layer[zoom>=4][zoom<=10] { /* ... */ }

Filtros selectores ​

A veces no se quiere dar el mismo estilo a toda una capa. Por ejemplo, la capa #roads contiene autopistas, calles, caminos y otros tipos de carreteras, todos los cuales pueden tener un estilo diferente para indicar su uso. Muchas características de las capas tienen atributos, o información descriptiva, que pueden utilizarse para dar un estilo diferente a las características dentro de la misma capa. Los atributos incluyen tanto texto como valores numéricos.

En CartoCSS, los filtros permiten seleccionar todas las características cuyos atributos cumplen una condición determinada. Se puede encontrar los atributos de una capa yendo al panel Capas y haciendo clic en esa capa.

Si se quiere aplicar un estilo a todas las autopistas de la capa de carreteras, se puede añadir el nombre del atributo (clase) y el valor (autopista) al selector de capa. Todos los estilos entre corchetes se aplicarán únicamente a las características clasificadas como autopista:

css
#road[class='motorway'] {
  line-join: round;
  line-color: #800, 75;
}

Los mismos operadores de comparación disponibles para el filtro de zoom también pueden utilizarse para filtrar en base a atributos numéricos. Por ejemplo, se puede tener un campo de población en una fuente llena de puntos de ciudades. Se podría crear un estilo que sólo etiquete las ciudades con una población superior a 1 millón.

css
#cities[population>1000000] {
  text-name: [name];
  text-face-name: 'Open Sans Regular';
}

Al igual que con los niveles de zoom, se puede seleccionar datos basados en rangos numéricos.

css
#cities[population>100000][population<2000000] { ... }

Simbolizadores ​

Mapnik, el software de renderizado en el que se basa TileMill, proporciona una serie de tipos de estilo fundamentales a partir de los cuales se pueden construir estilos complejos. Cada tipo se denomina simbolizador y tiene su propio conjunto de propiedades configurables.

Actualmente hay 10 simbolizadores diferentes disponibles en TileMill, cada uno de los cuales puede aplicarse a un determinado tipo o tipos de geometría:

  • Line (para líneas y polígonos)
  • Polygon (para polígonos)
  • Point (para puntos)
  • Text (para puntos, líneas y polígonos)
  • Shield (para puntos y líneas)
  • Line Pattern (para líneas y polígonos)
  • Polygon Pattern (para polígonos)
  • Raster (para tramas)
  • Markers (para puntos, líneas y polígonos)

Se pueden aplicar múltiples simbolizadores a la misma capa - algunas combinaciones comunes son línea & polígonos, punto & texto, línea & marcadores, y línea & patrón de línea.

Un simbolizador no está presente en el mapa a menos que tenga un estilo definido, pero una vez que se añade una de sus propiedades de estilo a la hoja de estilos, se aplicarán valores por defecto a las demás propiedades de ese simbolizador a menos que se anulen. Por ejemplo, el color por defecto del simbolizador de línea es el negro, por lo que si se asigna un ancho de línea a una capa, esa línea será negra a menos que también se le asigne un color diferente.

Múltiples simbolizadores ​

Una sola capa no está limitada a un solo tipo de simbolizador. Por ejemplo, se pueden asignar múltiples simbolizadores de línea semitransparentes a un polígono para conseguir un efecto de brillo o sombra suave. Se pueden asignar múltiples simbolizadores de texto al mismo punto con diferentes desplazamientos para etiquetarlo con más de un campo.

Normalmente, cuando se asigna un estilo a una capa, el estilo se aplica a un simbolizador por defecto que se crea. En el siguiente ejemplo, la segunda regla anula la primera porque ambas se aplican al simbolizador por defecto.

css
#layer {
   line-color: #C00;
   line-width: 1;
}

#layer {
   line-color: #0AF;
   line-opacity: 0.5;
   line-width: 2;
}

Estilos de línea ​

Los estilos de línea pueden aplicarse tanto a las capas de líneas como a las de polígonos. Los estilos de línea más sencillos sólo tienen una anchura de línea (en píxeles) y un color de línea, lo que hace una única línea sólida. Los valores por defecto de estas propiedades son 1 y negro respectivamente si no se especifican.

css
// country land borders
#admin_0_lines {
  line-width: 0.75;
  line-color: #426;
}

Líneas discontinuas ​

Se pueden crear líneas discontinuas simples con la propiedad line-dasharray. El valor de esta propiedad es una lista separada por comas de anchos de píxel que se aplicarán alternativamente a los guiones y a los espacios. El siguiente estilo dibuja una línea con guiones de 10 píxeles separados por espacios de 4 píxeles:

css
#admin_1_line {
  line-width: 0.5;
  line-color: #426;
  line-dasharray: 10, 4;
}

Se puede declarar explícitamente cualquier número de nuevos simbolizadores para una capa que se renderizarán además de los estilos con los que entrarían en conflicto. Los nuevos simbolizadores se definen utilizando una sintaxis de dos puntos doble inspirada en los pseudoelementos de CSS3:

css
#layer {
   /* styles for the default symbolizers */
}
#layer::newsymbol {
   /* styles for a new symbolizer named ‘newsymbol’ */
}

Tenga en cuenta que newsymbol no es una palabra clave especial, sino un nombre arbitrario elegido por el usuario. Para ayudar a mantener la pista de los diferentes simbolizadores, se pueden nombrar simbolizadores adicionales que tengan sentido para la situación. Algunos ejemplos: #road::casing, #coastline::glow_inner, #building::shadow.

Volviendo al ejemplo anterior, al declarar la segunda regla se añadirá un resplandor azul sobre la línea roja en lugar de sustituirla:

css
#layer {
   line-color: #C00;
   line-width: 1;
}

#layer::glow {
   line-color: #0AF;
   line-opacity: 0.5;
   line-width: 4;
}

Los simbolizadores se representan en el orden en que se definen, de modo que aquí el ::glow (línea azul) aparece encima del primer estilo (línea roja).

Los estilos de simbolizadores con nombre pueden ser anulados por otros estilos que hagan referencia al mismo nombre de simbolizador. En este ejemplo, el color de la línea será verde, no verde sobre amarillo.

css
.border::highlight {
   line-color: #FF0;
   line-opacity: 0.5;
}

.border::highlight {
   line-color: #3F6;
}

Publicar el mapa ​

TileMill generá un archivo MBTiles que puede ser publicado en algún servicio de Hosting (Heroku, InfinityFree, etc.) que permita ejecutar aplicaciones en lenguaje PHP, utilizando TileServerPHP, ó bien, el ambiente NodeJS utilizando MBTilesServer.

También es posible extraer cada uno de las imágenes desde dicho archivo a un directorio, utilizando el script MBTitles extractor. En dicho caso el directorio resultante puede ser publicado en sitios como: Github Pages, Netlify, Vercel, etc.

Luego se puede crear una página web que utilice las imágenes como un mapa base. Para ello se requiere de alguna librería Javascript como: OpenLayers, Leaflet o Mapbox. Por ejemplo, el siguiente archivo index.html utiliza Leaflet para mostrar dicho mapa:

html
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" crossorigin=""></script>
</head>
<body>
  <div id="map" style="height:560px;"></div>
  <script>
    var map = L.map('map');
    var tiles = L.tileLayer('/{z}/{x}/{y}', {
      minZoom: 5, maxZoom: 10, tms: true,
      bounds: [[-0.3516,-99.1406],[19.8081,-68.7305]]
	}).addTo(map);
	map.setView([9.8823,-84.1992], 5);
	</script>
</body>
</html>

Usted puede probar este script localmente copiándolo al mismo directorio en donde se encuentran las imágenes y ejecutando, por ejemplo, el servidor web de Python:

$ python -m SimpleHTTPServer 8000

Copyright © 2020-2025 Armando Arce