Langue
Français

Afficher une carte

L'incorporation utile la plus simple : un seul appel monte la carte, et ready se résout avec le descripteur de capacités, c'est-à-dire les commandes et événements auxquels cette carte précise répondra. Tous les autres exemples s'appuient sur le handle renvoyé par embed().

Ouvrir cet exemple seul

Points à remarquer

  • embed(element, { publishId }) crée le cadre et ouvre la session de contrôle.
  • map.ready se résout avec { commands, events, policy, map }. Basez vos choix sur commands, jamais sur les numéros de version.
  • Si votre site ne figure pas parmi les origines autorisées de la carte, ready est rejetée avec denied_origin : la carte s'affiche quand même, elle ne peut simplement pas être pilotée.

Le code

La page complète. Remplacez l'identifiant de publication par le vôtre, et demandez à l'auteur de la carte d'ajouter votre site à ses origines autorisées.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Display a map - Icon Map Embed API</title>
  <link rel="stylesheet" href="https://www.icon-map.com/embed-examples/examples.css"> <!-- demo styling only -->
</head>
<body>
  <div class="ex-bar">
    <span class="ex-label">Status</span> <span id="status">connecting...</span>
    <span class="ex-spacer"></span>
    <span class="ex-label" id="details"></span>
  </div>
  <div class="ex-main"><div id="map"></div></div>

  <script src="https://www.icon-map.com/js/iconmap-embed/2/iconmap-embed.umd.min.js"></script>
  <script>
    const el = document.getElementById("map");

    // One call mounts the map. Everything else in these examples builds on the handle it returns.
    const map = IconMapEmbed.embed(el, {
      publishId: "pub_...",
      // The map is a globe: let this page's own background show in the space around it.
      background: "transparent",
      title: "World cities",
    });

    // `ready` resolves with what THIS map will answer: the commands, the events,
    // the author's switches and a few facts about the map.
    map.ready
      .then((capabilities) => {
        document.getElementById("status").textContent = "connected";
        document.getElementById("details").textContent =
          `${capabilities.commands.length} commands - ${capabilities.events.length} events - ` +
          `data: ${capabilities.map.dataMode} - languages: ${capabilities.map.locales.length}`;
      })
      .catch((error) => console.error(error.code, error.message));
  </script>
</body>
</html>

Pour aller plus loin