React Leaflet Tutorial using GeoJSON to Create a Map - For Beginner and Intermediate Developers

today we're going to be building a map using react leaflet as you can see we have a world map and each country is a different randomly generated color every time i click the refresh button you'll see that each country gets a different randomly generated shade of red we even have zoom functionality built right in requires very little code and just works as you can see i can zoom out i can zoom in once zoomed in i can also pan across the map this map also responds to touch events so it works on your mobile device other functionality that we'll be adding is the ability to click on a country display a tooltip and show the country's name we'll even allow the user to go ahead and select a different color click on a country and change the color as you can see i can paint my map with different colors this is a little bit of fun functionality that we'll be building throughout this video before we get started if you enjoy my videos please subscribe like and share with your friends to build a map like this we're going to be using leaflet leaflet is a javascript library used to build maps this is the leaflet web page over here at leaflet.js.com as you can see as tutorials documents how to download how to use plugins a lot of information is provided over here now we could use this in our react application but it wouldn't be that easy lucky for us there's a react version of leaflet javascript library and it's called react leaflet so from here we can find documentation so if i go over here to react leaflet it's just like the leaflet site we got documentation how to use it and what this provides us let's take a look at that relationship between leaflet and react to leaflet so in this next part over here i have a diagram here we have a library called leaflet a javascript library on top of leaflet we have a library called react leaflet as you can see react leaflet is built on top of the leaflet library react leaflet provides you with components for all your leaflet functionality to further illustrate this there is an arrow that we can draw between these boxes let's go ahead and move this up over here and move this over here down moving that down right there so as we can see there's an arrow from react to leaflet to leaflet javascript that means there's a dependency from react leaflet to leaflet javascript library so react leaflet is built on top of the leaflet library providing us with those components that we spoke of and then our application in turn is going to depend on and use react leaflet react leaflet without our knowing creates an abstraction over the leaflet javascript library to provide us with components now all of these layers here are layers of abstraction for now it's good to know that the concept of abstraction provides you with easier to use code for example you can have abstraction over using a web api by providing a library that does all that boilerplate code for you in order to go ahead and build this map over here we're going to be using something called a geojson file this is basically a javascript file a json file that's going to describe our map it's going to have an array of every single country and how to draw that country and then what properties are included for example in our map over here one of the properties that we include for every single country over here is the name that when you click on that country we have the name of that country so going back over here there's a wikipedia article that i have open and yes it explains that geojson is an open standard designed for presenting simple geographical features along with their non-spatial attributes it is based on json format so right there it explains we have geographical feature along with non-spatial non-spatial attributes so looking over here here's an example of a file this json file over here has a type that says it's a feature collection and then the part that we're interested in over is over here it's the features these features over here is an array each feature is a country so this over here is a country for us whatever country this over here would be it has coordinates which is how it gets drawn on the screen now we don't need to worry about how it gets drawn but you can see this example over here with these coordinates is much more complex there's several different points and areas where it draws it and that's the information that react leaflet is going to take in and use to draw the shape of a country so any one of these countries and their shapes is going to use to draw that and that's what those coordinates represent where it goes on the screen what the shape looks like and how it gets drawn but us we don't have to worry about that react will take care of that for us and then the non-spatial properties it referred to right over here properties we can have any properties we want with any names we want so for example we have a country name we could have population data we could have the color of the country or in our example the opacity level that we're setting to make it red or not or a lighter red and that's basically what a geo json file is and we'll begin using one of these in our program let's get to coding so opening up your terminal your command prompt let's go ahead and do npx create react app and let's just call our application leaflet map now that we've created the application let's go ahead and open it up over here type in code leaflet map so we're just typing in the code and the name of the directory they want visual studio code to open it up in and here we are let's test our application out to make sure that we're in a good state so now that we got our application over here let's open up terminal you can do that by holding control and then hitting the tilde key beside the number one and that'll open up your terminal or you can go up into the menu and up in the menu over here you'll see terminal and new terminal once you have your terminal open it'll open up over here down here in the bottom and we can type npm start npm start will kick our application up open our development server and then load the application so here we are we have a blank application we got the default logo and we are in a known good state and we can start coding let's go back over to our visual studio within visual studio code over here we still have our terminal we can see our application running it's running on port 3000 let's go add another terminal so click on the plus button over here i'll add another terminal for me on mac it's set as zsh for you on windows it could be powershell or cmd so now that we're over here let's go add the dependencies that we require for this application we'll do npm install and what we're going to be installing is leaflet and react leaflet go ahead and install those dependencies there we are now that we have our dependencies working we can go back to our application over here and we can see that everything is still running as it should click refresh and everything is good so those dependencies are installed we can see them in our package.json we have react leaflet over here and then leaflet just above over there so dependencies are installed let's switch our terminal back over here back to node so that we can see if we have any compilation errors while we're developing our application we'll go ahead and create a new folder inside of src and we're going to call that folder components so over there components inside of components we're going to go ahead and create a new file call that mymap.jsx of mymap.jsx i'm using my react snippets extension here in visual studio code so i can basically just do the imports with a tiny little shortcut and then go ahead and create that class called my map once again with that shortcut cc once we've created that component over here we'll just put a div inside that div we'll put in h1 and that div will say h1 will then say my map we'll save that that will have no effect on our application because we haven't used this component yet we'll go to index or we'll go to app.js inside of app.js let's go ahead and delete all of that html what we're going to be doing and we'll also delete the logo and the css all we're left with is import react and our function over here we'll go ahead and import my map from and we're going to go into the current directory which means dot and go into components and then go into my map then inside of the return we can type my map close it off like that now if we go back to our page we have my map on the screen we can go into my map over here and we can just go ahead and just add a style real quick to match our template that we had earlier and we'll say text align and we're just gonna center that text so go back over here and now we have my map centered on the screen [Music] for the next step we're going to go ahead and get geojson data that geojson data that we're going to be getting will be coming from datahub.io and this data that we're going to be grabbing is a geojson file what's special about this geojson file is that it contains the iso country names now those are abbreviation for country names two letters and three letters i'll show you what that iso standard looks like over here so the iso standard on this wikipedia page over here is called iso 3166-1 what this is is an international standard which says that country names will be in either alpha 2 alpha 3 which means two characters three characters or a numeric digit essentially what this means is if i'm using this geo geojson file and it has all the countries using this standard and i come across some data like crime statistics or whatever for countries and they display that data using the iso standard say for two characters or three characters for country name well i can associate the data from my file to the data that's in those that statistical information that i'm grabbing from another api or database that basically means that we're using the same country name so if i was if i had united states as us and in your crime data for united states you typed out the name united states well when i searched your database for us i wouldn't find it because you're using united states and i'm using us but if we're using the same iso standard for that data then it makes it a lot easier for me to find my the data i'm looking for in your database when i go check it so this is why i'm using this particular geojson file i'll be including it in the description for this video including this geo json link over here so in order to access this if you click downloads it just kind of pops you near the bottom of the file here what you can do is you can just click on this down arrow over here or on the zip download that file and then what you need to do is inside our application over here we're going to create a new folder and we're just going to call that data and that's where we're going to be putting the data for our application with that being said over here you're able to reveal in finder or i believe in windows reveal in explorer when you click on that it's going to open up another window and then over here what we can do is we can easily drag and drop our data file into here what i'll do now is drag that file over here on another screen onto data and there we go we have countries.geojson we'll go back to our application over here our visual studio code and now that files inside of here as you can see the geo json file is just like we saw in the wikipedia article it's one object as we can see over here and that one object contains one property called type which is the type of geojson object that it is and this is a feature collection and then the other property inside here is features and features is an array each item in that array represents a country and as you can see there are three properties well there's type which is always going to be feature there's properties which is information about the country so over here we have the name of the country i'm not entirely sure why it's called admin but that is the name of the country there and then iso a3 which we just talked about it's using three character country code to represent the country if we go back to the previous article that we had open over here iso 3166 we will see that if we're looking at the country codes over here like here's the name of the countries and then here's the alpha a3 code so we can see all the country codes over there so once again if we're communicating with some other api we're talking the same language so coming back over here looking at this geo json object we also have a geometry and that's what we're going to be using to draw the object it's a polygon it's got coordinates and that's what it's going to draw on the screen it's going to draw that shape of your country for you so going back over here let's go get that data imported into our application we've added it here now what i typically do is i take this countries.geojson and i just rename it to countries.json because this will work with our import if you want to use that data then go back to my map so we're in the mymap.jsx and we're going to import that entire json object to start off with let's call this countries and we're going to import that from the data directory so we're in the component directory we need to first go up to the src directory so let's do that we're in the current folder that's what that means current folder and dot dot dot will bring us back into the src folder see you can see all the files that are in src over here there's components directory data directory then we jump into the data directory inside the data directory we grab countries.json so that gives us our countries over here now we have our countries object well how do we know that we really have that object let's do a quick little test over here let's um on component did mount over here what we can do is we can print console.log and let's print out the countries onto the screen while not the screen but onto the console so there we are we have our console.log let's take a look at that console.log so over here three dots over here inside your chrome if you're using chrome otherwise if you're using a different browser typically f12 if you're on windows to get to the developer tools otherwise go to more tools over here go to developer tools and then this is what we just printed on the screen with console.log and you can see we have all our features and all our features are available to us we have the country name we have the polygons we have the geometry so we have that information that we require for our application let's put a map on the screen step one we're going to add that css that we require so over here we're going to add the leaflet css now that's coming from the node modules folder we're going to go into leaflet dist stands for distribution and then leaflet.css that's where css will come from for the map after we've done that we can go ahead and import we're going to import map that's the main component that we want to be using from where you guessed it react leaflet we're finally using react leaflet here we go we have a map below that h1 we're going to go ahead and put that map there our screen won't change there won't be anything on it just yet first thing let's go add a style to this map that style that we're going to be adding is a height let's just get that in the right place there let's go ahead and add a height so we're going to be using the viewport the viewport height is the visible part of the screen so for the visible part of the screen we're going to use about 80 of it so we're going to set it to 80 viewport height that's what vh is and we'll put that in quotes over there like that and that's going to set it to the viewport height using about 80 percent of the screen height so there we are we have our css and we have a viewport height and now we have this a gray area on the screen we don't have a map yet but that's the next step once we add the map data and ask it to draw it two items will be required one will be the zoom so we're gonna put a zoom of two we can zoom in and zoom out but we can control that manually to say what the default value is and the second item that we're going to have there let's put that zoom in the correct place in between there and save that and the other item that we're going to require is a center so where on the map do we want to center we could center over a different country or a different area of the map for that we use an array which is like an x y position so it's got two items in it 20 and we'll put 100. still we'll just still have that gray area because we haven't added any data yet in order to get the data to show we're now going to add a new component called geojson this is where the javascript file the json file in the data folder comes into play this is where we're going to say hey leaflet go ahead and use this map over here so let's go ahead and add geojson geojson has a property called data the data property will take in a list a list of features or countries so over here we've called this countries i'm going to rename this actually to map data and then over here we can also print out map data inside geojson that we've added over here which i'm going to actually go ahead and make that a cl self-closing component we'll go map.data oh so map data and we're going to grab the features collection because remember this has a list of features on it who say geojson essentially here's a list of countries draw and display that on the screen zoom in to a level of two and then center over a position of 20 and 100 on the screen and this map will take up 80 percent of the screen so let's go back over here and now we have a map we're zoomed at a level of 2 and we're showing centering over 20 and 100 over here on this position of the map i can zoom out with the map and zoom in with it can't click on any of the countries yet but if i do click double click it just zooms in so so far we've added a map we're using that geojson data and all of these properties make to come together to build a map for us that automatically has zoom let's style the map so as you can see our map has a gray background the countries are light blue with a blue border we're going to focus on that gray background how do we change that color well as you saw earlier our code over here on the map we do have a style but we can't change the color there because the background color is actually coming from a css class now that css class is defined in leaflet.css to override that we can simply put a new css file that comes after leaflet.css so what we go over here is we want to import a css file but we don't have one yet so let's go over here to our components go to new file we'll create a mymap.css and then inside our jsx file we're going to say in the current folder go ahead and say mymap.css and import that now over here in order to override that class we need to know which class it is well the class that we need to override is leaflet dash container and leaflet dash container we want to set the background color we'll go ahead and set that to the color white and we have a map now with a white background if we wanted to you could go ahead and use a different color say green can get some really interesting effects on your map the reason we're getting this effect is because there is some transparency set on these borders and on these countries so the green color seeping through into the country giving this really unique effect you could even go ahead and change the background to a really light color blue to simulate the ocean we've changed the color over here and let's go back and change that to white now that we have a white background over here we can focus in on the countries and changing the country colors so let's go ahead and see how we can change these colors going back to our mymap.jsx file over here we're going to be setting some styles not on the map because the map affects the map itself but not the individual countries that are being drawn to the screen to do that we need to set some styling on the geo json the geo json object allows us to set a style now we're not going to inline our style like we did over here with the map this one only has one so it's not too bad but we're going to do a few styles we're going to change the border the country color and a few other properties we're going to play with so to make that code more manageable we'll create a variable we'll call it this dot country style and this dot country style if we go ahead and copy that we'll just define a variable over here and that variable will be equal to an object that object will have various properties on it oh and down over here just a little typo i added an extra brace right there so there you go this dot country style we have it right there and there's no error now let's go ahead and play with a few of those properties so our code is still running we're in a good state let's go play with a few of these colors okay so we have one called fill color so fill color let's go ahead and set that to red the fill color will set the country color over here we have the country color it's not quite a red it almost looks like red it's kind of a pink the reason for this is the level of transparency if you're full lee opaque that means you're not transparent let's play with that as well so the fill color is red and it's showing up as a pink at the moment well the reason for that is the fill opacity so over here we're going to set that to 1. i'll explain how that works over here you're gonna see now the countries are fully red they're not transparent at all map looks kind of interesting with those blue borders but it's a red color right now and that red color is fully transparent now what number can i put here could i put 100 i mean that would still make it look really red but it doesn't change it the number stays the same well that's because the fill opacity over here is a number between between 0 and 1. well what numbers are between 0 and 1 well 0.1 0.2 0.3 you get the idea so when you're one you're fully opaque you're not transparent if we change the number to 0.1 and we save that and let the screen refresh we'll see that it's a really really light shade of red if we put the number one over here then we're solid as we saw earlier but if we put the number 0.5 we're something in between red and the color that's the background currently which is white so those are fun numbers you can play with and then for our example we can just leave that as one over there and that would be our map over here not as nice looking so we need to change those border colors it's really polarizing with this blue over here so to change the border color we can set the color set the color let's set the color to black and see how that looks much nicer with the color black now this looks like a much more appropriate map it looks way nicer it's got these really nice borders how about what if we wanted to make these lines thicker between between those borders there well we could play with something called weight and we could set the weight to 2 and see what happens oh so those lines are thicker that means the weight that was already set earlier was actually a larger number and now we've made these lines thinner compared to before for fun we could also play with something called a dash array and we can set the dash array to a number as well if we set the dash array to 1 it looks pretty normal if you set the dash array to 5 you'll see that we get now dashes over here and you can play with those numbers and adjust them to make this map look however you want for now i'm going to remove the dash array i'm going to leave the weight as 2 as that actually looks pretty good so these are the various ways so far that you can style your map at the country level the map level and then through the css file if we were to remove the css file just to show you what that does you're going to rem you're going to lose that zoom button over here the map will take up more of the screen you can see that it's now intruding upon other areas and it kind of covers it kind of a neat effect it doesn't stay inside its viewport really and then if we put that back you'll see why and that's why we need the leaflet css is to make it a little bit easier to manage our css and keep it on the screen properly next we're going to talk about how we can add a pop-up to each country like we had in the demonstration at the beginning in order to do this we're going to hook into event called on each feature on each feature is a property or event that gets fired whenever it's drawing a country on the screen so over here on the geo json object there's going to be a property that we can add as we know our geojson takes in our data and then it uses that list of features or that array of features to draw all our countries on the screen so over here on the geojson we can add on each feature like that so on each feature is going to be equal to a function we're going to call that function on each entry instead of on each feature because the data that we're working with is actually a country and that makes it a little bit easier to visualize so up here above on each country is going to be equal to an arrow function now what this takes in is a feature and a layer that feature as i said is our javascript object that represents the country so i'm going to call it country and then we'll just create our arrow function over here so it's taking in a country and it's taking in a layer and as you recall we'll take a look at the structure of this object what's going to happen now is every single time it draws a country it's going to print out the country object over here then we'll take a look at that on the console so once again to open your console click on the three dots go to more tools then go to developer tools and here we've printed out all these objects so each one of these objects will present everything that's been drawn on the screen so australia over here will be an object somewhere over here now these objects have as we talked about earlier the geojson each object has a geometry which is how to draw it and properties and the properties have a country name and the iso a3 three-letter character abbreviation for that country so over here we can come back go to country and as we see this structure we have properties and then property and then we have admin to get the country name so right over here let's go da properties and then dot admin save that and now we'll be printing out the country names instead of that object and then let's go ahead and take this code here clean it up just for a second and what we'll do and we're going to keep our console.log there we'll create a variable and that will be equal to const country name is equal to entry name admin and then i can use the country name below over here we're going to get the same result we've just refactored this code to make it look nicer there we are we're printing all the country names now what i'm going to do with this country name is i'm going to display a pop-up and this is going to be unbelievably easy so the layer what is that well the layer represents the thing that gets drawn on the screen it uses the country object which contains the geometry the array of points that represent this shape over here now the layer is going to represent the thing that's actually drawn on the screen so we can say layer what's been drawn on the screen and then bind pop up like that and give it the country name then by giving it the country name we're saying okay so create a pop-up and just take this text over here and display it so then when our screen's refreshed over here you can see now that when i click on these countries we get all the country names and it was that easy it hides the previous pop-up and then displays a new pop-up there are several functions and features that you can explore in the documentation but out of the box just passing in the single string like this it'll hide the previous tool tip or pop up and then display the new pop-up so we could write anything inside there right now i've just chosen to print the country name but if we wanted to we could say that maybe perhaps we have some other information um you know that we want to display over here like the population or something we could display and then we could have another variable here that maybe contains that information and maybe it comes from the country you could say country.population and then display it and do something along those lines so it doesn't have to just be the country name but it could be some additional information as we have over here so now when i'm clicking it it just says china population one thousand um united states american population one thousand so you know these numbers are inaccurate but just gives you an idea of what you eventually could do with this information over here for now we just have the country name let's explore adding a click event to the map what i mean by that is every single time we click on a country we want something to happen in our situation we're just going to try changing the color so how do we do that well once again we have this layer this layer represents the thing that's drawn on the screen so by using that we currently bound a pop-up so we have a pop-up that displays for a layer and then displays some information and for each country that's the country name now what we're going to do is we're going to add a click event over here and how do we do that well there is this property on layer called on an on takes in an object that object has properties itself and we can provide it with different properties so one of the properties i'm going to provide it with is a click event the click event will be a function more specifically it's going to be an arrow function that arrow function over here so when we say layer.on.click anytime i click on a country it's going to execute this event over here to prove that we can just put a simple log over here and we'll just put click so now if i go click on that layer which is our country it'll print out the word click we'll go back to our map over here click on a country and then over here you can see that it says click in our console and then that number will continue to increase every time i click on a country not very useful nobody will ever see that because it's in the console or the developer tools only developers will see that if they have it open to do something more useful we need to work with the event so console.log let's print out the event the layer up here so in order to access the layer we can access that through the event let's go ahead and click on this country over here now when this event over here we're printing out the event object console.log.event that event has a target and that target right there is what we can use to interact with the layer and i'll show you how that can be done so let's go back over here and we're going to grab that event and then we'll say event dot target dot set style and then set style so we're basically interacting with the layer right now and that's style that we're going to set is an object and let's start simple by adding a color green saving that going back to our map go ahead and click on a country and then we get a green outline because that color represents the border but then we want to change the inside color we're going to add a fill color the fill color we'll put yellow right there go back to our map click on it now we have a green border and a yellow color and there you go we can click on items in our map and it affects only that layer that we're clicking on as it's going event.target and then setting the style and then we can also choose to fill the opacity if we want to right now the opacity is set to 1 but if we wanted to we could change it or we could make it lighter if we chose to so we could say 0.1 come back over here go ahead and click on a country and you'll see that it's a lighter color and choose five or whatever and change those colors as you please so there you are we are changing colors and we have a click event firing this is just one example changing the colors or setting the styles but you could do many other things when the click is when a click event is recorded let's go ahead and add a mouse over event to start off let's remove the fill opacity so we have the darker yellow color again then we'll go to our click over here and just rename it to mouse over we go back to our map and i'm going to close the developer tools here if we put pass our mouse over the different layers or the different countries you'll see that it's going to change color now just by our mouse moving over it instead of clicking when we click we still get the pop-up but when we bind events using layer.on we're not just restricted to one event we can add as many as we like for example we could go ahead and also add a click event back so we'll go click click is going to take in an arrow function that takes event and we'll just open close that and put a comma over there because after the comma is our next property mouse over save it and then on click we'll say console.log and say clicked so now we have two events we have a click and a mouse over if i come back over here and we scroll over these guys you can see this is still changing color if i go back and open my developer tools we'll see that every time i click it says clicked see right there clicked we have two events occurring right now one with a mouse over where i change the color and when i click not only do i show the pop-up but i print some text over here in the console so showing you that we can have multiple events also just a developer tip over here an object like this can become really unmin unmaintainable so it would be actually much cleaner code if this code like everything here to the right of click and everything to the right of mouse over were functions that we placed within our code so it'd be much easier to read so for example we might as well do that here let's go ahead and say on click on country click you could say on country click take that entire function right there put it right over there save that and then over here say this dot on country click and the same thing can be done with the mouse over and always a good practice i've made this change i can see that everything is compiling we can come back to our code over here and just double check that it works and as you can see whenever i click we get the clicked down over here so now that i know that's working let's move to the mouse over copy all that code right up until that semicolon cut it out i know that i'm going to call it this dot on country mouse over and then up above over here on country mouse over is going to be equal to what i just cut put that there come back to our browser let it refresh and then try that out and you can see that we've written a little bit cleaner code this is much easier to read let's do a refactoring to our code so click over here invokes the this on country click method instead of calling country click i'm going to call it print message to console and we'll take print message to console and we'll just put it over here and then mouse over we're invoking this dot on country mouse over i'm going to call this change country color oh lowercase c at the beginning change country color we'll save that go back to our map over here just to confirm that it still works and as you can see we can scroll over if you're just getting into software development as well these are some good practices to you know make sure your code executes make sure everything's working as you do these changes now the reason that we did this change is i want these methods over here to not really be bound to an on click or a mouse over i could use them for either so for example i'm going to get rid of mouse over over here delete the mouse over event and we don't have to say print message to console we could instead use the change country color method over here so now our code makes sense because when i click i'm getting this event happening over here but i can also change it back to print message to console if i wanted to and it's not bound to either a mouse over or a click now there may be reasons and times when you need to do that but sometimes doing something like this making the method names a little bit more generic so that i can use it use it for either a click or an on mouse over next we're going to be exploring how to generate random country colors based on the opacity right now all our countries are red with an opacity of one for us to achieve this we're going to be using the on each country on each country we're going to go ahead and set that opacity using the layer as you recall the layer represents what is drawn on the screen so naturally we can take that layer and you can put this anywhere inside this on each country method we can take that layer which has a property called options and options gives us access to various options as you would imagine one of them being the opacity and for example if we go ahead and set that number and click save we'll see that our red will now be a lighter shade of red being a more like a pink or salmon on the screen here we'll get rid of that console there as well so we need to generate a random number now as you recall the opacity is between 0 and 1. that means all numbers between 0 and 1. that means decimal numbers not just whole numbers so 0.1 0.2 0.3 until we get to 1 and everything else in between those numbers which means we need to generate a random number so how can we do that with javascript well i'll show you over here inside our console using a little bit of javascript and what i'm going to do down over here in the console i'll clear the console out increase the size we have a function called math.random math.random is a utility function built into javascript and what it does is it generates a number between 0 and 1 which is a lot like our opacity number which is a number between zero and one so we can go back here go math dot random save it come back here we'll close that and now you can see we have a map with randomly generated colors every time i click refresh you can see that our screen changes and that each country has a different color associated with it and that's all because we're using math.random to generate a random number for fill opacity what if we don't want to use opacity but we want to use different random colors i'll show you how we can do that first we'll make an array of colors in our code over here if we scroll up to the top of our page over here underneath state we'll go ahead ahead and add color color equals and we'll add a bunch of colors in an array so this array will have green blue yellow orange and let's say gray so there we are we have a few colors over here an array we have two three four five five colors now this array we want to do with it is use it to set the color of our layer the way that we're going to do that is we're going to change what color our layer currently is right now our layers are all set to the color red so down over here we're randomly setting the opacity but we can remove the opacity by just commenting it out and say layer dot options dot fill color we'll say fill color is equal to and how do we access our ray will we use this this dot color so that's our array at the top of the screen color and what we need is a number between zero because there's five items in the array and arrays if you recall start with zero so each item we'll go 0 1 2 3 4. so those are the numbers that we need if i were to go ahead and put 0 over here go back over here you'll see that our entire map is green because the first item in the list is green if i wanted our items to be orange well that would be 0 1 2 3. go back over here to our list a pick item 3 in our color list set it as the fill color and then we will have an orange map we want this number to be random one of those numbers between zero and four to achieve that we're going to use math.random i'll show you how we do that so over here i'm going to open up the developer tools again go to developer tools more tools developer tools clear it out okay so earlier we worked with math.random math.random will return us a number between zero and one and every which is every decimal place between zero and one to achieve this we can take this number math.random and go times five now every time we do this we're getting a number that's between zero and five to make this more accurate what we can do we can say math.floor round down so floor rounds down now we get a whole number see that we're getting a whole number we're just getting a decimal before we're getting 3.2 and 1.7 now we get a number that's rounded down for example if i took math.floor and i put in 1.7 that'll round down to one 1.4 round down to one if we want to round up what you do is use math dot seal like that now 1.4 becomes 2 otherwise 1.4 becomes 1. we don't want to round up because we don't want to hitting the edge of our array our array has to be a number between 0 and four so if we get a four point two in our numbers when we're timesing by five or something like that that's going to be incorrect we need to round down always so that we're within the bounds of our array any number between zero and four so taking what we just learned over here we need a random number let's go ahead and generate that random number over here as a const and we'll say um color index is going to be equal to math.floor so we're going to round down then math.random so we're going to say times the number of items in the list so instead of hard coding that to five oops instead of hard-coding that to five we can say color dot length and they'll give us the length the number of items in the list which will be five and then we can take that color index over here and use it over here where the index number goes for the array spell that correctly so all we've done over here is generate a number between 0 and 4 and then take that number between 0 and 4 and say access one of the colors here we're going to get one of these colors and then what we're doing is on each country so every time we draw a country onto the screen we have access to the layer and then we can say hey that thing that you just drew on the screen go ahead and select one of these five colors to make it that color going back to our map we get a map that looks like this if i hit refresh the map will change there you go every time i click refresh we're getting a different set of colors for our map so this was blue now it's gray this is green and now it's gray yellow so everything just keeps changing over and over as a final step we're going to allow the user to change the color of any country that they click on right now when we click on countries they become the color yellow to allow for this or to mimic the solution that we had at the beginning i'm going to remove the code that we added for the random colors while the five random colors that we had i'm going to put back the code that we had for the fill opacity for the different shades of red that we have you can choose to continue with the other solution or mimic the solution that i have right now if i save this code over here and refresh it over here we'll see that our countries once again are the color reds and different shades so let's go ahead and add an input box here at the bottom of the map going to our render method over here below the map add an input and all we have to do is make it type equals color save that when the page refreshes we're going to have a color input here at the bottom we can change the color of this input as you can see when i pick red that input changes color i pick green that input also changes so what we'll do over here is we're going to be using a little bit of state we haven't really used any yet so color we're going to set color equal to a value when we ask this input for its color value it'll come out as a hex value a hex value instead of writing the color yellow will be represented by red green blue with a hex value a hex value looks like this it's a pound sign followed by groupings of numbers and letters so for this example over here we're going to be using ff ff00 and i'll save that we won't see a change on the screen just yet but down in our input i'm going to set the value i'm going to say value is equal to this dot state dot color then if we go back to our view over here after it refreshes you'll see that we now have the input as the color yellow so let's go ahead and try and change that value if i change the value to green it's not working it's always yellow because our state is always yellow we haven't updated the state yet we need to update the state for this value to change so let's go ahead and update that state so on input we have an event called unchange and on change we'll do this dot color change we're going to add a function called color change so just above the render method or anywhere above render or below it we can go add this method we'll add color change color change will be equal to an arrow function and that arrow function will take in an event we'll use that event in order to get the input get the value of that input and set the state so right over here we'll call this dot set state and set state we'll take in an object that we're going to be setting and we're going to be setting the color as you recall we can set only the properties that we want on the state and our state only has one property called color that color over here we will set so there we go we have our event we can say event dot target dot value so that will get us the value the hex value from the input if we go back over here make sure we save we saved now we can go select our input and on change when on change gets fired the state gets updated because the state gets updated this over here value will be set to whatever the current color is every time we change the color it updates the state therefore allowing the input value to change as you can see over here if i pick green red blue whatever it'll change the input now clicking the countries we haven't worked on that yet we haven't changed those values you can see it's still going yellow it's kind of adhering to that opacity we don't really want that opacity to change either so let's go back into our code over here and do a few of the final changes that we need for this to work going into the change color over here change country color as you recall we set up on our layer that there was a click event and that click event would call change country color well change country color over here is automatically setting the fill color to yellow that's not the color we want to use we want to use the color that comes from the state if we go this dot state dot color and you notice before that the opacity was always whatever the opacity is here so it would be a light yellow if it was that color let's say that we didn't want that and we wanted full opacity whenever we click something so it stood out more well we could set that value to one letting that value to one would not make it transparent anymore so if we go back click on this one see this one's really light it'll be a bright yellow just like we expected and now we can use our map to select different colors over here from the color picker change the colors of those countries just like we had in the intro this example now has our pop-up our different colors we're setting opacity and able to just create interesting little maps and functionality i hope you enjoyed my video please like subscribe and share [Music] you

Channel: Coding With Adam

Views: 17,293

Keywords: leaflet, leafletjs, react, reactjs, geojson, iso3, components, react leaflet, react turotial, beginner developer, intermediate developer, css, leaflet-container, change country colors, leaflet events, leaflet click react, bindpopup, react map, reactjs map, leaflet map, leaflet geojson, react components, react map components, react map component, how to make a react map, react and leaflet, react with leaflet, how geoJSON works, react leflet map, react leaflet geojson, geoJSON

Id: D4jq5Bd9bTA

Length: 62min 0sec (3720 seconds)

Published: Sat Aug 08 2020