Field 06 of 07

Interactive mapping

Thousands of points on a map, filterable and fluid.

Proven on :Flok

Since December 2023

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

Loading the base map…

Radar radius2,5 km

Allow access to your location?

The radar works without it: the centre falls back to Abidjan, and nothing is sent to the server.

Live telemetry

Points loaded / shown2000 / 78
Frames per second
Clusters
0
Cluster computation
0 ms
Tiles loaded
0
Active radius
2,5 km

Zoom · visible extent

0 · —

No API key appears on this screen: the public demo uses open tiles.

2 000
Points tenus

348 affichés, 47 grappes

12 ms
Calcul des grappes

The mechanism

How it works.

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.

The trade-offs

What I ruled out, and why.

A technical choice without its cost is not a choice, it is a preference.

01

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

The problem

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

The options

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

What I chose

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

The cost

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

02

Que faire des marqueurs personnalisés ?

The problem

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

The options

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

What I chose

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

The cost

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 ?

The problem

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

The options

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

What I chose

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

The cost

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

Proof in the code

Two real extracts.

lib/providers/radar_provider.dart

Extract to be supplied

lib/services/showroom_radar_marker_icon_cache.dart

Extract to be supplied

Code Mes Rêves

Alexis Kouakou