Build a Wildfire Tracker With React & NASA API

[Music] hey what's going on guys so in this video we're going to use react to create a wildfire tracker and we're doing this with the nasa open api to track natural events attracts wildfires volcanoes storms and stuff like that so we're going to focus on the wildfires and basically be able to plot them on a google map so you can see everywhere where there's a fire and most of them are on the west coast of the us there's a couple down in brazil there's looks like there's one up in canada and each one of these is going to be a component these are going to be the location marker components and if we click on it it's going to open up the location info component which is just a box with the id of that particular event and the title so i can click on any of these and it'll show me the id and the title all right we'll also be creating a little loader so when we enter the site or the application we get a little spinner and it fetches the data from nasa all right so react hooks use state use effect we're using the iconify library we're using a package called google map react to create the map and plot points on it so that's it let's go ahead and get into it okay so before we start coding there's just a couple things i want to go over so this is the nasa open api website it's api.nasa.gov and you can generate an api key but you actually don't need one if you're just kind of exploring the the data exploring the api if you were going to do something in production then you'd want to get an api key and add that to your requests so down here you can see all the different apis that are available and there's some really cool stuff you there's mars weather mars rover photos near earth object web service so like asteroids and stuff like that we're going to be dealing with this eo net which is the earth observatory natural event tracker so if we take a look at this it says it provides a curated source of continuously updated natural event metadata so it has things like severe storms and volcanoes and wildfires and we're just going to narrow it down to wildfires but you could of course add to this application and use all the data so if we look at the api documentation you'll see that we're going to get some events with an id title description category and geometries which is going to include the latitude and longitude which we can point on the map so if we click this link this is the actual data link that we're going to get all of our events from so we have an object with the service title and description and then an array of events and some are wildfires you can see the category id 8 is wildfire this is another one and then this one is a severe storm tropical storm polo and these geometries arrays have objects with the date the type and the coordinates now storms have multiple coordinates because it's just like the storm path it has a date and the time and then it has its path that it's moving along so you can actually create some really cool interfaces with this now as far as the map we're going to use a package called google map react which is pretty easy to use we just pass in you know the center the zoom value and then we can add any kind of component we want into the map a marker or whatever and we do need to add an api key here in terms of google maps so i have my google cloud console open here and i have my credentials i already have an api key so you definitely want to create that in your google console so if i click edit here or view you'll see that i'm going to use this api key and i'm going to change this after the video so don't use that one and then we're also going to use iconify for our icons because we want to place the little fire icon wherever there's a wildfire all right and we'll be using the react package for that as well so enough talk let's jump into vs code and we're just going to start from absolute scratch here so let's create a new react app so we'll use npx create dash react dash app and i'm going to create it in this current directory which i just called wildfire tracker okay so now we have all of our files and folders so let's clear this up and let's install our dependencies so npm install and the first package we want is google dash map dash react and then for iconify we have two packages one is going to be iconify or at iconify slash react and then at iconify slash icons dash mdi we're using the material design icons okay so now that those are installed we'll go ahead and run npm start start up our dev server and we should just get the standard react page now i just want to do a little bit of cleanup so in public in the index.html i'm going to change the title here so let's change that to wildfire tracker and then in the source folder i'm going to get rid of some of these files setup test app.test app css and logo svg we're just going to scrap those files and in app.js we don't need to import the logo or app css we no longer need to import react into components anymore which is nice we're going to get rid of the header so everything in the div here and for now let's just do h1 actually let me just set this to react and then let's just have an h1 here and just say welcome to the app and i'm going to get rid of this class name here as well all right so if i save that we should be able to yeah so we just get welcome to the app all right so first thing i want to do in terms of components is the map component so in the source folder let's create another folder called components and inside there i'm going to create a file called map.js and i'm going to use my i have the es7 react redux snippets extension so if we use rafce that'll generate an arrow component for us our arrow function component and in here we don't need to bring in react anymore what i do want to bring in though is google map react and we want to bring that in from google map react and this is going to take in some props i'm going to destructure we want the center point for the map and the zoom zoom level and let's give this div a class name of map and then inside here we want to just embed the google map react like that and this is going to take in some props so i'm going to put this on a separate line in here and the first one is bootstrap url keys so we want to do double curly braces here we're going to have an object with a key value and this is your your google api key so this here i'm just going to grab that and let's go ahead and paste that in now you probably want to put this either like in a at least in a env file or on a server somewhere you probably shouldn't stick it right in here but this isn't a production app so i'm just going to put it in there for now and then for the default center value that's going to be the center prop and we have default zoom we're going to set that to zoom now you can pass these values in here but i want to set some default props for those so let's say map dot default props and we're going to set center to an object with a lat value so this is the latitude and we're going to use a just a place in california or maybe it's oregon so 42 dot 32 65 is the latitude longitude is uh negative 122.8 and then we want a zoom value so after center let's say zoom which i'm going to set that set it to level six okay and those will get passed in here so i'm going to save this and bring it into my app.js so up here let's say import map from and that's in the components folder and then map and then we'll get just get rid of this h1 altogether and put in our map component so if we go back to our application it's going to be blank because we need to apply a width and a height to our map so in the index css let's see i'm just going to get rid of that and that i will set the font family though i'm going to set it to ariel and then for the map class let's set the width now you can set this to however big or small you want i want it to take up the entire page so i'm going to do 100 viewport widths and for our height we'll do 100 viewport heights i'm also going to position it relative because we want to position the info box when we create it is going to be positioned absolute so now if we take a look we have our map at level 6 i can zoom out zoom in now to plot something on the map and we can put whatever we want any component we create we can put on the map anywhere we want so let's go back to let's go to our components folder and create a new file and we're going to call this location marker.js and our location marker is basically just going to be an icon so let's bring actually let's generate a component first and then let's bring in up here we want to bring in icon and that's going to be from at iconify slash react and then we want to import the specific icon i'm going to call location icon and that's going to be from at iconify whoops iconify slash icons dash mdi and then we can get the specific icon we want you see we even have a drop down here i'm going to use the fire alert icon it kind of seems to make sense and then let's see as props here we don't actually need to do anything with the latitude and longitude it'll just happen automatically with the google map react component but i'm going to pass in here as props lat launch and also on click because we're going to have we're going to be able to click on the location marker and be able to show a box with the info so in here let's say div class name and we'll set that to location marker and for the on click i'm going to set that to on to to a prop called on click and we'll have a function for that later on uh in the map js and then in here we just want to display the icon with an icon prop which is going to be the location icon and then i'm also just going to add a class to this and we'll call this location dash icon all right and that's for that's it for the location mocker so now we want to bring that in to our map js so we're going to import location marker from dot slash location marker and we're going to put that right in the middle here of the google map react location marker and we're going to pass in latitude now i'm just going to use for now the center so we have the center prop dot lat which is just going to be this later on we're going to have a bunch of location markers for each fire but for now i just want to get something plot on the map so let's say longitude will be center dot lng so if we save that and we go back to our map it's very very small but you can see yeah i think i put it in medford or oregon you can see the little fire icon now that's obviously way too small so what we'll do is jump into our index css and let's style location dash icon give it a font size of let's do to rem and i'm going to make the color of that let's make it red so now if we take a look there we go so now we're able to plot these little location markers or these icons onto our page now obviously we need to use the data so this data that we get from nasa we want to get these events and get these coordinates for each wildfire and plot those so let's go into app.js and let's start to work with our api using fetch you could use axios if you want to i'm just going to keep it simple so let's say import here and we want to import use state because we will be adding the events as a piece of state so use state and then use effect because that's where we want to call our request that's going to be from react okay and then let's go into our app component and say const we're going to have a piece of state called event data and a function called set event data to set that piece of state we're going to use use state and the the default value for this will be an empty array okay another thing we want is a loading value which will be set to false by default and this is going to be set loading and the state will be called loading all right now where we want to make this call is in our use effect so right here let's say use use effect and that takes in an arrow function so i'm going to be using a sync await with the fetch api so we actually have to create a separate function here i'm going to call it get i will call it fetch events and actually we're gonna set that to an arrow and we need to mark this as an asynchronous function so that we can use the sync await and first the very first thing i want to do is set loading to true because we're loading we're fetching the data and then let's say const res so our response we want to await a fetch request to let's get the url here to this url grab that and that's going to go right in there and res.json is going to give us the data so we want to put that in a variable i'm actually going to do structure from it and we need to await that because that returns a promise now what this will give us is all this data here and i'm not really interested in this stuff like the title of the service or whatever i just want the events array that's all i want so i'm going to pull that out using destructuring okay so we get our events and then we want to set our event data so this piece of state so set event data and we want to set it to events all right and then finally we want to set loading back to false because we're done loading we're done fetching and then we want to call fetch events so still within the use effect let's go under the function here and call fetch events and then we want to make sure we add our dependency array here as a second argument so pass in our dependency array which is going to be empty so if we save that that should make the request in fact if i after we call this we'll just console.log events are not events event data and if we go back here and open up our console you can see we have an array here with all of our events which have id title categories uh geometries is an array with the coordinates so we have to dig down into this data and get the latitude and longitude for each one and then display a marker for each one all right so we'll get rid of that now i do want to have some type of loader when it's fetching the data so what i'm going to do is put an expression here and say if not loading then we want to show the map component we want to pass in our event data as a prop so pass in our event data and then let's have an else here and i want to have an actual loader we could just put in like an h1 and say loading and then if we go back here if i reload you'll see loading but i have a spinner that i want to use and i want to create a loader component so let me bring that image in so it's just a gif i'm just going to bring it right into my components folder here spinner.gif or jiff if you're a psychopath and then let's bring in loader i know we haven't created it yet but we'll create a component called loader and then down here instead of an h1 let's say loader and we'll create our component real quick loader.js and we'll go ahead and just generate a component and we don't need to import react i'm going to import this spinner graphic though so let's say import spinner from dot slash spinner dot gif and as far as what we want to return here it's going to be let's say class name loader and then in here we just want to have an image we just want to display the spinner so it'll be an image and the source is going to be the spinner that we brought in and then alt we'll just do loading and then under that image i'm going to put an h1 and just say fetching we'll say fetching data i guess okay so if we go back here and i reload that doesn't look very good so i think we should just add a little bit of styling so in our index css let's go down to the bottom here and style the loader so i'm going to display flex and we want them to go vertical not horizontal so flex direction will be a column so the the heading and the spinner are on top of each other we want to align everything to the center so align items justify content to the center set a min height of 100 viewport heights and then i also want to make the image a little bigger so let's say loader image and we'll set the width of that to 400 pixels and then for the h1 i just want to move that up a little bit so i'm going to set the margin dash top to negative 100 pixels all right so if we take a look at it now that looks much better all right so that has nothing to do with the map or anything but i think it's just a nice nice touch so now close up loader we don't need that anymore i don't think we need location marker anymore we can close that up so now we want to deal with the event data that's being passed in to our map so now map js is going to we're going to pull out event data from the props and we now have access to that array so we have to figure out how we're going to you know display this here so i'm going to put instead of having just a single location marker we're going to want to loop through or map through the event data and put out a location marker for each one so up here let's say const markers and let's set that to the event data that's being passed in we want to map through it we'll say for each one we'll call it ev and for each event i want to first check and make sure it's a wildfire so if we look at the data again each object has a categories array with a single object a single item with an id and id8 is wildfires if we go down here you'll see id10 is severe storms and you could of course add on to this application afterwards if you want but i'm going to check to see if the event dot categories now categories is an array with one item so i want the first item and i want to check the id and see if it's equal to eight okay and then after that if we'll just return null okay and then in here what we want to do is return this a location marker so i'm just going to cut that and we're going to return that except we're not going to use center lat we're going to use ev dot and remember there's this geometries let's check it out so this geometries array with a coordinates array and it seems that all the wildfires only have a single object in the geometries array notice the storm has more because i guess it's like following where the storm goes so if you're if you're plotting storms you're just going to want to loop through geometries but since there's only one we'll just use the first index so let's go ahead and say event dot geometries first one first and only one dot coordinates which is also an array and the second one is the latitude so this would be one zero is the longitude one is the latitude so i'm going to copy that and for the longitude we'll paste that in we'll change that to a zero okay and then down here we just simply want to add in our markers and if we go back to our app now we can see all the wildfires not just around the country but around the world if i zoom out i think yeah there's a couple down here in brazil we can zoom in zoom out alright so the next thing that i want to do is i want to be able to click on one of these fires and then have a little box pop up over here with the id the specific id of that wildfire as well as the uh the title all right so let's let's see let's first create the component so i'm going to have a new file here in components we're going to call this location info box dot js and we'll go ahead and generate a new component here and for the location info box we don't need to bring anything in here it's going to take in an object with some info which is going to be the id in the title and then let's give this div a class name we'll set that to location dash info and then in here we're going to have an h2 and say event location info and then a ul an unordered list with a list item we'll say id and let's put in a strong tag here and inside the strong tag i'm going to put from the info prop that's passed in we want the id i'm going to just copy that down and we're also going to put the title and we'll change the label here to title all right so that's it for the location info box component so i'm going to go back to map js and we want to bring that component in so let's say import location info box from dot slash location info box i'm also going to bring in use state from react so use state bring that in all right and then what we want to do is create a piece of state for our location info so let's say const and we'll call this location info and then set location info to set it and we need to set that to use state and we'll pass in null as the default value and what we want to happen is when we click on this location marker let's say on click and when that happens we're going to have a function and call set location info and pass in an object with an id set to ev dot id and then the title which will be set to ev dot title okay now once this is set once the location info is set we want to display the box the location info box so down here let's put in some curly braces and we'll say if location info if that's true then let's show the location info box component and we want to pass in as in a prop want to pass in info and pass in the location info all right because when we created our location info box it's getting past info and we're going to display it down here so now if i go back to my map here and i click on one of these it's going to actually show up down here and that looks very ugly that's not what i want so we just need to style it so that it shows up as a little box over the map so let's just reload that and let's go into our css and we're just going to do a little bit of styling here so we know that it has a class of location dash info and we're going to position that to be absolute and let's say from the top 50 pixels from the top and from the right 50 pixels and the width will do 400 pixels we'll set a min height of 200 pixels and then i'm going to add some padding 20 pixels and we can see what this looks like already if we click so you can see it over here so obviously we want to add some more styling to it let's do a background so background color i'm going to use rgba so red green blue alpha let's do black so zero zero zero and then 0.6 for the alpha and let's set a border dash radius we'll do 10 pixels let's set the font size to 18 pixels and then i also want to style the the ul and the li uh so let's say location location info and the ul so i want to take away any bullet points so list style type is going to be set to none and i'm also going to remove any padding and then location info li i just want to add padding on the top and bottom so we'll do 5 pixels top and bottom all right so now let's take a look and oh we need to change the color of the text so let's just add color white all right and now if we come to the application it's not going to show the box but if i come and i click on one of these it shows the id and the title click on that one so it's the big hollow fire this one all right so that's pretty much it i do want to just add a little header this will just we can do this real quick so we'll have another component in here called header.js and let's create a component here called header and we will bring in i do want to bring in the icon i'm going to use the same icon that i used in did i use it location mocker so i'm just going to copy this and put that in the header and we're going to use a header tag here and we'll give it a class class name of header and let's do an h1 and an icon icon prop is going to be location icon and after the icon in the h1 i'm just going to say wildfire tracker and then in parentheses to make ourselves feel special we'll say powered by nasa and then we'll just add this to our app.js and we'll add that right down here header all right so if we save that and take a look it doesn't look too good so we'll just add a little bit of styling and then we should be all set so in our css i'm actually going to put this towards the top so we have a class of header and let's do padding 10 pixels background color i think fire brick is is uh it suits the suits the application color let's do white and we always want this to show on top so i'll position it fixed we'll set it from the top zero right zero and left zero should make it span all the way across and then for the h1 so header h1 i'm gonna change the font size to 25 pixels and take away any padding and margin and also text align center and i also don't want any scroll bars at all so on the body i'm going to set overflow to hidden and if we take a look let's reload there okay so the the the header is actually behind the map so what we'll do is just add a z index value here of 100 and there we go all right so now that's always going to be on top so we come to the page we get fetching data good we click on this we can move this down a little since it's kind of hitting the header so where we have location info we'll do top say top 80 pixels move that down a little bit good so that's going to be it hopefully this wasn't too long for you guys and i would encourage you to add on to it i mean there's a lot there's other data there's storms and volcanoes maybe you could add different icons maybe a search functionality there's you know there's a lot of potential to make this a lot bigger and better so i would encourage that you do that if you have the time but that's it thanks for watching guys i really appreciate it and i will see you next time

Channel: Traversy Media

Views: 74,626

Keywords: react, react hooks, react tutorial, react google map, google maps api

Id: ontX4zfVqK8

Length: 33min 20sec (2000 seconds)

Published: Fri Nov 20 2020