La technologie de carte du monde ultra-compacte World Map

Présentation de tinyworldmap

• tinyworldmap est une carte du monde destinée aux applications web offline-first et aux environnements à faible bande passante
• Conçue pour être utilisée avec Leaflet, elle prend en charge tous les niveaux de zoom
• Sa version la plus complète ne pèse que 300 kB une fois compressée avec gzip
• Le rendu côté client a été largement profilé et testé sur des téléphones anciens et peu puissants datant de 10 ans, sans latence perceptible
• Elle affiche par défaut les 10 000 villes les plus peuplées ajoutées à OpenStreetMap
• Au moment de la rédaction, elle inclut toutes les villes et localités de plus de 48 000 habitants

Comment utiliser tinyworldmap

Comme carte de base

• Pour utiliser tinyworldmap comme carte de base Leaflet, ajoutez ce qui suit dans la balise head :

• Ce script contient toutes les données nécessaires à l’affichage de la carte
• Au lieu d’ajouter une couche de tuiles à la carte Leaflet, utilisez :

new L.GridLayer.TinyWorld().addTo(map)

• Le constructeur TinyWorld accepte plusieurs options : backgroundColor, textFillColor, borderStrokeColor, borderFillColor, borderWidth, textStrokeColor (pour distinguer le texte du reste), textStrokeWidth, cityFont (par exemple "12px Arial"), countryFont, dotColor
• Si dotColor est défini, chaque ville est affichée sous forme de point. Cela améliore l’utilisabilité lorsqu’on utilise une version réduite de tinyworldmap sans frontières

Comme carte de secours

• Dans une application web offline-first, il est impossible de mettre en cache une carte basée sur des images à tous les niveaux de zoom (le nombre de tuiles est immense et leur taille se compte en téraoctets)
• Ce dépôt fournit un service worker permettant d’ajouter des fonctionnalités hors ligne à une application web
• Une fois le service worker installé, la carte de secours est préchargée. Toutes les pages visitées sont mises en cache, à l’exception de la carte de base
• Tant qu’une connexion au serveur est possible, les données mises en cache ne sont pas utilisées
• Si l’utilisateur est hors ligne, le site web est servi depuis le cache, et le service worker intercepte les requêtes vers le serveur de tuiles OSM pour générer localement des tuiles de remplacement avec tinyworldmap
• Avant d’enregistrer le service worker, il faut d’abord modifier toutes les sections marquées 'IMPORTANT' dans celui-ci
• Une fois enregistré, il faut impérativement attribuer OpenStreetMap et tinyworldmap dans la couche de tuiles comme suit :

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);

• Pour voir un exemple d’application en production utilisant tinyworldmap comme solution de secours, consultez Hitchmap. Chargez le site dans un navigateur prenant en charge les service workers, attendez un instant, puis coupez Internet et rechargez : la web app devrait continuer à fonctionner normalement avec la carte de secours. L’installation du service worker peut prendre un certain temps

Une carte du monde encore plus légère

• La carte complète pèse 300 K compressés avec gzip / 694 K décompressés. Pour certains cas d’usage, cela peut encore rester trop volumineux

Sans frontières

• tiny-world-noborders-10000.js(on) contient toutes les données de la version complète, à l’exception des frontières et des côtes
• La version gzip est allégée de 100 k, et la version décompressée de 200 k
• La version sans frontières a non seulement l’avantage d’être plus petite, mais aussi de garantir l’exactitude de toutes les données incluses
• Dans la version complète, les frontières ne sont pas précises à des niveaux de zoom élevés, ce qui peut sembler étrange lorsqu’on superpose des formes alignées sur les frontières et les côtes. Dans ce cas, la version sans frontières est plus adaptée
• Le style par défaut est le suivant

Sans villes

• Deux versions sans libellés de villes sont disponibles : tiny-world-nocities.js(on) (avec conservation des libellés de pays) et tiny-world-borders.js(on) (sans libellés de pays)
• Les libellés de villes occupent 410 K non compressés et 172 K compressés

Moins de villes

• Enfin, chaque fichier contenant des libellés de villes existe aussi en versions avec 2 000 et 4 000 villes
• Il suffit de remplacer 10000 dans le nom du fichier par 2000 ou 4000

