10

Here is my function that I use to draw a Leaflet map in my website:

function drawTweetMap(points) {
    if (tweetMap != null)
        tweetMap.remove();  

    var london = [51.505, -0.09];
    tweetMap = L.map('tweetMap').setView(london, 5);

    var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg';
    var subDomains = ['otile1','otile2','otile3','otile4'];
    var cloudmadeAttrib = 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>, <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>';
    L.tileLayer(cloudmadeUrl, 
                  {attribution: cloudmadeAttrib, 
                   maxZoom: 18,
                   subdomains: subDomains})
    .addTo(tweetMap);

    var markers = L.markerClusterGroup();
    var points_rand = L.geoJson(points, {onEachFeature: onEachFeature});
    markers.addLayer(points_rand);
    tweetMap.addLayer(markers);
    tweetMap.fitBounds(markers.getBounds());
}

This function is called periodically:

mapWatch = setInterval(function() {
    retrieveCurrentTweetPositions()},
numMinutes*60*1000);

in this function:

function retrieveCurrentTweetPositions() {
    var points = retrieveCurrentPositions();
    var mapInput = translatePointsInMapFormat(points);
    drawTweetMap(mapInput);
}

Unfortunately, if the map is drawn in this way, the result is the following: enter image description here

In other questions I found that it is possible to invalidate the size of the map to fix this problem, so it was suggested to call on startup this function:

function updateTweetMapPosition() { 
    setTimeout(function(){
        tweetMap.invalidateSize(true);}
    ,500)
}

I did so, and this solves the problem during the first map drawing. However, when I try to redraw the map for a second time, the result is as follows:

enter image description here

Has anyone experienced this problem? How can I redraw the map with a full loading of its content?

Thanks.

EDIT

Here is the jsFiddle: http://jsfiddle.net/qzpwvqzk/

Improve this question

3 Answers 3

Reset to default
4

I solved the problem as follows

setTimeout(function(){map.invalidateSize(true);},500);

Improve this answer
0
1

Use https://leafletjs.com/reference-1.7.1.html#map-invalidatesize

tweetMap.invalidateSize()
Improve this answer
0

Take a look at the redraw() method.

Improve this answer
9
  • Where did you call tweetMap.redraw();?
    – Brett DeWoody
    Commented Apr 21, 2015 at 15:42
  • I tried by substituting the first two lines with if (tweetMap != null) {tweetMap.eachLayer(function (layer) {layer.redraw();}); } but it says that the method is undefined
    – Eleonora Ciceri
    Commented Apr 21, 2015 at 15:44
  • redraw() needs to be called on tweetMap.
    – Brett DeWoody
    Commented Apr 21, 2015 at 15:47
  • It happens the same thing. It says that it is undefined: TypeError: 'undefined' is not a function (evaluating 'tweetMap.redraw()')
    – Eleonora Ciceri
    Commented Apr 21, 2015 at 15:50
  • And where are you calling that? A jsFiddle with your complete code would be super helpful :)
    – Brett DeWoody
    Commented Apr 21, 2015 at 15:57

Not the answer you're looking for? Browse other questions tagged or ask your own question.