This sample shows how to add an instance of GeoJSONLayer from the USGS earthquakes catalog and fetch a new set of data after the layer is loaded.
How it works
The USGS earthquakes catalog accepts a variety of query parameters to narrow down the earthquakes you are requesting for. When the application loads, it requests all red alert level earthquakes that occurred in Japan since 1905. The query parameters can be specified by setting the GeoJSONLayer's customParameters property as shown below.
const layer = new GeoJSONLayer({
url: "https://earthquake.usgs.gov/fdsnws/event/1/query",
copyright: "USGS - Japan earthquakes since 1905",
// Use customParameters to set the query parameters
// get the all red alert level earthquakes in Japan since 1905 as geojson
customParameters: {
format: "geojson",
starttime: "1905-01-01",
endtime: new Date().toISOString().split("T")[0],
minlatitude: 24,
maxlatitude: 46,
minlongitude: 123,
maxlongitude: 145,
orderby: "magnitude",
minmagnitude: 1,
alertlevel: "red"
},
// set rest of the properties
...
});
Once the application is loaded, we can change the custom
of the layer to request earthquakes with different query requirements. The refresh() method on the layer must be called once the custom
property is updated at runtime. The refresh
method will fetch the geojson data with specified parameters and refresh the layer's data on the map. In this sample, the user can request data for earthquakes with different alert levels by choosing the alert level from the radio buttons shown on the right hand side of the application. The following logic runs when the user makes a selection.
layer.load().then(() => {
// Update the layer custom parameters with the selected alert level on user select
// fetch the data from the feed by calling refresh method.
const selectTopEarthquakes = document.getElementById("selectTopEarthquakes");
selectTopEarthquakes.addEventListener("calciteRadioButtonGroupChange", (event) => {
const alertlevel = selectTopEarthquakes.selectedItem.value;
layer.customParameters.alertlevel = alertlevel;
layer.refresh();
updateQuakeList();
});
updateQuakeList();
});
Once the earthquakes with the specified alert level are fetched, the sample will query those earthquakes and display their information in the list. The user can then select an earthquake from that list to locate it in the map.
We also apply different effects to the basemap layers to highlight Japan on the map. To learn how this is done please refer to the description of Highlight a country with an effect sample.