Tech - Carte (Optimisation)

Comment réduire le temps de chargement d'une carte au format GeoJSON et comment la rendre plus performante en fonction du besoin

Le fichier GeoJSON représentant les contours des départements français que nous avions trouvé à l'origine sur Internet faisait 972 Ko, il peut être récupéré sur ce lien : departments.json. Le fichier utilisé dans les tutoriaux Map ne fait que 184 Ko. Cette page présente comment arriver à ce résultat.

Suppresion des espaces

La première étape va simplement viser à supprimer tous les espaces dans notre fichier JSON. Ces caractères n'apportent aucune information utile. Cette opération se réalise facilement avec un éditeur de texte. La taille de notre fichier JSON est déjà réduite à 818 Ko. Le fichier produit peut être récupéré sur ce lien : departments-nospace.json.

Arrondi des coordonnées

Le fichier JSON contient un peu plus de 76000 coordonnées écrites sous cette forme : 48.851908. Cette précision peut-être utile lorsqu'elle est utilisée dans une carte ou le zoom est très poussé, mais dans notre cas, nous pouvons largement la réduire à 48.85, soit 4 décimales de moins. Cette opération peut être faite sous Notepad++ (un éditeur de texte gratuit) avec la commande remplacer en mode 'Expression Régulière'.

  • Rechercher : (\d*\.\d\d)\d*
  • Remplacer par : \1

Le fichier passe alors à 520 Ko. La perte de détails ne me semble pas visible, il peut être récupéré sur ce lien : departments-truncate.json.

Simplification des polygones

La carte de France présentée dans les tutoriaux est construite à partir d'un ensemble de polygones eux-même construits à partir d'un ensemble de points reliés entre eux. Il est possible de diminuer le nombre de points utilisés pour chaque polygone avec des outils comme Map Shaper (utilisable en ligne). Il suffit de déposer son fichier JSON et de choisir un degré de simplification. En choisissant 35% le fichier produit voit sa taille réduite à 184 Ko, soit 5 fois moins que le fichier que nous avions au départ. Bien sûr, il faut choisir une simplification adaptée à son usage. La carte affichée dans les tutoriaux utilise le fichier de 184 Ko (departments-truncate-simplify.json) et il paraît suffisant pour l'usage qui en est fait.

Conclusion

Ce tutoriel permet de voir comment réduire les temps de téléchargement de fichiers GeoJSON. La simplification faite en ligne peut surement être poussée sans gêner la lisibilité de la carte. Cette simplification permet à tech de traiter beaucoup plus vite les données car il y a moins de points à assembler (on passe de 76000 à 26000 environ) ce qui soulage le processeur de la machine cliente. Enfin, le hover de la souris est plus fluide sur cette version.

Pour prolonger encore la réduction de la taille du fichier, les informations inutiles peuvent être supprimées et au final il est possible d'envoyer le fichier sous format gzip. Les cartes suivantes présentent le département du Finistère (avec sa côte déchirée) et permettent de comparer les différentes optimisations dont il a été question. Notez bien que le scale utilisé dans les tutoriels avec la carte de France était de 3000, ici il est augmenté à 12000.

Fichier d'origine : 23.1 Ko

Fichier avec arrondi : 12,6 Ko

Fichier avec arrondi et simplifié : 3.98 Ko

COMMENTAIRES

RR


fge

RR


Test new

Michel


AAA

Syvlie


Génial,

Bonne idée !

Elodie


Bien cette réponse