React-Leaflet demo

hey how's it going everyone its Leigh Halladay and today we're going to learn how to build a map in react using leaflet j/s leaflet j/s is an open source mapping library that takes the OpenStreetMap data underneath so it's all sort of open source which is really cool you don't need to create user names and accounts and enter your credit card and all of that to get some pretty cool interactive maps up and running but leaflet j/s on its own doesn't really work great in react for that we have react leaflet a package that's going to help us interact with leaflet but using components and in different things like that and what we're going to do in react leaflet is basically take some data I've got the skateparks from Ottawa the capital of Canada where I'm from and we're gonna map those skate parks showing all the markers where they are and when you click one of the markers will will show a pop-up that's displayed and then we're gonna switch gears for a little bit and show how to display some remote data onto our map coming from an API endpoint so I've got a create react app that's just showing this this word map right now that we're going to add to and there's a couple things you need to do to get up and running with react leaflet after installing the package of course we need to do a couple things the first is in our index file or wherever you can sort of insert some HTML and do your react app we need to add a link that we'll go and load the leaflet CSS I suppose you could also always like go and grab this and just pop this into the app yourself but you can link to it this way after you've done that we need to set some default styling otherwise it's not gonna really know how big to make our map so our map it's going to be a hundred percent width and a hundred VH height so it sort of takes up the whole screen and after that we're basically ready to start building our our map Hey are you tired of recreate and bugsy your react apps if so click on any of the links in the top right of this video to get a free trial of log rocket log rocket is a react monitoring solution that helps you track redux they automatically surface JavaScript errors and monitor slow Network requests in component lo times enjoy the rest of the video so what we can do is come into this app component and replace this div that I had as a placeholder and add map here and that's almost it to get up and running but you'll see that it's all gray so this may trip you up a little bit and I've pasted what we need here cuz this isn't really something you need to memorize it's just we need to give correct attribution to OpenStreetMap otherwise it's not gonna really want to show us any map data so as soon as we place this tile layer in here we should start to see a map all right and we got our first air which is good because we can fix that so I don't know why it's not always showing up by air we go set map Center and zoom first all right so what we need to do next is we need to basically tell the map where to begin we need to give it an array of latitude and longitude so because we're showing data in Ottawa Ontario I'm going to grab the latitude and longitude for Ottawa and it's not liking there we go so we got that for latitude we got that for longitude and we need to set a zoom so how far into the map should it be zoomed when it first loads so after we do that we should come back and see that voila it's now showing Ottawa the maps working so in just a few minutes and it not very much code we have a map showing up and it's time to add some markers and some data to this map so the data I have to work with is in it stored in a local JSON file for now later I'll show how to grab data remotely and display that on your map it's actually not too different um just where do you load your data from but I thought I'd show it both ways because it's a question that sometimes comes up when I'm showing map demos so this data it's got an array of what they call features that's each of the skateboard parks and in the skateboard park we have each of their coordinates and some information like the park ID a description flat asphalt surface five components not a react component like a ramp or a mini pipe or something like that so I've already loaded this data in via an import import star has parked data from this local file so we can come in here and just map through the data and show a marker for each of those skate parks so we've got Park data dot features and then we want to map each of the features so this is a park and for each of the parks what we want to do is show a component that is called a marker just like that so anytime your mapping data this has nothing to do with leaflet but you need to give a key so that react can distinguish between different different skate parks as it's showing the components for those so each of our parks if we look at properties we have a park ID so properties park ID so we got a key and now we need the position so a position is an array latitude longitude again and if we look for our skate park in geometry we have coordinates unfortunately they're in the reverse order in this data so we just need to swap those around so geometry dot coordinates okay so park geometry coordinates and we want the second one first and then we want the first one second swap those around so we get them in the right order so if we come back to our map we are now displaying markers for all of the skate parks we can zoom out we can see them all here looking nice next thing up I want to basically allow us to click one of these markers and have it pop up a pop-up that shows some data about that skate park so you can do this really easily in leaflet by sort of just embedding a pop-up within the marker I'm gonna approach it a little bit differently and it's more of sort of the react way where I'm going to to capture and state the park that you wanted to open and I'm gonna control it that way you don't have to but I prefer this way since we're working in react anyways so the first thing I'll do is I will get some state setup so we'll just call it the active park and set active Park and this will come from the use state hook and will default that to null because you haven't clicked a park yet so how do we know when you click a park well leaflet on the marker component gives you an on click event that you can listen to so that will when this event occurs it will call this function and inside the function we can call set active Park and because we're mapping the parks we can pass that in here so now we know which Park has been set as active next up is we need to check if there's an active Park and if there is she will pop up on the map so we will do active Park and and so basically check if this is true thee first and if it is good of the second and we want to show a pop-up so pop up much like a marker needs to know its position so I'm just gonna copy and paste that and it's not Park anymore it's active Park and with a pop up we can actually put HTML inside of it so whatever we want to show up in that little bubble that's gonna pop up so I'll wrap a div around it I don't know if that's strictly necessary but since we're working with HTML I like to do that and we'll pop an h2 in there so we come look at our data again we've got properties dot name so that makes sense to show us the h2 so active Park dot properties dot name oops close that curly brace and let's put a paragraph as well that's going to show the description so active parked up properties dot description I don't know why this data didn't want to go past this many characters so it is what it is so description okay so we come back here and we click it now and we get information about the park and if I click another one it doesn't work so basically we can only click one which is not very useful the the reason that's happening is because when I closed it it was sort of closing just the leaflet event and it wasn't tied into this state that we're tracking so what we need to do is actually add a new event listener which would be on clothes leave its on clothes if not we'll figure that out shortly and we need to actually listen for when that closed event occurs and we need to set our active Park back to null so let's see if that was the correct one open it close it open it oh yeah oh yeah okay so we've got pop-ups opening and closing fine next thing I want to do is let's customize this icon that's showing up we only have one type of data we could be mapping many different types of markers and you might want to show different icons for each of them or if you just want to stylize your map a little bit hey it's me again do you hate wasting time we creating bugs in your apps if so click on any of the links in the top right of this video to get a free trial of log rocket log rocket is a front-end application monitoring solution that helps you debug issues faster identify performance problems and create better user experiences enjoy the rest of the video I've got this little uh what you can't see it it's a SVG but you'll see it's a little skater and we're gonna use that as the marker the icon instead so to use custom icons we actually have to import something from the leaflet package not the react leaflet one and we want the icon so what we'll do is we'll create a new instance of that so new icon and we need to pass a couple properties to this so the first one is the icon URL where to load that from so because we're in create react app and this image is in our public folder we can just do skateboarding SVG and it will load it fine for us and next we want to set how big this is so I believe is 25 25 that would probably be width and height and array in pixels so once we have our skater icon set up we can come down to marker and we can set the icon to be the skater oh nice so now we get this little skater showing up instead of a bore and very boring blue icon and it works the same it on click we set the state so that it shows the marker we're listening to the clothes so it closes down and everything's great we basically in I don't know whatever that is 10 15 minutes are showing a map showing markers on the map listening to events and showing pop-ups when those events occur and it wasn't too bad so don't get mad but I am going to delete most of this because we're gonna switch modes for a bit and don't worry I am going to share the completed version of this in source code below so you can always get that version of it but I wanted to switch and show how to show remote data on our map so for that I'm not going to do a custom icon we'll get rid of that but I'm gonna use a package called SWR which is stale while revalidate from the folks at site and it is a cool hook that allows us to load data remotely and it handles sort of showing a cached version what's going andrey fetching the new version and a ton of other features that we won't have time to cover in this video but it's just an easy library to load data with hooks in react so what data are we going to display the UK police have a list of sort of all crimes that occur in with coordinates latitude and longitude so these are crimes that occurred near this location in the month of October so we're gonna map them and we can see here we got some anti-social behavior some below there's like drugs bicycle theft all sorts of bad stuff but we want to show them on the map so I can come back and I'll put this into a variable called URL and the way SWR works is it's going to return us either data or an error using this use SWR hook and this function wants to receive two things first is a key which in our case because it's a restful endpoint the key will be the URL itself and second it wants some options and one of these options is a fetcher and what is a fetcher a fetcher we're gonna define it in a sec it's a function that receives this key and returns a promise that will resolve to some data the data that's fetched so we'll define this up here our fetcher it's gonna take in sort of any arguments we don't really care we're gonna pass them all along to the actual fetch function that comes with the browser to load sort of remote data using HTTP GET and post calls so fetch always returns a promise so we're gonna say dot then and we basically need to take this response and then convert it to JSON because that's what we actually want so now we've got our URL it's being passed to use SWR we've got our fetcher set up it's going to return us data or an error so we're going to do a couple things here we're going to create a variable called crimes and we're first gonna check that there is data and there is not an error and if those two things are true we're gonna be able to have access to the the crimes that have been returned now I tried this before and there's a there's thousands of crimes here and I was seeing that it was struggling a lot with showing that many markers all at once so we're just gonna slice out maybe the first hundred crimes we don't need all of them to display right now and if sort of either of these if there's no data or there is an error we'll go to the false and we'll just not show anything on our map so you might want to handle this a little bit differently to do a pop up or something like that but that's good enough for this demo so now that we have crimes from this point forward it's basically the same we're gonna take our crimes and map them and for each of the crimes we want to show a pop up our pop ups gonna need a key so that react can differentiate and I believe each crime as an ID so we can use that and each pop up also needs a position otherwise it won't know where to show this on the map so the position is an array which is latitude and longitude and we grab that from location latitude so crime dot location dot latitude and then crime dot location I could type dot longitude cool and we won't go into on click events and markers and stuff like that because it's the exact same as we saw with local data but what we will do is change the center because if we come back here there's nothing going on yeah where the location I had so we'll just come and we'll pick this latitude basically the first one and then this longitude and we come back oh I think I know what I did alright so I wasn't supposed to show pop-ups for each one I was supposed to show a marker for each one there we go now we got it working so now we're showing the first hundred crimes that have been loaded from this UK police endpoint and you can see that it's really no different than using data locally what matters is that you get the data however you get it and then you can just map over it and show a marker for each of them and just - so you show you sort of what starts to happen if you say Hannah a thousand markers you can see that it's sort of struggling to show it it's honestly not very useful because there's so many of them clumped together and it's really struggling to like zoom in and move around and stuff like that so I haven't dug in to see if that's react leaflet or if it's leaflet itself but it's probably not the right solution in react leaflet to show a thousand locations so you may want to sort of limit that or look into other options if you're dealing with huge huge loads of data to display so that's how to use leaflet j/s to show maps in react using the react leaflet package first things first you need to load the CSS set the set D at the size of the container it's going to be put into you can see here if I add like 50 it's only going to show the map and in 50% of the height of the viewport so you want to set that to be the size you want make sure to set your center and your zoom on the map so it knows where to position it and make sure to put your tile layer in here that provides the correct attribution to OpenStreetMap otherwise it's not gonna want to show you any mapping data and then you can go and you can add on markers and pop-ups and and different things like that customize your icons they've got a number of good examples somewhere and here examples of different things you can do the react leaf library but give it a try yeah hopefully it works great for you have a good day everyone take care bye

Channel: LogRocket

Views: 52,978

Keywords: reactjs, reactjstutorial, reacttutorial, reactleaflet, webdevelopment, learnhowtocode, webdev

Id: 290VgjkLong

Length: 19min 57sec (1197 seconds)

Published: Fri May 29 2020