Modèle carte interactive pour SPIP

Écrit le 22 avril 2026 - 16 vues

Ce modèle a été conçu pour faciliter l’intégration de cartes interactives dans les articles SPIP, en s’appuyant sur OpenStreetMap et la librairie Leaflet.

L’objectif est de proposer une solution simple à utiliser, légère, et sans configuration complexe.

À propos du modèle

Je ne suis pas développeur de métier, mais plutôt quelqu’un de passionné, curieux, et intéressé par le code.

Ce modèle est donc le résultat de tests et d’expérimentations. Il peut parfaitement être utilisé tel quel, mais il est recommandé de le tester dans un environnement de développement avant une mise en production.

Si vous souhaitez l’améliorer, l’adapter ou le faire évoluer, c’est totalement ouvert.

Installation

L’installation est volontairement simple.

Il suffit de copier le fichier map.html dans le dossier :

/squelettes/modeles

Aucune dépendance n’est à installer manuellement.

Le modèle est autonome : il détecte automatiquement la présence de Leaflet et, si nécessaire, charge les ressources depuis un CDN. Ce chargement est effectué uniquement sur les pages contenant une carte.

Utilisation

L’insertion d’une carte se fait directement dans le contenu d’un article, à l’aide d’une balise dédiée avec des coordonnées géographiques.

Une simple latitude et longitude permettent d’afficher une carte centrée sur un point précis.

Personnalisation

Le modèle propose plusieurs options pour adapter l’affichage et le comportement.

Position et zoom

Il est possible de définir le niveau de zoom afin de contrôler le niveau de détail, de la vue globale à une vue très précise.

Marqueurs

Deux approches sont disponibles :

• un marqueur unique, placé automatiquement au centre
• plusieurs marqueurs, définis via une syntaxe simple permettant d’associer coordonnées et texte

Cela permet par exemple d’afficher plusieurs villes ou points d’intérêt sur une même carte.

Style visuel

Plusieurs styles de carte sont disponibles :

• standard OpenStreetMap
• topographique
• clair
• sombre

Il est également possible de définir la largeur, le ratio d’affichage comme 16/9 ou 21/9, et d’ajouter des classes CSS personnalisées.

Interaction

Le zoom à la molette est désactivé par défaut afin de préserver le confort de navigation sur la page, mais il peut être activé si nécessaire.

Quelques exemples

<map|lat=46.2|lng=2.2|markers=48.8,2.3,Paris;45.7,4.8,Lyon;43.2,5.3,Marseille|scroll=oui>

Mode Topographique (Topo)
Ce paramètre change l’aspect visuel du fond de carte.

<map|lat=45.8326|lng=6.8651|zoom=13|layer=topo|popup=Le Mont Blanc>

Mode Clair (Light)

<map|lat=48.8566|lng=2.3522|layer=light|popup=Paris en mode épuré>

Mode Sombre (Dark)

<map|lat=40.7128|lng=-74.0060|layer=dark|popup=New York la nuit>

Activation du zoom molette
Par défaut, il est sur non. Si vous mettez oui, l’utilisateur pourra zoomer simplement en faisant rouler sa molette sur la carte.

<map|lat=43.6047|lng=1.4442|scroll=oui|popup=Toulouse (Zoom molette activé)>

Texte au survol
À la différence de popup qui nécessite un clic, le tooltip apparaît dès que la souris passe sur le marqueur.

<map|lat=44.8378|lng=-0.5792|tooltip=Bordeaux|popup=Bienvenue dans la cité du vin>

Exemple complet
Vous pouvez bien sûr mélanger tous les paramètres dans un seul appel.

<map|lat=47.2184|lng=-1.5536|zoom=14|layer=topo|scroll=oui|tooltip=Survolez Nantes|popup=Le château des ducs de Bretagne|width=100%|ratio=21/9>

Rappel des valeurs acceptées :

• layer : osm (défaut), topo, light, dark
• scroll : oui, non (défaut)
• tooltip : N’importe quel texte (évitez les textes trop longs)
• popup : N’importe quel texte (supporte quelques balises HTML simples)

Aspects techniques

Le modèle a été pensé pour être performant et robuste :

• chargement asynchrone, sans blocage de l’affichage
• compatibilité avec les rechargements Ajax
• sécurisation des données pour éviter les erreurs liées aux caractères spéciaux
• adaptation automatique aux écrans mobiles (responsive)

Cas d’usage

Ce modèle permet de couvrir plusieurs besoins courants :

• afficher une localisation simple
• présenter un itinéraire ou une zone géographique
• afficher plusieurs points d’intérêt
• proposer une carte immersive avec un format panoramique

Conclusion

Ce modèle se veut simple, autonome et facilement intégrable dans l’écosystème SPIP. Il peut être utilisé tel quel ou servir de base pour des développements plus avancés, selon les besoins.
Toute contribution ou amélioration reste la bienvenue.

À bientôt, ici ou ailleurs !

Chrys