Most spatial data is represented using point geometry, such as tourism spots,
trees, boreholes, earthquake locations, and more. In essence, point geometry
can be used to represent the majority of places on the Earth's surface.
However, when visualizing a large number of points on a map, it can become
overwhelming. The map becomes cluttered with numerous dots, resembling a
scramble in a confined space. To address this issue, we can utilize a point
In this tutorial, I will demonstrate how to create a cluster map using Leaflet, focusing on a specific use case: World Earthquake events in the last 30 days. At the end of the tutorial we will get a web based interactive cluster map as shown in the figure 1.
Figure 1. Points Cluster Map
Getting Earthquake Data
The United States Geological Survey (USGS) is a government agency that offers
reliable data on earth science and systems, including earthquakes. USGS
records earthquake events worldwide, archives the data, and provides free
access to it. You can search for and download the data from the
Earthquake Catalog Search.
In the Earthquake Catalog Search page, you will find three options: Basic,
Advanced, and Output Options. The Basic option allows you to specify the
minimum earthquake magnitude, date and time, and geographic region, as shown
in Figure 2.
|Figure 2. Basic options of earthquake catalog search|
The Advanced options offer various items that can be specified, such as
geographic region, depth, event type, impact, and more. However, since we want
to download all earthquake events, we can simply leave this option.
Lastly, the Output options offer various data formats for download, such as
CSV, KML, QuakeML, and GeoJSON. Please select GeoJSON for this purpose.
After clicking the Search button at the bottom of the page, the results will open in a new web page, as shown in Figure 3. Select all the text and paste it into a text editor application. Remember to save it with a .geojson extension.
Figure 3. Data in geojson
Before creating the cluster map, let's verify that we have obtained the data
correctly by viewing it with GIS software. You can use any GIS software of
your choice, but for this tutorial, we will be using QGIS. In QGIS, add the
data by going to Data Source Manager > Vector. If the data is
working properly, you should be able to see all the earthquake events on the
QGIS map. To provide a reference, you can add a basemap. In QGIS, you can
select various basemaps using the
plugin. Figure 4 displays all the earthquake points from the last 30 days on
the OSM basemap.
Figure 4. Earthquake events
Create Cluster Map
Below is step by step how to create cluster map using Leaflet JS.
1. Give a variable name for the downloaded earthquake data in the geojson format. Take a look the figure 5. Can be seen in the figure, I added a variable name with a var statement with a name earthquake. Make sure to close with ]; at the end of the file.
Figure 5. Modify GeoJSON Data
2. Copy the code below and paste into a text editor. I don't explain the code but it's self explanatory cause I added comments in each part.
3. Change the geojson data source with yours in line 27. I put the data in a folder which is called data. Therefore the path is src= 'data/earthquake.geojson'. Make sure this one is correct for you.
4. Save the file into a .HTML format. Open it with a web browser application. If there is no error found. You should see the cluster map as in figure 1.