Comité Data des Tiers-Lieux

À quoi ça sert ?

L’annuaire des tiers-lieux est une interface publique de recherche et d’exploration des tiers-lieux en France. Il permet aux visiteurs, gestionnaires, réseaux, collectivités et chercheurs de parcourir les données ouvertes sur les tiers-lieux, maintenues collectivement par l’écosystème.

Les données affichées dans l’annuaire reflètent directement le contenu des fiches d’identité renseignées par les tiers-lieux dans Grist. L’annuaire est une application 100% client : il n’a pas de serveur propre, tout le rendu se fait dans le navigateur de l’utilisateur. Les données sont récupérées via l’API Tiers-Lieux.

Principe de fonctionnement

L’annuaire est construit avec SvelteKit et propose une interface triple panneau : liste de résultats, carte interactive Leaflet, et fiche détaillée. Il s’appuie sur l’API Tiers-Lieux comme source de données.

Les fonctionnalités principales :

• Recherche plein texte sur le nom, la ville et la description des tiers-lieux
• Filtres multiples : région, famille, labels et certifications
• Carte interactive avec marqueurs personnalisés et ajustement automatique de la vue
• Fiche détaillée pour chaque tiers-lieu avec ses informations complètes
• Partage via liens, export carte JPEG et intégration iframe
• Responsive mobile avec navigation par onglets

Intégration sur un site tiers

L’annuaire propose un bouton de partage avec quatre modes d’intégration :

Web component — Un composant HTML personnalisé <annuaire-tiers-lieux> qui s’intègre directement dans la page sans iframe. Il suffit de charger un fichier CSS et un fichier JavaScript, puis d’ajouter la balise. Le composant accepte des attributs pour pré-filtrer les résultats (région, famille, labels) ou définir une recherche initiale.

Iframe — Une intégration classique par iframe avec dimensions personnalisables, générée directement depuis le bouton de partage de l’annuaire.

Lien — Une URL partageable qui encode la recherche en cours, les filtres actifs et le tiers-lieu sélectionné. Permet de partager un état précis de l’annuaire.

Image — Une carte statique au format JPEG générée côté serveur, avec les marqueurs des tiers-lieux correspondant aux filtres actifs. Utile pour illustrer un rapport ou une publication.

Dans les quatres cas, un réseau régional ou une collectivité peut ainsi afficher l’annuaire des tiers-lieux (ou un sous-ensemble filtré) directement sur son propre site.

Personnalisation des couleurs — Les couleurs de l’annuaire sont entièrement personnalisables. Deux couleurs principales (brand pour les marqueurs et boutons, accent pour la sélection et les badges) peuvent être modifiées via les attributs du web component (color-brand, color-accent), via les paramètres URL pour les iframes et liens (brand, accent), ou même sur les cartes statiques. Cela permet à chaque intégrateur d’adapter l’annuaire à sa charte graphique.

Stack technique

Construit avec SvelteKit 2, Svelte 5, TypeScript et Tailwind CSS. La cartographie utilise Leaflet.js. Le déploiement se fait via Docker avec un reverse proxy Traefik.