Earth's Crust - Custom JavaScript App

5269
0
04-20-2020 11:23 AM
MikieKelly
New Contributor III
5 0 5,269

I have just created an app with Esri's JavaScript API. It shows an exaggerated form of Earth's Crust - go find some mountains hidden in the ocean!

You can check it out via the following link: Earth's Crust

It is built with Esri's 4.x JavaScript API which allows end users exaggerate topobathy elevation layers for more insightful visuals. A number of custom widgets have been built to enhance the experience:

  • Layer List
    • Select layers from the Living Atlas are available for overlaying on the map
  • Shuffle
    • Various slides have been added to the underlying Web Scene. Every time you click the widget, you are guided to a new location and the relevant title is displayed. The vertical exaggeration and basemap get updated according to slide settings
  • Map Screenshot
    • Download a .png image of the current map view. Layer List settings are honored
  • Contact/Feedback Form
    • Contact the developer and look for information or provide feedback (via Survey123 form)
  • Share
    • Copy the current URL to clipboard
  • Vertical Exaggeration
    • Alter the vertical exaggeration of the elevations from 0 to 100 using a slider
  • Basemap
    • Toggle between Esri Imagery and National Geographic basemaps

Other Features

  • Elevation
    • As you pan the scene, view the elevation of the map center point in meters and feet
  • URL Parameters
    • x, y, z, wkid, heading, tilt, fov: These are updated as you browse the 3D Scene so you can bookmark areas of interest
    • basemap: Updates as you toggle basemaps
    • exaggeration: Stores the current vertical exaggeration
  • Mobile Friendly
    • Original screen resolution determines whether vertical exaggeration widget is expanded by default

Cool Living Atlas layers available through the app are listed below:

  • Distance to Shore
  • Distance to Coast
  • TopoBathy Elevation Tinted Hillshade
  • Temperature - Sea Surface
  • Temperature - Sea Floor
  • Temperature - Land - January Average
  • Temperature - Land - July Average
  • Population - 2016 Density Estimate
  • Geomorphology - Sea Floor
  • Earthquakes (Recent) - Shake Intensity
  • Earthquakes (Recent) - Events by Magnitude
  • Earthquakes (Major) - Historic Records
  • Volcanic Eruptions (Significant) - Historic Records
  • World Exclusive Economic Zone Boundaries


Suggestions and feedback welcome

Here are some of screenshots of the app:

Via Desktop Browser:

Via Mobile Browser:

Screenshot of the app visualized on mobile

Screenshot of the app visualized on mobile (Firefox)

Screenshot of the app visualized on mobile (Firefox)

Photos downloaded through app widget:

Screenshot created from app of elevation exaggeration

Screenshot created from app of elevation exaggeration with geomorphology layer

Screenshot created from app of elevation exaggeration with sea floor temperature layer

Screenshot created from app of elevation exaggeration with sea surface temperature layer

Screenshot created from app of elevation exaggeration showing elevation of India vs Tibet

Screenshot created from app of elevation exaggeration around California

Suggestions and feedback welcome 

ArcGIS API for JavaScript

ArcGIS Living Atlas of the World

ArcGIS Online

Web GIS

Web Developers

3D Mapping

Elevation Data

Global Content

Geo Developers

Developer Communities

GIS Developers

GIS Geeks

GeoGeeks

error.notfound.socialgroup

About the Author
Geospatial Solutions Specialist