Leaflet only loads one plate
I have an issue with Leaflet that actually supports all of my work. For some reason I can't explain that the Leaflet UI is loaded correctly in my Intel XDK app, but only one map tile is loaded - the same code works in another test app! Now that I've tried everything I could, I hope someone here can fix my problem.
For a better understanding, here is the code in my leaflet.js (this is not leaflet.js because I am using leaflet-src.js as my script) and a screenshot of the application map window.
function initLeaflet() {
document.getElementById("map").setAttribute("style", "height:" + window.innerHeight + "px; width:" + window.innerWidth + "px;");
var map = L.map('map');
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery Β© <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-i875mjb7'
}).addTo(map);
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({setView: true, maxZoom: 16});
map.on('click', onMapClick);
}
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
.bindPopup("Position: " + e.latlng + " Genauigkeit " + radius ).openPopup();
L.circle(e.latlng, radius).addTo(map);
}
function onLocationError(e) {
alert(e.message);
}
function onMapClick(e) {
marker = new L.marker(e.latlng, {id:uni, icon:redIcon, draggable:'true'});
marker.on('dragend', function(event){
var marker = event.target;
var position = marker.getLatLng();
alert(position);
marker.setLatLng([position],{id:uni,draggable:'true'}).bindPopup(position).update();
});
map.addLayer(marker);
}
//var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
//x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
//x.innerHTML = "Latitude: " + position.coords.latitude +
//"<br>Longitude: " + position.coords.longitude;
}
source to share
I am guessing that the size of the map on initialization is the culprit.
The flyer needs to know the size of the element it is embedded in when initializing. The flyer uses this information to know how many tiles are being loaded, etc. In addition, for any programmatic changes (or changes that cannot be easily detected by the Leaflet) the size of the map must be followed map.invalidateSize(..)
.
I suspect that after you set the size, the Leaflet won't be able to read the new size of the #map element correctly. Try to invalidate the size later, or do the initialization asynchronously. I would add:
setTimeout(function () {
map.invalidateSize();
}, 0);
and check if it has improved.
source to share