leaflet-rastercoords | Leaflet plugin for plain image map projection | Map library

Here's my experience on how to create slippy maps from sources like PDFs or high-res images or non-slippy maps. I wanted to write an article on this anyway, so let this answer be a sketch of the yet-to-be-written article.

To give you an example, here's a PDF map of European inland waterways with vector graphics and here's a slippy map of it.

Basically, the most reasonable way is to make a standard tile set and let Leaflet show it. I.e. to produce tiles sized 256x256 for each of the zoom levels.
You don't want huge images as layers as that will be to heavy for the browser. You also don't want any resizing in the browser, this will lead to poor quality.

Fortunately, creating tiles is quite easy with ImageMagick. This is how I do it.

First, decide how many zoom levels you want. This depends on the map, from my experience you need 5-7 zoom levels at most. Let's take 5 zoom levels for example. The more levels you produce, the higher hardware requirements you will have. The approache below is probably not suitable for more that 7-8 zoom levels.

Next, render or resize your image for each of the zoom levels. You have to produce images with one of the dimensions equal to:

• 256 pixel on level 0
• 512 pixel on level 1
• 1024 pixel on level 2
• 2048 pixel on level 3
• 4096 pixel on level 4
• and so on.

Attention: the result of this step are huge images. Level 5 would be around 10 MB, level 6 around 20 MB, level 7 around 40 MB. Be careful try to open these images in "normal" tools.

If your source is a high-res image simply use convert -resize with either x*256* or *256*x: