Welcome to SP!  -
Grandeur Pk Interactive Map
Custom Object

Grandeur Pk Interactive Map

 
Grandeur Pk Interactive Map

Page Type: Custom Object

Location: Utah, United States, North America

Lat/Lon: 40.70700°N / 111.7592°W

Object Type: Interactive Map

Object Title: Grandeur Pk Interactive Map

County: Salt Lake

 

Page By: PellucidWombat

Created/Edited: Jul 28, 2005 / Apr 3, 2006

Object ID: 166014

Hits: 2497 

Page Score: 0%  - 0 Votes 

Vote: Log in to vote

 

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 Pk Routes Overview Topo

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:

Unfortunately these will likely not be as photorealistic as the Granduer Peak scene because I don't have color photos of the area and cannot find free LandSAT coverage - as such, these are likely to be rendered with slightly more textural (but not physical!) abstraction.

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!

This scene is best viewed at a screen resolution of 1152X864

Grandeur Peak 3D Map


Grandeur Pk Views: NW | NE | SE | W
Grandeur Peak Irontide Wall Climbing Area The Quarry Climbing Area The Reef Climbing Area Church Fork Trail Pharaohs Glen Millcreek Ridge West Ridge Trail Dragon's Tail Ridge 33rd South Smith's Market Place &  REI Eastwood Elementary School I-215 Parley's Canyon & I-80 Mt Dale & Perkins Peak Area Neffs Canyon Pharaohs Glen Church Fork Thayne Canyon Porter Fork Green Canyon Millcreek Canyon Grandeur Peak Irontide Wall Climbing Area The Quarry Climbing Area The Reef Climbing Area Mount Dale Perkins Peak Church Fork Peak Church Fork Trail Pharaohs Glen Millcreek Ridge West Ridge Trail Dragon's Tail Ridge I-215 REI & IME Eastwood Elementary School Skyline High School 45th South 33rd South 39th South Churchill Jr High Olympus Hills Mall Foothill Drive Tanners Park I-80 The Cove Joe Bullough's House Mark Thomas's Wombat Burrow Thayne Canyon Green Canyon Rattlesnake Gulch Burnt Hollow Scout Hollow Church Fork Pharaohs Glen Carrigan Canyon Spring Canyon Johnson Hollow Perkins Hollow Blacksmith Hollow Pioneer Gulch Sheep Gulch Parleys Canyon Mt Aire Canyon Neffs Canyon Millcreek Canyon Grandeur Peak Perkins Peak Church Fork Trail Pharaohs Glen Millcreek Ridge West Ridge Trail Dragon's Tail Ridge Green Canyon Thayne Canyon Church Fork Scout Hollow Burnt Hollow Rattlesnake Gulch Millcreek Canyon Pharaohs Glen I-215 Olympus Hills Mall Highland Drive 39th South 33rd South REI & IME Tanner Park Foothill Drive I-80 Skyline High School Parleys Canyon Joe Bullough's House Mark Thomas's Wombat Burrow Grandeur Peak Irontide Wall Climbing Area The Quarry Climbing Area The Reef Climbing Area Neff Peak Gobblers Knob West Ridge Trail Dragon's Tail Ridge 33rd South REI & IME I-215 Tanner Park I-80 Parleys Canyon Millcreek Canyon

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 RFirst 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.

Special Thanks

I'd like to give thanks to the following individuals for helping me on my way to learning HTML, CSS, etc. Their input was invaluable and they were a great resource for ideas, examples, and suggestions on where to look to solve many of the project problems on my own. Thanks a lot, guys!

Images

Part of an interactive...