GeoJSONLayer with dynamic URL

Explore in the sandboxView live

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.

Use dark colors for code blocksCopy
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 customParameters of the layer to request earthquakes with different query requirements. The refresh() method on the layer must be called once the customParameters 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.

Use dark colors for code blocksCopy
      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.