Show My Location Using LeafLet, React and OpenStreet

[Music] in this tutorial we are going to implement a very simple application to show your location on the map you will see a box asking you to know your location and if you click allow the loading box is gonna disappear and your location on map is gonna show up let's go and implement this first of all create a react application round npx create react and set the name of app to my location a CD my location app let's type code dot to open vs code in this folder and then open terminal and run NPM start to start the application after creating react app it's time to installing two packages the first one is lift lid and the second one is react lift lift so let's run this click here and the plus icon and open another terminal and enter NPM install lift lid and react lift leads so in the meantime I'm going to go to the SRC folder and get rid of AB dot CSS AB dot test ojs and also the logo that SVG then open up to Jas and there is no need to this to import anymore and here let's define default language and latitude default Langley field let's set it to - one two three it's for Vancouver and default latitude let's say 848 also in the return section let's get rid of the code from here and it's time to show the map here I'm going to use map component and the map component comes from free AK leaflets from react and for map component there is a center property and it's an array the first index of array is for latitude so I just set it to latitude and the second index is for longitude default language and inside the map let's define another component is tile layer and for tile layer we have to set the URL and attribution like this if you do not set it you will get an error so just set the URL equal to HTTP tile dot OpenStreetMap dot or RG with this syntax and set the attribute to copy sign and set the copyright as you see right here okay let's close the map icon sorry close the tile layer and by closing the tile layer it's time to import higher layer at the very top next to map great let's add the style of lift lead to the index dot HTML open in the public folder index dot HTML and right before the title paste this HTTP is column slash slash unpack comm slash leaflet at this address exactly and then you are able to using leaflet in your application also open file index CSS and in the body get rid of all of this and in the code there is no code the only thing we need is leaflet container web to a hundred percent and hide to a hundred viewport height also set the zoom to like 12 as you see we have the map location and it's in the Vancouver but the point is we want to go to the current location based on the current location in the browser to make it happen the next move is gonna be installing react geo-located let's go to the console npm react - geo-located like this in the apt rjs I just check lang get to you'd by checking this third props that chords if it exists I'm going to use language you'd of it but if it doesn't exist use the default language you'd duplicate this line and change language you to latitude and don't forget to update the map center using this also inside the map I just check if there is no chords you know I want to show loading message Dave loading and set the class name loading but if the courts exist I want to show a marker marker you know it's automatically imported here from leaflet or make it from react lift lift not from them like this and in the marker there is a position and set the position exactly like the map and inside this I'm gonna show a pop-up like this and the popups comes from react leaflet and inside the popups I show you are here that's it it's time to update export default app because I'm going to use hoc higher-order component from react geo-located export default geo-located and i need to import geo-located from react geo located upstairs there was a typo in the reactor location here and by installing your okay Ted we want to set position option to enable hi occur C to false and also set timeout to 10 second it's a millisecond so I make it like this and then get rid of this and wrap this inside app you know it's just a wrapper that get app component from us and because we are using this we need to convert this functional component to class-based component extends react dot component and here we wrap create render function and move all this code inside render function this and there is a typo here it should be longitude you know like this and I just come worth with a tuple you will see here is your location and you are here

Channel: Coding with Basir

Views: 13,299

Keywords: codingwithbasir, coding, programming, tutorial, amazona, html, css, javascript, react, redux, node, express, mongodb

Id: 7N2t4zulUVE

Length: 9min 4sec (544 seconds)

Published: Mon Mar 23 2020