Gray Map in Backbone.js View (Pre-rendering/out-of-DOM problem?)

[Lee Hambley]

Hi All,

I've been searching around for a solution to the following problem. I have a backbone view that looks like this:

• https://gist.github.com/7e07249f6400076c0301

The problem is that the map appears to be a gray container with just the zoom controls, and the "Powered by Leaflet.js" watermark. I thought this would be a problem with the off-screen rendering, but I attempted to work-around that using the two suggestions on this stack overflow thread http://stackoverflow.com/questions/10762984/leaflet-map-not-displayed-properly-inside-tabbed-panel. The site looks like (screenshot) is http://cl.ly/image/352o472S1Y0K but I can't figure it out myself. There's no XHR requests for the tiles, which I would have expected.

I haven't reproduced this at jsFiddle, because I'm sure it's something really obvious that I am missing. 

I'm on the latest version, direct from the CDN, html header code in my application is: 

    = javascript_include_tag "http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"

    = stylesheet_link_tag    "http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css"

    /[if lte IE 8]

      = stylesheet_link_tag "http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css"

Thanks, Lee

[Carst Vaartjes]

Hi,

I have something similar by combining Leaflet with JQuery and JQuery Mobile.

See: http://members.ziggo.nl/clv/init_error.png

I'm not the only one: http://stackoverflow.com/questions/10193665/leaflet-jquery-mobile-resizing-issue

But the solution described there doesn't work for me (still the same result). I have two worarounds:

1) By placing my Leaflet Initialization script before the JQuery and JQuery Mobile scripts; however this does not work on multi-page solutions (with AJAX loading), so I cannot use this

2) By doing a Map.invalidateSize(); in an initpage event. But this is a bit inconsistent with loading (does not work all of the times from the script, but always from the console)

My conclusion is that somewhere something goes haywire between JQuery Mobile and Leaflet (based on the fact that loading order makes a difference and leaflet doesn't autocorrect itself if loaded and initialized after JQuery Mobile...

Not sure if this is entirely the same or not as your problem... 

BR

Carst

[Lee Hambley]

Thanks Carst,

I can't seem to make that work, here's a console session:

> ["redrawing", t]log.js:9

> window.themap.invalidateSize()

> t

> window.themap.invalidateSize(false)

> t

> window.themap.invalidateSize(true)

> t

> window.themap._sizeChanged

> false

> window.themap._sizeChanged = true

> true

> window.themap.invalidateSize(true)

> t

> window.themap._sizeChanged

> false

I have "drawing rectangles" turned on in the Chrome debugger, and I'm not seeing any evidence that it's redrawing (and at least it's still not working)

What else can be a common cause of this? I'm also not seeing any XHR for loading the tiles, which I find slightly weird. I'm also wondering if this could be CSS related (I'm using Bootstrap, which does weird things to images, which I have un-done within the context of my map, but I still don't see any progress :-()

- Thanks, Lee

[Lee Hambley]

Update: To answer my own question, I hadn't added any layers. And it wasn't clear from the quickstart docs that I actually had to explicitly declare a tileset layer, and that there is no default. It was also a problem that if you set the zoom level too high, then some tiles from OpenLayers are just broken (black, or very dark gray)

- Lee