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 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:
- Set up a Geoserver instance (or mapserver, or mapproxy) and let it serve the tiles
- Slice the image with gdal2tiles
- Slice the image with Qgis
- Use an third-party service such as zoomify, gigapan or deepzoom. Find some pointers here.
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.
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
Use QGIS and QTILES PLUGIN or just raster conversion export to mbtiles then either read directly via leaflet plugin or serve with tile server