@synapxlab/geo-select, la sélection géographique native

Une carte qui produit une sélection

Un champ multiple classique suppose que chaque choix existe déjà sous forme d’option. Ici, un territoire peut ne pas avoir encore été chargé et une sélection peut porter sur un ensemble complet assorti de quelques exceptions. Le modèle de données tient compte de cette réalité.

Démonstration vivante

La carte ci-dessous est chargée directement depuis geoselect.synapx.fr. Tant que ce domaine n’est pas en ligne ou si son script ne répond pas, la page conserve volontairement le message de repli et reste utilisable.

Trois usages distincts

Une sélection sémantique, fondée sur les codes INSEE

Sélectionner un département ne matérialise pas ses quelque 300 communes en mémoire ni dans la donnée envoyée. Le SDK enregistre une inclusion et ses éventuelles exclusions : « le département 15, sauf la commune d’Aurillac ». Cette représentation reste compacte et décrit l’intention, au lieu de produire une liste à plat.

Un élément de formulaire natif

<geo-select> est un Custom Element formAssociated fondé sur ElementInternals. Placé dans un formulaire, il participe à new FormData(form), à form.reset(), à form.elements et à la validation required avec le message natif du navigateur. Lors d’une modification, il émet les événements input puis change, sans code supplémentaire côté intégrateur.

<form id="zone-form">
  <geo-select name="territoires" required></geo-select>
</form>

États accessibles et navigation au clavier

Chaque territoire interactif porte role="checkbox" et expose son état avec aria-checked. La valeur mixed indique une sélection partielle, par exemple lorsqu’un département est sélectionné mais que certaines communes en sont exclues. La navigation fonctionne au clavier et les changements utiles sont annoncés dans une zone aria-live.

Configurer, prévisualiser, copier

Le configurateur en ligne permet de régler les options, de prévisualiser le résultat en direct et de copier un bloc HTML + JavaScript prêt à intégrer. Il propose trois formats de sortie selon le mode de déploiement retenu.

Fichiers statiques ou API REST

La source géographique peut être constituée des fichiers statiques fournis avec le SDK ou d’une API REST configurée selon un modèle proche de DataTables. L’intégrateur garde ainsi la maîtrise de l’hébergement et de la façon dont les réponses sont adaptées.

Ajouter une information métier à chaque commune

Une ligne de texte peut être affichée sous le nom de chaque commune et alimentée par une API. Dans un réseau de partenaires, de franchisés ou de distribution, cette annotation peut par exemple indiquer le nom de l’adhérent qui couvre la commune. La géographie sert alors de support à une donnée métier maintenue par l’application.

Options d’affichage

Données françaises, licences distinctes

Les contours et référentiels sont distribués au format TopoJSON. Ce format a été retenu après une mesure comparative face à GeoJSON et à un SVG précompilé. La vue nationale, au niveau le plus dézoomé, pèse 22,7 Ko sur le réseau une fois compressée en Brotli.

Installation par fichiers locaux ou depuis les sources

Le SDK s’installe à partir des fichiers téléchargés ou depuis son dépôt source. Le code source est disponible sur demande. Copiez la feuille de style, le bundle JavaScript et le répertoire de données sur votre serveur, puis référencez leurs chemins locaux.

<!-- Ressources servies par votre propre site -->
<link rel="stylesheet" href="./dist/style.css">
<script src="./dist/geo-select.umd.cjs" defer></script>

<div id="territory-map"></div>

<script>
  window.addEventListener('load', function () {
    if (typeof window.GeoSelect === 'undefined') { return; }
    var mount = document.getElementById('territory-map');
    if (!mount) { return; }
    new GeoSelect.GeoSelect(mount, {
      dataProvider: './geo-data',
      theme: 'light'
    });
  });
</script>

Types TypeScript fournis

Le SDK est écrit en JavaScript. Des fichiers de déclaration .d.ts sont néanmoins fournis pour typer son intégration dans un projet TypeScript et permettre à l’éditeur de connaître les interfaces exposées.