Mapbox not drawing all tiles, when inside a Telerik splitter

1
votes

We have a legacy website from which the powers-that-be have decided we need to remove all of our Google maps, replacing them with maps provided by MapBox. So I'm in the middle of a crash project to swap out the old for the new.

And here's my problem: the old site is written in ASP.NET, making heavy use of Telerik's controls. In this page we have a RadSplitter, and a Google map being drawn in a RadPane.

Swapping out the Google map with the MapBox map was simple enough, except that the MapBox map isn't rendering correctly. Only the tiles along the left edge of the pane are drawing. But - when I resize the browser window, the rest of the tiles draw.

The div is defined with position: absolute, and top, bottom, right, and left set to 0. Which Google maps worked with.

My guess is that Telerik is doing something that is confusing the MapBox rendering code about the actual size of the div. And that when the window resizes, MapBox re-evaluates things, and gets it right.

I've been playing around with this for a couple of hours now, and getting nowhere:

  • I've tried triggering a resize event in code, and the tiles didn't draw.
  • I've tried placing the map in a fixed-size div, inside the pane, and the map drew to the edges, and then the div sat inside the pane with scrollbars, which confirms, to me, that I'm dealing with a sizing issue, but I can't have the scrollbars, so
  • I've tried setting the width and height of the div to the size of the pane, in code, and that didn't trigger the map to draw the missing panes.

I'm running out of ideas.

Is there some event or function on the MapBox renderer that will cause it to redraw the way it does when the browser resizes?

2
javascripttelerikleafletmapbox
Have you tried placing the map in a div with width and height set to 100%? RadPanes always have dimensions set in pixels so this should let it resize as expected. Also, try toggling the VisibleDuringInit property value to see if this makes a difference – rdmptn

2 Answers

2
votes

Turns out the answer was pretty simple: 

map.invalidateSize();

Edited - a few days layer

Turns out that only works in IE. In Chrome, invalidateSize() doesn't cause the map to properly resize itself.

0
votes

so the map is being drawn in a pseudo-frame, which is probably throwing off the calculations for what's "visible"...

do you have a way of sharing the actual output HTML? like jsfiddle?

are there any console errors? maybe it's something as simple as you've met your quota for the map tile server...

try a different tile server?