DEV Community

loading...

Wildfire Tracker With React & NASA API

sezalazar profile image sezalazar ・4 min read

*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
Enter fullscreen mode Exit fullscreen mode
  • Move to react-wildfire-tracker directory and install dependencies (Google Maps React & Iconify).
npm i google-map-react @iconify/react @iconify/icons-mdi
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
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;
Enter fullscreen mode Exit fullscreen mode
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;
}


Enter fullscreen mode Exit fullscreen mode
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 
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode
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;

Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide