Map Live User Location using Leaflet.js and OpenStreetMap - JavaScript Tutorial
ฝัง
- เผยแพร่เมื่อ 30 ต.ค. 2022
- 👉 Source code: openjavascript.info/2022/12/1...
🎓 NEW: Earn a professional certificate in web development from Meta Inc. (course links in card below) 👇
⚡ Looking for high-performance, afforable web hosting? We use HostWithLove: bit.ly/3V2RM9Q ❤️
This tutorial shows you how to map the live location of a user using Leaflet.js and data from OpenStreetMap. The current user location is identified using the HTML5 Geolocation API.
#geolocation #map #live #leafletJS #openstreetmap #javascript #webdevelopment #frontend #tutorial #javascript_tutorial
🔔 Subscribe for more tutorials just like this: / @openjavascript
⚡Web development professional certificates from Meta Inc.⚡
Front-End Developer Professional Certificate: imp.i384100.net/b3dMek
Back-End Developer Professional Certificate: imp.i384100.net/gbYorg
iOS Developer Professional Certificate: imp.i384100.net/Jr7qj2
Meta Android Developer Professional Certificate: imp.i384100.net/oeYnGo
Meta Database Engineer Professional Certificate: imp.i384100.net/BX7KGB
Website: openjavascript.info
Twitter: / openjavascript
Thumbnail vector credit: map icon created by Vectors Market - Flaticon
www.flaticon.com/free-icons/map
Thanks for watching!
👉 Source code with live working example: openjavascript.info/2022/12/11/map-live-user-location-using-leaflet-js/
This was really a great great video. Thanks.
This was a great and informative video. Thank you very much!!!
Good to hear and thanks!
Very solid video, with a helpful Problem -> Solution approach.
Thanks, glad you liked it! I do like to keep the focus practical :)
Good tutorial... thanks very much
Thanks to this video now i know what leaflet js is and how i can use it. So help full and easy to understand, thank you
Great, glad you found it helpful!
Thank you for your effort and shared code.
Thank you so much it helpful in my project.
This tutorial I have been looking for; thank you.
Have you got tutorial so the user can manually point the marker to a certain place on the map then capture and save the coordinate lat/long to database?
@OpenJavaScript we all want this !
Amazing video straight to the point thank you. Could you please share something similar but with Google maps?
Thanks and glad you liked it!
And that's a great idea for a new video. I will try to get around to making a Google Maps equivalent in the near future.
nice tutorial 👍
Thank you!
thx for this video :)
You're welcome! Thanks for watching.
Can you demonstrate this in a React app? This was very straightforward and great! thank you.
Hi Chris, thanks for the suggestion, I'll try to make a maps in React video soon.
Hi, this is a great tutorial. Do you have some tutorial thats implement Leaflet with real time track with ionic 6? I'm trying to track a GPS device in real time but I'm having some problems in how identify and update markers. Could you help me?
I do not have a tutorial on that specifically, but if the problem is with the the transmitting of live data from coordinates your receiving in a Node.js backend, you might find this tutorial on sending live updates to the frontend via a web socket useful:
th-cam.com/video/MbStdet9aVk/w-d-xo.html
Adapted to this case, you'd update the markers as per this video every time an event with new coordinates is sent by the server.
If it is a different issue, let me know and I'll try my best to suggest something.
my head exploded following this lesson, its a great tutorial tho, its just my skill isnt caught up on this. I always wanna make my own custom navigation for personal use based on OSM
that was really awesome. thank you so much. Can you also add posting something in the map? can able to view or link to other page?
Yes, that's also possible, I'm putting it on my to-do list for a new tutorial (coming soon!)
@@OpenJavaScript awesome. Thanks a lot. I will be waiting.
God bless you
could you imagine a particular way why the map isnt loading? ive tried most of the mainstream solutions like add width on the map.Could the tiles not be working ? cause the terms of usage for them are pretty unclear and it seems like u can get banned pretty easily
Hard to say without seeing your code.
However, I just uploaded a live working example with source code that you may find useful: openjavascript.info/2022/12/11/map-live-user-location-using-leaflet-js/
Is there any way to get altitude by mouse click on the map?
Technically it's definitely possible but you'll need to integrate another dataset/service to get the elevation data. And then:
map.on('click', (e) => {
// prints elevation data
})
I haven't tried solving this particular problem but you should take a look at the Leaflet plugins on their website. There should be one that you can use for elevation data.
thx
You're welcome!
Hallo.
How can I give position's altimeter?
Thanks
@}-,-'----------
Gianfranco
the geolocation i got is far from accurate. is it normal? or maybe you have a suggestion on how to get more accurate user's location? btw loved your video so much! very informative and helpful!
The accuracy depends upon the device. If it is capable of sending an accurate signal AND allows the browser access to the data, it can give a very accurate reading (e.g. accurate enough for a running app).
However, this is not always the case and then it can give quite inaccurate readings. In these cases, the 'accuracy' value should be greater, which you can use to show on the map that it is a quite inaccurate reading.
One thing you could try, though, is setting the 'enableHighAccuracy' option to 'true' when setting up gelocation tracking. This will ask the device for access to its best possible tracking. But this is not automatic and the device can decline or it may be that the device doesn't have better tracking capability. May be worth a try though.
Have another tutorial on using the Geolocation API and setting such options here: th-cam.com/video/YhvLnd0ylds/w-d-xo.html
@@OpenJavaScript ahhh i see alright i'll make sure to check that out. thanks for the fast reply!!
hello sir how can we increase the time to get the lat and long value faster, tks
The only way you can get the information faster is to set the accuracy property in the options object to false for low accuracy. I cover how to do this in this HTML5 Geolocation API tutorial: th-cam.com/video/YhvLnd0ylds/w-d-xo.html
If you want it to START quicker in the first place, this isn't possible. You need the user's permission to get their location and the permission interface for this is triggered by the browser.
@@OpenJavaScript thank for your response i'm very appreciate it
Is this free to use??
why i have some like multiple earth view when i zoom out as much as possible
I don't know for sure because I wasn't involved in creating it. But I'm pretty sure it is so that, if someone goes to the edge of the map, they do not end up 'out of bounds'.
If it is something you want to prevent in your own project, you might be able to limited min zoom value.
@@OpenJavaScript i will send the picture when i get home for more detail
@@OpenJavaScript drive.google.com/drive/folders/1fsUPWW20uHfd47SLdG1GlKkeIsPrHt4p?usp=share_link
here you go
@@nov12th64 My best guess would be some border-radius in the CSS
@@OpenJavaScript idk man : (
how can i do it in a html notepad only?
The editor you use to write code doesn't make a difference to how it's interpreted by the browser (as text). So you can write the same code here in a different editor and it will work just the same.
In case you need help to get the code running, you might want to check out the live working version with source code that I've posted on my website:
openjavascript.info/2022/12/11/map-live-user-location-using-leaflet-js/
Sir apne budget set ke bare hi batya kuch cezay
what
no NPM, no vue, react or angular, using "var", i thought i was looking at a 15 year old vidéo, nobody should code like this anymore, no inline functions, and why use "pos" for a position ? why not just call it "position" ? it's not going to make the code any slower, or bigger, as you should package it anyway, you might have good reason to do all this, but it's certainly not a good example. oh and obviously there is a bug, you cannot create the marker in the success function as it will be called repeatedly, the "solution" of removing the marker isn't optimal, you should just update it's position, ok, i finished watching, i'm sorry but that is just not good code.
How about writing your own solution
Lmao, are you okay?