2

I'm trying to make it so that people can upload an image onto my site and have it converted into tiles for leaflet that can be used for a custom interactive map. The images are maps from games, not real geographical data. I've been looking around and I cant find a way to slice up the images into the tiles that are usable in leaflet directly through JS. I've found plenty of standalone programs but they won't do the job in this situation.

closed as off-topic by ahmadhanb, Vince, BERA, Evil Genius, Simon Jun 7 '18 at 11:35

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "When seeking help to debug/write/improve code always provide the desired behavior, a specific problem/error and the shortest code (as formatted text, not pictures) needed to reproduce it in the question body. Providing a clear problem statement and a code attempt helps others to help you." – ahmadhanb, Vince, BERA, Evil Genius, Simon
If this question can be reworded to fit the rules in the help center, please edit the question.

5

If your image is smaller than 16000 pixels high/wide, then consider using a L.ImageOverlay, and check if the performance is acceptable for your use case. (Web browsers start breaking with images larger than that because of in-memory graphical texture sizes).

There are a couple of approaches to this:

However, you point out:

The images are maps from games, not real geographical data.

Keep in mind that most GIS software assumes you're using geographical data, and that the raster images correspond to an earth-based coordinate reference system (CRS) with a EPSG code.

If you want a bare-bones approach to the problem, I suggest using imagemagick to slice the images. See also imagemagick's example on how to crop an image into a grid of roughly same-sized images.

Also note that some of the external services mentioned earlier (zoomify, gigapan, deepzoom, etc) are designed for big photographs and not for geographical data, so they might not require you to fiddle with CRSs.

2

As suggested in comments here I would and have used gdal2tiles it's relatively easy and fast to use if your image isn't too large.
I wouldn't recommend doing that through QGIS due to the fact that it sometimes crashes while running the conversion (which can take several days, depending on the size and resolution of the image).
the example here is pretty straight forward for creating tiles for zoom levels 1 through 8 from a given .tif image:

gdal2tiles --profile=mercator -z 1-8 yourmap.tif outputfolder
0

Use QGIS and QTILES PLUGIN or just raster conversion export to mbtiles then either read directly via leaflet plugin or serve with tile server

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