Canvas capture

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Canvas capture</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>

    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/[email protected]/dist/html2canvas.min.js"></script>
  </head>

  <body>
    <div id="map">
      <div id="basemap"></div>
    </div>
    <button id="print-button">Download Map</button>
  </body>

</html>

CSS

body {
  margin: 0;
  padding: 0;
}

#map {
  position: relative;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}

#basemap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#print-button {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

JavaScript

deck.carto.setDefaultCredentials({
  apiBaseUrl: "https://gcp-us-east1.api.carto.com",
  accessToken: "eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfN3hoZnd5bWwiLCJqdGkiOiIxYzFhZjExMCJ9.JTyZCQr1x57wAUweV0bREecN8hVQiKF28xFCBleozyw"
});
const deckgl = new deck.DeckGL({
  container: "basemap",
  map: maplibregl,
  mapStyle: deck.carto.BASEMAP.VOYAGER,
  initialViewState: {
    latitude: 39.8097343,
    longitude: -78.5556199,
    zoom: 4
  },
  controller: true,
});
const cartoLayer = new deck.carto.CartoLayer({
  connection: "carto_dw",
  type: deck.carto.MAP_TYPES.QUERY,
  data: "SELECT * FROM `carto-demo-data.demo_tables.world_airports`",
  getFillColor: [238, 77, 90],
  pointRadiusMinPixels: 2.5
});
deckgl.setProps({
  layers: [cartoLayer]
});
document.getElementById('print-button').addEventListener('click', function() {
  screenshot();
});

function screenshot() {
  deckgl.redraw(true); // Force redraw of deckgl
  deckgl._map.redraw(); // Force redraw of maplibre
  const div = document.getElementById("map");
  html2canvas(div, {
    useCORS: true
  }).then(canvas => {
    const link = document.createElement('a');
    link.download = 'map_image.png';
    link.href = canvas.toDataURL();
    link.style.display = 'none';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  });
}