0
373
Visualizaçõesleaflet 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 :
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
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 © <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
·
Juan Pablo Isaza
Relatório
Responde à pergunta