ArcGIS API for JavaScript

A classical visualization of earthquakes using ArcGIS API for JavaScript

USGS publishes a live feed of earthquakes from the last 30 days. In this blog post we will go through the steps of creating a globe visualization that displays these earthquakes and allows the user to filter and interact with them.

So let’s get started!

A screenshot of the live application
See the live app: http://ralucanicola.github.io/JSAPI_demos/last-earthquakes/

Step 1. Define the goal of the visualization

We want to show the latest earthquakes classified in such a way that the user can immediately see which ones were extremely dangerous (major earthquakes that cause severe damage) and which ones were moderate (can cause damage but only to buildings which are not earthquake proof). For the sake of consistency, we will also show the minor earthquakes that generally don’t cause any damage. To help the user get a better overview of earthquake magnitude distribution and where the earthquakes occur, we’ll also add a histogram and a filter slider. In addition, we want to allow the user to get extra information about each earthquake by clicking on it.

Step 2. Map design

The look and feel of the app should remind us of a school atlas, with the advantage that everything is interactive. This effect is given by the wonderful vintage physical map that John Nelson created. You can read more about the creation process in this blog post. We’ll use this map as a basemap in our application.

Vintage Shaded Relief Basemap by John Nelson: https://nation.maps.arcgis.com/home/webmap/viewer.html?webmap=ccbfec91e19d4f9fb0769af361c31516

The symbology for the earthquakes is based on the classical concentrical circles symbol:

This symbol is intuitive because it reflects the seismic waves starting from the epicenter of the earthquake. The more concentrical circles, the higher the magnitude of the earthquake. When working in 3D with the ArcGIS API for JavaScript you can achieve this by using a PointSymbol3D with multiple symbol layers, each IconSymbol3DLayer representing a circle:

Define IconSymbol3DLayers for a PointSymbol3DLayer

As mentioned in Step 1, in this map we’re using a data classification schema that will allow us to differentiate between earthquakes that cause extreme damage (even to earthquake resistant structures), moderate earthquakes and minor earthquakes that don’t cause any damage. The minor ones are actually the big majority and they are interesting to map because they show the areas with a lot of tectonic activity.

To visualize classified point data we’ll use a ClassBreaksRenderer, where each class has a symbol with concentric circles, depending on the earthquake magnitude:

Define classes for a ClassBreaksRenderer

The data is dynamic, every time a user opens or refreshes the application the data changes. Generally, the last class with earthquakes with magnitudes higher than 7 is likely to stay empty (we sure hope that’s the case!). Having empty classes is not a best practice when classifying data because it confuses the user. We could reclassify the data, but these classes are based on the effects that earthquakes have, rather than clusters within the data. So we’d like to keep the classes as they are and to give the user information about how many earthquakes are in each class, we use outStatistics with the queryFeatures method to obtain the number of earthquakes in each class. We set these numbers in the labels of each class, so that they are displayed nicely in the legend:

Step 3. Earthquake data

As mentioned in the beginning, the data comes from USGS earthquake live feed. It comes in different formats, but for our app, we’re going to get the GeoJSON live feed for the last 30 days and set it in the url of the GeoJSONLayer. And that’s all there is to it, no server or data processing needed in this case.

Step 4. User interaction

A SceneView comes with default 3D navigation like pan, zoom and tilt. The user can freely navigate in the scene, but zooming in to city level doesn’t really make sense for this app, so we’re going to set a constraint to limit the min altitude to 400,000m. When the camera reaches that height, the user can’t zoom in anymore.

The user can interact with the earthquakes by clicking on a symbol to get more information about the earthquake. For that we’ve set a popupTemplate on the layer.

When the user needs to focus on a certain data range, a useful technique is to only display those features in the data range. So if the user is interested in earthquakes between a certain magnitude range, then we filter out all the earthquakes with magnitude values outside of that range. With ArcGIS API for JavaScript we can use a HistogramRangeSlider as a filtering tool and use the filter property on the GeoJSONLayerView to hide features that don’t satisfy the filter criteria.

Summary — putting things together in JavaScript

So the final app has the following sections:

You can have a look at the full code on Github or play around with the live version.

About the author

Raluca is a cartographer with a focus on 3D web cartography. She works as a Product Engineer for ArcGIS API for JavaScript #3D, making demos, writing documentation and testing.

Connect:

Next Article

What's new in ArcGIS StoryMaps (January 2020)

Read this article