Langue
Français

Sélectionner et mettre en surbrillance

Le schéma que veulent la plupart des portails : une liste sur la page, une carte à côté, chacune pilotant l'autre. Survolez une ligne pour mettre en surbrillance la ville (rien n'est sélectionné, aucune fenêtre contextuelle ne s'ouvre) ; cliquez sur une ligne pour la sélectionner et voler jusqu'à elle ; cliquez sur une ville sur la carte et la page apprend de laquelle il s'agit.

Ouvrir cet exemple seul

Points à remarquer

  • selectByKey avec field accepte vos identifiants : la carte trouve les entités.
  • Le field doit être une colonne présente dans la carte publiée. Une carte publiée ne contient que les colonnes qu'elle utilise : l'auteur ajoute donc une colonne de clé aux Champs d'info-bulle de la couche, ici city_id.
  • highlight est une mise en évidence passagère, sans sémantique de sélection, conçue pour le survol d'une liste. Jusqu'à 500 clés.
  • featureClick ne renvoie que les champs d'info-bulle de la couche, c'est-à-dire ce que le lecteur voit déjà, plus une featureKey stable.

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>Select and highlight - 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-main">
    <div class="ex-side">
      <h2>The 15 largest cities</h2>
      <ul class="ex-list" id="list"></ul>
      <h2>Last click on the map</h2>
      <pre class="ex-readout" id="clicked">Click any city.</pre>
    </div>
    <div id="map"></div>
  </div>

  <script src="https://www.icon-map.com/js/iconmap-embed/2/iconmap-embed.umd.min.js"></script>
  <script>
    // This list is the page's OWN data - in a real portal it comes from your system.
    // `city_id` is the key it shares with the map's data. A published map carries only the columns
    // it uses, so the author put city_id in the layer's tooltip fields - that is what publishes it.
    const cities = [
      ["Tokyo, Japan", 35.7], ["New York, United States", 19.0], ["Mexico City, Mexico", 19.0],
      ["Mumbai, India", 19.0], ["São Paulo, Brazil", 18.8], ["Delhi, India", 15.9],
      ["Shanghai, China", 15.0], ["Kolkata, India", 14.8], ["Dhaka, Bangladesh", 12.8],
      ["Buenos Aires, Argentina", 12.8], ["Los Angeles, United States", 12.5], ["Karachi, Pakistan", 12.1],
      ["Cairo, Egypt", 11.9], ["Rio de Janeiro, Brazil", 11.8], ["Ōsaka, Japan", 11.3],
    ];

    const el = document.getElementById("map");
    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",
      chrome: { legend: false, layerControl: false, bookmarksBar: false, tourTransport: false },
      visibility: { visuals: { "chart-continent": false, "slicer-continent": false, "slicer-size": false, "slicer-capital": false } },
      events: ["featureClick"],
    });
    map.ready.catch((error) => console.error(error.code, error.message));

    const list = document.getElementById("list");
    for (const [id, millions] of cities) {
      const row = document.createElement("li");
      row.dataset.id = id;
      row.innerHTML = `<span>${id.split(",")[0]}</span><span>${millions.toFixed(1)}M</span>`;

      // Hover: emphasise on the map WITHOUT selecting - no popup, no event, nothing else follows.
      row.onmouseenter = () => map.highlight({ layerId: "cities", field: "city_id", keys: [id] });
      row.onmouseleave = () => map.clearHighlight();

      // Click: select by YOUR key and frame it. With `field`, the map finds the features for you.
      row.onclick = () => {
        mark(id);
        map.selectByKey({ layerId: "cities", field: "city_id", keys: [id], zoomTo: true });
      };
      list.append(row);
    }

    // The other direction: a click on the map tells the page which city it was.
    // `fields` holds the layer's tooltip fields - what the reader can already see.
    map.on("featureClick", (feature) => {
      if (!feature || feature.layerId !== "cities") return;
      const { city, country, population } = feature.fields;
      document.getElementById("clicked").textContent =
        `${city}, ${country}\n${Number(population).toLocaleString()} people\nfeatureKey: ${feature.featureKey}`;
      mark(`${city}, ${country}`);
    });

    function mark(id) {
      for (const row of list.children) row.classList.toggle("on", row.dataset.id === id);
    }
  </script>
</body>
</html>

Pour aller plus loin