Map Live User Location using Leaflet.js and OpenStreetMap - JavaScript Tutorial

Подписаться 10 тыс.

Просмотров 68 тыс.

50% 1

👉 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

Опубликовано:

30 окт 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 60

@OpenJavaScript Год назад

Thanks for watching! 👉 Source code with live working example: openjavascript.info/2022/12/11/map-live-user-location-using-leaflet-js/

@user-ck1qe4pc8u 9 месяцев назад

This was really a great great video. Thanks.

@labin2213 Год назад

This was a great and informative video. Thank you very much!!!

@OpenJavaScript Год назад

Good to hear and thanks!

@Potato_Quality7 Год назад

Very solid video, with a helpful Problem -> Solution approach.

@OpenJavaScript Год назад

Thanks, glad you liked it! I do like to keep the focus practical :)

@richardemmerig536 Год назад

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

@OpenJavaScript Год назад

Great, glad you found it helpful!

@liteninkiran Год назад

Good tutorial... thanks very much

@ilovealldiy1584 3 месяца назад

Thank you for your effort and shared code.

@youtubeshorts3338 2 месяца назад

Thank you so much it helpful in my project.

@ashkanahmadi Год назад

Amazing video straight to the point thank you. Could you please share something similar but with Google maps?

@OpenJavaScript Год назад

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.

@Eurynomosek Год назад

thx for this video :)

@OpenJavaScript Год назад

You're welcome! Thanks for watching.

@RiyaGupta-mc9gb Год назад

nice tutorial 👍

@OpenJavaScript Год назад

Thank you!

@rgsma5316 Год назад

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?

@im_kgv5961 Год назад

@OpenJavaScript we all want this !

@chrissame Год назад

Can you demonstrate this in a React app? This was very straightforward and great! thank you.

@OpenJavaScript Год назад

Hi Chris, thanks for the suggestion, I'll try to make a maps in React video soon.

@rumenigg Год назад

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?

@OpenJavaScript Год назад

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-MbStdet9aVk.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.

@ballpen9157 Год назад

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?

@OpenJavaScript Год назад

Yes, that's also possible, I'm putting it on my to-do list for a new tutorial (coming soon!)

@ballpen9157 Год назад

@@OpenJavaScript awesome. Thanks a lot. I will be waiting.

@zex1ck Год назад

thx

@OpenJavaScript Год назад

You're welcome!

@Cat-sv4ti Год назад

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

@OpenJavaScript Год назад

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/

@clintonbrown4235 5 месяцев назад

God bless you

@Felevr Месяц назад

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

@nicknamenick9448 Год назад

Is there any way to get altitude by mouse click on the map?

@OpenJavaScript Год назад

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.

@Abbici Год назад

Hallo. How can I give position's altimeter? Thanks @}-,-'---------- Gianfranco

@sitinurhusna4568 Год назад

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!

@OpenJavaScript Год назад

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YhvLnd0ylds.html

@sitinurhusna4568 Год назад

@@OpenJavaScript ahhh i see alright i'll make sure to check that out. thanks for the fast reply!!

@nov12th64 Год назад

why i have some like multiple earth view when i zoom out as much as possible

@OpenJavaScript Год назад

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.

@nov12th64 Год назад

@@OpenJavaScript i will send the picture when i get home for more detail

@nov12th64 Год назад

@@OpenJavaScript drive.google.com/drive/folders/1fsUPWW20uHfd47SLdG1GlKkeIsPrHt4p?usp=share_link here you go

@OpenJavaScript Год назад

@@nov12th64 My best guess would be some border-radius in the CSS

@nov12th64 Год назад

@@OpenJavaScript idk man : (

@nov12th64 Год назад

hello sir how can we increase the time to get the lat and long value faster, tks

@OpenJavaScript Год назад

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YhvLnd0ylds.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.

@nov12th64 Год назад

@@OpenJavaScript thank for your response i'm very appreciate it

@jldesignsph8350 Год назад

how can i do it in a html notepad only?

@OpenJavaScript Год назад

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/

@fullstack-insights 19 дней назад

Is this free to use??

@gaggigaming6063 7 месяцев назад

Sir apne budget set ke bare hi batya kuch cezay

@mambo5431 6 месяцев назад

what

@nitraM321 Год назад

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.