Wildfire Tracker With React & NASA API
Published: 2020-11-25 15:18:47

**Inspiration: **
[Traversy Media - 
Build a Wildfire Tracker With React & NASA API](https://www.youtube.com/watch?v=ontX4zfVqK8)

####What we are going to use
* [Google Maps API](https://console.developers.google.com/flows/enableapi?apiid=maps_backend&keyType=CLIENT_SIDE&reusekey=true)
* [Eonet - Nasa API](https://eonet.sci.gsfc.nasa.gov/docs/v2.1) 
* [Google Map React](https://github.com/google-map-react/google-map-react)
* [Iconify](https://iconify.design/)


###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
```