Select and highlight

The pattern most portals want: a list on the page, a map beside it, each driving the other. Hover a row to highlight the city (nothing is selected, no popup opens); click a row to select it and fly there; click a city on the map and the page learns which one it was.

Open this example on its own

What to notice

  • selectByKey with field takes your identifiers - the map finds the features.
  • The field must be a column the published map carries. A published map holds only the columns it uses, so the author adds a key column to the layer's tooltip fields - here city_id.
  • highlight is transient emphasis with no selection semantics; made for list hover. Up to 500 keys.
  • featureClick returns the layer's tooltip fields only - what the reader can already see - plus a stable featureKey.

The code

The complete page. Swap in your own publish id, and ask the map's author to add your site to its allowed origins.

<!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>

Read more