Home
Use Leaflet to zoom in / pan around a tiled 16,614px by 8,406px composite photograph of the northwest face of Half Dome.
Interact with overlays that detail climbing routes, share experiences, and offer tips.
See the current version here: http://038dbbc.netsolhost.com/maps-gis/half-dome-map/
The tileset is large (~ 200 MB) and so is not here under version control. To obtain a copy of the tileset, contact Mark Thomas or Donny Winston (markums or dwinst at gmail dot com, respectfully).
I created the image with photos taken using a 7-year-old Nikon D40 DLSR, with a Nikkor kit lens. (55-200mm zoom). I merged the image together in Adobe Photoshop, but not without some trial and error for such a big project.
NW Face of Half Dome, roughly as I had divided it up into close up photographs taken with a 200mm zoom lens.
However, with some experimentation, I found a way to get the merging to work correctly.
Once the image was assembled, I had the problem that the image was 75MB, which took far too long to load on a web browser to be a feasible way for a user to quickly view the image. There are a number of JavaScript methods & plugins for photo enlarging, but most did not allow some form of interactivity on the map that would scale and pan with the image.
I spent some time trying out one that could handle keeping image maps scaled and aligned with the image, but it was appearing to be a dead end.
So I tried tiling, which handles the size and sizing issues. Using this system also allowed for using various interactive elements (icons, polylines, shapes), positioned by latitude longitude coordinates, as this system is normally used for maps. Since my project was a flat image and not a curved 3D surface on Earth, I had to write some 'unproject' methods in my scripts, but otherwise everything worked together smoothly.
I used Tiling to make to make the high resolution Half Dome image feasible for web viewing, with panning and zoom navigation. This is the same technique that Google Maps uses.
The tiling was done using a free Ruby script that automates the process, taking a few seconds to size, crop, and save the files in a format & folder structure that can be read by code for automatically re-assembling the portions of the image that are in view of your screen. There are various Ruby and Python scripts available to do such things, although figuring out how to get them to work is tedious (I really don't know either programming language). For convenience in future projects, I might make a Windows *.exe program to do this using C# or Visual Basic.