Wildfire Tracker — ReactJS Application

Demo — ReactJS App — Wildfire Tracker

I recently built an Wildfire Tracker app using create-react-app. I’ll walk you through how I accomplished this.

I was drawn to the idea being able to help place prone to wildfire, I am using API from Earth Observatory Natural Event Tracker (EONET) to get updates regarding the latest updates about such events.

If you’re feeling impatient, you can dive right in and look at my code. Here’s the GitHub repo for my app.

React

React is Facebook’s JavaScript view framework.

React - A JavaScript library for building user interfaces

The folder structure for the app is mentioned:

• The components folder contains all the files used on regular bases
• The App.js file is used for calling the api and forwarding received data to ./components/Map.js
• LocationInfoBox.js show the details when a particular location is clicked upon.
• LocationMarker.js is used to display the fire icon.

App.js

App.js

Few points for the above code:

• I have used useEffect() hooks (click for more info) to get the information using fetch() to call api and receive data.
• The data when received, loading is set to false using hooks useState() and the data is sent to Map.js using props as — “eventData”.

Map.js

Map.js

Do use your own Google API Key for the Google Maps API (const API_KEY) !!

Key Notes on above code:

• I have installed the package “google-map-react” for Google Maps.
• We receive data from the API and get Latitude and Longitude, we use these values to plot the coordinates on the map.
• LocationMarker.js is used to handle the onClick event trigger and display the information.

LocationMarker.js

The file is used specially to handle the onClick Event and to display the information on the maps.