The map below shows data from multiple sources. If you would like to toggle data layers on and off, please view the map in ArcGIS Online here:.
Overview
This tutorial shows you how to visualize data on Google maps. As anexample, the maps in this tutorial visualize data about the location ofearthquakes and their magnitude. Learn techniques to use with your own datasource, and create powerful stories on Google maps like the ones below.
The first 2 frames seen above (from left to right) display maps withbasicmarkers, and sized circles.The last frame displays a heatmap.
Importing your data
This tutorial usesreal-time earthquake data fromthe United States Geological Survey (USGS). The USGS website provides theirdata in a number of formats, which you can copy to your domain for local accessby your application. This tutorial requestsJSONP directly from the USGS servers byappending a
Note: You should only request data from servers you trust completely, becauseof potential security risks with loading cross-domain content.script
tag to the head of the document.Placing basic markers
Now that you have pulled data about the location of earthquakes from the USGSfeed into your application, you can display it on themap. This section shows you how to create a map that uses imported data toplace a basic marker at the epicenter of every earthquake location.
The section below displays the entire code you need to create the map in thistutorial.
Try it yourself
You can experiment with this code in JSFiddle by clicking the
<>
icon in the top-right corner of the code window.Using shapes and heatmaps to customize maps
This section shows you other ways to customize rich datasets on a map.Consider the map created in the previous section of this tutorial whichshows markers on every earthquake location.You can customize the markers to visualize additional data, like locations thathave the most earthquakes, and their magnitude or depth.
Here are some options to customize the basic marker:
- Using circle size:
You can draw circles (or any other shape) with sizes that are relative to themagnitude of an earthquake by usingsymbols.In this way, powerful earthquakes are represented as the largest circles onthe map. - Using heatmaps:
The Heatmap Layer in the visualization library offers a simple yet powerfulway of displaying the distribution of earthquakes. Heatmaps use colors torepresent the density of points, making it easier to pick out areas of highactivity. Heatmaps can also useWeightedLocations
so that, for example,bigger earthquakes are displayed more prominently in the heatmap.
Circle size
The map below displays customized markers using circles. The circle sizeincreases with the magnitude of an earthquake at that particular location.
The section below displays the entire code you need to create a map withcustomized circle markers.
Try it yourself
You can experiment with this code in JSFiddle by clicking the
<>
icon in the top-right corner of the code window.Understanding the code
The table below explains the code that creates circle markers.
Code and description | |
---|---|
Adds a style to the Data Layer which calls the getCircle() function.Creates a custom image for the point instead of the default redmarker. | |
The magnitude property of the earthquake is passed tothis function.getCircle() draws a circle whose size is defined by the magnitudevalue, and sends that circle back to be used as the earthquake's custom marker. |
Heatmaps
Heatmaps make it easy for viewers to understand the distribution of earthquakes,reported by USGS. Rather than placing a marker on each epicenter,heatmaps use color and shape to represent the distribution of the data. In thisexample, red represents areas of high earthquake activity.
Tip: You can set your own colors for the heatmap, using the gradient
property.The section below displays the entire code you need to create this map.
Try it yourself
You can experiment with this code in JSFiddle by clicking the
<>
icon in the top-right corner of the code window.Understanding the code
The table below explains the code that creates the heatmap.Code and description | |
---|---|
The visualization library is used to display a heatmap.It contains a HeatmapLayer class.When using a library, it must be loaded when theMaps API JavaScript is called. | |
As with the previous examples, the USGS data is passed to the eqfeed_callback function.This adds the coordinates of each earthquake to a heatmapData array.That array is then passed to the HeatmapLayer constructor, which creates the heatmap and displays it on the map. | |
To weight the results by magnitude, you can pass WeightedLocation objects to the heatmapData array instead. |
More information
Read more about the following topics:
- Basic markers.
- Using shapes to customize maps.
- Heatmap layers.
Plate Boundaries & Earthquake Activity
If you look at a map of every earthquake in the past 15 years side by side with a map of plate tectonics you can immediately see the similarities. This is because most earthquakes on Earth are triggered by movement of plates, specifically at plate boundaries.
Comparison of global earthquakes with plate tectonics map indicating the Pacific Ring of Fire.
Left: NOAA, Right: WikipediaAfter watching the video you will notice that there is a circular ring of earthquakes along the edges of the Pacific Ocean. This is called the Pacific Ring of Fire and is due to the subsidence of the Pacific plate underneath continental plates to the East, North, and West.
You can pick out small earthquakes on the big island of Hawaii as the hot spot continues to erupt in the middle of the Pacific Ocean. Also, notice the increasing number of earthquakes in Oklahoma associated with oil and gas industry's salt water injection wells.
You will notice that the largest earthquakes are typically associated with convergent plate boundaries like the Himalayas. Whereas earthquakes along strike-slip boundaries like the San Andreas fault in California or divergent plate boundaries are typically limited to earthquakes less than 8.0M.
There is an incredible amount of information displayed in this video, allowing you to further understand the geology of your home town, state, or country. Take some time to watch the video and post any questions you may have below.