Location Picker SDK

Exemple minimal — option A : <script> (UMD)

Recommandé pour la majorité des intégrations. Chargez la CSS + le bundle UMD ; une fois la coordonnée confirmée, libérez le picker pour pouvoir monter le viewer à la place :

<link  rel="stylesheet" href="https://static.dioramap.com/sdk/v0.8.1/dioramap-location-picker.css">
<script src="https://static.dioramap.com/sdk/v0.8.1/dioramap-location-picker.umd.js"></script>

<div id="picker" style="width:100%;height:600px"></div>
<script>
  const picker = await DioramapLocationPicker.init({
    container: '#picker',
    basemap: 'both',     // laisse l'utilisateur basculer plan ↔ vue aérienne
    onConfirm: ({ lat, lon }) => {
      console.log('Lieu choisi :', lat, lon);
      picker.dispose();
      startViewer(lat, lon);     // votre code qui monte DioramapViewer
    },
  });
</script>

Exemple minimal — option B : import (ES module)

Pour les sites construits avec Vite, webpack, esbuild, etc. La CSS reste à charger via <link>.

<link  rel="stylesheet" href="https://static.dioramap.com/sdk/v0.8.1/dioramap-location-picker.css">

import { init } from 'https://static.dioramap.com/sdk/v0.8.1/dioramap-location-picker.es.js';

const picker = await init({
  container: '#picker',
  basemap: 'both',
  onConfirm: ({ lat, lon }) => {
    picker.dispose();
    startViewer(lat, lon);
  },
});

Choix du format : les deux fichiers exposent la même API. Choisissez selon votre infrastructure : .umd.js si vous intégrez par <script>, .es.js si votre site utilise un bundler avec import. Ne chargez jamais les deux simultanément.

DioramapLocationPicker.init(config)

Monte la carte dans config.container et retourne une Promise résolue avec un objet SDK.

Options

Callbacks

onPick({ lat, lon, radius })

Appelé à chaque clic sur la carte ou à chaque sélection d'une adresse via la barre de recherche. Le rayon est constant (issu de la config). Utile pour pré-charger une scène ou afficher des informations contextuelles avant que l'utilisateur ne confirme.

onConfirm({ lat, lon, radius })

Appelé quand l'utilisateur clique sur le bouton Confirmer. C'est le signal d'enchaîner sur le viewer (voir le cas d'utilisation classique).

onReady(sdk)

Appelé une fois la carte initialisée et les tuiles disponibles. sdk est l'objet retourné par init().

Méthodes

sdk.getSelection()

Retourne la sélection courante { lat, lon, radius }, ou null si l'utilisateur n'a encore rien choisi.

sdk.setCenter([lon, lat])

Recentre la carte et le curseur sur la coordonnée donnée. Anime à un zoom d'au moins 15 si la carte est plus loin. Utile pour pré-positionner le picker à partir d'une adresse stockée côté hôte.

sdk.flyTo([lon, lat], zoom)

Anime la vue vers la coordonnée donnée sans modifier la sélection. zoom est optionnel (par défaut, conserve celui de la config).

sdk.setBasemap(name)

Bascule entre les fonds 'osm' et 'ortho'. Sans effet si config.basemap n'est pas 'both'.

sdk.dispose()

Démonte la carte, libère MapLibre et vide le conteneur. À appeler avant de monter le viewer à la même position dans le DOM.

Personnalisation visuelle & CSP

Depuis la version 0.8.0, l'intégralité du CSS du picker (y compris les libellés Leaflet/MapLibre) vit dans une feuille externe (dioramap-location-picker.css). Aucun <style> n'est injecté au runtime, aucun el.style.cssText = '…' n'est utilisé. Conséquences :

• vous pouvez retirer 'unsafe-inline' de votre directive style-src ;
• vous pouvez surcharger les couleurs et le rayon des coins via des variables CSS (voir tableau ci-dessous).

CSP recommandée pour la page contenant le picker

Content-Security-Policy:
  default-src 'self';
  script-src  'self' https://static.dioramap.com;
  style-src   'self' https://static.dioramap.com;
  connect-src 'self'
              https://api-adresse.data.gouv.fr
              https://*.tile.openstreetmap.org
              https://data.geopf.fr
              https://demotiles.maplibre.org;
  img-src     'self' data: blob:
              https://*.tile.openstreetmap.org
              https://data.geopf.fr;
  worker-src  'self' blob:;

connect-src couvre la recherche d'adresse (BAN), les tuiles plan/ortho et les fontes vectorielles MapLibre. img-src data: blob: est requis pour les marqueurs encodés et les vector tiles rasterisées en CanvasImageSource. worker-src couvre les web workers instanciés par MapLibre pour décoder les tuiles.

Variables CSS—couleurs & formes

Le picker utilise un préfixe distinct du viewer (--dioramap-picker-*) pour pouvoir cohabiter sur la même page sans collision. Surchargez-les depuis votre propre feuille de style chargée après celle du SDK.

Exemple d'override

<link rel="stylesheet" href="https://static.dioramap.com/sdk/v0.8.1/dioramap-location-picker.css">
<link rel="stylesheet" href="/css/votre-theme.css">

Dans /css/votre-theme.css :

:root {
  --dioramap-picker-confirm-bg: #1d4ed8;
  --dioramap-picker-confirm-bg-hover: #2563eb;
  --dioramap-picker-radius: 12px;
}

Cibler des éléments précis

La liste des classes stables exposées par le picker :

• .dioramap-picker-map — conteneur MapLibre.
• .dioramap-picker-search, .dioramap-picker-search-input, .dioramap-picker-search-dropdown, .dioramap-picker-search-item — barre de recherche d'adresse.
• .dioramap-picker-confirm-wrap, .dioramap-picker-confirm-btn, .dioramap-picker-zoom-hint — bouton de confirmation et bulle d'aide.
• .dioramap-picker-banner — bandeau bas « Cliquez sur la carte ».

Les classes commençant par .maplibregl- appartiennent à MapLibre-GL et ne sont pas de la surface publique du picker. Évitez de vous y appuyer pour théming : elles peuvent changer à chaque mise à jour de MapLibre.