Die Einbettung umgestalten

Lassen Sie die Karte wie einen Teil Ihrer Anwendung aussehen. Wechseln Sie zwischen den Grundkarten, die der Autor veröffentlicht hat, schalten Sie die eigenen Bedienelemente der Karte ein und aus, lesen Sie die Legende als Daten und zeichnen Sie sie auf Ihre Weise, und exportieren Sie ein Bild der Karte, wie der Betrachter sie sieht.

Dieses Beispiel separat öffnen

Worauf Sie achten sollten

setChrome kann ein vom Autor konfiguriertes Bedienelement ausblenden, aber keines hinzufügen, das er nicht konfiguriert hat.
setBasemap nimmt eine ID aus getBasemaps() entgegen. Einen eigenen Stil zu laden ist nicht möglich.
exportImage und print werden abgelehnt, wenn eine Vertraulichkeitsbezeichnung auf den Daten der Karte keinen Export zulässt.
fullscreen() läuft in Ihrer Seite und benötigt dort einen Klick.

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>Restyle the embed - 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>Basemap</h2>
      <div class="ex-chips" id="basemaps"></div>

      <h2>The map's own controls</h2>
      <label class="ex-check"><input type="checkbox" data-chrome="legend"> Legend</label>
      <label class="ex-check"><input type="checkbox" data-chrome="layerControl"> Layer control</label>
      <label class="ex-check"><input type="checkbox" data-chrome="bookmarksBar"> Bookmarks bar</label>
      <label class="ex-check"><input type="checkbox" data-chrome="clickPopups" checked> Click popups</label>

      <h2>Cards</h2>
      <label class="ex-check"><input type="checkbox" id="cards"> Chart and slicers</label>

      <h2>A legend drawn by this page</h2>
      <div id="legend"></div>

      <h2>Export</h2>
      <div class="ex-chips">
        <button id="png">Download PNG</button>
        <button id="full">Full screen</button>
      </div>
    </div>
    <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");
    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",
      // Start bare: the map's panels off, its cards hidden.
      chrome: { legend: false, layerControl: false, bookmarksBar: false, tourTransport: false },
      visibility: { visuals: { "chart-continent": false, "slicer-continent": false, "slicer-size": false, "slicer-capital": false } },
      events: ["basemapChanged"],
    });
    map.ready.catch((error) => console.error(error.code, error.message));

    // --- basemaps: only the ones the author published with the map ---------------------
    map.getBasemaps().then((basemaps) => {
      for (const basemap of basemaps) {
        const button = Object.assign(document.createElement("button"), { textContent: basemap.name });
        button.dataset.basemap = basemap.id;
        button.classList.toggle("on", basemap.active);
        button.onclick = () => map.setBasemap({ basemapId: basemap.id });
        document.getElementById("basemaps").append(button);
      }
    });
    map.on("basemapChanged", ({ basemapId }) => {
      for (const b of document.querySelectorAll("[data-basemap]")) b.classList.toggle("on", b.dataset.basemap === basemapId);
    });

    // --- chrome: hide or show controls the author configured (it cannot add new ones) ----
    for (const box of document.querySelectorAll("[data-chrome]")) {
      box.onchange = () => map.setChrome({ [box.dataset.chrome]: box.checked });
    }

    // Charts and slicers are visuals, toggled like layers.
    document.getElementById("cards").onchange = (e) => {
      const visuals = {};
      for (const id of ["chart-continent","slicer-continent","slicer-size","slicer-capital"]) visuals[id] = e.target.checked;
      map.setVisibility({ visuals });
    };

    // --- the legend as DATA: draw it your way, anywhere on your page --------------------
    map.getLegend().then((entries) => {
      const host = document.getElementById("legend");
      for (const entry of entries) {
        host.append(Object.assign(document.createElement("div"), { textContent: entry.title, style: "margin:6px 0 3px;font-weight:600" }));
        for (const section of entry.sections) {
          for (const item of section.items) {
            if (item.kind === "gradient" && item.stops) {
              // A colour ramp arrives as its stops: one CSS gradient draws it.
              const ramp = Object.assign(document.createElement("div"), { className: "ex-ramp" });
              ramp.style.background = `linear-gradient(90deg, ${item.stops.map((s) => `${s.color} ${s.position * 100}%`).join(", ")})`;
              host.append(ramp);
            } else if (item.color && item.label) {
              const row = document.createElement("div");
              const swatch = Object.assign(document.createElement("span"), { className: "ex-swatch" });
              swatch.style.background = item.color;
              row.append(swatch, item.label);
              host.append(row);
            }
          }
        }
      }
    });

    // --- a picture of the map as the reader sees it -------------------------------------
    document.getElementById("png").onclick = async () => {
      const image = await map.exportImage({ width: 1600 });
      Object.assign(document.createElement("a"), { href: image.dataUrl, download: "world-cities.png" }).click();
    };

    // Full screen runs on YOUR page, so it needs a click here - which this is.
    document.getElementById("full").onclick = () => map.fullscreen();
  </script>
</body>
</html>

Weiterlesen

Befehle: Darstellung