Make your maps explorable using the Google Maps API (work in progress)

[Metazeta]

Until now I was refering to this tutorial for making my maps interactive.
But now I use Leaflet.js, there are some tuts around for using it for fantasy map and it's highly effective.

[Redrobes]

We ended up using leaflet js for the CWBP maps too - go to the community pages to see the examples like guild city. The latest version of it has ironed out some bugs and its pretty cool now. I had some trouble with it but I dont seem to have any issues any more. i have never managed to get the google interface working properly across many browsers tho I am sure that it can somehow. But I like leaflet because you can download the script and host the whole thing on your website with no external calls going out to google API. Maybe google's API can do that too I dont know but I am cool with leaflet now.

[Pananacakes]

Given an image of size x and a zoom level of z, what's the math to see how many 256 px tiles you'll end up with total?

[Redrobes]

If you start off with an image which is 2^n and divisble by 256 then it works like this. Lets say you have an image 32768 pixels square. Thats 2^15 pixels square and 128 x 256 tiles per side and therefore 128x128 tiles in total for the base layer. The next layer down is normally half in each direction so its 1/4 the number of the base tiles. The next layer down again is then 1/16th of the base and so on.

So its base tiles x ( 1 + 1/4 + 1/16 + 1/64 ... )

Wikipedia has a page devoted to just that geometric series -> https://en.wikipedia.org/wiki/1/4_%2..._%2B_%E2%8B%AF and it states that the sum starting at 1/4 becomes 1/3. So the total sum is base tiles x 1.3333

So for image size of 32768 it is 2^15 pixels so therefore 2^( 15-8 ) tiles which is 2^7 which is 128 as I mentioned earlier. Then you square it so that is 2^( ( 15-8 ) *2 ) or 2^14 which is 16384 tiles for the base layer. So that x 1.33333 = 21845 tiles in total for all the layers give or take a couple because the series cuts off when you get down to the one overall max layer tile.

On our CWBP zoom maps we use 256 sized tiles as well and a 16384 pixel square sized image.

So thats 2^( ( 14- 8 )*2 ) * 1.33333 = 2^12 * 1.3333 = 4096 * 1.3333 = 5461 tiles. If I go to my directory and select properties then it says 5595 items but some of those items are the directories themselves containing the tiles since each layer and X & Y are stored in their own directory. But its about right. If you want it exact then you would need to write a program to calculate it.

And yes I have to upload five and a half thousand images or dirs in a zip file when I update the CWBP zoomy maps !

But TL/DR, for square image of edge size 2^n pixels, num tiles in total is about 2^( ( n-8 ) *2 ) * 1.3333

[Pananacakes]

The 32768x32768 image cuts up into 21845 tiles? How many zoom levels does that make for? Sorry, I'm not sure which figure in your post is the zoom levels.

If I'm getting this right I think my map would make ~53578 256px tiles to get 7 levels of zoom. I hope I'm wrong lol.

How long did it take to generate your 5461 tiles?

[Redrobes]

If you have 128x128 set of tiles then I think that is 7 levels. On our community page zoom maps we have 64x64 for 6 zoom levels but I think with the last one I have set it up so that it goes in one more time and stretches the bitmaps so we have 6 real zoom levels plus one more digital zoom type.

It takes about 5 mins or so for my app to generate the tiles. It knocks out the 4096 tiles for the base level quite quick then it sits there for a while as it resamples the 16384 sized image down to 8192 and then chugs out the 32x32 set then again it sits there calculating the resample to 4096 for a shorter while then after that it speeds up to the end.

You can use GDAL to generate the tile set yourself. There is some python script which interacts with it somehow and can generate them for you. I am not sure exactly how you would do that with GDAL but you can post up how to do it if you sort it out.

Using images bigger than about 16K pix starts to make a lot of tiles. Heaven knows how many google has for their google maps world view with so large an area and so many levels.

Also, personally I use JPG but you may find PNG smaller if the images contain solid blocks of colour like archetectural maps as opposed to our more artistic types here on the guild.

See:
http://www.gdal.org/gdal2tiles.html
https://github.com/commenthol/gdal2tiles-leaflet
https://sandbox.idre.ucla.edu/sandbo...al-and-leaflet

[Naima]

pages and links are not working.

[selden]

@RedRobes,

Is the leaflet javascript code that you used for the CWBP map available?
A very quick search didn't locate it, but maybe I wasn't sufficiently persistent.

I gave up using Leaflet on my own when what I thought was an exact copy of the leaflet demo for "pushpins" did nothing at all when used locally on my computer

[Redrobes]

I dont normally do open source - but this is javascript. So you can go to the community pages, go to the zoomy map of the guild city. Then right click next to the map and show source. Then within that you will find:

https://www.cartographersguild.com/l...y/guildcity.js

Where you can click on it to show the javascript.

In there you can see some markers for the showthread URLs to the finished maps at the coords from the unproject. I use a perl script to generate this javascript cos I am supremely lazy and have a mini file with all the link coords and URLs in them and then the perl just reformats it like this but heck, you can make this by hand or use some database back end to set up all of your coords. I am using 6 layers with the markers on them. I am using layer 5 for all of the widgets that show if you zoom up 5 times into the map. Each zoom end I add or remove the layer depending on what zoom level were at. Then it shows all the markers on that level or not as required.

Theres tons of leaflet examples too.

You can see all the tile definitions there too so I might as well just show one of the tiles.

6/32/32
https://www.cartographersguild.com//...es/6/32/32.jpg =>


5/16/16
https://www.cartographersguild.com//...es/5/16/16.jpg =>


4/8/8
https://www.cartographersguild.com//...iles/4/8/8.jpg =>


Also, I checked those links and all work for me.

[Pananacakes]

Thanks Redrobes. It'll be a while before I'll need the map tiles but when I'll do I'll work out the process with gdal.

(Links work fine for me.)