4

I have a JPG file with a map which isn't in a real scale, and can't be represented by real geographical latitude and longitude, so I so the Leaflet CRS solution and this seems like the way to go.

The problem is that the map file (JPG) size is ~30MB and can't be loaded in a single request, so I read a bit more and found the TileLayer solution.
I even found a demo .

Now, my only problem is how can I take the JPG file and convert it to layers? Is there an online / offline tool for that? As far as I understand, all I need is to split the large image to 256px x 256px tiles, place it in directories in my server and TileLayer will do the rest?

|improve this question
  • 1
    Let's see if this helps clarify : It's NOT a "map". It's a high resolution JPG image that we want to deploy using leaflet, with the same pan and zoom features as slippy maps have, and where rather than making the user load one very large image onto the browser they can progressively load small tiles, at different zoom levels. I'm having the same requirement. The demo link seems to have achieved it, if only they shared how. Hope we find an answer together. @Rotem pls correct if I'm wrong in understanding the question. – Nikhil VJ Oct 5 '17 at 2:29
4

I'm looking for a similar solution. Sharing what all I've found from a web search. Yet to implement, but check them out and have a go. I searched on duckduckgo for "cut image into tiles for leaflet"

Found:

http://blog.mastermaps.com/2013/06/showing-zoomify-images-with-leaflet.html
Showing Zoomify images with Leaflet - by Bjørn Sandvik. It'll be best to take the code from one of his examples and adapt it. And he's using this: http://www.zoomify.com/free.htm He's made a leaflet plugin to enable using tileset prepared by Zoomify: https://github.com/turban/Leaflet.Zoomify

Then, more stuff:

http://leafletjs.com/plugins.html#non-map-base-layers leaflet plugins for non-maps This lists the zoomify plugin mentioned above, and more options too:

https://github.com/alfarisi/leaflet-deepzoom leaflet plugin for Deepzoom images. https://www.microsoft.com/en-us/download/details.aspx?id=24819 Deep Zoom composer : windows app for generating tiles

This plugin seems to have the most complete solution, with a shell and python script to generate the image tiles: https://github.com/commenthol/leaflet-rastercoords
It uses a script, "gdal2tiles.py" to generate the tiles. https://github.com/commenthol/gdal2tiles-leaflet Usage example: command for an image whose larger dimension is 3000px:

python ./gdal2tiles.py -l -p raster -z 0-4 -w none karta.jpg tiles

there's a shell command for calculating the zoom extents (0-4 or 0-3 etc):

$ echo "l(3000/256)/l(2)" | bc -l

Update: An article/walkthrough where the author has tiled a very large image successfully and has a demo to show of it: https://medium.com/@jarednielsen/how-to-make-an-interactive-story-map-using-leaflet-and-non-geographical-images-821f49ff3b0d

|improve this answer
  • That was extremely helpful! I've used gdal2tiles. The result of the zoom calculation was 5.9.. so I changed 0-4 to 0-6, but I'm receiving 404 on paths like "2/3/-1", "2/2/-1", "4/-1/4", why is that? where did I go wrong? what is this -1? is it something on my JS declaration? – Rotem Oct 9 '17 at 7:48
  • ah, possibly the author of that code may not have tested for 6 levels. I suggest you file this as an issue on github.com/commenthol/gdal2tiles-leaflet – Nikhil VJ Oct 9 '17 at 14:37
  • github.com/Leaflet/Leaflet/issues/2981 - Here's the solution to the -1 and 404 pages issue :) – Rotem Oct 18 '17 at 11:56
0

I'm not completely understand what are you attempting, to split image on tiles? For do that, You need to register your image at first (e.g. raster - georeferencer in QGIS), so you will assign real geographical latitude and longitude to your image (in projection's or lat\lon coordinates). After this step you will be able to make tiles (tileset) for your image - via gdal2tiles or Qtiles plugin

|improve this answer
  • But how can I register coordinates if it is a CRS and not a real world coordinates? What am I missing here? – Rotem Oct 2 '17 at 12:29
  • CRS = Coordinate Reference System, what coordinates? Maybe this helps youtube.com/watch?v=2WYiCUOpt8Q – Jane Oct 2 '17 at 12:56
  • one more idea gis.stackexchange.com/a/166933/90384 – Jane Oct 2 '17 at 13:01
  • I actually already ran into that YouTube video, but it shows how to use a layer on a real world map. Maybe I need some clarification on that, if my map isn't in a real world scale, how can I use the method from the YouTube video? – Rotem Oct 2 '17 at 18:35
  • 1
    Please see the demo jsfiddle linked in the question to get a better idea. That artwork piece wasn't georeferenced. – Nikhil VJ Oct 5 '17 at 2:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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