Wasatch Range Interactive Map
Utah, United States, North America

Wasatch Range Interactive Map

Page Type Page Type: Custom Object
Location Lat/Lon: 40.76820°N / 111.8914°W
Additional Information Object Type: Interactive Map
Additional Information County: Salt Lake

Glitches & Loose Ends

Items Left to Do

  • Create dynamic title for each view
  • Make cursor change when over interactive summit spheres - any help with this?
  • Keep blue bounding box visible when exploring 3D scene (low priority)

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.

 

Introduction

 

The Wasatch Mountain Range is a major range in Utah, bordering the Salt Lake City Metropolitan Area, with 5 wilderness areas and many peaks over 10,000 ft in height, rising up to 6,000 ft above the valley floor. I've made a 3D interactive map of this range spanning an area some 130 miles long and 25 miles wide by which SPers can get a sense of the layout of the range and city, as well as easily jump to summits covered on the Summitpost website.

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

In this regional map I have marked major roadways, rivers, and have displayed the extent of urbanization in the area. In part to increase clarity of the map, and also to help portray heights, the scene is overlayed in what is called IHS (Intensity, Hue, Saturation). This is a color scale that denotes elevation (see IHS key below map).

The benefits of choosing the most appropriate 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 will be interlinked with other closeup 3D interactive maps of a few of the summits. The 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 the various route lines on the peak.

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 Grandeur 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, perhaps using an IHS overlay.

 

Instructions

Move your mouse cursor over the image to explore.

Navigation Map
Move your cursor over the map navigator on the left of the screen. This will change the 3D view on the right, corresponding to where your cursor is on the map navigator, and a blue higlighted box will show you the approximate area in view.

Labels
Dragging your cursor over unmarked areas of the 3D 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 summits. Colored spheres are those that have pages on SP, with various colors depending on what options are available. These colored summits are interactive as clicking them will open up a menu with any combination of the following options:

  1. Visiting the summit's Mountain Page
  2. Viewing a topographic overview map of all routes for the summit
  3. Viewing an interactive 3D model of the summit

Keep in mind that the colorless spheres are just named summits - this doesn't necessarily mean that they ought to be on Summitpost. As some of the unlisted peaks are added, I'll update the map.

Currently there is only one 3D Model (of Grandeur Pk), but I may make others (see introduction).

Make sure to close the menu by clicking 'Back' before clicking on another summit.

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

 

Wasatch Range 3D Map

 
           
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
     

Method

For those who are into 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 in IHS. I also exported the area displayed as a grayscale relief image, where lighter colors corresponded to higher elevations.

In addition to the IHS & grayscale relief images 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 map created in MicroDEM for this purpose of created the 3D model in Max. As I can only have as many as 200X200 vertices, I made two rows of 8 boxes to increase the resolution detail of the peaks. I could have made the resolution of peak forms and textures greater, but I was already pushing the limits on my computer's abilities.

Next I created textures (i.e. overlays) for the model in Adobe Photoshop. For the Wasatch Regional Map I used the IHS image. By temporarily superimposing a topo map (and checking with the more recent aerial photos), I added my own annotations to the map (i.e. lakes, rivers, roads, etc.). This was then applied to the model. For the Grandeur Peak Map I just used the colored aerial photos with the routes drawn in.

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 scope of the cameras overlapping to get a more seamless transition between views.

Finally, I took these renderings into Adobe Photoshop again in order to add the summit sphere markers and north arrow. For the Grandeur Peak scene, I made 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 (11 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 are 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!

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!

 

Image Maps Storage 1-5

Highway 226 to Snowbasin Ski Resort I-84 I-84 I-15 Cottonwood Canyon Morgan Valley Ogden Valley North Ogden Canyon Weber Canyon Ogden Canyon Ogden Canyon Pineview Reservoir Ogden River Weber River North Ogden Ogden Layton Huntsville Hill Air Force Base Plain City Clearfield Roy East Canyon I-15 Weber Canyon Weber River I-84 Weber River Morgan Valley Cottonwood Canyon East Canyon Reservoir East Canyon Farmington Canyon Farmington Bay (Great Salt Lake) The Hogsback Gold Ridge Ogden Hill Air Force Base Layton Bountiful Skyline Drive I-15 I-80 I-80 I-80 I-215 I-215 Bangeter Highway SR-201 Downtown Salt Lake City Jordan River Salt Lake International Airport Farmington Bay (Great Salt Lake) Layton Farmington Canyon Gold Ridge East Canyon Reservoir Weber River I-84 Morgan Valley Park City Mountain Dell Reservoir ?? Resevoir Parleys Canyon Lambs Canyon East Canyon City Creek Canyon Emigration Canyon Red Butte Canyon Bountiful Salt Lake City West Valley Millcreek Canyon Big Cottonwood Canyon Skyline Drive I-15 I-80 I-80 I-80 SR-201 I-215 Jordan River Downtown Salt Lake City Bountiful Salt Lake City West Valley Sandy Holladay South Jordan East Canyon Reservoir Mountain Dell Reservoir ?? Reservoir Rockport Lake Park City East Canyon City Creek Canyon Red Butte Canyon Emigration Canyon Parleys Canyon Lambs Canyon Millcreek Canyon Big Cottonwood Canyon Little Cottonwood Canyon American Fork Canyon Heber Valley

Image Maps Storage 6-10

I-15 I-215 SR-201 Bangeter Highway Jordan River I-80 I-80 Lambs Canyon Millcreek Canyon Big Cottonwood Canyon Little Cottonwood Canyon American Fork Canyon Provo Canyon West Valley Sandy Holladay Salt Lake City Park City Heber City Alpine Orem Deep Creek Reservoir Heber Valley Alpine Loop South Jordan Point of the Mountain Jordan Narrows Traverse Mountains I-15 Bangeter Highway Jordan River Jordan Narrows Point of the Mountain Little Cottonwood Canyon American Fork Canyon Provo Canyon Deep Creek Reservoir ?? Reservoir Round Valley Traverse Mountains Heber City Heber Valley Alpine Loop Sandy South Jordan Alpine Orem Provo Utah Lake Lake Mountains Cedar Valley Hobble Creek Canyon I-15 Jordan River Pole Canyon Hobble Creek Canyon Spanish Fork Canyon Deep Creek Reservoir Provo Canyon Round Valley American Fork Canyon West Mountains Alpine Orem Provo Spanish Fork Payson Lake Mountains Utah Lake I-15 Spanish Fork Spanish Fork Spanish Fork Canyon Lake Mountains West Mountains Mt Nebo Scenic Loop Provo Payson Santaquin Canyon Goshen Thistle Canyon Goshen Valley Utah Lake Hobble Creek Canyon

Image Maps Storage 11

Goshen Mona Nephi Santaquin Payson Spanish Fork Spanish Fork Canyon San Pete Valley Diamond Fork Canyon Santaquin Canyon Utah Lake Long Ridge Mona Reservoir Goshen Valley I-15 Salt Creek Canyon Nebo Creek Canyon Water Hollow Juab Valley Mt Nebo Scenic Loop



Images

View Wasatch Range Interactive Map Image Gallery - 1 Images

Table of Contents
Geography
Parents 

Parents

Parents refers to a larger category under which an object falls. For example, theAconcagua mountain page has the 'Aconcagua Group' and the 'Seven Summits' asparents and is a parent itself to many routes, photos, and Trip Reports.

Wasatch Alpine ClimbsCustom Objects