Nombre de villes incluses	Population
10,000	> 48,000
4,000	> 137,000
2,000	> 287,000

Faire appel à tinyworldmap

• Si vous avez besoin d’une carte personnalisée (par exemple plus détaillée ou dans une autre langue), ou d’aide pour implémenter des fonctionnalités hors ligne sur votre site web, contactez [e-mail]

Attribution

• Comme les données OpenStreetMap, les données de tinyworldmap sont sous licence ODBL et nécessitent donc une attribution
• Si vous avez suivi les étapes décrites ci-dessus, le pied de page Leaflet doit déjà inclure l’attribution à OpenStreetMap et tinyworldmap. Sinon, ajoutez :

© [OpenStreetMap](https://www.openstreetmap.org/copyright), [tinyworldmap](https://www.tinyworldmap.com)

L’avis de GN⁺

• tinyworldmap propose une carte du monde légère, utilisable hors ligne ou sur des appareils peu puissants. Cela semble pouvoir constituer une alternative à des solutions existantes comme OpenStreetMap
• L’un de ses points forts est de proposer des versions encore plus légères en excluant au choix les frontières, les villes, etc. La possibilité d’utiliser des cartes personnalisées selon les besoins semble également très pratique
• Toutefois, son fonctionnement hors ligne nécessite une implémentation technique, notamment la modification du service worker, ce qui suppose une certaine expérience côté développement. Des guides plus détaillés sur ce point seraient bienvenus
• En Corée, les API cartographiques de portails comme Naver ou Kakao sont largement utilisées ; si une intégration avec ce type de services permettait un fonctionnement hors ligne, les cas d’usage pourraient être encore plus nombreux
• Le fait d’inclure des informations sur les principales villes du monde pourrait le rendre utile dans des domaines comme le voyage ou la logistique. La prise en charge du multilingue sera également un point clé

[GN⁺]

Avis Hacker News

• Un commentaire estime qu’il vaudrait mieux allouer davantage de données aux côtes et à la distinction des grandes métropoles qu’aux détails des banlieues de Detroit.
• Il est souligné que le niveau de détail des côtes est insuffisant, que certaines villes du Royaume-Uni se retrouvent sous l’eau, tandis que le Groenland et le nord du Canada occupent trop de sommets. Il semble que la projection de Mercator soit déjà prise en compte, mais il serait aussi préférable de donner moins de priorité aux zones inhabitées.
• Un utilisateur a créé une carte similaire, offline-first, ultra-légère et vectorielle, axée sur l’internationalisation (i18n) dans les langues officielles de l’ONU, à l’exception de l’espagnol. Les noms des pays et des villes utilisent les appellations officiellement déclarées auprès de l’ONU.
• Un commentaire note avoir découvert que les 1000 principales agglomérations mondiales descendent jusqu’à une population de 4800 habitants, sans encore savoir s’il faut considérer ce chiffre comme surprenant.
• L’idée de compresser les données spatiales en chemins (Path) est jugée impressionnante, et le chargement sur mobile est évalué comme très rapide. Il est toutefois proposé d’utiliser les données de Natural Earth au lieu d’OSM pour éviter la licence ODbL, et d’inclure un outil de conversion des données spatiales en chemins.
• Certains estiment qu’il faudrait inclure et marquer spécialement les capitales quelle que soit leur taille de population, et qu’une telle carte conviendrait bien pour répondre, sur une page consacrée à une espèce, à la question de savoir où on peut approximativement la trouver dans le monde.
• Il est relevé que l’usage d’un service worker pour une version hors ligne est étrange, et qu’un tutoriel plus concis serait nécessaire pour permettre aux gens de l’installer et de l’utiliser rapidement. Il vaudrait peut-être mieux fournir simplement un fichier HTML avec des tuiles encodées en base64 ou un fichier ZIP.
• Il est intéressant de constater que les changements récents de noms préférés, comme Tchéquie et Macédoine, ont été pris en compte, mais pas encore ceux de Turquie ou du Timor oriental.
• Le chargement progressif semble quelque peu instable, avec parfois des tuiles qui ne s’affichent pas lors de zooms ou déplacements rapides.