Introducción a tinyworldmap
- tinyworldmap es un mapa mundial para aplicaciones web con enfoque offline-first y de bajo ancho de banda
- Está diseñado para usarse con Leaflet y soporta todos los niveles de zoom
- La versión más completa ocupa solo 300 kB con compresión gzip
- El renderizado del lado del cliente ha sido ampliamente perfilado y probado en teléfonos antiguos de bajo rendimiento de hace 10 años, sin latencia perceptible
- Por defecto muestra las 10,000 ciudades más pobladas agregadas a OpenStreetMap
- Al momento de escribir esto, incluye todas las ciudades y pueblos con una población superior a 48,000 habitantes
Cómo usar tinyworldmap
Usarlo como mapa base
- Para usar tinyworldmap como mapa base de Leaflet, agrega lo siguiente dentro de la etiqueta
head:
- Este script incluye todos los datos necesarios para mostrar el mapa
- En lugar de agregar una capa de tiles al mapa de Leaflet, usa lo siguiente:
new L.GridLayer.TinyWorld().addTo(map)
- El constructor de
TinyWorld recibe varias opciones: backgroundColor, textFillColor, borderStrokeColor, borderFillColor, borderWidth, textStrokeColor (para distinguir el texto del resto), textStrokeWidth, cityFont (por ejemplo, "12px Arial"), countryFont, dotColor
- Si se especifica
dotColor, cada ciudad se mostrará como un punto. Esto mejora la usabilidad cuando se usa una versión reducida de tinyworldmap sin fronteras
Usarlo como mapa de respaldo
- En aplicaciones web offline-first, es imposible almacenar en caché mapas basados en imágenes para todos los niveles de zoom (la cantidad de tiles es enorme y su tamaño llega a terabytes)
- Este repositorio ofrece un service worker que permite habilitar funcionalidad offline en una app web
- Una vez instalado el service worker, el mapa de respaldo se precarga. Todas las páginas visitadas se almacenan en caché, excepto el mapa base
- Mientras el servidor siga siendo accesible, no se usan los datos en caché
- Si el usuario está offline, el sitio web se sirve desde la caché y el service worker intercepta las solicitudes al servidor de tiles de OSM y genera tiles sustitutos localmente usando tinyworldmap
- Antes de registrar el service worker, primero debes modificar todas las secciones marcadas como 'IMPORTANT' dentro del service worker
- Una vez registrado, debes atribuir obligatoriamente OpenStreetMap y tinyworldmap en la capa de tiles de la siguiente manera:
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© [OpenStreetMap](https://www.openstreetmap.org/copyright), [tinyworldmap](https://www.tinyworldmap.com)'
}).addTo(map);
- Para ver un ejemplo de una aplicación en producción que usa tinyworldmap como respaldo, visita Hitchmap. Carga el sitio web en un navegador compatible con service workers, espera un momento, luego desactiva Internet y vuelve a cargar; la web app debería seguir funcionando normalmente usando el mapa de respaldo. La instalación del service worker puede tardar un poco
Mapas mundiales aún más pequeños
- El mapa completo pesa 300K comprimido con gzip / 694K sin comprimir. Para ciertos casos de uso, incluso ese tamaño puede seguir siendo demasiado grande
Sin fronteras
tiny-world-noborders-10000.js(on) incluye todos los datos de la versión completa excepto las fronteras y las costas- La versión gzip reduce 100k y la versión sin comprimir reduce 200k
- La versión sin fronteras no solo es más pequeña, sino que también tiene la ventaja de que todos los datos incluidos son precisos
- Las fronteras de la versión completa no son precisas en niveles altos de zoom, por lo que pueden verse extrañas al superponer formas que coincidan con fronteras y costas. En esos casos, la versión sin fronteras encaja mejor
- El estilo predeterminado es el siguiente
Sin ciudades
- Hay dos versiones sin etiquetas de ciudades:
tiny-world-nocities.js(on) (mantiene las etiquetas de países) y tiny-world-borders.js(on) (omite las etiquetas de países)
- Las etiquetas de ciudades ocupan 410K sin comprimir y 172K comprimidas
Menos ciudades
- Por último, cada archivo que incluye etiquetas de ciudades también tiene versiones con 2,000 y 4,000 ciudades
- Solo hay que cambiar
10000 por 2000 o 4000 en el nombre del archivo
| Número de ciudades incluidas |
Población |
| 10,000 |
> 48,000 |
| 4,000 |
> 137,000 |
| 2,000 |
> 287,000 |
Contratar tinyworldmap
- Si necesitas un mapa personalizado (por ejemplo, más detallado o en otro idioma) o ayuda para implementar funcionalidad offline en tu sitio web, comunícate a business@tinyworldmap.com
Atribución
- Igual que los datos de OpenStreetMap, los datos de tinyworldmap están licenciados bajo ODBL, por lo que se requiere atribución
- Si seguiste los pasos descritos arriba, el pie de página de Leaflet ya debería incluir la atribución tanto a OpenStreetMap como a tinyworldmap. Si no es así, agrega lo siguiente:
© [OpenStreetMap](https://www.openstreetmap.org/copyright), [tinyworldmap](https://www.tinyworldmap.com)
Opinión de GN⁺
- tinyworldmap ofrece un mapa mundial liviano que puede usarse offline o en dispositivos de bajos recursos. Parece una solución capaz de reemplazar alternativas existentes como OpenStreetMap en ciertos casos
- Una ventaja es que ofrece versiones aún más ligeras al excluir opcionalmente fronteras, ciudades, etc. También parece muy flexible al permitir mapas personalizados según la necesidad
- Sin embargo, para que funcione offline se requiere implementación técnica, como modificar el service worker, por lo que hará falta cierta experiencia por parte del desarrollador. Sería bueno contar con una guía más detallada sobre esta parte
- En el mercado local se usan mucho APIs de mapas de portales como Naver y Kakao; si pudiera integrarse con servicios de este tipo para funcionar offline, parecería tener aún más casos de uso
- Como incluye información sobre las principales ciudades del mundo, podría ser útil en áreas como viajes y logística. El soporte multilingüe también parece ser un punto clave
1 comentarios
Comentarios en Hacker News