Using GeoTIFFs with leaflet

[Bryan Brown]

Hello, 

Im new to leaflet and geocoding in general, but I have been tasked with getting georectified .tif files into leaflet. 

The project I'm working on wants use georectified historical maps (either overlayed on top of OSM or as the base layer) so that we can plot historically important points on top of that historical map. So far I've been successful with using ImageOverlay to get a .jpg image in approximately the right place by fudging the latlong bounds of the image, but it isn't very accurate and a lot of marker points obviously end up in the wrong place. 

In the long run we are going to need the maps to be as geographically accurate as possible, and since we already have georectified versions of the maps on hand I need to find a way to use them with leaflet (or something else). Any help you could give me in explaining how to do this would be greatly appreciated. One of the main hurdles I'm facing is one of vocabulary, which could explain why I haven't been able to turn up any answers to my questions so far.

Also, just in case it helps, this is a demo page I'm working on:

http://dlib.indiana.edu/~bryjbrow/maptest/

The overlayed US map is a .jpg image of the GeoTiff they want me to use, which is here:

http://dlib.indiana.edu/~bryjbrow/maptest/maps/usa-map.tif

The leaflet code I'm using is at the bottom of http://dlib.indiana.edu/~bryjbrow/maptest/index.html in case you need to see the code I have so far.

Thank you!

[Bryan McBride]

Hey Bryan,

If they are big geotiffs and you want to retain the resolution, you'll probably want to cut the images into jpg or png tiles using gdal, tilemill, or maptiler. Once you have the tiles cut, you can view them in Leaflet using a standard tile layer.

Best of luck!

[Bryan Brown]

Bryan (McBride),

I think I understand, I spoke to someone on IRC about the same issue. My current understanding is that I can use something like gdal2tiles.py to "cut up" a geotiff into a directory structure of smaller images, and then link to that instead of (or in addition to) OSM as my base layer? Am I on the right track here?

Thanks for your response!

[Pat Keller]

Hey Bryan,

I recently had to do something similar. I used MapTiler to cut up my geotiff into tiles that leaflet is then pointed to. I'm pretty sure this is the blog post I followed to do this, it includes both gdal2tiles and maptiler guides. Let me know if you have any issues with it and I can try to help.

Pat

[Bryan Brown]

Pat,

Thanks for the link, I've been using gdal2tiles.py to turn my geotiffs into tiles successfully but that blog post showed me a few new things.

I was thinking about writing my own blog post to explain the process, but the one you linked did a far better job of explaining things than I would have.

[Ahmad Ronaghi]

Hi.
I'm doing a course project and I need to show raster maps with leaflet through a simple html, Javascript page. I read the tutorial at http://build-failed.blogspot.it/2012/11/zoomable-image-with-leaflet.html as introduced before. 

My question is how to combine the gdal2tiles.py code and the HTM/Javascript part. I want to dynamically get raster map (in tiff or jpg) by upload part and show it in page.

Please let me know if there is a sample code. I should deliver it as soon as possible and I recently found your chat on this problem.