Expertise 06 / 07

Cartographie interactive

Des milliers de points sur une carte, filtrables et fluides.

Prouvé sur :Flok

Depuis décembre 2023

  • regroupement en grappes
  • cache d'icônes de marqueurs
  • géo-requête par rayon
  • MapLibre GL
  • tuiles vectorielles
  • carte de chaleur
Type

Chargement du fond de carte…

Rayon du radar2,5 km

Autoriser l'accès à votre position ?

Le radar fonctionne sans : le centre est alors placé sur Abidjan, et rien n'est envoyé au serveur.

Télémétrie en direct

Points chargés / affichés2000 / 78
Images par seconde
Grappes
0
Calcul des grappes
0 ms
Tuiles chargées
0
Rayon actif
2,5 km

Zoom · emprise visible

0 · —

Aucune clé d'API n'apparaît sur cet écran : la démonstration publique utilise des tuiles ouvertes.

2 000
Points tenus

348 affichés, 47 grappes

12 ms
Calcul des grappes

Le mécanisme

Comment ça marche.

Position

utilisateur ou centre par défaut

Géo-requête

par rayon, côté API

Points renvoyés

type · statut · catégorie

Grappes

calculées côté client

Cache d'icônes

une rasterisation par variante

Filtres

cumulables, sans rechargement

Rendu MapLibre

tuiles vectorielles · aucune clé

Le vrai goulot n'est pas la requête.

Chaque marqueur personnalisé — photo de profil, pastille de catégorie, indicateur en ligne — est une image que le moteur doit rasteriser. Au-delà de quelques centaines, la carte tombe sous les trente images par seconde et le défilement devient saccadé. La réponse tient en deux mesures : un cache d'icônes qui rasterise une fois par variante et non une fois par point, et un regroupement en grappes qui réduit le nombre de marqueurs réellement dessinés à quelques dizaines.

Une clé d'API publique est une facture ouverte.

Sur un site public, une clé Google Maps est nécessairement visible dans le navigateur, donc consommable par des tiers, à mes frais. La production Flok utilise Google Maps ; la démonstration de ce portfolio tourne sur MapLibre GL et des tuiles ouvertes, sans aucune clé. Le fond de carte n'est pas identique — c'est le prix assumé de ne rien exposer.

Les arbitrages

Ce que j'ai écarté, et pourquoi.

Un choix technique sans son coût n'est pas un choix, c'est une préférence.

01

Regrouper côté client ou côté serveur ?

Le problème

Côté serveur, chaque déplacement de carte devient un aller-retour réseau ; côté client, il faut avoir chargé tous les points.

Les options

Regroupement serveur · regroupement client · hybride par zone chargée.

Ce que j'ai choisi

Chargement par rayon, puis regroupement côté client, avec rechargement seulement à la sortie de la zone déjà chargée.

Le coût

Un premier chargement plus lourd, et un plafond au-delà duquel il faut repasser en regroupement serveur.

02

Que faire des marqueurs personnalisés ?

Le problème

Chaque marqueur personnalisé est une image à rasteriser. Au-delà de quelques centaines, la carte tombe sous les trente images par seconde.

Les options

Un marqueur rasterisé par point · un cache d'icônes par variante · des marqueurs uniformes.

Ce que j'ai choisi

Cache d'icônes par variante, pas par point.

Le coût

Les variantes doivent être finies — donc pas de photo de profil dans la pastille au-delà d'un certain zoom.

03

Google Maps ou tuiles ouvertes ?

Le problème

Sur un site public, une clé Google Maps est nécessairement visible dans le navigateur, donc consommable par des tiers, à mes frais.

Les options

Google Maps avec clé restreinte · MapLibre avec tuiles ouvertes · capture statique.

Ce que j'ai choisi

MapLibre GL et tuiles ouvertes, sans aucune clé, pour la démonstration publique. La production Flok reste sur Google Maps.

Le coût

Le fond de carte de la démonstration n'est pas identique à celui de la production.

Preuves dans le code

Deux extraits réels.

lib/providers/radar_provider.dart

Extrait à fournir

lib/services/showroom_radar_marker_icon_cache.dart

Extrait à fournir

Code Mes Rêves

Alexis Kouakou