Real time location tracker app on leafletjs || HTML5 geolocation || Tekson
HTML-код
- Опубликовано: 19 фев 2021
- code for this tutorial: github.com/iamtekson/Leaflet-...
1. "Web mapping and Web-GIS from Dev to Deploy 2021: GeoDjango" Get the 78% discount through this link: www.udemy.com/course/web-mapp...
2. "Introduction to Web Mapping and Web GIS 2020: GeoDjango" Get the 78% discount through this link: www.udemy.com/course/introduc...
Follow me on GitHub: github.com/iamtekson
Follow me on Twitter: / iamtekson
Thai people speak very well about Indian people. you are our teacher You guys are really good at coding. Software developers in Thailand honor you.
Man you are so good at this!
Thank you very much
Thank you!!! my code works now!!
Great! You're welcome!
Thanks for the video. Great Work!!! May God Bless You!!!
I am glad that you found it helpful😃
Tks so much Guy
Thank you very much! Great video
Glad you liked it!
Nice job, at the beginning of the videos I thought you where tracking the flash 😂😂
Your awesome bro this video just helped me so much for my radar project so the frankly thank you beacoup 👌
Glad I could help
Thank you so much! very helpful. Keep it up more tutorials to come :)
Thanks, will do!
Thanks my friend
Thank you this almost got me to where I need! I would like to allow the user to be able to freely zoom out and look around the map, but the get bounds function jumps the user back to their position every 5 seconds. What would be the best way to jump the user to their location on the first interval, but after that, allow the user to look around the map without them being bought back to their locaton?
If you don't want the user to zoom to the user position every 5 second, you should remove this like from the code:
map.fitBounds(featureGroup.getBounds())
great content
Sir please tell me . Can i use this in android studio java app. To shown offline current mobile location in mobile
Well done bro
Hi ! Very good content !
I have a little problem .. When creating the "console.log(position)" I don't get the "position function/parameter" to insert. Is this because I have done something wrong in the coding or is it because I need to download some function for this to work ?
Sometimes it happens with the syntax error. I have provided the final version of code in github, link is given in video description. Please try to compare or copy and paste to make it workable.
Sir i need to discuss a matter realted to showing location using a tracker.
What if we are using external gps tracking device which uses SIMCARD within it and want to connect it within our own Map in application...may do I know,how can we code for this.
they provide apis
@@kenyaexplorerbrother but they charge for this ?
In that case you can use node-gpsd and node-gpsd-client npm node and front-end modules hat convert GPS device coords to GeoJSON format and send them where you want. So you receive GPS device coords into front-end gpsd-cliend and send them to back-end node-gpsd where you distribute them where you want (usually to the front-end user to display it on a map).
Hello, This tutorial is very helpful! Can I ask if it is possible for tracking multiple users? Do I need to store the coordinates in the database and keep looping them to update their coordinates?
Yes, absolutely right!
Hello, were you able to implement this and if so how were you able to get different location of different users
nice
Thanks
Thank you so much. But I have one question, How to add our mobile gps to this leaflet api code?
I think you separately convert the gps data to the geojson and you can visualize using leaflet.
Hello, can you suggest me the solution for , how to show number of possible route for a single destination
Use leaflet router with router as GraphHopper.
Nice tutorial. How could I use realtime marker together with a cluster marker. in the first instant I load all the points and assemble the cluster. later through socket I need to update some points, and I can't lose the others that were not updated.
I think you can use the database to store the user locations. You can update it whenever needed. After that, you can use the leaflet-marker cluster plugin to cluster the markers. If you are confused, check the tutorial on my channel.
@@geodev I understand. On the first load it does just that... Search the database via socket all the last positions; however if I have 2000 devices and only 100 have been updated, in this case I would be forced to fetch the 2000 and re-render.
another problem is that the updates are random... each device has its own update time..
how to include direction guide like google map ie:Turn Left while user is heading towards his direction. I will appreciate you help.
I think that feature is not possible with leaflet router.
Thanks for this beautiful tutorial, pls how can I add other devices to the tracking map.
For tracking other devices, you need a database and GPS system in other devices. You can send the GPS location based on time interval from each devices and update it into database. Same data can be used to update the map.
Thank you very much sir which of your course on #Udemy can solve my issue I what to great a web app with #Django that can track customer order when a costumer wont to see his order
hi do you have any tutorial for showing some message when you already reached your destination?
please respect I'm a beginner
I don't have tutorial for it, but I think you can add the condition for the last point of your destination and add the popup message.
When I run this program in my laptop, I get the lattitude and longitude in int. But when run in mobile, it gives float and gives exact location.
This should not been happen. It might be due to some extension in your browser.
Hey,
First of all thanks for your Leaflet playlist! I am a beginner regarding programming and it helped me a lot!
The location tracker works fine and i also added circles, polygons etc.
I just don't know how to implement Geofences to e.g. notify the user when he enters a circle or rectangular.
Could you give me tips or give some reference (tutorials or sth. else) on how to add Geofences? Im working with Angular, if that plays a roll.
Thanks a lot again !
I am glad it helps you. Did you check this: stackoverflow.com/questions/57384822/leaflet-detect-when-marker-goes-into-and-out-of-a-circle?
@@geodev please, make videos about offline mapping using leaflet and openstreetmap
Nice tutorial dai
Thank yo so much.
Can you make a routing video?
I am glad you liked it. Yes give me some time. Thanks for the suggestion.
@@geodev wHEN SHOULS WE BE EXPECTING
maybe you can use neDB database or something like that to store coordinates every few seconds, than map it for each user and log on session
I have never tried neDB before. I will have a look into it. Thanks for the suggestion.
@@geodev this sounds great, try with any db, not sql though :)
Like it..!!
I'm using Firebase Realtime database for this it works well
i want to ask you after I try the code, why my location in the maps is wrong with the real my location? can you help sir?
My guess is you are trying it with your laptop and laptop doesn't have any GPS device so it takes the location of your network provider.
Hi, I try to use it in my project but I have a problem. Every 5 seconds it wants to permisson for location tracking. How can I fix it? I just want from the code ask one time and location tracking continue until the user stop.
I think something wrong with your browser. It shouldn't ask for a permission. Please go to the browser setting and allow the location permanently.
I was having the same issue. Solution for me was to remove the setInterval and replace getCurrentPosition() with watchPosition(). From mdn - The Geolocation method watchPosition() method is used to register a handler function that will be called automatically each time the position of the device changes. You can also, optionally, specify an error handling callback function.
Sir ,Which programming you are using in front end and backend
This project only contain the frontend code. It is javascript.
Hola, procura siempre visualizar tu código a mitad de pantalla, ya que si escribes código abajo, no se visualiza bien, por la barra de avances del visor del reproductor. 😎👍
Hello! I put it on my website, but I see only my location. Others can't see my locations on my website. I would like, if others can see on my website, where I'm going with my mobile phone. How can I do is? What is the problem? Thank You!
hello do you find the way to fix it finally i get the same problem
How do I get this to work on a phone? It works on desktop but not on phone, where I would want the code to be run ideally
If you give to location permission to your mobile, it should work
Hello sir .. I have embedded a tracker on the vehicle .. iwant to show the real time location of the tracker on web app using this method.. can you help/guide me.
Hi, you need to implement the database, store their location coordinates, and update it every few seconds. This video is just a prototype.
Cannot read properties of null (reading 'map') like this error showing, kindly help, i am using angular
Looks like you have import issue with angular.
Thanks for the content. I'm still new to this so am trying to figure out how best one can track multiple users at once using the same idea in the video. How could you do it? Or rather what approach should I use to have many users tracked all at once?
Thats all about the location of the users. I think for such work, you need to setup the database, store and locate the user information.
Hi ! Very good content
But how to detect marker goes inside and outside of the circle?
You can use the turfjs to build such feature. If you don't know how tuft works, have a look to my crash course: ruclips.net/video/X_2M31p5w2M/видео.html
Can i use a symbol of car instead of symbol of marker for live tracking
Defiantly you can. Further information in this video: ruclips.net/video/6mAdRdwZihc/видео.htmlsi=otZ6OvGmZHF6oSR6
In watch position () how can I set the zoom value?
The easy way to update the marker is using setLatLng method as below: marker.setLatLng(newLatLng);
Thanks, how change color or style map osm? Color the wather, park, street, etc.
Since OSM is the tile layer, it is not possible to edit the color. But there are several other options. Check them here: leaflet-extras.github.io/leaflet-providers/preview/.
@@geodev thanks, one question, What does fluency depend on when displaying the map? Do you think that using mapbox is more fluid to use osm layers? Sometimes it takes time to show mosaics, when comparing two different platforms, one with leaflet and the other with mapbox
can i get the others location using their mobile number
i cant make this work for my mobile phone. when i open the file with chrome it says nothing and there is no marker or anything, just map. when i open the file with firefox it says: "User Denied Geolocation". i dont know how to fix so can anyone help me?
btw i just open my local html file in browser. what should i do different?
It should work fine. Maybe you have something wrong with your code. You should try the same code with Laptop first.
I have a problem. A very big one at that. The results I am getting is in int. I mean lat and long are in integer and they give me cut off value. It is showing entirely different city. About 200km far away. Otherwise, it was somewhat I was looking for. Someone plz help.
Looks like problem with your browser. Please try to use different browsers like, chrome, firefox etc.
@@geodev Oh, I have Linux installed in it, and I used 3 browsers(Firefox, Edge and Chrome), but same result. It just gives Int value.
@@shashankpandey8346 did you tried with the code from GitHub link given in the video description?
@@geodev Yeah, I tried that exact code. It actually works on my phone, but doesn't on my laptop. It shows the same integer coordinates in every browser. I guess the problem is with my laptop or os.
Sorry for the bother, but the video(explanation) was great. I can use these codes for many tasks. Thank you.
@@shashankpandey8346 yes sure😃. Glad you liked it.
other desktop soft making software have more features and you can do much more than you can on mobile but the user interface in
Yes thats correct. But this tutorial is for building your own software from scratch.
Hey!
What about more users in the map?
I want create app which show point online users on the map.
This is just a prototype. You should think different option for online users.
@@geodev In fact, we can determine the coordinates and send them to the server.
And every 5-10 seconds, load server data with geo point of all online users and show them on the map.
And when the user exits, delete all tags.
Then we just get a semblance of such an application.
@@daniilpostnov yes, thats the great plan.
Can we store this updated user latitude and longitude in postgresql..
Yes we can. If you are interested to learn how to add lat. long. info to the database, checkout this video series: ruclips.net/p/PLyWyQBSWLw1OUfqcPzO6AceuGpC5gr-_n
@@geodev Thank you
Hi, i have some problem here. Currently I am using your source code to have a running. But i don't why the layer controller doesn't appear on my map. I have checked everything but still cant find the actual problem. Do you know what problem leads to this? Thanks. Your work are amazing to me.
Did you tried the same code from github? Not sure might be syntax error....
@@geodev ya, i have tried full copy and paste. But the controller still doesnt appear. >
@@Michael-oo4sm Can you check the console for error?
@@geodev If i run it on a new project, it work prefectly. But if run in my asp.net mvc project, there must be missing somethings even i create new view for it and there show no error in console too. So weird..
@@Michael-oo4sm i am afraid that I am not familiar with asp.net. there might be another issue not form the leafletjs part. Please check by yourself
Hello,
This code is not working in mine server that use http address. What is necessary to do for working in live working server.
It is simply a HTML geocoder and it should work on any server. Make sure your server is not blocking the locational information.
@@geodev It works on internal server but not working when I need to rich it from external address out of lan network.
year to see if I could give that type of tNice tutorialng a shot again. Long story short...I have depression and anxiety disorder and it hasn't been
Is it possible to track more than 1 device at a time? Thank you in advance!♥ Subscribed!
Yes it is possible. This example is for only the user device. I will post something related to real time multi device tracking concept soon. Stay tuned!
@@geodev Have you any idea when you wanna multi device tracking? i am realy interested in de follow up!
Like it with python..
Hi, I made the same process as you, but it doesn't show me anything, why is it ?
Hi, Can you check the code in github?
My sumsung galaxy A32 was stolen can you help me track it. With my IMEI number. 🙏
Sorry I can't .
good job bro, can it be applied to android applications like kodular ?
I am sorry but I am not familiar about kodular.
Like.!!!!!!
Thanks it works but is it possible to track someone else location with this?
Yes it is possible, in order to see other people's location, you need to store the locations in database.
How if i want to save my location and input it into database
hey u find the solution ?
dat escalated quickly
what if the coordinates are taken from the database ?
In that case, need to continuously update the data based on user location.
@@geodev do you have a facebook account, i want to send a message
Is it possible to integrate it in Django?
Yes it is.
this looks awesome, but how could I see how someone else is moving?
For that, you need the GPS locational position from that people.
@@geodev yes, but how can you receive that data in real time? would it be a websocket? or is there an API for that?
My opinion, If You use setInterval , Your accuracy is about 150 meters updated accidentally, when browser downloads unstabilized data yet :) I tested yesterday :) better instead of set interval is:
function error(err) {console.warn('ERROR(' + err.code + '): ' + err.message);}
var options = { enableHighAccuracy: true,timeout: 60000,maximumAge: 0};
var id = navigator.geolocation.watchPosition(getPosition, error, options);
BUT. I have a question !
when trying to pan the map it will always match "map.fitBounds (featureGroup.getBounds ());". Can this be changed? Or a button that will center the position
Thank you for the suggestion. Actually, I tried to give a basic overview of HTML Geolocation API. Please make the modification whatever you want.
For your question, "map.fitBounds (featureGroup.getBounds ());" line of code always get the bounding box of the map and sets it to the center of the map. Feel free to comment on this line so that whenever you pan the map, your map will be viewed for your particular location. Of course, you can make a button to control the fitBounds function.
I using abelton live
hello good day, can you give me a discount code to buy the udemy geodjango course
Hi Luis, which course do you want? Can you tell me the name?
Here is the geodjango course 78% discounted link: www.udemy.com/course/web-mapping-and-web-gis-from-dev-to-deploy-2021-geodjango/?couponCode=3320B3989FC40EEE367C
WHY DONT YOU TRY WATCHPOSITION FUNCTION?
I tried to make it simple. Yes, definitely, there are lots of alternatives. Thank you for suggesting the alternative.
Deus888 nah I was just too bored bc I already knew everytNice tutorialng he was talking about
Sir यो real location अर्को user ले हेर्नु पर्यो भने कसरी हेर्न
Give some information and code also..
This is the device location of the user. It can not be shared. If you want to share the location, you need to store the locational information in database and share it with the help of API.
@@geodev share the code plz sir
Bro I need your help please reply now
How can I help you?
I want to trace one mobile number real time Location
Can you help me
It's urgent
save... ( how can image-line call their software a professional DAW... when the programming belongs to kindergarden... ) Last ti I ever
miss leading thumbnail.. wish youtube had a dislike button
Hi, how can I contact you?
Hi, you can contact me on linkedin: www.linkedin.com/in/iamtekson/