Learn to render Maps by building a wildfire tracker app - Part 2
Tags: react, reactleaflet, leaflet, opensource
Published: 2021-01-03 19:28:41

This is part two of **Learn to render Maps by building a wildfire tracker app** series. If you missed the part one, you can read it [here](https://dev.to/devnrj07/learn-to-render-maps-by-building-a-wildfire-tracker-app-part-1-24j5)

Also, the complete source code is [here](https://github.com/devnrj07/cool-react-projects/tree/master/wildfire-tracker-app)

In the first part we rendered a simple map using leaflet now we'll plot some data (wildfire data) on this map. We're going to use this [NASA API](https://eonet.sci.gsfc.nasa.gov/api/v2.1/events). 
This is an opensource API which requires no key. You can checkout [NASA website](https://api.nasa.gov/) from information about their cool Apis.

Now, let's fetch data from the api there are many ways/packages to make http requests but I'm going to use fetch as it is directly available in the modern browsers. 
We'll use two common React hooks **useState** and **useEffect** to make an API request and set the response data.

Add the following code in the **app.js** file inside src directory.

```
   const [eventData, setEventData] = useState([])
   const [loading, setLoading] = useState(false)
   useEffect(()=>{
      const fetchEvents = async () =>{
         setLoading(true)
         const {events} = await (await 
  fetch('https://eonet.sci.gsfc.nasa.gov/api/v2.1/events')).json()
         setEventData(events)
         setLoading(false)
       }
       fetchEvents()
    }, [])

```
This is simple react stuff making api call, setting state and if you find it difficult to understand this I recommend reading the [react docs](https://reactjs.org/docs/hooks-reference.html) and comeback here again!

Now, we'll modify the **Map** component from previous post to take _eventData_ as a _prop_ and also, we'll display a _loader_ until the api returns the response and state has been set. 

This how our **app.js** will look like now.

```
   import Map from "./components/Map";
   import "./App.css";
   import { useState, useEffect } from "react";
   import Header from './components/Header';
   import Loader from './components/Loader';

  function App() {
    const [eventData, setEventData] = useState([])
    const [loading, setLoading] = useState(false)
    useEffect(()=>{
    const fetchEvents = async () =>{
       setLoading(true)
       const {events} = await (await 
  fetch('https://eonet.sci.gsfc.nasa.gov/api/v2.1/events')).json()
       setEventData(events)
       setLoading(false)
       }
      fetchEvents()
    }, [])

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

 export default App;
```
> **Tip** : const {events} = await (await fetch('https://eonet.sci.gsfc.nasa.gov/api/v2.1/events')).json()
> This is called object destructing, more [details](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).

And this our simple **Loader** component. You can get that gif file from [source code](https://github.com/devnrj07/cool-react-projects/tree/master/wildfire-tracker-app)

```
  import fireLoader from './fireLoader.gif'

   const Loader = () => {
      return (
          <div className="loader">
             <img src={fireLoader} alt='fireLoader'/>
              <h2>Loading ...</h2>
          </div>
      )
   }

   export default Loader;
```
Great, Now let's look at the response and we can see that it has an events array which includes information about different natural events like Storms, wildfire, cyclones etc.
But, we only need wildfire co-ordinates from the events array which has **id** as **8** inside the **categories** object. 
_So, we need to filter out all the objects whose **id** is **8** inside the **categories** object_

![NASA API Response](https://dev-to-uploads.s3.amazonaws.com/i/3oyzy4hbquuvn9wfyh70.png)

Let's now update our **Map** component a bit to use _eventData_ prop, add the following code to the Map component.

```
   // define constants
   const NATURAL_EVENT_WILDFIRE = 8;

     const Map = ({ center, zoom, eventData }) => {
     const markers = eventData.map((event, key) => {
        if (event.categories[0].id === NATURAL_EVENT_WILDFIRE) {
          const [lng, lat] = event.geometries[0].coordinates;
       return (
         <LocationMarker key={key} lng={lng} lat={lat} info= 
          {event.title} />
         );
        }
     });

```
As you can notice we're looping through the _eventData_ array and looking for objects with id equals to 8 and get the _longitute_ and _latitude_ array as well as event _title_ to display the info about the wildfire when we click on any of the markers.
That's it now we just render the _markers_ array which is an array of all the Location Markers. So, now the complete code for our **Map** component.

```
   import React from "react";
   import { MapContainer, TileLayer } from "react-leaflet";
   import LocationMarker from "./LocationMarker";

   // define constants
   const NATURAL_EVENT_WILDFIRE = 8;

   const Map = ({ center, zoom, eventData }) => {
      const markers = eventData.map((event, key) => {
       if (event.categories[0].id === NATURAL_EVENT_WILDFIRE) {
          const [lng, lat] = event.geometries[0].coordinates;
        return (
         <LocationMarker key={key} lng={lng} lat={lat} info= 
          {event.title} />
        );
      }
    });

    return (
       <MapContainer style={{ height: "100vh" }} center={center} 
           zoom={zoom}>
          <TileLayer
            attribution='&copy; <a 
             href="http://osm.org/copyright">OpenStreetMap</a> 
             contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
        {markers}
      </MapContainer>
    );
   };

   Map.defaultProps = {
      center: [42.3265, -122.8756],
      zoom: 6,
   };

   export default Map;

```
This is it our app is ready. Start the app using 
  ` yarn start`

![Final App Demo](https://dev-to-uploads.s3.amazonaws.com/i/srhwe9rs9h7u6ecr2llb.gif)

There is so much you could do with leaflet, you can change tiles, provide navigation and much more and the best part is it's open source. Possibilities are limitless.

I hope you liked this series and if you did please share and follow me [devnrj07](https://dev.to/devnrj07)

Have a Happy and Covid-free New Year!