Qu'est-ce qu'un viewport de carte ? Centre, zoom et la fenêtre

Si vous avez écrit du code qui parle à une bibliothèque cartographique, vous avez écrit du code qui touche le viewport. Le viewport est l'état d'exécution de la carte : où elle est centrée, à quel point elle est zoomée, dans quelle direction elle pointe, et éventuellement de combien elle est inclinée. Chaque déplacement, zoom, rotation et clic en dépend.

Ce guide explique ce qu'est réellement un viewport, les quatre valeurs fondamentales qui le décrivent, comment il interagit avec les tuiles et les bounding boxes, et les patterns en production pour enregistrer, restaurer et partager l'état du viewport.

Les quatre valeurs fondamentales

Un viewport de carte web moderne est décrit par jusqu'à quatre valeurs :

• Centre ({ lat, lng }) : la coordonnée géographique au milieu de l'écran.
• Zoom (un nombre, souvent un flottant) : à quel point la carte est zoomée. Les valeurs plus élevées montrent des zones plus petites avec plus de détail.
• Bearing (un nombre en degrés, défaut 0) : la rotation de la carte par rapport au "nord en haut". 90 signifie que l'est est en haut.
• Pitch (un nombre en degrés, de 0 à ~85) : l'inclinaison 3D. 0 est une vue plate de dessus, 60 est une forte vue en perspective.

Toutes les bibliothèques cartographiques modernes (MapLibre GL, Mapbox GL, OpenLayers, Leaflet, MapAtlas Dynamic Maps) exposent ces valeurs comme état lisible et inscriptible. Une bibliothèque uniquement 2D comme Leaflet peut ne pas exposer bearing ou pitch.

Les niveaux de zoom en détail

Le niveau de zoom est la plus demandée des quatre valeurs. C'est un nombre entier (ou décimal) qui mappe le monde à une pyramide de tuiles :

• Zoom 0 : monde entier dans une tuile de 256x256
• Zoom 1 : monde divisé en 4 tuiles
• Zoom 2 : 16 tuiles
• ...
• Zoom 14 : ~268 millions de tuiles, échelle de quartier
• Zoom 18 : échelle de bâtiment
• Zoom 22+ : généralement rendu avec suréchantillonnage de style vectoriel plutôt que données de tuiles fraîches

Une règle pratique à l'équateur : chaque augmentation de niveau de zoom divise par deux la largeur visible à l'écran. Au zoom 14, un écran montre généralement quelques pâtés de maisons. Au zoom 10, une aire métropolitaine. Au zoom 6, un pays. La résolution effective dépend de la taille de l'écran et de la projection (Web Mercator déforme nord-sud à mesure que vous vous approchez des pôles).

La plupart du code en production stocke le zoom comme flottant (ex. 14.5) car les animations de zoom fluides interpolent entre des zooms entiers. Les récupérations de tuiles se produisent au niveau entier arrondi vers le bas ou le haut selon la convention de la bibliothèque.

Viewport vs bounding box

Un viewport est l'état de la caméra. Une bounding box est le rectangle géographique actuellement visible. Vous calculez la bbox à partir du viewport chaque fois que vous devez demander au serveur "que dois-je afficher dans cette vue ?".

En code :

const bbox = map.getBounds(); // retourne { _sw: {lat, lng}, _ne: {lat, lng} }
const params = new URLSearchParams({
  bbox: `${bbox._sw.lng},${bbox._sw.lat},${bbox._ne.lng},${bbox._ne.lat}`,
});
const features = await fetch(`/api/places?${params}`).then(r => r.json());

Ce pattern (calculer la bbox à partir du viewport, envoyer au serveur, rendre les entités renvoyées) est le rythme de toute expérience de recherche basée sur le viewport : immobilier, annonces, localisateurs de magasins, suivi de flotte, covoiturage.

Comment le viewport pilote le chargement des tuiles

Quand le viewport change, la bibliothèque cartographique détermine quelles tuiles couvrent la nouvelle zone visible au niveau de zoom actuel, récupère les tuiles manquantes sur le serveur (ou dans son cache mémoire), et les rend. Les tuiles déjà en cache sont réutilisées ; les tuiles hors viewport sont conservées au cas où l'utilisateur reviendrait.

Un déplacement et un zoom fluides semblent transparents car la bibliothèque effectue ce travail de manière asynchrone : elle affiche ce qu'elle a, récupère ce dont elle a besoin, et met à jour le canevas à mesure que de nouvelles tuiles arrivent. Les pipelines de tuiles vectorielles effectuent un travail supplémentaire pour rendre la géométrie en pixels sur le GPU, c'est pourquoi les cartes web modernes restent nettes à n'importe quel zoom et rotation.

Enregistrement et partage de l'état du viewport

Stocker le viewport dans l'URL est le pattern standard pour les liens de carte partageables. La plupart des produits utilisent un hash d'URL comme #map=14.5/52.5200/13.4050 (zoom, lat, lng). Au chargement de la page, parsez le hash et appliquez le viewport. Au changement de viewport, attendez quelques centaines de millisecondes avec un debounce et mettez à jour le hash pour que le bouton Retour du navigateur reste utile.

Pour l'état interne au navigateur entre les onglets ou les sessions, une clé localStorage avec la même structure fonctionne. Pour les pages rendues côté serveur, le viewport apparaît souvent sous forme de paramètres de requête pour des URL SEO-friendly (?zoom=14&lat=52.52&lng=13.405).

Biais de viewport pour la recherche et l'autocomplétion

Les API de géocodage acceptent le viewport (ou sa bbox) comme paramètre de biais. MapAtlas expose boundary.rect.* pour un filtre dur et focus.point.* pour un biais souple. Sans biais, l'autocomplétion pour "Springfield" renvoie le Springfield le plus populaire mondialement. Avec un biais de viewport, l'utilisateur tapant dans sa carte du Massachusetts obtient en premier des résultats du Massachusetts.

Appliquez ce biais à chaque frappe. Le coût est d'un paramètre et les suggestions sont nettement plus pertinentes.

Viewport initial : où démarrer

La première décision que toute application cartographique doit prendre est l'endroit de départ. Patterns courants :

• Par défaut sur la locale de l'utilisateur : un utilisateur en Allemagne arrive sur un viewport centré sur Berlin, un utilisateur en France sur Paris.
• Par défaut sur le dernier viewport de l'utilisateur : persistez le viewport entre les sessions.
• Par défaut sur les données : si votre carte affiche des résultats de recherche, ajustez la bbox de ces résultats au rendu initial.
• Par défaut sur la géolocalisation IP de l'utilisateur : faible précision, aucune permission requise, bonne solution de repli.
• Ne demandez la géolocalisation du navigateur que si l'utilisateur accepte explicitement : jamais au premier chargement sans consentement dans l'interface.

Choisir un viewport initial raisonnable est un petit détail avec un grand effet sur la qualité perçue.

Comment MapAtlas expose l'état du viewport

Le composant Dynamic Maps de MapAtlas expose les mêmes API getCenter, getZoom, getBearing, getPitch et setView que tout développeur de carte web connaît, avec en plus un hébergement exclusivement en UE et des paramètres de biais de viewport cohérents sur les endpoints Geocoding et Search. Pour une analyse approfondie de la manière dont le viewport interagit avec les tuiles et les projections, consultez Qu'est-ce qu'une tuile vectorielle et Qu'est-ce que Web Mercator.