Free Next.js Course: 7 / Render Mapbox

so we've gone through all that work to get auth working and the goal of that is to eventually be able to add a house into our database and get it to show up on a map so i thought why don't we pause from that quest of getting a house into our database and let's just work on getting a map showing up on the home page we won't have any data to display on the map yet but at least we'll have something visual on the screen to look at so we're going to be spending our time right now on the home page and that's in the index and right now it just says div home so the goal of this video is to get a map showing up rendering here on this home page so we're going to start by setting up two divs on the left and the right because the map is going to be over here on the right and we're going to have a list of homes up here on the left so we're going to convert this div or we're going to say it's going to class name of flex and inside of here we're going to create two other divs so one div for the left and so this will be the house list and another div over here on the right oh div n what is that div div um with the map okay once i save it it looks a lot nicer formatted so if i were to come back here house list and map it's not exactly looking great yet so we're going to come in and add a class name to this house list and we're going to say that it will have a width of half the screen and we'll put a little bit of padding in here for pb4 and i want to add one last thing some inline styling to just set the the height on this so we're going to say it's going to be a max height with a calc of 100 vh so the whole viewport height minus the height of the um of the nav which is 64 pixels and then we'll also set what to do when it overflows so when we have too many houses to fit on sort of one screen what should it do so we're going to say overflow x is going to scroll so this won't really come into play yet because we're not we don't have any content in here but that's set up and now even giving that width of 50 you can see the house list is here the maps over here on the right but why don't we also just add a class name of um width of half the screen to the map just so that they're both 50 and now we're going to replace this word map with a component map so let's uncomment out um this map import and then we'll convert this into the component self closing so it's going to be big fat error on the screen right now because we don't have a map component but that's where we're going to move into and create so this is coming from src components and then map okay so what we're going to do is uncomment a few things so why don't we just go down to this point so leave the last three commented out but everything up into that point is fine we're not going to use everything yet but it shouldn't cause any problems and the first thing we're going to create is our interface and it's so eye props and there's going to be nothing in this yet because we don't have any props yet eventually we will but we'll just set it up and we're going to export a default function called map so map is going to receive some props and those props will have a type of eye props even though there's none right now and then the goal of our function will be to return a div that contains the react mapbox map inside of it so we're going to return a div and we're going to add a class name to this and it will just be text black and also relative relative will come into play a little bit later as we position the search bar within this map so inside of this div is where we put the react map gl and it's going to be self closing actually no we'll do it on self-closing like this so we won't have anything inside of this yet but that's where we're going to iterate or map all of the houses and display them on the map we just don't have any houses to display yet so you can see that it's giving us an error it's expecting some props um it wants a width it wants a height it also wants some other things like um the access token that we set up so our goal now is basically to fill out all of the props required to get this map showing correctly you can see here though oops invalid pixel chord okay so we have some issues to deal with so the first thing we're going to do is set up a ref now we don't need this ref yet but i want to create a ref to the map itself because we're going to use that later on to get the bounding box coordinates basically what portion of the world is showing up on this map so for now we're just going to put the map into a ref so map ref is equal to the usref hook and the type of data we're going to put in here is going to be the react map itself or null because it always starts out sort of null at the beginning so we could even pass in null and then it will be set later on down here we also need some state so the way mapbox works is as you drag the map around um you have to update the state of basically what is the current latitude longitude and zoom of the map so we're going to put that into some state called viewport set viewport and that is use state and we can even give it a type so view state that we have imported from react map gl package and now let's give it some default values so we'll give it a latitude of i don't know 43 and a longitude of -79 so this is somewhere in southern ontario and canada where i am but you can put in whatever latitude longitude you want wherever you're coming from get it to show up over your city and we'll start off with a zoom of 10. so we need to come into this react map component and splat in all of the viewport objects and properties as props into this component and we need to give it a height so we're going to say that it takes up 100 percent of the container that it's in we're going to sorry width we're going to give it a height and this will be the same thing it's going to be a calc of 100 vh minus the 64 pixels for the nav so let's save this okay no error that pops up anymore but we have this no token warning so we need to pass in our token so this would be the mapbox api access token and this comes from our environment variables that we set up in one of the earlier videos so will be process.n next public underscore map box api token like this so let's refresh the page again and we have a map showing up and it's over niagara falls buffalo i guess that's where that latitude longitude is i can not drag it around yet so it's sort of stuck in that location i'm trying to drag it i'm trying to zoom it's not doing anything so the way you fix that problem of it not being able to zoom is you implement a function on viewport change so this is an event that happens every time the user tries to drag it or zoom and it gives you something called the next viewport next viewport to an arrow function so our job is basically to take this next value and update our state with it so that the map moves because the map is always showing what's inside of this viewport so we can call set viewport and give it do we have to do a dot dot i don't think so we can just put in the next viewport like that so now i come back and it allows me to drag it around it allows me to zoom in and out so it's looking good so why don't i take this react map gl and put it into our ref that we're going to use um later on so we'll say ref and this has given us the instance to an arrow function and we're going to say the map ref.current is equal to instance just like that so now whenever this initializes it stores an instance of itself in this mapref which yeah will be good for the bounding box so i wanted to set two more properties i want to set a min zoom of 5 and a max zoom of 15. you could tweak these based on what you think makes sense it just stops you from zooming in sort of too far like further than this and it also stops you from zooming out past this and the reason why is because it's going to be loading all of the homes within this bounding box so if you can zoom out to the whole world it's going to try to load the whole world's worth of data you can limit that on the back end but i just thought like this is a good zoom limit so you can set it to whatever you want so map styling next our map right now is this uh sort of light gray but because we're doing a dark theme i wanted to change the map to sort of reflect the same styling i've already set up um a style for this mapbox allows you to use others or create your own so i'm just going to paste in the one that i created but i'll in the comments below this video i will include a link so that you can create your own map box style if you want it to look a little bit different so come back here the map is now looking nice this sort of darkish bluey gray color and it allows us to zoom in and out but not too far in and out and um that's everything i wanted to cover in this video we have the map showing it's now time to move back to this ad house so we can get houses into our database so that we can eventually display them on the map so the files we worked with in this video were just two the home page to uh split the home page up into these two divs left and right and then this map component over here all right thank you let's move on

Channel: Leigh Halliday

Views: 8,126

Keywords:

Id: LNZC0Z41i58

Length: 11min 31sec (691 seconds)

Published: Mon Jul 25 2022