Wildfire Tracker

The project is based on a Wildfire tracking system from NASA API. The app collects the JSON data from the Nasa EONET API and passes that data to the Mapbox API (Provide the map) you can also use the Google mao API, by providing the longitude and latitude coordinates to the Popus function in the react-mapbox-gl we can display the data to the user, checkout the preview to know more or look at the dev tools.

🛠 Dev Notes 🛠

Dependencies 

google-map-react

npm i google-map-react

A declarative Google Map React component using React, lazy-loading dependencies, current-location finder and a test-driven approach by the Fullstack React team.

-We can also use other MAP API such as Mapbox. If you are using Mapbox use this link tot see the documentation (https://visgl.github.io/react-map-gl/docs/). 

Or

mapbox-gl

npm i mapbox-gl
See the documentation to implement the package (https://docs.mapbox.com/)

To along with this package we have to install react-mapbox-gl see the documentation (https://visgl.github.io/react-map-gl/docs/api-reference/)

@iconify/react @iconify/icons-mdi

npm i @iconify/icons-mdi

npm i @iconify/react

timeago.js

timeago.js is a simple library (less than 1 kb) that is used to format datetime with *** time ago statement. eg: '3 hours ago'.

npm install timeago.js

google-maps-react

initialCenter: Takes an object containing latitude and longitude coordinates. Sets the maps center upon loading.

center: Takes an object containing latitude and longitude coordinates. Use this if you want to re-render the map after the initial render.

zoom:  the object takes the value and set as a default scale

import React, { Component } from 'react';

import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}div>;

class SimpleMap extends Component {

  static defaultProps = {

    center: {

      lat: 59.95,

      lng: 30.33

    },

    zoom: 11

  };

  render() {

    return (

      // Important! Always set the container height explicitly

      <div style={{ height: '100vh', width: '100%' }}>

        <GoogleMapReact

          bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}

          defaultCenter={this.props.center}

          defaultZoom={this.props.zoom}

        >

          <AnyReactComponent

            lat={59.955413}

            lng={30.337844}

            text="My Marker"

          />

        GoogleMapReact>

      div>

    );

  }

}

export default SimpleMap;

Nasa API 

Here we are using EONET-The Earth Observatory Natural Event Tracker (EONET) is a prototype web service with the goal of:

providing a curated source of continuously updated natural event metadata; providing a service that links those natural events to thematically-related web service-enabled image sources (e.g., via WMS, WMTS, etc.). Please see our API documentation to learn more about how to use the EONET web services.

*must use your own api  (https://api.nasa.gov/)

About the Source Code
-You have to use your own API tokens, style map tokens, data APIs, if you have any questions contact our help center.