-
5912 Hits
-
0% Score
-
0 Votes
Page Type:
|
Custom Object |
|---|---|
Lat/Lon:
|
40.70700°N / 111.7592°W |
Object Type:
|
Interactive Map |
|
County:
|
Salt Lake |
Introduction
Note: This project doesn't seem to be compatible with Mozilla FireFox. I may be able to fix it, but that's really uncertain as to if or when this may be. In the mean time, it definitely works with IE.
Grandeur Peak is one of the first major peaks in the Wasatch Tri-Canyon Area. As it looks pretty interesting from the valley, is small in scope, and is right above my house, I figured it would be a good peak to practice with for making 3D interactive maps.
This 3D interactive map is the first in a series that I'm adding to SP as a way to practice my HTML and Javascript Coding, as well as to improve SPer's familiarity with these mountains. I felt that a 3D interactive model could be a great way to get a sense of the layout of an entire mountain complex all at once. Not only that, but viewers could also see a fairly realistic representation of what the mountain looks like, and where routes go.
The benefits of choosing the most appropirate angles and choosing the level of abstraction to emphasize certain details made a computer generated model more appealing than relying on annotated photographs.
This map is interlinked with the Wasatch Range Interactive Map, whereby SPers can fly over the range to quickly see the relationships of peaks and easily jump to more options such as mountain pages, route overview maps, and an occasional 3D model.
As these models take a lot of work, I'm limiting myself to mountains where I felt that this method of displaying the peak would be very beneficial as opposed to topo maps and photographs. Future models are likely to cover:
- Broads Fork Twin Peaks Massif
- Lone Peak & Thunder Mountains Massif
- Mt Timpanogos Massif
- Mt Nebo Massif
Instructions
Move your mouse cursor over the image to explore.Routes Dragging your cursor over a route line will highlight all routes on the peak and will bring up a corresponding elevation profile map below. Click the route to visit the route page.
Labels Dragging your cursor over unmarked areas of the map may reveal identification of features, first in the browser status bar, and then as a cursor 'tooltip' if you hold the cursor still.
Spheres Spheres denote points of interest such as a climbing crag or summit. Features with routes or pages on SP are interactive and can be visited by clicking the marker.
Treasure Hunt I realized that I could see my house and the house of fellow SPer Joe Bullough on some of the mountain views. Out of bordom, I've made them interactive. See if you can find where we live!
Grandeur Peak 3D Map
 |
Grandeur Pk Views: NW | NE | SE | W |
 |
Method
For those who are in to GIS (Geographic Information Systems), computer graphics, or are just plain nerdy, the following is a brief 3-part overview of how I created the scene.
| Part 1: Gathering the Pieces Using GIS Software | |
| Indent R | First off, I collected elevation data on a file type known as a DEM (digital elevation model). I was able to gather these for free from GIS Data Depot, which has free DEMS available for every US state except Alaska. Next I viewed the file in a free-ware GIS program called MicroDEM. Within this program I merged the DEMS and exported a JPEG image of the area shown as a grayscale relief image, where lighter colors corresponded to higher elevations. In addition to the grayscale relief image obtained from DEMs, I also needed topo maps from which to draw roads, routes, etc. and aerial photos to assist in this and possibly use as overlays (i.e. textures) for the scene. I did this using free data from Microsoft Terraserver. Luckily, an earlier SP thread pointed me to USAPhotoMap, a program that easily and automatically downloads and merges all aerial images and topomaps. With this, I created a topo, 1 meter & 8-meter resolution B&W aerial photos, and 4 meter resolution color aerial photos of the entire 130 mile length of the Wasatch Range. |
| Part 2: Making the 3D Model | |
| Technically you can make a 3D model straight from DEMs using GIS software, but I found them to be a little crude and hard to customize the appearance and views. To have more control over the scene, I opted to create the scene in a computer modeling and animation program called 3D Studio Max. Basically, I created a wire mesh box and applied a 'space warp' modifier to it called 'displace'. This displaced vertices vertically based on data from a grayscale relief map. I used the grayscale mape created in MicroDEM for this purpose of created the 3D model in Max. Next I created textures (i.e. overlays) for the model in Adobe Photoshop. For the Grandeur Peak Map I used the colored aerial photos with the routes drawn in. By temporarily superimposing a topo map (and checking with the more recent aerial photos), I added my own annotations to the mape (i.e. lakes, rivers, roads, etc.). This was then applied to the model. In 3D Studio Max I created some lighting to help with the look of the scene, and placed 'cameras' in the scene. These allow me to make renderings from a fixed point that I can return to later (helpful for making updates). I rendered the scene as a series of JPEG images, with the cameras set at different positions in the scene. Finally, I took these renderings into Adobe Photoshop again in order to add the summit sphere markers and alternate images, one of which had the routes drawn in Photoshop to make them stand out more. | |
| Part 3: Writing the Code | |
| For me this was the hardest part, as I started out knowing virtually nothing about how to write code. Suffice it to say, I learned a lot of HTML, CSS, and some Javascript to get the scene to work, with a lot of troubleshooting from fellow SPers. I won't go into much detail here on the coding. In general, I wrote all of the code by hand, with a lot of trial and error. To save my sanity in writing so many HUGE image maps (4 separate maps for this particular model), I used a trial version of CoffeeMap40 and then adjusted its code by hand as I integrated it into my code. And finally, after much time spent keeping busy at 'work', I've finished it! | |
Granted there area a few odds and ends to take care of, and I'll get to these in due time.
Feedback
I'm still learning HTML, CSS, & Javascript coding as I go. If you have any suggestions for what I can do better in the future for programming, or any aspect of visual design or function, please let me know!Also, I'm aware of the 'error' which seems to be a missing semicolon somewhere in the coding, which I theorize was left out by the image-map program I used. As it seems to have no affect on the functionality and cannot easily be looked up, I've chosen to ignore it until it irritates me enough to attempt to fix it.
Please give feedback or report problems as an 'add info' to this section.