Leaflet - Build React.js Map App

hey guys so recently I got a project which required to use a map and doing some research you know I thought that I found this leaflet JavaScript library and I thought this was going to be a good fit for my project for these Google Maps but I felt like this library is gonna have more I mean has more flexibility for what I'm trying to do with my project and also this is an open source project so I decided he worked with this one and in this video we'll just show you two examples on how to create this how to use this library because it's a JavaScript library and they have their tutorials are for JavaScript they're not for react and I did some more research and I found a package there's an NPM package for leaflet and then on another website which is react - leaflet dot J's that'll work and they have a few examples here - you it's another package we will have to install in our app and we will be actually building in this tutorial this example which has a marker on the map and then it has a pop-up on the marker whenever it click on the marker on the marker and then we will create another like another the second part of the tutorial is gonna be the markers with custom icons so we will have three markers I'm gonna be using the same icons for the markers but each of them have a separate Papa and then and that's a quick demo I have this one my app right now here so i refresh it and whenever I click on this markers I have have popping up pop out saying I'm a red leaf finally green leaf and I'm an orange Lee and basically from this example well what's gonna be different the coordinates are going to be different because it's only showing in London and this one is gonna show in Raleigh which is the capital of North Carolina in the United States and all right let's go let's go ahead and get started now I'm gonna create a new react app so here I'm gonna type in an e/m create react and I will name a leaflet react all right this is gonna take off oops so M fuse MPX so this is gonna take a wild guys and I'm just gonna fold the eating alright and now let's go ahead and install the MPM package so this NPM package the leaflet contains the CSS and react if that contains the components for this so if we go under [Music] so [Music] anyway first of all we should import the leaflet CSS that's the way this works because it's leading open so JavaScript libraries for countries well documented so basically first of all we should include the leaflet CSS oil and then the JavaScript so once we install the package we'll have a JavaScript by the CSS file and it needs to be important that's why we installed this npm and i'm using it just because so whenever we run the reactor all this CSS file is it's being compressed that's why i'm not using a CDN from here so let's install this and emu style leaflet and then we'll have to install the react leaflet package as well so here under installation like if you click on getting started from the home page and then go to the installation they have these comments and with NPM and they also have examples so the first one is a simple marker with pop-up we will be using we will follow the structure of this one but I'm gonna make some changes because there is some kind of error when we there was an error I remember they had an issue it was like a bug or something I don't know so we'll see whenever we will start building it see what Oh actually I just didn't I shouldn't do that I had to navigate a folder so what I have here I didn't go to the react folder this one I installed everything here and then I don't see what we've got so NPM install leaflet and they have few examples here I mean they have you can do so much with the slip you can have different kind of like circles markers and polygons and we have pop-ups for different you know marker and it's a pretty pretty cool of library all right this is taking well okay looks like it's done now I'm actually gonna open I'm gonna open my dears code in this folder so I have everything set up and then here I'm gonna start I'm going to open a new terminal all right and then from the terminal I'm gonna install the leaflet react I'm just gonna copy it from here paste it here and while it's installing let me actually open the public and then index.html file and I want to delete everything I have in this HTML comment all the comments and I will save it and then after that actually we will have T I'm gonna check something we will have to import the CSS in our index.js file having it here it's gonna be easier for us so let's wait for this one until getting it's done ok now let's started it's taking a while guys I'm sorry about that so it looks like it's done all right so our app is up and running I'm gonna close our demo so smaller now let's open our app actually index dot JSP let's open our not modules because here is supposed to be the CSS file we should import our app for around Littman so if we go under needs to be a leaflet package here there you go leaflet and if we open it and then in our dist they should be a little add CSS file so let's imported and import it right here import so we have leaflet slash this slash leaflet CSS okay and I'm gonna save it and close this file and then in our app.js file this is gonna this needs to be a class so I will remove everything from the app class name and then the logo here is gonna go away we have the app CSS who's gonna stay here now let's import I'll leaflet from leaflet and then let's import a shoot import also the map title layer let's check it out from here so in our examples if you click on the first one we have to import the map and all this stuff so let's do that right now I have map and then tile layer and then we have the marker and the pop-up and we want to import that from react leaflet okay now this needs to be a class so we'll have class extent component and let me import the component here as well okay return now we need the render function all right and also okay seems like down so let's copy the map and the maker so everything we have in this map from Dairy example I'm gonna copy I will actually leave a link to the description in the description of the video from where you can find this website so I copied them and paste it here and honestly I'm just kind of remove this to you class for now because we don't need it anymore okay it stays like that and we've got the position and actually there is gonna it's gonna have the coordinates so have the state also here state and then something type state number gosh it's so slow it's taking so long just to compile this library position is not the fine position is not that hard position is not that far and I guess that's because we didn't we missed something here we missed this one here we have a constant like this all right state is the phone but never use six six you know I'm just gonna comment it out for now l is fine but never use that interesting so straight we don't have to import it yet anyways it's alright let's see what we've got there so this is our app and there's an error actually this is the error I was talking about and let me just open my app CSS file and I want you delete everything from here because this map needs to have and height and I will make it like 100% I just wanted to be all over the screen so H it's gonna be a VH some reason it doesn't work this is the marker error I was talking about this and I was saying Daisy an error with this icon so I'm gonna make some changes here and in the in this script so basically I want you I'm gonna create like a custom icon so I will have more my icon and we'll have L dot icon like this and then here it's gonna be the icon URL and then we will have the icon size let's say 25 by 41 and then we will have the icon and enter which is gonna be 12.5 by 41 and we will have the pop up angel so this one is gonna be 0 by minus 41 all right and then this icon needs to be placed see right here wherever we have our marker so we have icon oops icon my icon right this take position stays the same marker like that we've got to pop up a pretty breezy css3 pop-up easily customizable all right so it's pretty much done you I was actually thinking about changing like let's save this one for now let's see what we've got it there is an error here which cannot read properly I don't know on the fine okay let's go back a little bit let me remove this from here and I want you to open this because this needs to be an icon this is the marker which is not showing up so and open it in a new tab and if I'm going to the end and this is the end of it so it's because of this extra stuff they add at the end of the purification because if I access it like this without that stuff right marker is showing up so I'm gonna copy this stuff and I will paste it I will taste it I'm gonna put this one back my icon variable and it'll paste it here where is the icon URL paste it like that and now here it's supposed to show up but for some reason doesn't show up I probably did something wrong in my probably did something I missed something here see map I import the map tile layer marker pop up from react leaflet and then leaflet and then app CSS as map so this one let me see do I have any D or any things like anything like that so it looks like DVDs not showing up here it's weird let's see where my name is well sorry about our guys it's kind of late I know I'm making so many mistakes for real okay so it's it looks like it's missing that map clause so I'm gonna add it here and my where I have my app component so have class nade equal to map you know if I go back well we see it here right it's a London I need to change the coordinates from from the state and where did she make it you know I want to change it the marker so I actually want to put it in enroll in the United States where is north carolina right here I want to add it in somewhere in this area all right and you can actually find out any any coordinates on Google Maps just click on any place you want there just click once and it's gonna show you somewhere excus gonna be a four part where it's gonna show you the coordinates so the latitude is going to be thirty five point eight four three nine six five and this is that I don't remember that guy's I just have my script ready and I'm gonna paste the longitude here too now if I go back I'd see it's somewhere in Raleigh area guess this is the point I chose I chose Dindo and previous time because it's not first time I'm trying to record this video and I have saved all this time all this coordinate sorry alright so what's next next is the tutorial with markers foldable markers with custom icons so what I want to do now is I want to save these icons on my computer okay so I'm gonna save it save image ass in my downloads save save and safe and then this is the shadow let's say that as well right they have this instructions on how to do that in JavaScript but we will do this in using react so let me just so right now I'm gonna cut it and copy the images and I paste them in my app so in our source folder let's create a new folder which is going to be assets and here I'm gonna paste my icons let's see we find an earth alright so I see them here all right and now here we will make we will do some changes let's see we want to import them so so first we should import our icons we have them here so let's import leaf green from we are already in the source so from assets slash what's that the green leaf green dot PNG and then we want to do that so let's let's output this one first we don't need this one anymore we remove it and in our I'll have the state so basically the state now in our state will have coordinates for each for each marker so let's to here let's do the one for green icon so have this like that and coordinates are gonna be in the green icon the state the zoom is gonna be by it on on its own so have green icon and then the law of days we will have another variable which is going to be green icon and you will have L dot icon and here we will have the icon URL like in the previous example but you will also have a shadow URL for it and so icon URL and here we will have the lead green and then we have the shadow shadow world and the shadow URL is leak shadow so let's import that here go sniff shop leave shadow this mixture is going to be used for every other leaf because it does have colors just shadows all right and then we have icon size we have shadow size so if we go back here we have icon size shadow size icon enter shadow enter papa enter so I'm gonna copy them from here and I will paste here like this cut off sighs okay three four six two t20 5438 95 it looks it looks alright and then in our render function we will have the way we have the position now we should have position for each icon so first it's going to be the position for green one green icon and this state dot green icon here as well for the latitude and then for logical and now wherever we have our marker the one she paste this position of icon so it seems like there's an error position is not too far in my icon all right my position let's make it the center of the map so this position is the center of map so well let's make this green icon and the zoom stays the same my own my icon needs to be green actually needs to be this because it stayed okay let's see what we've got so we have this green icon here the markers here that's good now let's add other G so so let's import them here we have two more one is for leave or the red and we have leave orange and then we have we have so we should add the state for each of these icon we have green next one is orange okay next one is red and then orange right and the coordinates for them are also different I have 35 78 I'm just gonna paste them here for the red icon and for the orange icon all right now I'm just gonna copy and paste this two more times for each Python so the next one is red and gonna be rad and then the last one is orange orange the shadow of stays the same and all these sizes stay the same of course we could do some we could optimize this college so we don't have to write all this stuff over and over again it's kind of hard to hard-code right now but this is just like a quick example for you to understand and get idea on how to use this mapping lab Cheers so now render you should have two more Const so the first the second was going to be for grad have red green icon red and then the green one is gonna be this last one is orange position orange icon orange here yeah okay and now whenever we have the maker we will have three two more makers and we will have the position red icon for the second one this is going to be red icon and then we have the one-fourth of orange let's save it and let's see so for some reason it's not working out there we go so they are here we have one here which is it takes it by default like the center of the map that's why and the zoom is so close that's why we couldn't couldn't see them and they also have pop-ups now we can change these pop-ups anytime we want with any kind of content you can say green green icon here rather icon and here's orange so now if I click this green icon orange icon and the red icon so let me actually play around with them so start from the state let's make it and then no gate so it is pretty good it's kind of ours let me try and well ten is good and that's pretty much it for this tutorial guys if you have any questions or suggestions please leave them in the comments thank you for your attention and don't forget to subscribe if you like the video please click the thumbs up and please subscribe if you want to get more tutorials like this ones any feedback is welcome please feel free to giving any kind of feedback leave them in the comments I'll leave all these resources links in the description and I'll see you guys in the next one

Channel: Vicode Media

Views: 34,059

Keywords: backend, debugging, programming, javascript, learn web development, how to code, debug, frameworks, css, learning, html, node.js, coding, frontend, learn to code, react.js, reactjs, leaflet.js, leaflet

Id: PMtXhxW6t2k

Length: 32min 40sec (1960 seconds)

Published: Sun Dec 15 2019