Sprache
Deutsch

Auswählen und hervorheben

Das Muster, das die meisten Portale wollen: eine Liste auf der Seite, eine Karte daneben, die sich gegenseitig steuern. Fahren Sie mit der Maus über eine Zeile, um die Stadt hervorzuheben (nichts wird ausgewählt, kein Popup öffnet sich); klicken Sie auf eine Zeile, um sie auszuwählen und dorthin zu fliegen; klicken Sie auf der Karte auf eine Stadt, und die Seite erfährt, welche es war.

Dieses Beispiel separat öffnen

Worauf Sie achten sollten

  • selectByKey mit field nimmt Ihre Bezeichner entgegen; die Karte findet die Features.
  • Das field muss eine Spalte sein, die die veröffentlichte Karte enthält. Eine veröffentlichte Karte enthält nur die Spalten, die sie verwendet, daher fügt der Autor eine Schlüsselspalte unter QuickInfo-Felder der Ebene hinzu, hier city_id.
  • highlight ist eine vorübergehende Hervorhebung ohne Auswahlsemantik, gedacht für das Überfahren von Listeneinträgen. Bis zu 500 Schlüssel.
  • featureClick liefert nur die QuickInfo-Felder der Ebene (also das, was der Betrachter ohnehin sehen kann) und dazu einen stabilen featureKey.

Der Code

Die vollständige Seite. Setzen Sie Ihre eigene Publish-ID ein und bitten Sie den Autor der Karte, Ihre Website zu ihren zulässigen Ursprüngen hinzuzufügen.

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

Weiterlesen