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?
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.
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.
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....
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.
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.
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);
}
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.
I've had good luck with MapTiller -- http://www.maptiler.com/
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With