Mapbox - Interactive maps in React

how's it going everyone it's Lee Halladay and today what we're going to do is build a dynamic sort of interactive map in react using map box so to get started we are going to be using a library called react Map GL which is made by the team at uber and it's a pretty good wrapper sort of around the raw map box JavaScript so we can use it easily within react so I've already set up a crate react app that we're going to be using for this demo and right now it returns this nice map right like that okay so we've got that set up and the only package I've installed to do this is a package called react Map GL so once you install that you should be good to go and whenever you're working with a map you probably want to put some data on to that map so for that I've found a data set from the City of Ottawa in Ontario Canada the capital of my country and it's a nice sort of JSON file that contains every skateboard park within the City of Ottawa so if we look at the top here we've got features which is basically an array of these different skate parks and here we've got the the name of each of them sort of a description of what's there and probably most importantly we've got the latitude and longitude of of where to put this skate park on the map so to get started we will come here and we'll need to import the map that we're going to use so we'll be importing from react what is this thing again react map GL and we can give it the same name so react map GL from that so now we can replace that map with the component we just imported so we've got react map GL and we can just put markers here so that's where we're going to be putting all of the markers that we want to show up on the map so whenever we use react map GL we need to give it sort of a bunch of information about how to display this map on the screen that's both the size of it but it's also sort of where to Center the map when it loads how far to zoom into the map etc and to do that we're actually going to use some state so we're gonna be using hooks for this and we'll be using use state and we'll call all of this information that we're going to use to position the map and whatnot called the viewport so we'll say Consort and set viewport equals use state and then in here we can give it all of the initial viewport information that we need so we need the latitude and I've got open here sort of where the center of Ottawa is just using this GPS coordinates website so there's our latitude we've got our longitude which is minus 75 like that we'll say our zoom is 10 and what else do we need okay let's go with that for now and I think I'm missing something what am I missing width in height yes okay so width here you can actually use CSS sort of value so we can say 100% viewport and height will do a hundred percent sorry view width and view height like that so now whether we have sort of our initial viewport info we can pass all of that along to our rat react map component so we'll do dot dot dot viewport like this so now we'll come back here and the first thing we see is we need to give it a valid API access token so to do this demo you can create a free account on map box I've already done that I've logged in and I've created a token called Auto escape parks so I've got this token here I'm not too worried if you guys use it because it's just a free one anyway so I'm not going to get charged or anything so what I've done is I've taken that key and I've placed it in a dot end dot local file and in here is where you can put all your local environment variables and dot local is by default in the get ignore that comes with create react app so it's not going to be commit to your repository and one secret here though is that you need to give all of your environment variables they all need to start with this react underscore app underscore and then whatever the name of your token is if you do not name it with this it won't show up as available an environment variable that you can use in your app so now that we've got this here we can come back just copy this we'll come back here we'll that as a prop to our so there's a map box API token and its value will be processed at end and then the name of the environment variable so now that we do that okay so we now have our map showing up we'll drag it up doesn't zoom doesn't do anything it's just like this static map sitting here and that's because with map box you actually need to control where the maps going to move and it seems harder than it really is um you see we've set up this state viewport and we have a set viewport function we can call in map box gives us a function we can call so what is it on viewport change and that will give us the new viewport that we can then use and call set viewport viewport so every time the sort of drags or zooms or anything they're basically gonna give you a new version of all this info here and then we can take that new info and we can just call the set viewport giving it this new viewport info and that will basically cause the map to re-render because the states changed so it's sort of strange but we now have a map we can drag around and we can zoom in with like that so we got this boring map here it's not boring it's it's just the the standard one we can actually modify it to use a whole bunch of different styles that come with map box so if you go to studio matte box com you'll have like a bunch of styles you can use and you can also search them they've got map box style so they've got designer maps where people have sort of modified them in some pretty cool ways like this one here so we're gonna be using this decimal one so if we go back to the studio map box calm I've already got it in my list the way you get it in your list is you just click add this style so I've already got it so how do we use it in our app you may think you would do Sharyn use that's not it you come down here and they've got this style URL so you want to copy that so now we can come back to our map and we can say map style use this one rather than the normal one so now we have this decimal styled map still zooms in we can drag it around and whatnot and the next thing we're going to do is we're going to take all our skate parks and we're going to put them on the map so where I had markers here this will feel very much like you're used to with react we've got all of our skate parks we want to map them and for each of those skate parks we want to produce a marker that shows up so we'll import marker from this library and then we'll take our skate parks which we need to import so import star as park data from data skateboard parks dot Jason okay so we've got our Park data and if we come back here we got to go park data it out features that gives us our array and then we can map them where each of these will be a park and we want it to return a marker just like that so in our marker we can put a div or anything we want to sort of show up on the screen so we can just say skate for now and a marker just like any other time you're mapping we should give it a key so let's see if what we have for a unique value here so each one has properties and then park ID so we'll use that properties park ID but it doesn't know where to shoot it's already sort of broken viewport market or project I think what all this is saying is we haven't told it where to put this marker on the map we need to give it a latitude and a longitude so latitude is similar to 45 so if we come back to this data we've got geometry coordinates and it looks like they've got longitude first then latitude in this array so latitude will be Park dot shoot geometry dot coordinates and it would be the second one so that would be one so now I'm just going to copy that and we'll change that to longitude and that's 0 and is it going to show up now I learned something wrong park geometry dot coordinates oh I don't know guess it was working alright so Cara Lee cuz of the color actually if i zoom in here skate you can sorta see the word skate showing up but it obviously looked horrible with black text on a black map so instead of this div let's actually put a button and in this button we'll put an image so I've already found this this is SVG of a little skateboarder so we're going to be using that image here so we'll just do public skateboarding dot SVG and alt will be skatepark icon like that and I've already set up a little class we can use called marker button all it does is uh interested just removes the background and border and whatnot of the button and it sizes this image that I've got inside of it so now if I come back it is broken what is this skateboarding SV I think it's because you don't actually need that sweet so now we've got our map that's styled and we've got all of these different skateboarders showing where all the different skate parks are in the city of Ottawa cool so the next step we're gonna do is when you click one of these it's gonna pop up one of those little white pop-up areas and we are going to display the information about the skatepark that was clicked so what I'm gonna do for that is I'm gonna create some new state that will basically keep track of which of these skate parks you've clicked on so we'll say Const selected park and set selected park and we'll be using use state for this and it will just begin as null you haven't chosen any of them yet so it's no so what I want to do is I want to add an event to this I guess I could just add it to the button here so I don't on click event to the button that takes an event so we'll say we're gonna prevent whatever the default event is and then what we're going to do is we're going to call our state set selected Park and we are going to use the park that as it's sort of mapping out all of the parks it's the one attached to this specific marker so when I click this it will be for this park so let's open up our tools developer tools react oh shoot class me oops okay react so if I click one of these we should be able to see that I must have an old yeah so I can't see this yet because I'm using an old reactive tools that doesn't show hooks very well but let's figure out if it's being worked if it's working when I click this button that sets the selected Park and to do that we will come below all of these parks that were mapping out all the different markers and we'll do a little ternary operator that basically says is there a selected Park and so if this is true it will execute the second part of this it's not even a ternary it's like a shortcut if this is true it will keep doing this one and in here we can put our actual pop up we could do this as a ternary where we could say if that is true we'll do something else is no because there isn't a select one I don't know what that's saying but let's keep going okay so if there's this like to park we want to show a pop up here so we got to import the pop up pop-up now we can come down here and use it and inside we'll put a div park we'll just put for now just the word park so for this pop-up much like a marker we need to tell where on the map to show this thing so what we're going to do is we are going to have to give it the latitude and longitude and because it's very similar to this up here will be selected parked at geometry dot coordinates and latitude is the second one so index 1 and then longitude will be same thing but it's the index 0 okay so now when I click this it shows up with this nice little Park but the ex doesn't close it at all and we again we need to take control of this event and we need to update our state when somebody clicks the X to unset the selected Park so that it stops showing this pop up here before we do that why don't we just get some more useful information inside of here so instead of this a div that just says Park let's put in h2 maybe and we will do the selected Park dot properties name and maybe we'll do a paragraph below that has selected Park DUP properties dot description I have no clue why they thought they couldn't have a key that's longer than however many letters this is but that's what it is cool so now when I click one of these it's showing which skatepark I've clicked it does work if I click a different one it updates it to show the correct one but we want to get closing it working so what we can do is there should be some event that's like on because to be on close so they're gonna call this function when they triggers the on close and what we want to do is call the set selected Park and update that back to null so now when I click on this and the button it perfect it calls the clothes which closes it on the map closes the pop-up cool so I think we're almost done the only other thing I wanted to show is that it would be cool if we had an escape I'm clicking the Escape key on my keyboard be cool if it close the pop-up when we hit the Escape key so why don't we use an effect to do that so we'll do use effect and we'll put this here so here's our effect function and when do we want to trigger this we only want it to happen once so we'll use the empty the empty array and that basically it's like the component did mount sort of things so the first time this component renders it will call our effect and we only want to happen once because we want to add a maybe a key down listener on the window so we only need to attach that event listener one time so here we'll have a listener which will take in our event and then do something we'll finish that after so what we want to do is we want to say window dot addeventlistener we want to add it on key up actually key down we'll say and then we'll tell it to call this listener function whenever that happens so we don't want a sort of every key we don't care about any key except the escape so what we'll do is we'll put an if statement and e dot think it's key we can say is equal to escape so when the key is escape what we can do is we can call our set selected Park and we'll set it back to null so if there was one open it we'll set that back to null which will cause it to disappear so now when I open that and I click escape or I press escape on my keyboard it closes so that is working well so the last thing just in this effect I wanted to show is say this app component disappears so it's it stops being rendered within react and we want to clean up this event listener we no longer care about listening for the Escape key so we want to basically remove that event listener we can use the effect cleanup function to do that so we will return a function which will be called on the cleanup of this effect which in this case it's basically when the app component is unmounted so what we want to do is say window dot remove event listener and we want to remove the key down listener and specifically this listener here so that's the reason why I put this into a variable so that I could reuse this variable which references this function here both when I'm adding the listener but also when I'm removing it so I think that's basically all we need to get up and running with this map box demo and what we've done is we've gone from like a blank screen in what 15 20 minutes we have a fully styled map with all the skate parks of Ottawa showing the markers here a little custom image when you click it we are displaying a pop-up which contains the information of the skate park which was just clicked so you can click around and update the information for that and we've added a a key down listener on the window so that if I hit the Escape key on my keyboard it will trigger the set selected Park set it back to null and stop showing the pop-up so that's it for this video I hope you'd enjoyed it I hope you've enjoyed it I'm thinking of doing the same sort of one but using Google Maps next so that you can sort of choose which one you want to work with I personally really like at this map box one because I really like this react map GL library from uber they've also here got some pretty cool examples of different things you can do so they've got like a marker pop-up one which is I guess probably pretty similar to what we did but they've got other ones like locating the user where we'll ask I guess if they click this last the location and put that on the map they've got sort of on different hover things crazy going on they've got heat maps that you can overlay on top of your map so lots of cool stuff going on here I give it a try play around with it and I will link to the code in the description in the video hope you enjoyed it have a great day you

Channel: Leigh Halliday

Views: 100,586

Keywords: react, maps, mapbox, es6

Id: JJatzkPcmoI

Length: 23min 31sec (1411 seconds)

Published: Mon Apr 15 2019