# CartograMe — Documentation d’intégration
CartograMe fournit des cartes SVG interactives intégrables dans un site, un outil métier ou un CRM au moyen d’une iframe. La carte, les zones actives, les zones masquées et les styles sont pilotés par les paramètres de l’URL.
## Adresse du service
- Site :
- Embed :
- Documentation Markdown :
L’interface actuellement disponible est l’embed HTTP `GET`. Il n’existe pas encore d’endpoint `POST` JSON public.
## Deux formats de sortie
- **Image statique gratuite** : le configurateur permet de télécharger la vue courante au format PNG ou JPEG. Le fichier est autonome, mais il n’est pas interactif.
- **Carte interactive** : l’iframe conserve le survol, le zoom, le déplacement et l’adaptation à la taille du conteneur. Son intégration est proposée à 7,50 € par an ou 30 € en achat définitif.
L’export PNG/JPEG est réalisé dans le navigateur depuis le configurateur. Il ne correspond pas à un endpoint d’API et ne doit donc pas être appelé comme une URL distante.
## Intégration minimale
```html
```
## Choisir une carte
Le paramètre `map` détermine à la fois le fond de carte et le format des codes transmis dans `selected` et `hidden`.
| Valeur de `map` | Découpage | Codes attendus | Exemples |
| --- | --- | --- | --- |
| `france` | Départements français, outre-mer inclus | Codes départementaux | `01`, `75`, `2A`, `971` |
| `france-communes` | Communes de France métropolitaine | Codes INSEE communaux sur cinq caractères | `75056`, `76551`, `2A004` |
| `aisne-5e-circo` | Communes de la 5e circonscription de l’Aisne | Codes INSEE communaux sur cinq chiffres | `02094`, `02168` |
Si `map` est absent ou inconnu, `france` est utilisée. L’alias historique `france-departements` reste accepté. Les alias `communes` et `communes-france` correspondent à `france-communes`.
## Codes des zones
### Carte des départements
- Métropole : `01` à `95` ;
- Corse : `2A` et `2B` ;
- outre-mer disponible : `971`, `972`, `973`, `974` et `976`.
### Cartes des communes
Les zones sont adressées par leur code INSEE communal complet :
- cinq chiffres en métropole, par exemple `75056` pour Paris ou `76551` ;
- cinq caractères en Corse, par exemple `2A004` ou `2B047`.
Les codes doivent être transmis comme du texte. Il faut impérativement conserver les zéros initiaux : `02094` n’est pas équivalent à `2094`.
Les paramètres acceptent une liste séparée par des virgules, sans nom de commune nécessaire :
```text
selected=75056,76551,2A004
hidden=13055,69123
```
Les codes absents de la carte choisie sont simplement ignorés.
## Paramètres disponibles
| Paramètre | Description | Exemple |
| --- | --- | --- |
| `map` | Carte à charger | `france-communes` |
| `selected` | Codes des zones mises en évidence | `75056,76551` |
| `hidden` | Codes des zones entièrement masquées | `13055,69123` |
| `fill` | Couleur de fond des zones | `%23dbd9d9` |
| `stroke` | Couleur des bordures | `%23211e21` |
| `strokeWidth` | Épaisseur des bordures | `0.6` |
| `hoverFill` | Couleur au survol | `%23b29f7b` |
| `hoverOpacity` | Opacité au survol, de `0` à `1` | `0.7` |
| `activeFill` | Couleur des zones sélectionnées | `%23dd383d` |
| `activeOpacity` | Opacité des zones sélectionnées, de `0` à `1` | `0.9` |
| `activeStroke` | Couleur de bordure des zones sélectionnées | `%23211e21` |
| `activeStrokeWidth` | Épaisseur de bordure des zones sélectionnées | `1.2` |
Le caractère `#` d’une couleur hexadécimale doit être encodé en `%23` dans l’URL. L’utilisation de `URL` et `URLSearchParams` en JavaScript réalise automatiquement cet encodage.
## Exemples complets
### Départements
```text
https://cartograme.com/embed.html?map=france&selected=75,91,33&hidden=971,972&fill=%23dbd9d9&activeFill=%23dd383d
```
### Communes de France métropolitaine
```text
https://cartograme.com/embed.html?map=france-communes&selected=75056,76551,2A004&fill=%23dbd9d9&stroke=%23211e21&strokeWidth=0.3&activeFill=%23dd383d&activeOpacity=0.9
```
### Communes de la 5e circonscription de l’Aisne
```text
https://cartograme.com/embed.html?map=aisne-5e-circo&selected=02094,02168&hidden=02292
```
## Construire l’URL en JavaScript
```js
const embedUrl = new URL("https://cartograme.com/embed.html");
embedUrl.search = new URLSearchParams({
map: "france-communes",
selected: ["75056", "76551", "2A004"].join(","),
fill: "#dbd9d9",
stroke: "#211e21",
activeFill: "#dd383d",
}).toString();
document.querySelector("#cartograme").src = embedUrl.toString();
```
```html
```
Pour actualiser une carte à partir des données du site hôte, reconstruisez l’URL puis affectez-la à la propriété `src` de l’iframe. L’embed ne fournit pas actuellement d’API JavaScript `postMessage`.
## Navigation dans la carte interactive
L’utilisateur peut explorer la carte sans configuration supplémentaire :
- molette ou geste de pincement pour zoomer ;
- glisser-déposer pour déplacer la carte ;
- boutons `+`, `−` et recentrage dans l’interface ;
- survol des zones pour afficher leur état interactif.
Le zoom est appliqué à l’intérieur de l’iframe. Le site hôte conserve donc le contrôle de la taille et de la position du bloc grâce aux dimensions de l’élément `