Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 213
Jacob Marble Avatar asked Oct 28 '12 16:10

Jacob Marble


People also ask

What can Leaflet do?

Leaflet allows developers without a GIS background to very easily display tiled web maps hosted on a public server, with optional tiled overlays. It can load feature data from GeoJSON files, style it and create interactive layers, such as markers with popups when clicked.

Can Leaflet be used offline?

This library can be used to create maps, which are still available when you are offline and are fast when your connection is not. It works in the browser or can be used in an mobile app based on html and in progressive webapps.

Why is map not showing in Leaflet?

There are a number of reasons why your map might not be displaying: You have an error in your JavaScript (most likely) - use whichever debugging tool is provided with your browser to verify. you are using Internet Explorer and you have Compatibility mode ON....

Does Leaflet use Openstreetmap?

http://leafletjs.comIt is used for the main OSM website map, as well as on Flickr, Wikipedia mobile apps, foursquare, craigslist, IGN, Washington Post, The Wall Steet Journal, Geocaching.com, City-Data.com, StreetEasy, Nestoria and Skobbler among others.


5 Answers

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.

like image 111
Soup Avatar answered Sep 20 '22 15:09

Soup


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);
}
like image 34
dooderson Avatar answered Sep 21 '22 15:09

dooderson


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.

like image 42
j0nes Avatar answered Sep 19 '22 15:09

j0nes


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

like image 41
user3233010 Avatar answered Sep 19 '22 15:09

user3233010


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.

like image 43
Mark U Avatar answered Sep 18 '22 15:09

Mark U