GPS App in JavaScript (no API)

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

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

50% 1

In this video I'll show you how to measure a distance between two points using GPS. Actually... mobile phones nowadays use a combination of things like satellites, cell towers and wifi to get location, but you'll learn more about that in the video.
We build a web app using HTML, CSS and JavaScript. The app records the location at point A and then at point B and then it will do the calculation for you. I teach you how to measure the straight line distance between two points. For locations that are nearby this is all you need, otherwise, you should use the great circle distance instead (maybe using the Haversine formula). Learn about that one here:
• Triangulation and Tril...
We compare the distance with that measured using commercial mapping services (Bing maps: www.bing.com/maps).
How I estimated the distance without getting wet:
• Using Triangulation In...
How I measured a tree using JavaScript:
• JavaScript Triangulati...
Most recent location-aware application development course:
• Location aware mobile ...
Check the others only for the projects:
• Location aware applica...
• Location aware applica...
⭐️ TABLE OF CONTENT ️⭐️
0:00 Intro
1:33 Project setup
2:46 Accessing geolocation in JavaScript
5:55 A and B functionality
7:17 Distance between two points
11:35 Euclidean versus Great circle distance
12:25 Styling the app

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

16 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@ScriptRaccoon 2 года назад

Awesome! You are probably the only programmer who gets on a boat to test his app :D.

@Radu 2 года назад

Not sure... But I'm probably the only one who fell in the water when turning too fast to get the camera to film the next scene (saw the bloopers at the end? :-))

@danisob3633 2 года назад

@@Radu wonderful

@aldison5070 2 года назад

Vanilla Js is just awsome!

@Radu 2 года назад

It's a nice language :-)

@pesterenan 2 года назад

Yaaay congratulations on almost 10k! I'm glad I discovered your channel before that haha, hope your channel grows much more! \o/

@Radu 2 года назад

Thanks :-) 10k is insane... Can't really wrap my head around that number.

@aitorplaza2560 2 года назад

awesome as always. Congrats

@Radu 2 года назад

Thanks :-)

@eduardom800 2 года назад

That is the way a programmer thinks. Good!! (problem: ¿how to show off my new inflatable canoe?.... LOL) Thanks Radu!

@Radu 2 года назад

:-)) it's a nice one. Even Tom Scott has one: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-A6F96xSoLPg.html

@DennisPeters39 2 года назад

great video. it's always interesting to find out how you can implement such an idea without libraries. keep up the good work

@Radu 2 года назад

Yes... quite many simple things like this are nowadays done using APIs, but they are incredibly slow in comparison (I'm talking about server-side solutions where you need to contact another server to call the API). Also limiting if internet is not available... Of course, many APIs are great and many applications can't exist without them them :-)

@DennisPeters39 2 года назад

@@Radu that's right. i would be very happy to see more videos like this. you know what else i would be interested in? a video about utility functions. i watched your self driving car tutorials and found the part with the utility functions very interesting. so a video with mathematical problems that can be solved using special functions

@Radu 2 года назад

@@DennisPeters39 ok! Will try to prioritise some of the math content I have in mind!

@shadeeztv625 2 года назад

Lucky to found this channel

@Radu 2 года назад

Glad you found it useful :-)

@viswa9848 2 года назад

Great man🎉

@Radu 2 года назад

Thanks :-)

@eltacshikhsaidov 2 года назад

Great content 👍, one of the best RU-vid channel I have ever seen. Could you make video about location tracker, thanks in advance!

@Radu 2 года назад

I do have a project like that in the middle of this course: ru-vid.com/group/PLB0Tybl0UNfb7euQt0jV9evC74tnaWEwu But I might make a shorter tutorial like that one day :-)

@thehariskhan Год назад

really love it Man! enjoy coding ♥️

@Radu Год назад

Glad you like it!

@mattoattacko 2 года назад

Very interesting video!

@Radu 2 года назад

Glad you think so!

@amank8950 2 года назад

I love this channel !!!!

@Radu 2 года назад

Haha thanks :-) I like your thumbnail!

@amank8950 2 года назад

@@Radu thanks, it's goku from dragon ball z!!

@Radu 2 года назад

@@amank8950 :-)) I know: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-qcQqlzYCXNM.html

@amank8950 2 года назад

@@Radu Woah this is amazing

@od1367 2 года назад

Wow thank you!

@Radu 2 года назад

No problem :-)

@MIHIRZZPATEL 2 года назад

Great sir, 🙋‍♂️ thank you 😊

@Radu 2 года назад

