Realtime Map : Laravel | Echo | Vuejs

hey what's up welcome everybody in this video we'll create our real-time map using Pusser and larval so let's start by creating a new project so I'm inside logon www.and the hold open up command here I'll create a new project using larval installer arrival new real-time map so in my case it already exists since I already installed it so operate is done installing city into real-time map that's open it up on code and first thing we want to do each all set of steps so I will copy the content of 30 MB and create taught in V file so I have put all database related credentials here so after you have done that we'll open up terminal and run PHP artisan key generate ok I've opened it up on PA system since PS code is cutting store so after we are on key generate command it will generate our key so next step is to set up pusher account so let's go to Chrome go to Pusser calm login to your account if not the sign-in is free then visit dashboard just go to your app create new app name your have anything and just create my app so I have created this real-time map app just click on the app you created and then go to a P step so copy all of these credentials into dot E and V file so I've just turned that app ID key secret and cluster also make the broadcast driver to pusher so actually just leave it as log until you install PSP SDK so this install required the PSP Pusser SDK so if you go to broadcasting you have to require this Pusser PHP server then only you can use that Pusser driver there so just require that after it is done installing then you can change your broadcast tribal from lock to pusher okay so next thing we'll create our event that will broadcast to Pasir PHP artisan make event I will name it send position and this command will create send position so this is the file that will be created for us so we need to add this line implements suit broadcast and we are accepting one variable location that we just defined in constructor so this variable will be passed to pusher that will be broadcasted to pusher on this channel named location the raddest name so by default it will be private channel but we'll just create public channel now we need to trigger this event somewhere so I will create a route so I'll create a route named map this will be post route which will accept this that and longitude value and this location value will be so we are we are triggering event here so when someone hits this route it will so when someone hears this route with value of position where the user is or whatever that is so it will so someone will pass us location and that location will be broadcasting to pusher and that will be then broadcasted to our front-end app which will display the location in real time so that is the work flow from our actually this route will be eating from front end just wait we'll do that in a moment so for now when someone hits this shot it will broadcast to pusher and from pusher it will be broadcasted to all other channels who are listening to this channel location channel so now that we are treating that event so let's check by manually triggering manually hitting this route so in order to to in order to check that I will use postman and by the way our project URL will be real-time mapped artists and so open up postman and this our Tollett api map with so this will be post request with these two values and send that Qwest there we go we got success and let's check our Pusser debug console so so here debug console it will if that is successfully broadcasted we should see that data here ok let's try once more yeah there we go so we got this yeah we got this data here so we are successfully broadcasting this to poozer now what we need to do is we need to pass this data to our front end client so we'll be using views yes so this data we need to pass to view J's on real time or any other front-end so it might be your mobile application it might be any other web application since we are in laravel project it which comes with fuses we just need to install the dependencies so let's first run npm install ok once these dependencies got installed we need to install larval echo so so laravel echo is just lovely - makes to subscribe to channel and listen for even broadcasters so we need to install these two Darvill ago and to Sergius so a space that wait for it to install okay once that is done we need to go to app dot yes inside resources assets yes so here you'll find some boilerplate by default so inside app dot DS you'll find some default setup so if you go to bootstrap dot yes so here everything is loading and just here down below you'll find a correlated code since we already installed that we can uncomment it so that will import echo from laravel echo so it is taking those keys from dot E and B okay after we set up echo okay so we can listen for that event location event which we are broadcasting in our panelists listen that in example component so created location is the channel name and the class name each send position okay so let's die and this event what we got so make sure to run npm run watch okay build success so now I'll go to welcome view and here first thing I will create so inside content I will dip our sorry ID app so everything inside this will be considered as few Watley's so example we need to import those compiled CSS so CSS ab dot CSS similarly we need to import our GS GS app dot yes okay we got example component parade looks huge maybe due to these CSS classes some of them can get rid of these things and this so here our treat our CSR yet content CSRF token actually okay so now we'll replace this example component with Google map and listen for that okay so let's let's trigger that API route once more okay so we can see that message here we got that in real time over here so now that we are getting data on real time we can do whatever we want with this data so in this case we want to so this update this latitude and longitude value in our map Google map so we need to integrate replace this example component or put Google map into it so for that let's go to Google so let's go to this Google map documentation this you are allowed for this on description okay let's copy this into our project so for now we'll put this inside our welcome dot plate into so here we need our API key so that key will be will cut this from here get a key we have already project so if you don't have any project that's create new and it will get you our key so let's copy our API key into which is here yeah that looks ok so now in our example component will define our deep which will be inside for now let's person put inside card body so it will be the div with ID real-time map and let's give it style right map in it and here and we need to define our data return an object and man poopy so this start map because to this map so new google map and we get shield time map okay so Center is fine Jim is fine and we need to call this map in it method after this component is loaded okay let's see how it goes okay we can see map let's make with 100% right percent would leave it all right so we got this and now we need to we need to point a marker at a certain location and then we'll draw a line which will be updated in real time so let's do that so we'll define this as a Center and this will be Center and position this Center okay we got a mark okay so this is the marker position and we'll update this as we as we receive the event so when we get received event from Pusser which certain location will update this marker so the way we do that is simple we will call our method so we got location data so we'll save that location data like data eat heart location yeah so we'll access that location variable so heat or location will give us this object all right so let's define this data to be easier for us so whenever we receive the data from post around real time we'll call this start update map which will define this method we need to define so what this method will do it just set update the position of marker we'll set the center of map set Center mooo position okay so the subject map method is just updating the position of marker so and setting the position to new okay so that's a new location - well - well and let's see everything update on real time so I'll hit Send they were so it caught updated on jail time so it would be better if we plot a line so that it will track the path so let's draw a line in map so in order to do that we need coordinates first so we'll define a new data named Cody needs so it will be the empty area for now and it will be the array opposition's so that's created so inside object map method with we have this new position method so we need to this court in needs dot push we need to push that this new location to there so so new Google Maps in that plan so new position doubt that new position dot okay so we'll push this new coordinate to their and now next we need to draw a polyline so coordinate spot new google map online we initialize that and this will be the coordinates actually we can call it line coordinates coordinates so line coordinates will have all coordinates and we are creating part of that coordinate so this all other options color of line opacity stroke wait a sec try sector okay so let's try this out let's refresh the map everything will be will reset right so now we'll send some data like first we'll send okay so you draw that line let's send some more data there we go so it keeps updating their okay so now instead of manually doing this we'll create a function that will automatically update this or at least send the request to object this corners this corner so that it will be displayed here on real time that will be really cool so I will create a method here update location this will update the location with new coordinates and this will be rendered on map so for that we need to send a request Axios post request to our slash API slash map with some new data position data silly position object will be passing position object and so follow this pass the position okay so for now we just created our random position and that will send this request to API map again let's create a button to update the location for now let's give it class button button success there we go let's check this out okay [Music] okay so now let's so it is working now let's create random position so so for now we'll create our random digit so that end so we'll create that with math dot random it will create any random digit and then we'll add this to our existing coordinate so this will be 12 point something twelve point something so a random number will creates us or digit between zero to yeah there are two one between so since our Center is ten let's see how it works who yeah actually whereas a similar thing that we haver in jail life or jail project that coordinate will be real coordinates that you'll be updating on from your back-end or from you get location from your mobile phone GPS and that you will be sending to this location so so all this will be coming from your any of the source that may be GPS or any other thing so this is the basic idea behind creating our the real-time map so if you find this video helpful please like share and please subscribe and I will see you on next video with some other cool project

Channel: WebDevMatics

Views: 14,774

Keywords: Pusher, Vuejs, Laravel, laravel echo, laravel and pusher tutorial

Id: bXfYh8fznXY

Length: 23min 15sec (1395 seconds)

Published: Tue Mar 27 2018