take a screenshot of a web map

user_19557799 0
Viewed 42

I am just starting out with javascript and I am trying to create an interactive web map....

I want to be able to position the map then press a button that will take a screenshot and save it to the computer.

Here is the code for my map.....

<!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.9.1/mapbox-gl.css" rel="stylesheet">
      <script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.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>
         mapboxgl.accessToken = '[TOKEN]';
         const map = new mapboxgl.Map({
         container: 'map', // container ID
         style: 'mapbox://styles/charlie-enright/cl5b8bjil002y14o5u8xrssah', // style URL
         center: [-4.369240916438415, 51.925803756014965], // starting position [lng, lat]
         zoom: 8, // starting zoom
         projection: 'globe' // display the map as a 3D globe
         });
         
         map.on('style.load', () => {
         map.setFog({}); // Set the default atmosphere style
         });
      </script>
   </body>
</html>

I have tried using html2canvas (https://codepen.io/samsammurphy/pen/VXdOPv) but the button seems to end up in a layer behind my map and I can not take a screenshot of the displayed map.

Any ideas how I could create a button that allows for a screenshot to be taken which saves to the computer will be greatly appreciated.

Thanks,

html2canvas mapbox screenshot dictionary
2 Answers

Here's an example of using map.getCanvas().toDataURL() and then injecting an img tag into the DOM. (This is not my example, I found it on this codepen by Sam Murphy https://codepen.io/samsammurphy/pen/VXdOPv)

 $('button').click(function() {
    var img  = map.getCanvas().toDataURL();
    var width = $('#screenshotPlaceholder').width()
    var height = $('#screenshotPlaceholder').height()
    var imgHTML = `<img src="${img}", width=${width}, height = ${height}/>`
    $('#screenshotPlaceholder').empty();
    $('#screenshotPlaceholder').append(imgHTML);
  }); 
});

The codepen I found this on was not working due to an expired access token, so here's a fork that works if you want to try it out.

https://codepen.io/chriswhong/pen/YzapomG

user_24369220

Here's the code I use to take map screenshots using html2canvas

html2canvas(document.getElementById("map"), {useCORS:true}).then(canvas => {
  var pseudolink = document.createElement('a');
  pseudolink.download = 'myMapScreenshot.png';
  pseudolink.href = canvas.toDataURL()
  pseudolink.click();
})
user_15247560
Related