Trucos para reducir el tamaño de un GeoJSON y mejorar la velocidad de tu aplicación webmapping

Uno de los problemas al que nos enfrentamos cuando creamos una aplicación webmapping es la de mostrar la información espacial lo más rápidamente posible.

Una de las mejores y más sencillas opciones para crear una aplicación WEB GIS es utilizar un GeoJSON y utilizarlo para mostrarlo en un mapa web.

El formato GeoJSON

El formato GeoJSON es más ligero que el estándar GML y además evita el problema del Cross-Domain.

Ahora bien, esta sencilla arquitectura puede tener un problema: el objeto GeoJSON aun es muy pesado (debido al número de dígitos utilizados para codificar las coordenadas en formato texto) y en consecuencia el mapa tarda mucho tiempo en mostrar los datos.

El problema es que el visor web está representando todas y cada una de las geometrías, por lo tanto a mayor  número de vértices más lento será el mapa (25 KB por punto).

Veamos algunos trucos para reducir el tamaño de un GeoJSON y mejorar la velocidad de nuestra aplicación webmapping:

Utilizar TopoJSON en lugar de GeoJSON

TopoJSON es una extensión de GeoJSON que codifica topología.

TopoJSOn elimina redundancias, ofreciendo representaciones más compactas de la geometría que GeoJSON. Por ejemplo, el limite compartido entre dos países se representa solo una vez, en lugar de ser duplicado para ambos países, de esta forma, los puntos compartidos solo se representan una vez.

TopoJSON cuantifica coordenadas, de este modo cada arco está definido por sus coordenadas cuantificadas. La cuantificación consiste en una transformación líneas que consiste en una escala y una traslación que convierte las coordenadas con parte decimal en números enteros.

Gracias a la eliminación de redundancias y  a la cuantificación de las coordenadas, los ficheros TopoJSON son un 80% más pequeños que sus equivalentes GeoJSON.

Conversión de TopoJSON a GeoJSON

La más sencilla es utilizar el sitio web shpescape.com, que nos permite transformar ficheros shapefile a GeoJSON y TopoJSON.

Shan Carter tiene una bonita herramienta para convertir de GeoJSON a TopoJSON.

Eliminar los campos de la tabla de atributos innecesarios para la aplicación reduce el tamaño de un GeoJSON

• Elimina todos los atributos que no vas a utilizar en la aplicación.
• Elimina también los espacios en blanco.
• Elimina los saltos de línea.

Crear índices

En el siguiente ejemplo vemos como tenemos claves repetidas (NAME, LATITUDE, LONGITUDE, POP_MAX)

[{
"NAME": "Vatican City",
"LATITUDE": 41.900012,
"LONGITUDE": 12.447808,
"POP_MAX": 832,
}, {
"NAME": "San Marino",
"LATITUDE": 43.917150,
"LONGITUDE": 12.466670,
"POP_MAX": 29579
}]

Una solución para reducir y comprimir el archivo eliminar estas claves y crear un índice en la cabecera. El resultado sería algo así:

[[
"NAME",
"LATITUDE" ,
"LONGITUDE" ,
"POP_MAX"
],[
"Vatican City",
41.900012,
12.447808,
832
],
[
"San Marino",
43.917150,
12.466670,
29579
]

Para realizar esta compresión disponemos de herramientas como HPack o CJSON, ambos ofrecen ratios de compresión que se encuentran en torno al 60-70%.

Simplificar las geometrías y reducir el número de decimales para representar sus geometrías

Una de las opciones más efectivas para reducir el tamaño de un GeoJSON es simplificar el vector. De este modo nos  deshacemos de detalles que no necesitamos. Esta simplificación serviría para líneas y polígonos.

Para simplificar líneas o polígonos podemos utilizar un cliente SIG de escritorio.

GRASS es la herramienta ideal para esta operación, ya que al ser un SIG topológico, no perdemos la adyacencia, por lo que la corrección se conservará incluso a altos niveles de simplificación. El algoritmo en cuestión es v.generalize.

Para una simplificación más grosera podemos utilizar alguna herramienta online, como mapshaper, que nos permite suavizar líneas o eliminar nodos a partir de un archivo shp, geojson o topojson.

Utilizar cluster (grupos)

La forma más sencilla de mejorar la velocidad de representación de puntos es utilizar un plugin que los agrupe. Esta opción no reduce el tamaño de un GeoJSON, pero ayuda a mejorar la renderización en el lado del cliente en gran medida, ya que significa que el navegador del cliente no tiene que dibujar 10.000 puntos, sólo dibuja entre 10 y 50.

Dentro de los plugins para Leaflet encontramos 5 para este cometido:

• Leaflet.markercluster
• Leaflet.LayerGroup.Collision
• Overlapping Marker Spiderfier
• PruneCluster
• Leaflet.Deflate

De todos ellos queremos destacar PruneCluster, ¿por qué?, porque es capaz de representar 1.000.000 de marcadores en tan solo 1.9 segundos en su primera visualización y en 400 milisegundos en las sucesivas.

Además los grupos pueden ser actualizados en tiempo real. Es perfecto para situaciones en vivo.

Otras ventajas de este plugin:

• Podemos especificar el peso de cada marcador.
• Especificar una categoría para los marcadores. De esta manera, podemos crear iconos  adaptados a nuestro contenido.
• El tamaño de un grupo se puede ajustar sobre la marcha
• Los marcadores se pueden filtrar fácilmente sin coste de rendimiento.

Otra opción es crear Heatmaps o mapas  de calor, como hemos visto en el tutorial de creación de heatmpas con OpenLayers, Un heatmap ayuda a la representación en el navegador del cliente ya que no es necesario dibujar todos los puntos, solo dibuja los que se muestren en ese momento.

3 consejos adicionales

Utiliza un visor webmapping rápido

Una API como Leaflet realiza una representación rápida e inteligente tanto de líneas como de polígonos. Mediante la simplificación y el recorte dinámico, somos capaces de visualizar objetos con miles de puntos.

Evita trabajar con GeoJSON

Una opción puede ser llevarlo a un servidor externo teselado. Por ejemplo TileMill.

Aunque desde luego lo mejor es crear una arquitectura completa, compuesta por ejemplo de PostGIS + GeoServer + GeoWebCache + la API de mapas que escojamos. El curso online de webmapping te ayudará a decidir qué opción es la mejor.

Recuerda que un mapa que tarde en mostrar los objetos espaciales probablemente no se abrirá…

Mas info:

GeoJSON y TopoJSON: comparación entre los formatos de intercambio de Información Geográfica alternativos a GML.

Utiliza teselas vectoriales

Las teselas vectoriales crean mapas significativamente rápidos y a su vez ofrecen una flexibilidad completa en su diseño.

Son los datos vectoriales equivalentes a las teselas de imagen para el webmapping, aplicando las ventajas de las teselas a los datos vectoriales: desarrollados para guardarse en caché, escalabilidad y servir imágenes de mapa rápidamente.

En esta entrada tienes más info.

También os dejamos un interesante comentario que nos han dejado Abel Vázquez Montoro en LinkedIn: