Covid-19 Map: Complete Tutorial using react leaflet, hooks and bootstrap - Choropleth map

[Music] i'm excited to be sharing this tutorial with you as you can see it's a map it's not just any map it's a map using covid 19 data to show confirmed cases from around the world countries with the most cases are shown in a dark red while those with fewer cases have a lighter color this map is also interactive and lets you click on the various countries when you click on a country you're presented with the country name and the number of cases we even have a nice legend at the bottom that shows you the various ranges starting on the left we have lighter colors to represent smaller numbers well on the right we have darker colors represent the higher numbers if you're wondering what this type of map is called it's called a chloroplath map it uses different shading and color to display some statistic in this case we're using covid19 confirmed cases this is going to be an awesome tutorial we're going to be using react hooks react leaflet geojson papa parse and a tiny bit of bootstrap to make a loading screen to top things off we'll be creating an elegant well architected solution that i'm sure you're going to be proud of you enjoy my videos click that like button subscribe and share let's get started by taking a look at a high level diagram of our solution these are the components that we're going to be building naturally we have our app component our app component we're going to be creating a covid 19 component if we have no data we're going to show a little loading screen we're going to build that loading screen with bootstrap and i'll just show you how easy that is if we have data we'll go ahead and display our kovid19 map we'll also display our legend how do we get that data well the kova 19 component goes ahead and gets that data from the internet it asks for the coveted data over here which we get from john hopkins then it also asks from the map data which we'll be using a geo json file for a little bit of a lower level look into this application going from here to here you'll notice that most of this is the same we have no data display loading we have data get that map display that legend now to get that data we don't want covet 19 to do all that work go to the internet get the data display the data it's kind of breaking single responsibility we don't want cobit 19 to have that responsibility so it's going to delegate how does it delegate well we create a new class called load countries task ovid 19 will ask load countries task to get that information for it so it doesn't have to worry about it this will make the code inside cover 19 a lot smaller because we're moving the code into a task that task will go ahead and get as we said the cover data the map data give it back to covet 19 and away we go other than that the other thing that we've added is the entities and domains so we're going to create some objects some classes to represent the information that we get from the internet this solution require two pieces of data map data contained in a geo json file that's going to be used to draw the map and covet 19 data over here we have our map data and as i mentioned that's a geo json file that geo json file as you can see of a wikipedia article over here is just a json file it's a json file that describes how to draw the map on the screen so this is a list of features so each one of these features is going to be a country and each country is going to have basically two main properties one is the geometry how do i draw it on the screen and that's just going to be a list of points react leaflet will take those points take this information and draw the country on the screen in addition to geometry we also have properties now that could be the country name the population number of confirmed cova cases any information that you want or that you've collected you can find geojson files that contain this information for you or you can make your own geojson file by extending maybe one that already exists so we're going to be grabbing a geojson file one that has that information for us and then we're going to combine that geojson file with the covid19 data that we collect well the cova-19 data that we collect will be coming from john hopkins github what we're going to be using instead of an api we're going to be using a csv file this csv file has the information that we need and one of those pieces of information is the number of confirmed cases a csv file this is not what a csv file looks like but if we want to take a look at what a csv file looks like it looks like this it has rows and each row represents a country except for the first one which is the header and the data inside there is separated by commas so we always know the position of where the country name is or where a certain number is based on the number of commas that we find in the file and we're going to make this even easier because we're going to use something called papa parse which is going to make this seamless and only take a couple lines of code versus maybe 20 lines of code to write it yourself if you want to see how we link this data together i've created another little expansion over here the length is data together the map data and the coven 19 data well we need a common piece of information so every country can have a name but maybe it's spelled different instead of united states it's us or whatever so to facilitate this to make sure that we have the same names what's awesome about the kova 19 data and the map data is they both contain an iso 3 standard which basically means that they're using three-letter country abbreviation names so instead of united states of america it's usa and these are agreed upon which means that this will match and this will match if we take a quick little look over here at our covet 19 data and we scroll all the way over go back one over there scroll over and zoom in you'll see that it contains an iso a3 and these are the three letter abbreviations for each country our map data which i haven't shown you yet will also have an ios iso 3 value and that's how we're going to link that information together if you want to learn even more about geojson and maybe even building a simpler react map feel free to check out my other tutorial using react leaflet step 1 let's go ahead and create an app we're going to use the npx create react app command and let's call this ovid 19 dash map our project created let's go ahead and open it up inside visual studio code at the command line over here type code type the name of the project that we created cover 19 map hit enter and you'll have your project opened up inside visual studio code before we do anything at all let's just double check that our react application is running as expected to do that we're going to want to run the command npm start to do that we need our terminal two ways to get to your terminal you can hold control and hit the button beside the one tilde so one in tilde will control until it will open it up or you can go to terminal over here click new terminal it'll open up at the bottom of your screen so let's go ahead type npm start make sure that our application starts up and that we're in a good development state there's our previous application that was built but we're building our new one and here we are we have react running and we're in a known good state next let's go ahead and get that geojson data that i was talking about earlier i'll be providing this url in the description this is where we're going to be getting the geojson file that we're going to be using and we're going to download it and put it inside of our project so countries over here there's a list of countries here coming from datahub.io go ahead and click that down button over there and that'll download the file once you have that file find the location on your computer go back to your visual studio and what we're going to do is inside the src directory over here create a new folder call it data inside that data folder drag and drop that countries geo json file there we are we have the geo json file that i spoke about earlier it has many countries in here as you can see and each country has properties so this property called admin over here gives us the country name and we also have the iso a3 name as well for that country which we're going to be using to link back to the coveted data and this is all inside the properties area then we also have that geometry data which is used to draw the country we don't have to worry about that because react leaflet will manage all of that for us this file over here that we've imported we have one more step to do is just to rename that file i'm going to rename that file to json so i can import it and then use that object so just rename it to dot json and now we have our geo json data in our project with our geo json file handy now let's go ahead and create some components in the src directory over here go ahead and create a brand new folder call that folder components inside components we're going to add that first component that we talked about earlier that first component that we talked about earlier is called covet 19. so over here in components add a new file ovid19.jsx and what we're going to do here is i am going to be using some snippets to write the code for me so if you click over here on the side over here and you search for simple react snippets all you want to do is type it up here and type simple react snippets like that you'll find that components already have it installed and then click the install button what's great about this extension over here just a quick little explanation is it lets you type a few characters and then it will automatically write that stuff for you so let me show you how this works we're creating a component right now so navigating back to my document going to cover 19 over here and i want to do an import so i can type imr it gives me an idea of what it can print as soon as i hit tab just type imr and we'll type s and e because we're probably going to be using those later hit tab and it imported react ustape and use effect and then over here i can just say sfc which will create a stateless functional component not really stateless because we are going to use use state later but we're using hooks so this makes it a lot easier so this component over here and you can see when i did that react simple snippet also gave me a cursor up here and a cursor down here so that i can create my function and then export my function all at the same time without having to retype that or copy and paste that to get rid of the two cursors you can just hit escape and then the two cursors will go away inside of the return we're going to put a div and we'll just write the word map a really simple component that we have right now we're not using it yet to use it we're going to go to our app.js inside of app.js first thing let's start at the very top here get rid of the app css and get rid of the logo because we don't need those things inside of the app let's delete everything inside the return there we are and then what we're going to do is we're going to do an import so go ahead and import ovid 19 from and you can see my react snippet did it for me but let's not do it that way let's do it ourselves and we're going to import it from that components flash oven 19 and then we'll use that component over here over 19 close it and there we are we have our component over 19 so app just like our diagram is going to be displaying code 19. go back to our application and there we are we displayed the word map inside of a div let's go ahead and build the next part of our application so inside of the covid 19 component we're going to have our loading component and we'll also display a map if we do have data and the legend let's go ahead and build that loading component next for this we're going to be using bootstrap before we can use bootstrap though we're going to need to install it into our packages to do that for application all we need to do is go to our terminal you can see our terminal is in use right now it's running our application we could stop this install it restart the application but we don't need to do that within visual studio code over here you can have multiple terminals which you can select from this drop down over here i could click plus and then now you can see i have the first one here which is our application running and then i have a second terminal window over here so from here i can type npm install or for shorthand you can just type i and we'll type bootstrap that will install bootstrap into our project we can confirm that bootstrap's installed by either looking at the under the node underscore modules folder but the easiest way to confirm that it was installed is to go to our package.json here inside package.json you can see that we've installed bootstrap to keep my terminal on the application i'm going to go switch it back to node over here with the npm package installed for bootstrap let's go to our index dot js file and we're going to import bootstrap over here since it could be used by any part of our application what we'll do is we'll go import bootstrap go into the distribution folder go into the css folder and then inside there there's going to be a file called bootstrap.min dot css you can see we're compiling with no errors now we can go back to our covid19 application if you remember we don't want to really display the word map here what we'd like to do is show a loading spinner what we're going to do is we're going to go ahead and create another component so just like in our diagram we have covid and then another component called loading so in our components folder go ahead click new go loading.jsx we can go ahead and import using our shortcut over here and we'll just do imr so we're going to import react and then we'll just create a stateless functional component we'll call it loading since you got two cursors hit escape over there so that we only have one cursor and then if we want to we can just quickly test this so loading will save it go back to our kobit 19 application over here let's do an import they're in the same directory so all we have to do is say loading loading and then from dot slash loading and i've noticed a typo over here so what i'm going to do is rename this file to capital l and then over here go back to loading go back to covid19 and that's capital as well perfect so in our covid19 let's go ahead and just return that component so we go loading slash self closing if we go inside there there's a div all it says is loading at the moment and doesn't really do anything special let's take a look at what our application is doing there it is it says loading that is it you want something that looks a little bit nicer than that so what we're going to do is we're going to use bootstrap in order to create a spinner on our screen let's see how we can do that go to bootstrap over here so if you go to that url for bootstrap getbootstrap.com easiest way to do this is to go to documentation inside of documentation we can search for spinner or we can type loader doc is pretty good at finding components that we need and here's spinner so bootstrap has various spinners over here we've added the css to our project and what i'd like to do is create a spinner using these um flashing ones over here or they call them growing spinners take a pick one of the ones over here that you like one of the colors or whatever so i'm going to go with the green right over here success you see it goes class is equal to spinner dash grow text success and if it's unable to display the image it would display text that just said loading but for now we don't have to worry about that let's go ahead and copy that go back to our application go back over here and i'm going to keep the outer div so i'm just going to replace the text now what we can do is paste this in and what we want to do is rename class so in react jsx class doesn't exist we have to use class name class is actually reserved word so that's why we have to call this last name in react click save on that go back over here and now you can see that we have i go back to the regular size window it's kind of small but there you go we have a little spinner right now letting us know that something's loading let's make the spinner more presentable right now it's kind of just in the corner of the screen let's let's make this a little bit more interesting by adding let's say two more spinners but we'll make them different colors that color over here at least with bootstrap is controlled through this text success property so instead of success we could say danger and over here we could say info info is blue danger is red success is green click save on that and look at that that looks a little bit better it's up in the corner maybe not quite where we want it let's take these items over here and center them on the screen because that's where your focus is most of the time center of the screen not really the top corner to do that we're going to do a little bit of styling so this outer div that we have over here we're going to add some styling so you have these curly braces so we're going to add some javascript then we add a javascript object inside there and first things we need to do is we want to say we want to take the entire height of the screen so we're going to use a viewport height vh then we're going to display we're going to say we're going to display these items using flexbox this isn't a flexbox tutorial but we'll be using a little bit of css flexbox don't worry if this is foreign this is just for putting these items in the right place on the screen so justify so with flexbox nothing will change yet when we say display flexbox we're going to use two properties from flexbox justify content which will control our right and left positioning so we say center go back here and there we go spinners are in the center now we're going to move the items to the center of the screen in vertical height vertical height is controlled by a line items over here i say align items and then center and now our items are in the center of the screen with our loading screen created let's go ahead and focus in on some of the other components that we have as per our diagram we're going to have a coveted map and a legend when we have data let's go ahead and create those components so going back to our app over here we have covid19 and inside our components folder over here we're going to create a covid map.jsx we're going to use our snippets just like we did before so i am our s actually just imr because we just need react and we'll just do a stateless functional component we'll call that covid map hit escape to get rid of the two cursors type in div map there we go pretty easy then we'll create our other component which is called legend so go ahead and create a brand new file call that legend.jsx legend.jsx very same thing imr so we're going to import react sfc to create that stateless functional component call it legend legend like that escape to get rid of the double cursors put that div in right there type out legend and there you go now we have two components we have legend covered map and loading which displays when we have no data but how do we do that well on our covid19 main component we're going to have to have some state that state is going to be a list of countries let's go ahead and add that state over here we define a constant and we're going to be pulling these constants out of our u-state function so set countries is going to be equal to use state so use state returns an array and the first item is the initial value and the second item over here is going to be a function that we can use to update the state when we need to the initial value of countries is going to be this empty array right here so just some square brackets then over here in our html or jsx that we return we put a div let's move loading inside of that div but before we cut that inside there let's put these little braces we're going to be doing here is we have loading and we're going to say that if countries is equal to 0 then go ahead and display loading so the way we do that is we access our countries variable and we say countries dot length since that array is equal to zero and we put a question mark and we say display loading there are countries we'll put a div here and inside this div we're going to display our legend and the covid map so these are two components that we just created but first we need to import them go back over here and we're going to import let's import covid map first right there oh it looks like it auto filled it for me but we'll get rid of that and we'll type it ourselves it's a dot since it's in the same directory and then we type covid map because that's the name of the file and go ahead and import and we're going to import the legend from the current directory slash legend see since our kovid 19 is inside the components folder we just go dot current folder and then whatever the name of the file is that we want to import going back over here to our loading screen if we were to hit save and go double check that our application works good practice always hit save make sure the app works any errors fix them right away makes it much easier so here we are we still got our loading screen here it's still showing our dots because we don't have any data but over here in this div which is the side that if we have data we could write as data or just data i'll just say data then all of a sudden when this refreshes nothing will happen but if we go back to our state and say we type in the name of a country we put canada and we hit refresh oh our loading screen goes away so come back over here we remove that we're all good to double check this again we can leave canada over here and what we're going to do is inside this one over here we can type ovid map make that self closing so we're going to get rid of that part right there and then right after the covet map will display the legends let's go do that there we are this is a lot neater so i have prettier installed and it just formatted my code for me so we can see clearly right over here if you have no countries display loading you have countries display the coded map and the legend so at this moment we have one country canada and because we have canada it displays map and legend if we get rid of canada over here and remove it from the array then it displays the loading for our next task we're going to go ahead and load our country data now how do we do that well going over here back to our diagram we can see that our covet 19 component depends on load countries task which is responsible for getting the covet 19 data and getting the map data and giving that back to this component so over here in our code we're going to be using use effect what is use effect if you've never heard of it before well it's kind of like componented mount and component did update it actually fires for both of those making it unique and a little bit difficult to use maybe at first but let me show you how this works if we only want this to fire for page load we tell it that it will track an empty array like so so normally use effect over here you can give it two items one is a function to execute when either data is updated or the page is first mounted well we can provide it with an empty array that empty array right here this empty array will force this to only fire once in this empty array we can say to track various information and data like countries every single time countries changes this use effect will fire but if we say to track nothing this is the same as component did mount so if you're used to that way of doing your react this will be very familiar over here we're going to define our load method let's go ahead and say const load and load will be equal to an arrow function inside that arrow function that is where we're going to call load countries task in a much larger application we may have many tasks so to accommodate for that we're going to create a folder inside of src create a folder called tasks tasks we're going to go ahead and add a new file called load entry countries ask.js just need to be a regular js file let's go ahead and define our load countries task we'll go create a class called load countries task and then this ta this class that we've created over here what we're going to want to do is export the default load entries task so this is what we're creating now going back to our covid19 component over here let's import that we haven't implemented it yet but let's import it and i'll show you how we can do that that was my auto import let's ignore that so load countries task where is that that is located in this folder tasks so what we need to do is we need to go up one directory and then down into tasks how do we do that well we use dot dot go dot dot that goes up one directory you can see it's already showing us tasks exists from tasks we pick load countries task now how do we want to use this so before we even finish implementing load countries tasks let's see how we're going to use it the way that we're going to use it over here is by defining it inside of load so inside of load we could say const load countries task is going to be equal to a new load countries task and what i will do over here is make that lower case right there the load countries task we're just going to call it load countries task dot load now that load function is going to be loading our data for us so what we'd like to do is pass in a function let's give it the set countries function and it will call set countries to update our state so once it gets that data it calls set countries and updates it hasn't done that yet though so let's go back to our tasks and inside of tasks we're going to define that load let's do that over here create a load method make it equal to an arrow function and instead of calling it set countries i'm just going to call it set state just for simplicity as this is called the load countries task it has a single responsibility to update the state only for countries so inside of this method over here we can go ahead and call set state and then we need to give it well our countries where are our countries well our countries are in our json file over here as you can see we have this json file and it has all of our country data that we're going to be using to build our map so let's go back to our task and import that we're going to do an import and we'll say countries from we need to go back a directory because we're in tasks up to src down into data and then get that countries.json file once we have that we get this countries object well i can use a little bit of structuring to go in and say you know what i don't want that whole object i just want this list of features so let's go ahead and get that list of features so here we go i've destructed and got those features using those features i can now just pass them into set state because the features are guess what the countries so there we go we have the features there in order to display a map we're going to have to import leaflet and react to leaflet in order to do that we're going to open up our terminal now you can do that using control and hitting the button next to the one which looks like a tilde and that will open up your terminal or you can go up into your visual studio properties there and go click terminal and new so what i'm going to do here is already have a terminal open running our react project and i'm gonna click the plus button so then we can do npm install and we're gonna install leaflet which is the library that we're using but we're actually using react leaflet but react leaflet requires little fit so we need to install that let's go ahead install that to confirm that leaflet and react leaflet are installed we can just open up package.json and look over here and we can see that we got react leaflet and we got leaflet next let's go ahead and set up our coveted map that we have react leaflet and leaflet first things we're going to do is we're going to import that css go leaflet distribution slash leaflet and we just not need to add the dot css part there then above the css let's go ahead and do some imports these are two components that we're going to need from react to leaflet not leaflet so these two components that we're going to be using are map and geo json to display that geojson data that we have in the return statement over here we can delete this entire div and replace it with map then we're going to go ahead and add a few properties so one of those properties is going to be style the style property we're going to create an object here and we're going to set a height and that height we're going to take up 90 of the viewport height then we'll set a zoom level and that zoom level will be equal to two of an extra curly brace it looks like there oh i just misplaced it so i'm gonna close this one and then delete that one you can see i have a style a zoom and now let's also add a center and this is where the map will be centered on the screen so let's go ahead and this is just an array we're going to send her to position 20 and position 100. think of this as your x and y position for the map and now that we have this map we can go back to our screen over here close our developer tools and we have this gray area this is where the map will go below it there's a legend and we have our zoom buttons automatically from that css styling that we added so now let's go over here and in between the map what we're going to add is our geojson geojson has a property called data and that data property we are going to pass in the information that we got from our properties that is the countries that country information will go inside of our data here make geojson a self-closing tag come back over here and you can see that now we have a map let's go ahead and style our map first let's set the background color of our map so our covered map over here and i'm just going to expand this little area right here we have a covetmap.jsx we're going to create a file next to it so create a brand new file and we'll call this one covet map dot css inside of codemap.css we're going to override a color that's set by leaflet by default that is the gray background color and i'm just gonna get this color over here that's more ocean like and set it to this which is this light blue color and then if we come back to our map nothing changes because we're not using that css component yet go back to our codemap.jsx and i'll make that smaller again there and then we're just going to import just like we have there we're going to import some css this has to come after the leaflet css and we're going to import in the current folder so dot slash and then covid 19 over map dot css and import that come back refresh our map and you can see that we have a blue background now if you recall from a previous video that these layers that were drawn over here have some opacity that's why you can see through them and you see that blue color now let's go ahead and start style these countries over here so that they're not as see-through anymore and showing the color behind it so in order to do that we're going to be adding a style to that geo json object that we have there in order to do that we're going to go ahead and just create some properties over here let's go ahead and i made a little too much space what we'll do is we'll do a const and we're going to call this map style and map style be equal to an object and that object will have a fill color we'll just set that fill color to white right now we're going to set a weight that'll be the weight of the lines that are being drawn we'll set a color which will be black or the color for the lines those will be black and then and a fill opacity and that will be make the countries no longer see through and we won't see that blue color behind it then we need to take our map style over here and set the style and we'll follow same pattern here because this has style first so put style here first as well and make it equal to that map style object we'll go back to our map and have it reload and once it reloads you can see we're using that white background color we have black lines to draw the countries and this is already looking much better let's go ahead and add the pop-up that'll happen whenever you click on a country so to do that we're going to be taking advantage of the on each feature for the geojson component that we've added here we're going to add another property called on each feature is equal to and then we're going to say on each country and then we'll add a function above that which will be a const and it'll be on each country will be equal to and now this takes in two pieces of information one is the feature we're going to call it a country the other is the layer so that's a thing that's been drawn on the screen and this will be an arrow function and then from there we can say layer dot options dot fill color if you want to set the fill color which we'll be doing later from our properties but for now we'll ignore that um we'll ignore that step for now we'll come back to that after what we'll do for now is we're going to get the country name and the country name comes from the country object dot properties dot admin kind of a strange name but it's called admin but we'll grab that there and that'll be our country name and then what we can do with that is we can do a layer dot bind pop-up and then we'll go ahead and do that and then let's go ahead and display that so i'm going to use string literals here so i'm using that beside the number one key the tilde there and we're going to have that tilde and then inside of here what we can do is we can actually grab properties using a dollar sign wiggly brackets and the name of the property so we're grabbing that name there now if we go back to our map any country we click on we get the name of the country once we've retrieved all our data this is where we'll be applying the different colors for each country over here on the on each feature in the on each country let's go ahead and define how the rest of this map will work once we have the data that we need to display the color so in order to do that we're going to do is determine how this is going to work one of the things we're going to need to do is set the fill color which is the color that each country is so if we go to layer dot options dot fill and we type in color what we're going to end up doing is we're going to get this country object from the country object there's going to be properties and one of those properties that we're going to get back is going to be the color right now that color doesn't exist so if we set it and reload the map you see it just ends up being black but eventually we're going to have a color here available and that's going to be the color that we determine based on our legend if it has a lot of cases it's going to be a dark red if it has least cases it'll be a lighter color the other thing that we're going to display is not only just the country name that we're displaying right now but beside that we're going to want to display the confirmed number of cases or what we're going to call the confirmed text so we can actually over here where we define the name we can also say const confirmed text is going to be equal to country.properties so that same area we're getting it from the properties and then we're also going to get the confirmed and we're going to call that confirmed text then i would be able to take this confirmed text over here and put it beside the name so we can have the country name and the number of cases going back over here when we click on it it won't change anything for now it says undefined but when we get to our next step we'll start filling these values in as we retrieve that covid 19 information the covet 19 information that we're going to be retrieving will be done inside our load countries task inside the load countries task what we're going to do is get that cova 19 data and then parse it and put it inside of our map on the properties of each country so in order to do that we're going to get that data from john hopkins coveted 19 github repository in that repository they have a branch called web data inside of web data there's a data folder and inside that data folder there's a case country csv inside that case country csv what we can do is this is our comma separated value list over here which is basically a list of rows the first row is separated by commas and contains our header well every other row contains all the countries and additional information for those countries like the number of confirmed cases and also important for us is the iso 3 country name which we're going to match onto our map so next what we're going to do is we're going to grab this url over here and this is the url that we're going to use to get our data from so for now we can go ahead in our low countries task and we can define a variable inside here called ovid 19 data url and we'll set that over here make sure to put quotes around it there we go we got quotes and we got our url so in order to parse this information we could write some javascript code however sometimes there's exceptions and special things that happen and we don't really have to go to the trouble of writing that code lucky for us there's an awesome npm package called papa parse papa parse is what we need takes csv in and basically converts it into a json object so we'll be able to take this raw csv data over here and create a json javascript object out of it so going back here into our visual studio code what we can do is we can install that package so open up your terminal now remember you can do that with control and tilde which is the key next to your number one on your keyboard now over here i'm going to go npm i pop a parse i stands for install and type that out and that will install our pop-up parse package well let's get rid of our terminal window over here so we have a bit more room to work with to use pop-up parse we're going to import it at the top of the screen over here so import papa from apple parse simple like that then what we're going to do is down over here in our load method so the load method right here this is where we're going to use pop-up parse let's do this above the set state and we're going to do papa dot parse and this method over here takes in two parameters one is the url where we're going to get the csv data or the location of the csv data the location the csv data that we're getting is out on the internet and we're going to be using this url over here covid 19 data url then we can provide it with some options in the form of an object and this object over here we're gonna have a few options one is papa parse normally uses csv data which is local but since we're downloading it we just need to tell it hey this url that i gave you this is not on my web server this is somewhere else you're going to need to download it we tell download true then we also tell it that the csv data that we're getting back if we take a look at it has a header the first row of information is a header and not part of the objects that we need so going back over here we set header to true and then lastly once we're done getting that data we're going to need to use it so how do we do that well we're going to have this complete property over here where we're going to give it a function and that function i'm just going to give it an arrow function for now this arrow function that we're going to have will get a result and that result will contain the csv file um what we're going to do is we're going to go ahead and create a method which is going to process the covid data and the reason i put this pound sign here is to make it private the only public method that we're going to have is load that's the only thing that any anybody who uses load countries task will only see load they'll never see these other methods over here so pro set process covered data just add that there now this result contains other information but we just want the list of covid 19 countries we're going to call this result dot data over here then the other modification we need to do to our code is we don't want to set the state right away we want to set the state later so i'm going to delete the state here set state and what i'm going to do in our code for readability is i'm going to call a method or a property over here called set state and set it to null then when load gets called i'm going to say this dot set state is equal to set state like that and then we'll close that let's take a closer look at that data that we're getting back from papa parse so in order to do that what i'm going to do over here is inside of process data so let's go implement process data first and show you what that data looks like let's just define our process ovid data and we're going to make that equal to an arrow function that arrow function we'll take in covid countries and then what we'll do with that is we can say console.log and we can print out the coveted countries remember result is the other object here in fact it's probably more beneficial to see the complete object so let's do this don't copy me here this is just to show you what we're doing so i'm going to undo this in just a second but what i'm going to do is console.log and we're going to print out the result so now when i go back to our application i'm going to go open up our developer tools so more tools developer tools loading's never going to go away because we never set the state so pop-up parse is returning this over here it has a collection of errors if there are any errors in your objects like whatever this error may be over here but nothing to be concerned with and then it has a list of data so this is the data that we're getting back from the csv file so what is this data well it's an array there are 189 objects inside here and they all have these properties these are the names of the properties that it has now remember we said we told pop-up parse there is a header we said header header was true what does that mean that means if we go back to our github over here that each and every single one of these columns over here is when we create a property for it so for um afghanistan over here new creative property there's a new country region and then if we look at that first object over here you'll see country region is equal to afghanistan and then the rest of these numbers over here will correlate so what it's doing is it's using the header to construct an object that has the header field as one of the properties and then a value so it makes these really nice objects if we turn header to false over here and go back the objects will be a little bit harder to read because now it's based on position so go expand this go expand data expand that now you'll see that it's just numbered and these numbers so 0 is country region 13 is ios iso3 we go back to our github you'll see country region over here is position zero if it was an array and then you go one two three four and then you get to 13 which is iso3 so that's how that works and that's why we say header is true now just to undo what we had over here because we don't need this console log i'm going to delete that console log but delete this extra brace that's only if you have more than one line of uh information there delete that semicolon and there we are so now we're taking a result we're using the dot data we're not going to worry about the dot errors or any of those things so dot data and we're going to pass in covet countries over here our application is just going to be in the loading state because we haven't set state yet close that and then what we'll do over here now that we have this let's also make one other modification so features that's for app it's not a great name i don't really like it so i'm going to call this one map countries and we're going to make that equal to an empty array there and then what i'll do inside of loading what we're going to do is say that map countries is going to be equal to features the reason i'm doing that is actually we could just put that here so let's do that no need to do that there there you go that's a lot cleaner there is no reason to me to set it on load might as well just set it immediately as soon as i have that information so we're renaming it that's all we're doing we're saying map countries points to features and we're going to use that just to make it easier to read while we work with it all right so now that we have this information what's going to happen is load we'll just set the set state property so that we can use it later and then we're going to call papa pars pop-up parse when it's done we'll call complete and then it'll call process covered data what happens then is inside of this process cover data we're going to loop over every single country so every single country we're drawing on the screen we're going to loop through them and then we're going to apply the covet data so let me show you how that works here inside the process covid data method we're going to loop over those countries so let's do that over here by going 4 let i is equal to 0 and then i is less than our map countries dot length and then i plus plus open and close our braces and we have our for loop the first thing we're going to do is we are going to get that map country let's say map country is equal to this dot map countries and get that item then we need to get our covered country our clover country is where we're going to get the number of confirmed cases from so we can find that country by going into our covid countries list and then using a method called find so this is an array method called find and i'll find the first match it takes in a function which it's going to use to determine a true or false value you'll loop over each we'll call this covid country or loop over each country until it finds its first match what we'll do is we'll take the covet country and the covet country as we know comes from here and our kovic country has an iso 3 property we're going to take that iso 3 property and we're going to see if it matches our map country dot properties so if we go over here into our data we can see that there's a properties and remember this object has properties and geometry properties is where we want to get the iso 3 number to go back to our load countries it's going to get properties and then we're going to try and match on the iso underscore a3 so three letter abbreviation for that country and then dot save pretty or make it look nice or at least format it so it fits on the screen then what we're going to do is our map country we're going to set some properties one of those properties will be the confirmed number of cases which we're going to set to 0 and then our map country we're also going to set the number of confirmed text which is what we use inside of our code map over here to display so we go country.properties.comtext now just also in our data over here it's coming from here this is properties that's where we're going to store the confirmed text we don't want to start on geometry because that's where we you know that's the information for how to draw that object so we're going to put all of our new properties which is confirmed and confirmed text on the properties so going back to our task over here we're just setting up some default values go zero and then save that and then once we have that information it's not going to display yet we still have our dots the reason for that is we haven't set the state yet so after our for loop that we have right here what we can do is we can call this dot set state like that and pass in the map entries the array go back to our browser over here and now we have a default value of zero now let's go ahead and set that number if we have a coveted country so if we have a cover country because if it doesn't find one it gets a null so we'll have to say if the covet country does not equal no then what we'll do is we'll get the confirmed from the covid country dot confirm so the covet country if we go back here it has a property called confirmed we're going to use that confirmed over here we'll get that confirmed and we'll convert that to a number because it might come in as a string so we'll convert it right there then what we'll do is country dot properties dot confirmed is going to be equal to this number that we just got and then map country dot properties dot confirmed text you can see this is exactly the same as this but now we have the value filled in is going to be equal to we'll just say our confirmed for now there we go we go back to our map over here now when we click on our countries you'll see numbers these numbers though sometimes a little hard to read especially when they're really large when they're smaller much easier to read so let's do a little bit of formatting on those numbers one thing we can do is i'm going to be using this regular expression regular expressions can take a string in and format them and it can do some really cool stuff but the problem is writing a regular expression is not easy so um typically you know easy to google and find other regular expressions that people have created so this one is format comma number with commas um i'm gonna change x the number just so that i know it's taking in a number converts it to a string and then what it does is it finds anything that's slash d which is a number groups of three and that has numbers afterwards and then puts commas to use this we also made it private with the hash what we'll do is we'll say this dot format number with commas come back over here wrap our confirmed letter map reload and then when we click on a country over here now that is much easier to read i know that's six million because of how it grouped the numbers that is one way that we can format those numbers easily using something and i'll be pasting this exact function inside of the description and then also you can also find this on the github completed project for the next part of our project we want to build out the legend then after we build out the legend at the bottom we can set the color of each country and show you how clever this code is and how we're going to be combining the information that we have in the legend to actually control how that map looks so over here what we've done so far is we have our covid 19 component which goes to our load countries and gets that covered data now i drew another arrow over here to load countries task which is going to be using the legend items and legend item to build our legend so let me show you how this works we so far have our tasks our data folder our component folder now we're going to add a folder for entities so over here go ahead and right click and create a new folder call it entities inside that entities folder we're going to have go ahead and create a new file and we are going to call that legend item dot js so legend item js will be a class legend item and this is going to represent our legend what does our legend need well let's get our constructor going here it needs a title i'm going to need a color i'm going to create a function called is4 so each country can say hey is this legend item for me now this is the magic this is the really cool part that i think everyone's going to like text color is just something i added as well if you saw my original mock-up there it had white text when it got to the end because the colors were maybe not as clear i'll pull up the final solution here so you can take a look with the final solution over here you can see we have text color because these colors were harder to read so i set them to white otherwise it defaulted to black but each one has some text a background color and then we're going to have a function on each and every single one of these legend items that says each country can go hey i have a thousand all right is this one mu is this one you is this one you first one that says this one's you it'll respond and go like oh okay cool so i'm gonna use your color which is this really light pink and place it as my country color because i only have 22 000 and you're 0 to 499 so that is how that's going to work let me show you how that works in practice so let's go here we're just going to set up our variables here so easy enough we're just going to say is we're just setting variables nothing special take a constructor in take some parameters and then each one of these just gets set so text color and then what i'm going to do with text color is just maybe a little special here i'm going to say if it's not equal to null then we'll use that text color otherwise we'll just set it to black so it's not equal that and then otherwise the color is just set to the color black like that so text color is an optional property it's not equal to null use it otherwise set it to black so over here our legend item is not used uh we've created it we do have to do one extra step which is to export it so that others can use it otherwise it's just stuck here uh spell that correctly so get that legend item okay there you go now in the entities let's go create another file called legend items.js this is going to be our list of legend items we'll start by doing an import over here so let's import the legend item from the current folder that we're in so legend item right there then what we're going to do is we're going to have a constant called legend or we'll do lowercase legend items and that's going to be equal to an array that we're going to be defining we're going to export the default which will be our legend items now we can build out our legend we're going to be building out a data structure that's going to represent our legend these are the colors that we're going to be using so over here these are some colors that i've picked out and we're going to build our list starting from the darkest color all the way to the lightest color we have really really red over here to represent ones that have lots of cases more red red more pink pink and white to represent countries that we don't have any data for so let's go ahead and build this data structure out so simply we're just going to have this legend items which is going to be a list of legend item legend item has several properties on it including the title so the title for this one is going to be one million plus and then we're going to set a color so that's the color that we've predefined over here as this which is really red and then we're going to have really special property called is4 so this is a function that we're going to be creating we'll use an arrow function over here because it's a little bit more neater to look at when you write it in line and we're going to say if your cases are greater than or equal to 1 million now here's a trick to write 1 million so it's easy to look at is you can use underscore you can't use commas to separate your values but you can use underscore cool little javascript trick to write nicer neater code then we had one less property and that's the text color remember it's kind of hard to read so we set that text to white and that's something we'll have to set up in our code map when we do that so we just add another legend item over here and once again we have a title and i'll just take these from my previous screen here instead of typing them up but i'll just do one at a time we'll set the color from 500 to 999 we'll set the color there and then the case is here so this one's a little bit different we're going to go our cases are going to go from 500 000 to just below a million so that's why we do less than and not less than or equal and then this one as well we need to set that text to white because still kind of hard to read then for our next legend item over here our title which i will just take from the previous screens as not to make any errors is going to be from 200 000 to 499 and then our color is going to have to be different as well so that's this color over here that we're going to be using and this color over here we'll just put a pound and put the number then our cases are going to be between 200 000 and the 500 so previous number as you can see it goes here this number goes here so you can kind of trace it 200 will be the next one that will be over we don't need to to change the text color because we're going to leave it as the default black and then we'll add another legend item over here so this range is going to go between 50 000 and 199 so there you go and then we're going to set a color as well so this one's going to be a lighter shade as we go further down the list and then the cases just as you can see this little pattern evolving over here 200 000 now gets put over here and 50 and then 50 will be put onto the next line so our very last item that we're going to create i'll probably just paste this one in its entirety here for brevity and then what we have over here is between 0 and 499 we have this light color we say the cases are greater than 0 and the cases are less than 50 000 so this time we just said greater and the reason we did that is we're going to have one item at the very bottom in our legend that is going to be no data we have no data we're just going to make that the color white and automatically we're going to set that to true the way this works is we're going to loop through these items starting at the top as soon as we get one that says true we're gonna stop so that's why we start with these numbers because multiple you could have multiple matches on these and we didn't want to do that so easier to start from the top and then work your way down to see if you're in those ranges especially with this item being at the bottom as our default now that we have our legend items we can actually go ahead and start to use them so step one we're gonna go back to our components we're gonna go to covid19.jsx so our component and what we want to do is get our legend items and then give them to our legend over here so let's do this let's first start with the import we're going to import legend items from and we have to go back a directory because we're in components into src then we go into the entities then we get our legend items that's how we get our items now remember this list starts with the highest number to the lowest so we want to tell the legend we want to give it the reverse of that list we don't want to give it in that order so up over here right below where we define our state for the countries easy enough let's go and define our legend items in reverse we're going to give the values in reverse and we're just going to say that's equal to a copy of the legend items and then we'll just call reverse which is a built-in array function to reverse those items then in our legend below over here what we're going to do is define a property so that property we're going to call legend items is equal to legend items in reverse so save that come back over here to our application make sure that it's still working which it is let's go into our legend so open up your legend file over here and then inside the legend what we'll do is we're going to use destructuring to get that from our properties as explained earlier and here we'll get our legend items then let's print them out just to make sure that we have the right data always good to do little checks to make sure that you're on the right path so print out the legend items just to ensure that we're getting them in the correct order so there they're in reverse now so remember over here on the legend items they're going from is to lois now we just reverse that so that we get lowest to highest so there we go they're just reversed okay so now that we got that information there what we're going to do is go back to our legend component and now we can display this information on the screen so let's do this we're going to use a little bit of flexbox and i'll show you how we do that so over here we're going to this is basically mapping our object so what we're going to do is let's create a div just like we had and then for this div what we're going to do is we're going to say style oops we're going to say style and then style is going to be equal to an object and that object that we're going to define we'll have our styles we're going to say display everything inside here as flex and then those items we're going to align items we're going to use stretch so they stretch across the screen we're going to use stretch and then inside of this div over here what we're going to do this is where we're going to loop over our legend item so legend items.map as you normally would for any items then inside here we give it our arrow function so this will represent each one of our items so we're going to call it item then inside there give it the arrow function and define it and legend unexpected token so i think we'll be okay here just need to move this so we've just kind of there you go this was the little error that we had i was inside of that div so this can happen this is typo this is a normal flow of events sometimes there you go we're inside this div we're between the outer div we have our legend items we're doing our map and now we're about to write our arrow function over here to print out that information so inside this arrow function we don't really need the squiggly brackets just use the regular round brackets then what we're going to do is we're going to put a div close that div do that i could just put the number one there just for a second just to make sure we're printing this out correctly um yeah it doesn't really show up right now probably because of the flex but let's not worry about that right now so let's continue with this div that we have right here so what we're going to do with this div over here is we need to display the item so in here let's go ahead and just add a span and then inside there we're going to do the item dot title like that we have our item dot title being displayed on here so there's all of our titles no data 0 9 500. so far our flex is working we have a row of information it's all squished together because each item hasn't been set up yet so let's go set up all our styles that we need for flexbox to work first things first we're going to have this little complaint over here that we need a key for our child list let's go ahead and define that key we know that these titles are unique so what we'll do is we'll use item.title for our key and then save that and boom you can see no more error what's nice is just being able to go back and forth and see things automatically working so great that we got rid of that error next let's go ahead and define that style so that style that we're going to define right here is an object so let's go do a few things here so we're going to set a background color remember each legend item has a background color so background right there and then color and then we're going to get that color from our item dot color remember that legend as a color property and we when we created those we set that color property so go back to our legend over here and then grab our item color which we don't need to put in curly braces actually because we're already inside these curly braces so that's going to get our item.color reload our page and now we have our colors you can see it start to build out we still need some more properties to set over here we're going to go inside our style stay there there we are so let's go ahead and do a flex of one then we're going to do a display of flex for these spans that are inside then what we'll do is we'll align those items by setting the flex to one over here what we've done is now these items are stretching across the screen but the text is not displayed in the center so that text that we're using is a span so we're going to use is another display flex which will then tell its children item to align and then what we'll do for this over here is we're just going to set a few more flex properties so let's go ahead and set the align items so align items will be set to center i need that comma over there so save that align item center let that reload won't really see anything change just yet so then what we need to do is justify the content so that it is also center so we're going to have our vertical over here which you couldn't see before and then our horizontal once we make these things bigger so you should be able to see our horizontal justifying so that now the text is horizontally justified so it's in the center so now we can do a little bit more so let's go ahead and set the color so our color actually our color is being set almost properly but we need to get the actual color value over here for our text so we're going to do color like so and then we can use the item dot uh what was that that was text color we'll go set our text color over here and get rid of this we don't quite need that so now we're getting default black colors for these ones and white colors for these ones then let's go ahead and set the height because we want to see that vertical alignment we want it to look like our other one over here which had this nice vertical alignment at the bottom taking up the rest of the screen remember we set a vertical um vertical height before for our viewport so we're going to do that again we set it to 90 for the map so we're going to set this one to 10 to just make everything even now we go back that will be larger there you go text is kind of small so let's go make that text a little bit more readable or set to let's set a little bit of styling on there um let's make that font that font weight folder and then let's also set the font size to be 1.5 em oh need to put quotes around that there we go so we got some quotes all right so our font weight is bolder and our font size 1.5 it should look pretty much like this one i think yep pretty close pretty close so this looks pretty nice over here we're zoomed in a little bit we can zoom out zoom in you can see the things change but that's looking really really really nice so far we're just have one more step to go and that's the color of the map let's take a look at our diagram over here so in our diagram what we're going to be doing is we need to go to our load countries tasks and modify it so that when it gets the coven data and the map data that it actually sets the color we don't want to do that work in the components because their only real job is to display information we don't want them doing too much work this would go beyond the single responsibility principle where components should try and do one thing or classes should try and do one thing we're going to let the load countries task who's an expert at getting data to put this information into the data that we're going to be using to show on our components do this by going to our load countries task so go to tasks load countries task and then what we're going to do is when we're looping through our countries in the process covet data is we're going to execute another method that's going to go ahead and set the color so at the very end of your for loop this code is a little bit getting a little bit big but instead of adding more code inside here what we're going to do is at the end of the for loop is we're going to set the color country so over here we'll call this dot set country color and this method doesn't exist yet because we haven't created it and we're going to give it the map country and then down over here below or just above format number we can go ahead and create that function and we're going to call it set country color as we have above and it's going to be equal to an arrow function and it's going to take in the map country then inside the body of that we're going to go ahead and set the color so first off is we need those legends let's go up over here let's do an import we're going to do import for legend items from we need to go up a directory then into the entities and then get those legend items because remember the directory in his task right now so that's why you go dot dot brings it back up to src then down into entities and then get that object so there we are we save that over there then in the set color country this is where we can start to do our magic we have the confirmed cases remember on the map country we say properties dot confirmed so we got that number so that's why we created that number and added that number there because we could use it now what we're going to do is we're going to say const we're going to look for a legend item that's for this country so we're going to go legend items dot find so we're going to find the first match that takes in an arrow function and we're going to give it the item instead of calling it item we could call it the legend item and then the legend item we're gonna ask a simple question we're gonna say legend item is it for this map entry dot properties dot confirmed cases is it for that that's the question we're going to ask and it's going to give back an answer so for each one of these we're going to find the first one that says yep i'm the legend item and i represent that particular number of cases so then if that legend item does not equal null then what we can do is we can return or not return what we can do is we can say country dot properties so my map countries dot properties color now we're gonna be sending that color is equal to the legend item dot color so the legend item will give us the color if we go back into our covered map over here uh when we have our function on each feature on each country over here you'll see that one of the things that we did is we said country.properties.color so back in our load task we just set that value so if we go back to our map there we are this is our map with all the colors filled in for the various countries showing the numbers all we had to do was set this property over here if i get rid of that code that we just wrote put it back all the countries go back to being the color black go back over here uncomment that code go back and we just asked each legend item hey do you represent that color somebody said yes and then we set the color for that country now we have this choropleth map over here showing the various covid 19 cases across the world created with react leaflet papa parse to map that data from covid following this well architected application the nice thing about this is that when you look at these components for example you take a look at our kovic component it's pretty small it doesn't have much information it just has a load method which asks the load countries task to do something then we have our covid we have our loading if we have no data we have our coveted map to display the countries and if we look at the covid map it's actually pretty small like there's not a lot of code inside here at most we have our on each country over here which is on each feature and all it's doing is setting properties it's not doing any computations or anything then we have our legend our legend pretty small too there's a lot of html for flexbox but i mean there's no logic inside here all we do is ask our legend item in each item for its title for its text color and not not much beyond that our loading is actually really simple too and our legend items legend item we have a clear structure of what it looks like legend items as well we help define this data structure and then our task arguably could be one of our larger objects and perhaps we can do a little bit of refactoring here but i think it does a really great job end of the day you end up with a solution that looks like this using this setup and this data structure one last thing that we can do with our map over here as you can see we use these different shades of red but based on the way that we set this project up we could actually go ahead and change all these colors so check this out this actually is kind of cool we could go purple blue orange yellow green why not and then we can leave that one as white come back to our map and because our legend and our map are in sync with each other we get these different colors and let's also maybe change that white one as well over here we'll just say pink yeah that looks perfect check it out because we build our legend and our map in um together they both are aware of the colors our map is getting the colors from the legend so therefore they're always going to be the same the places with 500 to 999 will be marked over here as blue on the map anything that's purple will be these colors so it's kind of neat how the two work together and the end of the day you can do some really interesting stuff with the colors if you want to and customize it to however you want that map to look if you enjoyed my tutorial please subscribe like and share [Music] [Applause] [Music] you

Channel: Coding With Adam

Views: 10,618

Keywords: covid-19, covid-19 map, leaflet covid-19, leaflet covid, react leaflet, leaflet, geojson, bootstrap, covid-19 react leaflet, papa parse, papa parse 5, javascript, complete tutorial, detail explanation, boostrap, bootstrap loading, architecture, js, javscript react, create covid-map javasscript

Id: 4cliojOu3as

Length: 90min 12sec (5412 seconds)

Published: Sat Sep 12 2020

Reddit Comments

[u/pticjagripa]

You should do infections per 100.000 per people to get accurate map since smaller countries will have less infections.