006 - Creating a map search web app with ReactJS

ladies and gentlemen welcome to scrub puppy Channel today we're going to be making a web app that lets you search for things and locations around you based on text and the distance this is what this looks like it's a it's a map you can search for gems around you in the city by text so if I search for UFC I only have one UFC gem here another UFC gem here if I search for MMA I have one MMA gym here if I clear it I get all my pens back and I can just filter out my distance like this if I go 10 kilometers the paint over here disappeared if I go five I only have two gym within five kilometers of me but this is a desktop web app what we're gonna do is that we're gonna implement the same thing uh but for mobile browsers because everyone uses their phone to browse the internet more than desktop these days whenever you're designing a website you should keep in mind the mobile user first instead of the desktop user unless you're working like some Enterprise app or something like that okay so this is the end result Let's uh let's get to implementing it okay let's start from the scratch opening the terminal and creating a new react project using this command create react app gem finder I'm going to show you how to implement this on the scratch if you're not familiar with it create react app is one of is the best way to uh start a react project it sets up all the dependencies in one go and you can just start coding right away your reactor app it's great to check it out I'll drop the link in the in the description this is the dependency that we're gonna need mui is a material UI this is this great Library over here provide you with ready components that you can just slap into your website they look beautiful they fit in any website they make your website have the same buttons check it out I'll drop the link in the description box as well we can use the Google Map react npm Library which gives us a map and we're gonna need in order to use that we're gonna need Google Maps API key the instructions for getting it are in this page I'll drop it in the description box you can follow the instructions to get the API key and you're also going to need the react router Dom to manage the routing between the pages in the web app okay the project is now set up let's open it okay this is our new react project it's open in uh in in a mobile webview this is the code I'm gonna first start by cleaning it up structuring the way that I'm that I want first thing I'll do is I'll grab this app function from the app.js file and I'll move it right here directly in this file and then I will get rid of the Imports because I'm putting it directly I'll get rid of all of this here's complaining about the logo that'd be not defined so I'm just going to get rid of the logo this is the page loading without a style I'm just going to get rid of all this and just replace it with the placeholder H1 element okay let's keep it like this for now and then I'm going to clean the files that I need which is this this this this this this this this this and this I don't like having a lot of files in my project that I don't use in order to get the map to work you need to you need to remove react strict mode so get rid of that open a new terminal here and start installing the dependencies the instruction for installing material UI can be found here on the installation page just follow that I'm also installing Google Map react at the same time and the reacts router Dom Library also okay I've installed all the dependencies now I need to start creating My Views let's go ahead here and create a new Javascript file called gem that will contain that will have the gem page and another one called map that will contain the map just fill these up with regular react components like here just map component that has H1 for map and here just copy the same thing go to the gym let's change it to say gym instead as a placeholder for now so we just did step three now we need to do step four which is creating the router go to index import the views that you just created so import map from dot map same thing with the gym jam now here remove everything and just set up the router do that import thereafter classes from react router dump just like this and your router will just look like this here's your map here's your gym save refresh and now see what happens now it just says map instead of saying uh whatever we had previously now if you go to gym notice the gym notice that the gym path it looks like this looks gym slash gym ID this is because the gym component requires that an ID gets popular here a parameter this is how I can manage parameters in my react router Dom Library by specifying like this in the path so what that looks like is that if I want to navigate to a gym I'll just do slash gym slash some number like 313 and then it will show Jim but if I don't put anything there the page will not load because it's the a map app and we're gonna have different games on the map what we do is that when we click on our gym you're going to take us to a page that describes that Gem and have the details about the gym and this is why there has to be a parameter that specifies the gem ID and the in the path okay so we set up the router now we can start coding and making the website actually having content okay so this is our empty page for the map I'm gonna place a uh a header here that will have the surf bar and the map right under it so let's get working on that I will need two depth one for the header one for the map so the background color for each of the thick you can tell how they look like on the uh on the webview here and when you're working on your web app it's better to separate everything in a component so I'll make a component for the header and another for the place each depth and its appropriate components and over here I'll just put the method that renders them okay first thing is the header I need to have a logo here a search bar and uh toggle buttons and a slider at least topography for the text that I'm that's going to make up the logo it here use it it's gonna say jam find it it's going to be itch next I'm gonna grab one of these text fields for material UI just grab the outline basic one throw it here too now this one will say search for a gym now I need a slider go back to material UI click on slider and just grab the sample here same thing import it place it here clean it up now I need a couple of buttons one for the recent one for search but I'm gonna I'm gonna need to put them side by side so I'm gonna create a Dev here grab my buttons from here import grab the components too I need one that is contained and one that is outlined this is gonna say reset this is gonna say search okay that's pretty much it now let's organize everything first row for the text I needed to be in the center so here's do style uh text align Center okay that's done first for the text field I want it to fill the whole thing so I'll just do Style with just 100 that did it now for the slider I want to do the same thing that I did for the buttons I want to have like a I want to make it user friendly so I'm going to also place it inside div and just put the word distance next to it so like this topography again for the text distance but I want them to be next to each other and it's not doing that so in order to do that I need to set the width for these sliders of style with let's make it 75 oops there is a type Point width there we go but I need to make them next to each other so in order to do that just go here in style and set display Flex then Flex Direction explicitly to row and then see how it looks like and then do justify content to be space between okay then also to make them on the same line aligned do align items center now it looks decent now for the buttons you need to I need them equal to be the same size and next to each other so here just add the aisle set the width to 50 here and here there you go that looks better now I need to add logos to the buttons so for that just go to material UI here search for a search icon click on it find the import text here just go back import it grab that search icon text and just over here just place it directly that looks better do the same with reset search for reset textures that's imported place it here grab the restart alt icon and just throw it here that looks better let's get rid of the pink color now let's style this let's add a background color to the whole thing so just go here do style and then background color will be ige just like that previous example in the start of the video okay cool we got everything we got the slider we got this search now let's add the map implementing the map is very easy just go to the npm page for Google Map react and here you can find the instructions for how to implement the map and here you can find an example just copy that example slap it here don't forget to also import the glass here now there are a few things missing that we need to fill up so just get rid of this for now we're gonna add it later and explain later add the key that you obtained from Google console this is the Google Maps API key This Is It For Me Now default Center and default Zoom to know what those are just go back to the sample here and here will tell you that default Center if you just follow it here you see default Center is just an object that has a lat and long uh parameters so just copy this and there you go ask for default Zoom you can see that default Zoom is just a number here so I'm just gonna put 14. now save the map is now appearing the reason is we're not setting the height explicitly so let's do that let's just set height to be 100 now it doesn't work explicitly so 80vh now this works it looks like our center location is South India cool so we got the map to work we got the map to work but my center location is not India so let's fix that let's make this map Center on my current location now uh so in order to do that you need first to add a constructive to this component like this and then here you will have a latitude and a longitude State variables just throw them there and here you need to leverage the component did mount method to get the location pal like this you're going to get the location using this this will get the location and your coordinate is specifically live to in longitude you can also get out altitude and other stuff and we can update the state variable using what you get here from the browser let's print it out in the console and see what it looks like for educational purpose there you go it's get printed here in the console you can see this is my this is the accuracy altitude altitude accuracy heading latitude longitude speed but speed and altitude is now I guess because I'm in a flat area so we got the location now we need to just recenter the map to this coordinates so you need to go back all the way down to map here and there will be a prop called Center and it will have also a lat which gonna be this date latitude and long which is going to be this State longitude now if we save and refresh the page it re-centers the map to Dubai which is my current location nice so that's that I'm gonna organize my map like this just to be consistent now let's just do the final text for getting the current location which is uh setting the pin in the map for my current location so in order to do that just go go back to material UI icons just find something that'll probably identifies the location I'll use this one copy it import it grab it go to the map here you're gonna place it like this and what you're gonna do is that you're just gonna add the props flat and you're gonna set it equal to the state variable latitude same thing with one we're gonna add this prop 2 as well so I can so you can have a color so let's save and refresh wait for it to get the location now it's re-centering to my location with the pin in there so if that is done looks great okay now the map is mostly ready it would be nice to put some data in it in order to do that we have some sample data over here for sample gems I have one two three five gyms each gem object has an ID a name and a latitude and longitude that's gonna place it on the map now you might be wondering how did you get the latitude and the longitude you just gotta go to Google Maps the real one and then uh Let's do let's for example search for gyms okay let's take that's such a great name let's take this Jam as an example you'll have to just right click on it and then you will see the latitude and longitude here so let's add it let's add it to the samples so just copy this right go over here change it to six and we'll change the name to Fat to fit gym then over here you copy click on this to copy it then here just go and paste it right here you have it we add it now we have six data points that we can play around with um and now let's put this on the map first you need to create a state variable that will hold this gem data so just go here and add a state variable called gems and it will be set to an empty array second when the component mounts set that state variable to the sample gym data that you just added so here you should do gems now go to the map and this is where the magic happens here open a function up go State gyms uh map and then for each shim in this array what you will do is you will return a component the component will just be a pen icon this would be a good one to use just copy that import it just copy it here and just do the same thing that you did before which with the with the my location pin add lattice and longitude but instead of coming from the state variable it's going to be coming from gem like this the save and refresh depends on now showing up here nice just I'll do this to change the color I'll make the color secondary and also add text to them and the text is going to be gem dot name save here it is now it's purple instead when you click on it well nothing happens but we're gonna make something happen now we need to display the name of each gem when we click on it now bear with me here for a little bit this is gonna have uh just get this is going to require some work so let's start from the top on the state variable you need to add a new state variable called selected gym ID and this is going to be null by default now go back to map on the Panthers that are already rendered you need to add a on click probe that will say when you click on the PIN it's going to set the state to the ID of the selected now here we need to open another function so here we can also again Loop through the gem but instead of rendering other pins what we'll say is that if the selected gem ID state is equal to the gym ID of what We're looping through then you will return a Dev component that has a text inside it that will say this gem name else you'll return nothing save this let's see how it goes and my balloon so this is my balloon I just need to pass the latitude and the longitude here as well but not coming from the state coming from gym very simple let's try it again now when I click on the gym the name is right above that gem but I need to set a white background because this looks too ugly so just add a white background color White Also let's set the width to 100 when I click on it there you go you're getting the name of the gem right above the pin when you click on it that's great but when I click off of it the name sticks there which is kind of annoying so I need to handle what happens when I click outside of that to do that just here on your map component handle on click and what will happen when you click outside is you will simply set the selected gem ID to null again so let's try this out click and it's not working ladies and gentlemen we discovered that this map library has an annoying problem that when you use it on a mobile view and you try to click on one of the markers it also clicks on the map itself this is why when I try to handle uh the click on the map here to do to hide the balloon it didn't work because I was click on the marker to pull off the balloon and then hide it at the same time how do I know this is because I added a console here print and you can notice that when I click on the map it also clicks on the map which is annoying so we gonna have to implement a workaround for this one workaround that I consider is to just have an x on the balloon itself to click on it to remove it but that's not really convenient to the user but ideal experience is when you click on the map the balloon disappears so let's uh so I haven't I so I have an idea to handle that and here it is I'm gonna Add a switch that tells my app that we clicked on a marker so don't just go hide it right away okay how only if the user clicks again on the map so on the second click I will hide the balloon not on the first click that was happening right now this is a workaround a hack uh there has to be a better way to do this but for the purpose of keeping this video going this is what we will do and here's how we're gonna do it so over here in the state variable out of state rival called marker collect and set it to false right save that now here when you click on the gem marker you will not select set selected gem ID to the gym ID only you'll also set marker click to True okay now here we need to do a we need to implement a click outside method that will handle the click outside marker or let's call it more appropriate yeah this is gonna go here this is gonna go here and these are the values returned by that on click function uh that we gotta handle here which We're Not Gonna use really any of them so here we'll just do two things here we're gonna say if the marker is clicked you will set selected gem ID to null and you will set marker clicked to false otherwise otherwise do nothing okay now let's try the solution out I click on it okay it's gone now I click on marker I click on the map it's gone I click on the map nothing happens I click on a marker here it is I click on another marker you have to click double click on the marker so this is the limitation with this solution is that you gotta double click on other markers okay now we got the locations we got their balloons the map is working it's beautiful now let's start implementing the search feature I'm gonna change this so that you can able to filter out the gems in here in the map with text you insert some text click search and then it filters out so let's do that first I need to add a little bit of space here between the map and the buttons so it'll look nicer so over here in here I'll just go I'll say Style and I'll just say margin bottom five or ten better I like it this is better Okay cool so back to the surf's text so go to hitter go to return and just find your text field right here and handle on change to be event equal this set State and then you're gonna add a at a state Viber called search text and you're going to set it to event Target value Okay cool so search text is going to be your state variable that contains the search text but here set it to this save now you need to implement the the action for the search button so over here is this dude on click and make it say search or handle search and then over here inside here Define handle search and here what you would do is that you would say let filtered gyms filter gem is going to be gem data right and then you're going to filter that and then here you're gonna filter G inside here you're gonna you're gonna set the rule for the filtering and the rule will be f the gem name contains the search text so G name to lowercase make sure whenever you search anything with text in any web app you always use the lower case so that you exclude any errors that relates to the case of the search and then you say include this state search text to lowercase as well so this will give you the gems that contain that substring then you can set that as the variable here set State gyms equal to filter gems now let's try it out and see what happens okay let's say anime search boom we got this only now let's say nothing surf we get everything back let's say UFC search you got the UFC Gym over here and UFC Jam all the way up here nice so that's the search text okay now let's change it so that it'll be able to filter by by distance first did you see that blue thing over there uh so we should just remove that because I don't want that back ugly background color to show up whenever this page loads so now the background is page which is much better nice so let's implement the distance filter so this is the distance filter I need to create a also a state variable for that it's called distance and it will be set by default to let's say 40. okay that's 40 kilometers and here at this we go at the slider we need to make some modifications on this so first uh there's different types of sellers offered by material UI what we have right now is a smooth slider which is unappropriate for the purpose of this map we had a slider with steps like this one over here with discrete with discrete steps so this is great let's grab this and use it and clean it up remove the things that we don't need default value is going to be this date and it's going to be we're going to replace default value by just value and we're going to say this state distance is the default is the value uh we're gonna be this we don't need well okay this is better I need around yeah 10 steps is good uh marks which for the steps and I need zero to start at zero and ends at 50 kilometers because that's what we need it's going to be five steps actually let's make it five this better okay now we have the steps if I try to drag this so if I try to drag this nothing happens this is why I because I didn't handle on change so here on change you will do you'll have two values event and value and you want to set the state distance to that value which is a number save now let's try it out now it's working okay since this is working now we can try now we get it since this is working now we gotta update our filter logic to include that as well so here I'm already filtering by the name I need to just add another condition so do and and open another bracelet braces and here it will say uh well you'll need something that get the distance between two longitude latitudes and translate this doesn't compare that what you will need is this you will need this method this method is a mathematical equation that given to latitudes and longitudes it will give you the distance between them in kilometers so just copy paste it here I don't know exactly this works I'm really bad at math I'm just gonna all I need is all like all I know is this is going to return the distance I'm gonna use that to compare so just grab this distance amplitude here and here you will use this and say the first latitude is going to be your current location latitude of course you're long dude which is a state variable as well then the gym latitude and the gym longitude and you will say that if this is smaller then the distance set by the filter so this state distance then included in the filtered result otherwise excluded so I add this here and just to organize the code let's put this put it this way okay now let's test this out see what happens if I have a filter all the way to five or actually I felt it all the way to zero but if I filter all the way to five I have two gyms Three Gems within five kilometers this gems all the way up here in the city disappeared but if I do 50 now these gems up here now let's do 20. 30. I mean 15 looks like the distance between me and over here is around 15 kilometers let's do 10. let's do five now these are gone and zero just removes them all together okay so the distance filter is working now we just need to implement the reset button instead of having to re put this all the way back here because I can click the reset button and reset everything back to its default state so for that very simple just create a method here called Breeze at all and what it will do just it will set the state of everything back to normal so gems is going to be back to gym data distance is going to be back to what was it 40 yeah and search text is going to be back to uh an empty string so save this and grab this slap it on the reset button right here so on click will be just that now let's try it out let's try doing this search reset brings it back nice let's try searching UFC within 10 kilometer search only one jump over here recent brings everything back cool but this did not update because I need to set the value for the text field so value should be this state okay now if I just try to never try that again UFC within five kilometer set reset change it back to how it was so that's how to search for the distance and how to reset everything which is great simple to implement as you can see okay so now we're going to work on the last thing to do in order to make this a fully functional map app which is to give it the ability to uh to to give each gem in this page its own dedicated page so when you click on a gym name it takes to a separate base just for that gym we can display details about the gym for example like their opening hours or whatever so but I'm gonna do it a very simple way I'm just gonna display the name of the gem in the next page the idea is to have a dedicated page for each item in the map so in order to do that uh let's use the router that we implemented earlier now we're going to see the point of that router uh First Take note that I just that made the balloons for the uh for the gym names look prettier all I had to do in order to achieve this is just I added a little bit of padding and I sent you the text here let me show you it's right um right here so what I did is that is I just added padding to it and I did added border radius to give it this little nice curve and for the text I just set text align to Center okay enough of that now let's get to the point uh I wanted what I want to do is that when you click on this I go to another page which is this one and I have the gym name display there so in order to do that let's Implement a method here called handle gym click and this will take in the gym parameter and what this will do is that it will just say window location replace and then we'll just replace the current URL with the URL of the gem details of gem.id and we just grab this and then go here in the dev and Implement on click method on click and you'll just say this is it and here you just pass the gym okay that's all you got to do here save and then now try it out click on the gym takes me to that gym but it says here undefined I made a mistake then uh what did we do oh stupid I passed Jim data instead of Jim so just past gym save now try it again okay click on the gym click on it now we we get redirected to the gym page and here you can see the gym ID has been appended to the URL okay now let's go to the gym component and hand and display the gym name over there so here I'm just gonna say jam um and then here I'll put the variable called State Gym name and here I'll need to add a Constructor this is what my Constructor looks like just take your name here and let's make it an empty string for now now we need to get the number four from the URL so in order to do that we use component did Mount and simply need to use these two lines of code to get the gym name to get the gym ID from the URL see what this does is that it gets the URL it's splits it by the Slash and then you will get an array and that array will contain uh localhost gym and four then use pop to get just the four the last item in the array so that's the first step second step um here get gem ID a second step is you cross reference using the rgm ID with the list of data that you had from earlier which we should copy over here as well so just grab this data for demo purposes in real life you won't be cop you won't be checking this array you will just be crossover sick with your cloud storage your server or your database or whatever so here we look for the items that has id4 and then this will return array that contain one item because we only have one item with the id4 and then you need to get the first item in the array this is why there's a zero here right so this is the selected gem so okay the jam object so now we need to set that to be to state so set state two select the gem it's gonna be just so sorry gym name is gonna be selected gem dot name okay now save there you go never worked now let's go back to our original map and try it from there so we can see how this thing works end to end okay let's click on tkmma click on it here you get the gamma ray let's try it again uh let's try UFC Gym click on it you get UFC gym that's it so now we finally finished work uh working on this beautiful map app it's very simple takes like 30 minutes to implement I bet you can implement it like 15 minutes if you were on your own and you didn't have to hear me talk with every step I hope you enjoyed this video If you like this video please like And subscribe and and comment ask any questions you would like to ask feel free to just ideas for future videos and if you like if you need this uh source code please check out my patreon subscribe there support the channel and you also get the full source code for this video and all the other videos hope you enjoyed this see you later in my next video bye bye

Channel: scriptpapi

Views: 8,420

Keywords: coding, programming, react, react native, iOS, firebase, map, google, web, api, key, material ui, mui

Id: 6mFaeJ4JfVM

Length: 31min 53sec (1913 seconds)

Published: Thu Jan 26 2023