Mudar o estilo da incorporação

Faça o mapa parecer parte do seu aplicativo. Alterne entre os mapas base que o autor publicou, ative e desative os controles do próprio mapa, leia a legenda como dados e desenhe-a do seu jeito, e exporte uma imagem do mapa como o leitor o vê.

Abrir este exemplo separadamente

O que observar

• setChrome pode ocultar um controle que o autor configurou; não pode adicionar um que ele não configurou.
• setBasemap recebe um ID de getBasemaps(): não há como carregar um estilo próprio.
• exportImage e print são recusados quando um rótulo de confidencialidade nos dados do mapa não permite exportação.
• fullscreen() é executado na sua página e precisa de um clique nela.

O código

A página completa. Troque pelo seu próprio ID de publicação e peça ao autor do mapa que adicione seu site às origens permitidas dele.

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

Saiba mais

• Comandos: apresentação