Toujours plus de points sur ma carte !
Retour sur la mise en place du clustering backend-side chez Wemap
Un bref retour en arrière
Les cartes interactives nous permettent de charger une quantité importante de points, mais leur affichage devient un réel casse-tête dès que le nombre d’objet dépasse quelques centaines.
Pour y remédier, la solution priviligiée est d’utiliser les “clusters”, une surcouche qui regroupe les points en fonction d’un rayon et du niveau de zoom de la carte, et qui va améliorer la lisibilité de la carte. Un des grands avantages méconnu des clusters : en mobile cela permet une navigation avec un seul doigt !
Une des solutions incontournable de clustering, est celle de Dave Leaver pour la librairie leaflet.js (leaflet.markercluster), qui implémente un algorithme de clusters gloutons (greedy clustering).
Redoutablement efficace … tant que le nombre de points ne dépasse pas les 50000. Au delà, en plus de la problématique de la taille des données à charger, le navigateur qui exécute le script va sérieusement ralentir.
Récemment, c’est l’auteur de leaflet, Vladimir Agafonkin himself qui a écrit supercluster, une librairie ultra rapide qui combine l’approche des clusters gloutons, leurs relations entre les niveaux de zoom, et un index spatial, permettant, une fois les clusters créés en mémoire, de ne faire appel qu’à l’emprise et au niveau de zoom souhaité, évitant le chargement dans la carte de données “inutiles” (hors champ).
Et donc, ils sont où mes millions de points ?
Chez Wemap, cette approche nous a convaincu, mais nous souhaitions également maitriser le volume des données transitant entre notre back-end et le navigateur du client, car auparavant ce critère nous avait imposé une limite de 400 points retournés par notre api à chaque appel, et nous souhaitions accéder à l’exhaustivité.
Pour optimiser le payload (la partie de l’information contenant les données sur nos points par exemple), nous avons décidé de réutiliser le principe des tuiles. Pour des géométries complexes (lignes, polygones) on peut utiliser des tuiles vectorielles, mais pour des points, le gain est moindre, et nous nous sommes donc orientés vers une ‘simple’ sérialisation des données transformées en cluster et découpées en tuiles, du format geojson au format protocol-buffers.
Nous avons écrit un script python qui va se charger d’exécuter supercluster (via le portage pysupercluster), puis générer, pour chaque niveau de zoom, les tuiles contenant des points, tout en encodant les données geojson en protocol-buffers via pygeobuf, et les sauvegarde sous une architecture classique z/x/y.pbf .
Mon fichier de point initial comptabilise 6 000 000 de points, pour une taille de 749 Mo, le dossier de tuiles pbf générées jusqu’au niveau de zoom 10 fait 1.5 Go.
Et pour info, une tuile au niveau de zoom 10, avec 2574 points, fait 92 ko, son équivalent en geojson 361 ko, et sur le réseau elle sera gzippée pour seulement 28 ko !!
Sur notre back-end, les cluster-tiles des données de nos utilisateurs sont générées au fil de l’eau via une file d’attente de taches, et côté client, les tuiles sont appelées puis interprétées par notre livemap, jusqu’à un niveau de zoom acceptable pour du clustering front-end.
Si vous voulez tester ce format, nous avons adapté un plugin pour leaflet 0.7 (TileLayer.GeoJSON.js) pour qu’il puisse décoder les cluster-tiles en geojson, et les afficher sur la carte jusqu’au niveau 10, au delà, il repasse la main au brillantissime leaflet.markercluster.
Et voilà !
Pour plus de détails sur la création de cartes interactives, ou pour une demande particulière, n’hésitez pas à me contacter @Mathieu-Daude Bertrand
***
Comment savoir ce qui se passe autour de nous ? Wemap aborde cette question avec une approche originale : offrir l’information locale via des cartes intelligentes combinant une expérience simple et des services pratiques. Aux côtés de milliers d’utilisateurs des grands noms tels que le Parisien, Ouest-France, le ministère de la Culture ont rejoint la plateforme créée par Wemap pour mieux informer et guider leur public.
Avec sa plateforme de cartes intelligentes Wemap atteint plus de 4 millions de visiteurs mensuels. Pour en savoir plus sur les cartes intelligentes Wemap et rejoindre la plateforme : https://getwemap.com/fr
