Missing map image from the generated canvas
vsashidh opened this issue · 2 comments
vsashidh commented
When extracting the image from the canvas produced by L.mapbox-gl
, the image is blank. I have created a test case for this issue.
Steps to reproduce the issue:
- Load the provided HTML in the browser.
- Click the link in the bottom right corner named:
download image
for downloading the map image.
Here is the code to reproduce this issue:
<html>
<head>
<title>OpenMapTiles in Leaflet + Mapbox GL Leaflet</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.js"></script>
<script src="https://rawgit.com/mapbox/mapbox-gl-leaflet/master/leaflet-mapbox-gl.js"></script>
</head>
<body style="margin:0" onload="onLoad()">
<div id="map" style="width: 100vw; height: 100vh; background: white; position: relative;" class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
tabindex="0">
</div>
<div>
<div id="images"></div>
</div>
<script>
var map = L.map('map');
map.options.minZoom = 2;
map.options.preserveDrawingBuffer = true;
var gl = L.mapboxGL({
accessToken: '{token}',
style: 'https://openmaptiles.github.io/osm-bright-gl-style/style-cdn.json',
preserveDrawingBuffer: true
}).addTo(map);
map.fitWorld();
function onLoad()
{
var link = document.createElement('a');
link.textContent = 'download image';
link.addEventListener('click', function (ev)
{
var canvas = document.querySelectorAll('canvas')[0];
canvas.toBlob(function (blob)
{
link.href = URL.createObjectURL(blob);
link.download = "mymap.png";
}, 'image/png');
}, false);
document.getElementById('images').appendChild(link);
}
</script>
</body>
</html>
Expected Behavior
Downloads a map image
Actual Behavior
Downloads an image without the map.
anzee0715 commented
Hi Guys,
I am facing same issue.
Can you share how you resolved this.
marshallino16 commented
Anyone figured this one out ?