Un an après la version 3, la visionneuse de Panoramax évolue en profondeur avec sa version 4. Au programme : une refonte graphique, une meilleure lisibilité, et des petits détails qui font toute la différence à l’usage.
Elle est à tester dès à présent sur https://viewer.geovisio.fr/ et sera disponible sur les instances au cours de la semaine prochaine
Tour d’horizon des principales nouveautés côté interface utilisateur
Une nouvelle légende photo : claire, compacte et responsive
Le widget de légende d’une photo a été complètement repensé :
- Il s’affiche désormais dans un encadré soigné, parfaitement lisible sur tous les écrans.
- Il présente les informations principales de façon synthétique, avec des onglets pour accéder aux détails (métadonnées, contributeur, licence, instance d’origine…).
- Il est aussi responsive : l’affichage s’adapte si vous êtes sur mobile, tablette ou grand écran.
Une nouvelle police plus lisible : Atkinson Hyperlegible
Panoramax adopte la police Atkinson Hyperlegible, conçue pour améliorer la lecture, même pour les personnes avec des troubles de la vision.
Résultat : un texte plus clair, mieux espacé, agréable à lire même après plusieurs minutes d’exploration.
Une interface plus fluide et intuitive
Plusieurs petites évolutions rendent la navigation plus confortable :
- Barre de progression animée au lancement de la visionneuse.
- Meilleure gestion des filtres de date : si vous inversez par erreur début et fin, l’ordre est automatiquement corrigé.
- Mémoire de position : si vous revenez sur la visionneuse, elle se remet au dernier endroit consulté, avec le dernier thème utilisé.
- Résultats de recherche plus clairs pour les adresses.
- Nouveau sélecteur de type de photo (Toutes / Classiques / 360°) plus visible.
Et du côté des développeurs
La version 4 de la visionneuse Panoramax marque un tournant technique : tout repose désormais sur des Web Components. Cela implique quelques changements dans la manière d’intégrer, personnaliser et faire interagir les composants.
Des composants web natifs (basés sur Lit.js)
Fini les classes JS à instancier manuellement, on écrit directement du HTML avec des balises personnalisées comme <pnx-viewer>
ou <pnx-photo-viewer>
, avec des attributs pour les options. Exemple :
<pnx-viewer endpoint="https://api.panoramax.fr/api" />
Une architecture plus modulaire
- Le code est découpé en sous-composants (
map
,photo
,ui.widgets
, etc.) - Les événements sont émis depuis leurs composants respectifs
- Il est toujours possible de les écouter via le composant parent, avec des préfixes (
map:
,psv:
…)
Intégration et personnalisation simplifiées
Les widgets peuvent être désactivés ou remplacés via des slots HTML. Par exemple, pour ajouter un bouton perso en haut à droite :
<pnx-viewer widgets="false">
<button slot="top-right">Mon bouton</button>
</pnx-viewer>
Il existe désormais un nouveau composant <pnx-photo-viewer>
, qui permet d’afficher uniquement une photo, sans carte.
Autres changements clés
- Les paramètres sont désormais passés en search (après le
?
) et non plus en hash (après le#
). Ceci permettra dans le futur de gérer un aperçu pour les liens de partage. - Migration vers PSV 5.12.1 et MapLibre GL 5.3.0
- La doc développeur est désormais séparée en deux versions : stable (docs.panoramax.fr/web-viewer) et de développement (viewer.geovisio.fr/docs)
Migrer depuis la version 3
Besoin de migrer un projet existant ? Un guide complet de migration est disponible pour passer de la v3 à la v4.
J’espère que cette nouvelle version vous plaira, et bien entendu nous sommes preneurs de vos retours et suggestions pour la suite. D’autres changements sont dans les tuyaux (notamment sur la sémantique ) !