React-Map-GL : Finding earthquakes around selected location on the map

Whenever you are dealing with map applications, one of the common requirements is locating places or shops with in certain radius from your current location.

For example if you go to a new place, you might be interested in searching for restaurants or petrol station near to your place.

In this blog post I will demonstrate finding earthquakes around a selected location. Since I have already written a post to geo-mappig earthquakes on the world map, I will extend the same code base for this post.

To create the application, you can follow the initial steps and the code that displays the earthquakes on the map from the post.

I will proceed with the next steps below.

Creating draggable marker

First we will create and place a draggable marker on the map so that we can search earthquakes around the marker.

Create state variable to hold longitude and latitude of draggable marker.

Then create a component using <Marker> which shows an icon on the given location.

If you look at the above code snippet, Marker the component has 2 new properties draggable and onDragEnd.

draggable property makes the Marker draggable , onDragEnd is an event handler which get called when ever location marker is moved and captures the new latitude and longitude.

Then include the LocationPin component in App.js to show the icon on the map. Then add the onMarkerDragEnd method to store the new location when ever we move the location pin.

The marker can be dragged to a new location on the map as shown in below video.

Add range/radius panel

Next we will add a panel to select the range/radius of area (in KMs) we are interested in around the location pin.

Create a component for showing the panel on the map.

Add the range panel component to the App.js to show on the map.

Now our task is to show the only earthquakes around the location pin which happened in selected radius/range.

By using the haversine formula, we can calculate the distance between 2 geo points. But calculating the distance between every geo-location of earthquake and location pin we can filter the earthquakes that are outside range , but the process is not efficient as most of the earthquake points are falling out of the range. To avoid unnecessary calculation, we first calculate max/min latitude and longitudes that falls with in the range of a given location and radius.

We calculate min/max latitude using the below function.

The box formed by these min/max longitude and latitudes is called boundingbox. A sample boundingbox can be seen inbelow screenshot.

Eg: latitude: 39.944045319131525 and longitude: -122.61582049766759 given the radius of 250 KMs , the bounding box co-ordinates are [-120.26977990345576,41.742688530968984], [-124.96186109187941,38.14540210729407]

Below you can see the bounding box representation on the map.

Now we will filter all the earthquake that fall outside the boundinbox .

The Below function is used to filter all the earthquakes that fall outside the the range.

Now we will calculate the distance between location point and filtered earthquake locations and if the distance between them is less than 250 KMs(range) we will show the earthquake on the map.

The Below function calculates the distance between the 2 geo points.

Now we can use these functions to show the earthquakes with in the selected range of given location.

In below demonstration video you can observe that when ever I move the location marker, earthquake shows around that marker with in the selected range. You can also observe that when range changes, display of earthquake changes

Since earthquake service not owned by us, we can not process the request in the backend , so we are taking all earthquakes and filtering them on the client side. If we own the backend, we can develop an API to return only required data by passing the location co-ordinates and range data.

Some companies provide APIs such that you need to pass the current location co-ordinates and radius (in KMs) or boudingbox co-ordinates, which return required results.

For example , Mapbox provides an API to find Starbucks stores with in the given bounding box co-ordinates,

# Search for Starbucks in the Washington DC area
https://api.mapbox.com/geocoding/v5/mapbox.places/starbucks.json?bbox=-77.083056,38.908611,-76.997778,38.959167&access_token=YOUR_MAPBOX_ACCESS_TOKENCode language: Java (java)

You can download the source code for this blog post from GitHub