---
title: geo-select — carte de France interactive et sélecteur de territoires
source: https://synapx.fr/sdk/Geo_select/
site: SynapxLab
---

# geo-select — carte SVG de France utilisable comme un champ de formulaire

**@synapxlab/geo-select** est une carte SVG de France qui se comporte comme un `<select multiple>`. L'utilisateur navigue de la France vers une région, un département puis une commune selon le niveau de zoom ; les données se chargent progressivement, le navigateur ne reçoit jamais d'emblée le détail des 34 877 communes.

Le SDK est du JavaScript natif, sans dépendance d'exécution ni framework. Le rendu est du SVG, pas du Canvas. Tout est hébergé chez soi : aucun appel à un service tiers, aucune clé d'API, aucun fond de carte distant.

Le point qui distingue ce SDK d'un simple sélecteur géographique est le modèle de sélection sémantique include/exclude : sélectionner un département ne matérialise pas ses communes une par une. On stocke « le 15, sauf Aurillac », pas la liste des 250 codes INSEE du Cantal.

Le code INSEE est l'identifiant utilisé partout dans l'API, jamais le code postal : un code postal peut couvrir plusieurs communes, une commune peut porter plusieurs codes postaux, la relation est plusieurs-à-plusieurs. Les codes postaux ne servent que d'index de recherche.

## Installation

Le paquet n'est pas publié sur npm. Deux voies existent :

```html
<link rel="stylesheet" href="https://geoselect.synapx.fr/dist/style.css">
<script src="https://geoselect.synapx.fr/dist/geo-select.umd.cjs"></script>
```

ou les mêmes fichiers `dist/style.css` et `dist/geo-select.umd.cjs` copiés et servis en local.

```js
new GeoSelect.GeoSelect('#carte', { dataProvider: '/geo-data' })
```

## Usages

| Usage | Comportement |
| --- | --- |
| Sélection sur carte | Navigation France → région → département → commune, sélection interactive |
| Affichage de zones couvertes | `mode: 'display'` — la carte montre une couverture existante, non modifiable |
| Sélection sans carte | `TerritoryPicker` — modale avec complétion à la frappe, pour les intégrations qui ont besoin des territoires sans représentation cartographique |

## Sélection : le modèle include/exclude

Une sélection se décrit par territoire et par type, jamais par énumération de communes :

```js
geo.addSelection({ type: 'department', code: '69' })
```

Exclure une commune d'un département déjà sélectionné n'ajoute pas une liste de communes restantes : l'exclusion est stockée comme telle, à côté de l'inclusion du département. Le code INSEE reste la seule clé de territoire ; le code postal n'entre jamais dans cette structure.

## Élément de formulaire

`<geo-select>` est un Custom Element `formAssociated`. Placé dans un `<form>`, il participe à `new FormData(form)`, à `form.reset()`, à `form.elements` et à la validation `required` avec le message natif du navigateur. Il émet `input` puis `change` à chaque modification, sans code supplémentaire côté intégrateur.

Ce n'est pas un `HTMLSelectElement` : il n'a ni `options` ni `selectedOptions`. Un territoire n'est pas un `<option>` et peut n'avoir jamais été chargé par le navigateur au moment de l'interrogation.

## Données et licences

| Donnée | Source | Couverture | Licence |
| --- | --- | --- | --- |
| Contours géographiques | IGN Admin Express COG 2026 | France | Licence Ouverte 2.0 |
| Référentiel des communes | INSEE COG 2026 | France | Licence Ouverte 2.0 |
| Réseau hydrographique | BD TOPAGE® 2026 | Métropole uniquement | Licence Ouverte 2.0 |

Le code du SDK est sous licence MIT. Les données ne le sont pas : elles conservent leur Licence Ouverte 2.0 et l'obligation d'attribution aux producteurs, notamment l'IGN et l'INSEE.

Les contours sont distribués au format TopoJSON, retenu après mesure comparative face à GeoJSON et à un SVG précompilé : 34 877 communes, 550 fichiers, 7,8 Mo compressés au total, 22,7 Ko pour la vue nationale en Brotli.

## Accessibilité

Chaque territoire interactif porte `role="checkbox"` et expose son état avec `aria-checked`, dont la valeur `mixed` pour une sélection partielle (département sélectionné avec une commune exclue, par exemple). La navigation fonctionne au clavier ; les changements utiles sont annoncés dans une zone `aria-live`.

## Liens

Démonstrateur : `https://geoselect.synapx.fr/`. Configurateur (réglage des options, aperçu en direct, export HTML + JavaScript) : `https://geoselect.synapx.fr/configurateur.html`. Documentation complète : `https://synapx.fr/sdk/Geo_select/`.