Most welcome!

@venkateshhariharan4341 2 года назад

Great video thanks

@Radu 2 года назад

No problem :-)

@spaceymen 2 года назад

Awesome!

@Radu 2 года назад

Thanks!

@thefuntech2810 2 года назад

Awesome video 👍

@Radu 2 года назад

Thank you :-)

@barryglibb1448 2 года назад

Radu! If you were going to kayak over to the island, you could have got the answer just using one string... A 624m ball of string! I'm joking, great video as always. Thanks for sharing your skills!

@Radu 2 года назад

I actually thought about doing it :D but you would be surprised how difficult it is to stretch such a long string.

@arunchaudhary3785 2 года назад

Bruh! the bloopers lmao

@Radu 2 года назад

:-)) Now I know who watches these things till the end!

@mohamed_elmardi 2 года назад

awesome

@Radu 2 года назад

Thanks :-)

@afaque. 2 года назад

liked and subscribed

@Radu 2 года назад

Thank you :-)

@gainsbrah9831 2 года назад

Underrated

@Radu 2 года назад

You think?

@gainsbrah9831 2 года назад

@@Radu yes bruh... you are explaining concepts and intuition behind them, which is true engineering. Lots of love from india❤️

@Radu 2 года назад

@@gainsbrah9831 glad you think so :-) thanks for watching!

@mohitbk 2 года назад

Cool

@Radu 2 года назад

Thanks :-)

@clash9826 Год назад

Really loving these videos, but can you please explain your code in depth as it's really difficult for beginners to follow the tutorial, regardless GREAT CONTENT

@Radu Год назад

I realize my earlier videos are a bit fast paced and more aimed at advanced viewers... I might revisit this someday, but not anytime soon.

@_elusivex_ 9 месяцев назад

Sir you are amazing. Remember me?

@Radu 9 месяцев назад

I remember (= checked the past comments for your name) you commented a while ago :-)

@jagpreetjakhar7560 2 года назад

Hello Radu, Great project I wanted to ask if I can use these projects you show in my code or on my github,portgolio etc ? Thank You

@Radu 2 года назад

Sure, but please add a link to the source.

@jagpreetjakhar7560 2 года назад

@@Radu Yes sure Thank you

@Radu 2 года назад

@@jagpreetjakhar7560 no problem!

@johnarnoldcatedrilla4378 Год назад

is there a method where to put it in google map and leave trace whenever you move?

@Radu Год назад

Yes, of course, you just use a Polyline to draw the line between the A and B points. Google actually also has a built-in function for calculating the great circle distance. I didn't use Google because I wanted to show the calculation is just math.

@Dino90554 2 года назад

Thats great! But in all the tutorials, when it comes to mathematics, my brain stops hhhhh I want to start studying mathematics related to programming. What are your suggestions for a beginner?🙏🙏🙏

@Radu 2 года назад

I don't really know what advice to give here... Maybe try to visualize things to better understand the mathematics. And... work on projects that you are interested in. If they will require some math, you will have the motivation to pull through :-)

@Dino90554 2 года назад

@@Radu Thank you so much🌼🙏

@Radu 2 года назад

@@Dino90554 don't mention it :-)

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

why does Radu write HTML code so slowly and JS code so fast xd

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

Hmmm... Maybe because 99% of the time I write JavaScript :D

@lailaalmgrbi2207 2 года назад

Hi When I run the code on phone some error happened

@Radu 2 года назад

What phone / os are you using? Is it possible to check if the browser has permission to use location?

@paul-constantindavid2032 2 года назад

NR 1 PE JAVASCRIPT

@Radu 2 года назад

Ma indoiesc :-))

@afaque. 2 года назад

bam math

@Radu 2 года назад

Yeah, for those who ask why it's needed :-)

@donnjuan8752 Год назад

:( why good video like this less view

@Radu Год назад

Not many people need this kind of thing, I guess :-)

@donnjuan8752 Год назад

@@Radu i love the way you think out of the box and how you teach .thanks for inspiration

@Radu Год назад

@@donnjuan8752 Thanks for watching :-)

@dim_kats3629 2 года назад

how do I create the index.html, the script.js and style.css files?? please someone answer

@Radu 2 года назад

Are you using Visual Studio Code? There should be a small plus sign on the left like I show here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-NkI9ia2cLhc.html at 4:44. You can see me making a file at 9:38.

@dim_kats3629 2 года назад

I found it! Thank you for your answer!

@Radu 2 года назад

@@dim_kats3629 No problem!