Real Time GeoJSON with React.js Hooks
Building on my previous web application using Pigeon Maps, I am bringing back the simple web app framework and React.js elements for a new project.
Maptical
The Plan 🧭
Grab the latest earthquake data using a sleek call to an existing service (no need to reinvent the wheel here). USGS provides GeoJSON data on seismic activity updated by the minute.
The format looks like the example below. I was surprised how detailed and organized this data was. Even better was the page being hosted as a GeoJSON file (making it much easier to grab via script).
Grabbing the info ℹ️
useEffect () is the react hook that is going to be used to make the the api call. The hook hold the bulk of the code that both makes the API call, stores it and updates the info.
Formatting the map 🗺️
Once the data is collected, setQuakes is then told to update with the new information. The display information is stored here with a few map formatting items as well. I think I'll need to double check on these and my style sheet to make sure there are no conflicts with this code and my template.
Included is a small onClick option to log the info of the newly plotted earthquake points to the console.
Results and Next Steps 📌
Adding the locations to the existing template was a single line of code in pigeon maps template. Next steps for this application might include the following:
- Adding map updates on a timer when the app is loaded
- Increased information on the points
- Points indicating significance by color
- Dashboard elements
