doesn't work with mapbox

yan-map commented 3 years ago

hello! I did'nt find the solution to print mapbox maps with the recent versions of html2canvas code here: https://codesandbox.io/s/intelligent-merkle-56q9x?file=/index.html

AgentSmith0 commented 2 years ago

That's probably a duplicate of https://github.com/niklasvh/html2canvas/issues/1631

niklasvh commented 2 years ago

The sandbox link doesn't work

AgentSmith0 commented 2 years ago

@niklasvh You can try the following code on https://codepen.io/pen/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.1/html2canvas.min.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    mapboxgl.accessToken = 'pk.eyJ1IjoidWJpbGFicyIsImEiOiJjaXc3dGQzb2wwMDEwMnlwNXlsejAyOXF6In0.2C7DfhUhiVWgE_ek5N5GzQ';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v11', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});

map.on('load', function() {
  html2canvas(document.body).then(canvas =>   {
      url = canvas.toDataURL();
      console.log(url);
      window.open(url, '_blank').focus();
  });
});

</script>

</body>
</html>

Thank you!

niklasvh / html2canvas

doesn't work with mapbox #2707