Wildfire Tracker With React & NASA API

*Inspiration: *
Traversy Media -
Build a Wildfire Tracker With React & NASA API

What we are going to use

Steps

Stepts to do in a console

Create a React App

Open a console. Move to the directory you want your project to be created and type:

npx create-react-app react-wildfire-tracker

Move to react-wildfire-tracker directory and install dependencies (Google Maps React & Iconify).

npm i google-map-react @iconify/react @iconify/icons-mdi

Stepts to do in Visual Studio Code (Or Text Editor of your choice)

Open the react-wildfire-tracker directory with the text editor of your choice.

Changing App Title

Change the title from 'React App' to 'Wildfire Tracker' in the index.html file of the public folder

Delete Files

Go to the src folderDelete the following files: App.css, App.test.js, logo.png, setupTests.js

Create Map.js file

Create a folder named components and inside the folder create a file named Map.js. Put the following code in it (don´t forget to add your Google Map Api Key).

import GoogleMapReact from 'google-map-react'

const Map = ({center, zoom}) => {
    return(
        <div className="map">
            <GoogleMapReact
                bootstrapURLKeys={{ key: 'Your Google Map Api Key'}}
                defaultCenter={center}
                defaultZoom={zoom}
            >

            </GoogleMapReact>
        </div>
    )
}

Map.defaultProps = {
    center: {
        lat: 42.3265,
        lng: -122.8756
    },
    zoom: 6
}

export default Map

Modify App.js file

In App.js replace the existing code with this new code (to use the map we defined in our component):

import Map from './components/Map'

function App() {
  return (
    <div>
     <Map></Map>
    </div>
  );
}

export default App;

Add styles

In index.css we have to define a height, width and position to our map.
Define styles for our future spinner that we will see while the map is loading Change the code to this new one:

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}


.map{
  width: 70vw;
  height: 100vh;
  position:relative;
}

.location-icon{
  font-size: 2rem;
  color:red;
}

.loader{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.loader img{
  width: 400px;
}

.loader h1{
  margin-top: -100px;
}

Test the map for the first time

Now we are able to see the map we created. To see it type in the console

npm start

Create LocationMarket.js file

Create a new file inside the component folder named LocationMarket.js and put the following code inside it:

import {Icon} from '@iconify/react'
import {locationIcon} from '@iconify/icons-mdi/fire-alert'

const LocationMarket = ({lat, lng, onClick}) => {
    return(
        <div className="location-marker" onClick={onClick}>
            <Icon icon={locationIcon} className="location-icon"/>
        </div>
    )
}

export default LocationMarket

Modify Map.js to see the icon of a fire in the map.

Now go back to our Map.js file and import the LocationMarker Component and use it inside the GoogleMapReact tag passing the latitude and longitude. The code will result in:

import GoogleMapReact from 'google-map-react'
import LocationMarket from './LocationMarket'

const Map = ({center, zoom}) => {
    return(
        <div className="map">
            <GoogleMapReact
                bootstrapURLKeys={{ key: 'Your Google Map API Key'}}
                defaultCenter={center}
                defaultZoom={zoom}
            >
                <LocationMarket
                    lat={center.lat}
                    lng={center.lng}
                ></LocationMarket>
            </GoogleMapReact>
        </div>
    )
}

Map.defaultProps = {
    center: {
        lat: 42.3265,
        lng: -122.8756
    },
    zoom: 6
}

export default Map

Choose a gif of a spinner from the web and save it as spinner.gif inside the component folder

Create a loader Component

Inside the components folder, create a Loader.js file. (We want to see a loader while the Map is loading)
Fill the file with the code below:

import spinner from './spinner.gif'

const Loader = () => {
    return(
        <div className="loader">
            <img src={spinner} alt="Loading" />
            <h1>Fetching Data</h1>
        </div>
    )
}

export default Loader

Get the fire points from the Api

Modify the App.js file to obtain the points where the icons of the map should be displayed. Replace the code with this new one

import {useEffect, useState} from 'react'
import Map from './components/Map'
import Loader from './components/Loader'

function App() {
  const [eventData, setEventData] = useState([])
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    const fetchEvents = async () => {
      setLoading(true)
      const res = await fetch('https://eonet.sci.gsfc.nasa.gov/api/v2.1/events')
      const  {events} = await res.json()

      setEventData(events)
      setLoading(false)
    }

    fetchEvents()




  }, [])
  return (
    <div >
     { !loading ? <Map eventData={eventData} /> : <Loader/>}
    </div>
  );
}

export default App;

Get the fire points from the Api

Finally modify the Map.js file to print in the map all the fire points obtained before. Replace the code with this new one

import GoogleMapReact from 'google-map-react'
import LocationMarket from './LocationMarket'

const Map = ({eventData, center, zoom}) => {
    const markers = eventData.map(ev => {
        if (ev.categories[0].id === 8){
            return <LocationMarket lat={ev.geometries[0].coordinates[1] } lat={ev.geometries[0].coordinates[0]}

        ></LocationMarket>
        }
        return null
    })

    return(
        <div className="map">
            <GoogleMapReact
                bootstrapURLKeys={{ key: 'AIzaSyAgt9BNJ7T3NiwwbW_GWDyQ7cZ9uVTepXw'}}
                defaultCenter={center}
                defaultZoom={zoom}
            >
                {markers}
            </GoogleMapReact>
        </div>
    )
}

Map.defaultProps = {
    center: {
        lat: 42.3265,
        lng: -122.8756
    },
    zoom: 6
}

export default Map