Is Leaflet a good tool for non-map images? [closed]

Question

I am writing a web app that involves navigating technical illustrations (pan, zoom, click). I assume that Cloudmade Leaflet a good tool for this, only because someone used it to make XKCD 1110 pan/zoomable and I really like how it turned out.

Obviously, I would need to tile and scale my original technical illustration, but let's say that's a trivial problem that I have solved. Looking at the Leaflet API, however, it appears I would have to convert my tech illustrations (.ai, .svg, and .png files) to a geographical standard like GeoJSON. That seems like an awkward proposition.

Can anyone recommend Leaflet, or any other tool, for navigating non-map imagery?

Answer 1

You can do this with Leaflet. (I have done exactly this myself.)

You do have to convert your pixel sizes to latlong (latitude/longitude). Leaflet provides you an easy way to do that by using the Simple "Coordinate Reference System", map.project and map.unproject.

First, construct your map like this:

var map = L.map('map', {   maxZoom: 20,   minZoom: 20,   crs: L.CRS.Simple }).setView([0, 0], 20); 

…and then set the map bounds (for an image that is 1024x6145):

var southWest = map.unproject([0, 6145], map.getMaxZoom()); var northEast = map.unproject([1024, 0], map.getMaxZoom()); map.setMaxBounds(new L.LatLngBounds(southWest, northEast)); 

There's more details regarding splitting your images available here including a Ruby gem which might also be useful.

Answer 2

This works for images that are not tiled.

function init() {
    var map = L.map('map', {
        maxZoom: 24,
        minZoom: 1,
        crs: L.CRS.Simple
    }).setView([0, 0], 1);

    map.setMaxBounds(new L.LatLngBounds([0,500], [500,0]));

    var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg'
    var imageBounds = [[250,0], [0,250]];

    L.imageOverlay(imageUrl, imageBounds).addTo(map);
}

Answer 3

I am using Leaflet for maps with custom tiles with geoinformation, but as far as I can see Leaflet should be able to do this task. There are some points to consider how you should organize your images to be able to display them in a pannable and zoomable way:

First of all, you have to understand the concept behind map navigation and the corresponding tile filenames. This concept is a QuadTree. An example on how this works can be found here.

Then you have to cut your raw technical illustrations in different tiles. If you start on one zoom level only, this should be quite straightforward. You can then use the tiles in a new Leaflet TileLayer. When you want to have zooming, it might get a little bit more difficult. You will have to find out the correct boundaries for your tiles and construct the correct filenames (see the QuadTree references above).

To sum up: Leaflet should not be a problem in your task. The main task for you is to create suitable and correct tiles from your raw data.

Answer 4

I've had good luck with MapTiller -- http://www.maptiler.com/

Answer 5

If you want a non-tile option, you can do the entire thing clientside without tile pre-cutting

See https://github.com/Murtnowski/GMap-JSlicer

slicer = new JSlicer(document.getElementById('map'), 'myImage.png');
slicer.init();

Very simple.