Question

0

364

Views

leaflet image plugin generate an empty image from leaflet map

I'm trying to convert leaflet map to image :

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
    <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js'></script>

I created a leaflet map :

var map = L.map('map').setView([startup_latitude, startup_longitude], 14);

and then i generated an image from map :

leafletImage(map, function (err, canvas) {
            var img = document.createElement('img');
            var dimensions = map.getSize();
            img.width = dimensions.x;
            img.height = dimensions.y;
            console.log(canvas.toDataURL())
            img.src = canvas.toDataURL();
            document.getElementById('images').innerHTML = '';
            document.getElementById('images').appendChild(img);
        });

The map is displayed correctly but the generated image is empty :

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-05T13:15:54.495Z

I fixed the problem after moving the code :

var map = L.map('map').setView([startup_latitude, startup_longitude], 14);



        map.touchZoom.disable();
        //map.doubleClickZoom.disable();
        map.scrollWheelZoom.disable();
        map.boxZoom.disable();
        map.keyboard.disable();


        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1,
            accessToken: 'pk.eyJ1Ijoia2hhbGVkYnNmIiwiYSI6ImNreDh4am56eTAyNmoyb213Mnl2bzg4NzAifQ.I-xlHMqKPZy7TijmHZ6SRA'
        }).addTo(map);

        var marker = L.marker([startup_latitude, startup_longitude]).addTo(map);

        leafletImage(map, function (err, canvas) {
            // now you have canvas
            // example thing to do with that canvas:
            var img = document.createElement('img');
            var dimensions = map.getSize();
            img.width = dimensions.x;
            img.height = dimensions.y;
            img.src = canvas.toDataURL();
            document.getElementById('images').innerHTML = '';
            document.getElementById('images').appendChild(img);
        });

I'm currently using this version of leaflet-image

https://github.com/mapbox/leaflet-image/edit/gh-pages/leaflet-image.js

0

364

leaflet image plugin generate an empty image from leaflet map

1 answers

0

Find remote jobs

Andres GPT