[GIS] Leaflet map isn’t loading in the correct location

leaflettiles

I'm currently working with Leaflet and a dockable web framework called Golden Layout. I'm trying to load tiles into the map, but they are not loading properly and I'm not sure why.

Currently, I have created a function to handle the creation of the map. The map container itself is created correctly, however when I try to add the tile layer, that's where things go wrong.

There are a couple problems with adding the tile layer. The first is that the tiles don't load except for the one in the top left hand corner. The second problem is what tile is being loaded. The tile that gets loaded in the top left hand corner is the tile I have set to be the center of my map.

If the page is adjusted in anyway (ex: console opened), all the tiles will load and the center will be correct.

I've created a Codepen to show the problem.

Best Answer

Well, I don't know how Golden Layout works, But I can Identify what is the reason behind the Issue.

The problem is actually container re sizing, you can say that after the map starts rendering before the container finish to have its size. So, what you have to do

You need to identify if you have a body onload event or document ready event like things available in Golden Layout, just go there and put following line in there

L.Map.invalidateSize();

In order to test, what I'm saying is correct, load your page, and then change the size of your browser window, you'd see that map has loaded absolutely fine

Related Solutions

[GIS] How do algorithms load pieces of maps

Map tile structures are structured identically to a quadtree, where the root tile has four sub-tiles, each of those has four sub-sub tiles, etc. There's a simple formula to get the path/tilename for the tile you need. (The link describes OpenStreetMap / Tilecache's naming scheme.)

For the n nearest neighbors to a tile at zoom level y, maintain a list of three 'candidate' tiles, then:

zoomlevel = 0
while zoomlevel < y:
   for each candidate tile:
       for each of its four children:
           if the child is one of the closest three seen so far, make it a candidate
   zoomlevel += 1
return the three candidate tiles

WRT data structures/storing the tiles, my suggestions are to:

(a) generate the quadtree/tile name on demand; since they're identical every time there's no need to actually have in-memory objects to represent them. (It'll waste a huge chunk of memory to store the full tree out to a fairly deep depth..)
(b) your bigger concern / where you ought to do some thinking is in caching and uncaching the tile images themselves. Hopefully there's a nice component for your platform you can just reuse.

[GIS] What methods are there to produce map tiles for google maps

Have a look at GeoWebCache. I have used it with Google Maps. It has worked great for me.

Best Answer

Related Solutions

[GIS] How do algorithms load pieces of maps

[GIS] What methods are there to produce map tiles for google maps

Related Question