mapbox/mapbox-gl-leaflet

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:

  1. Load the provided HTML in the browser.
  2. 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 ?