A Virtual World - JavaScript Course: Lesson 10 / 11 [OpenStreetMap Tutorial]

Welcome to the course where we build a self-driving car simulation in a virtual world using HTML, CSS and JavaScript. The world editor we built is nice. Feels really fast to use, definitely minimizing the number of clicks. But you know what’s better than a few clicks?

⭐NO CLICKS!⭐

Let's learn about OpenStreetMap: how to query data from it using overpass turbo and how to parse it in our code. You’ll also learn about real-world coordinates, how they work and the geometry of our 3D world. 🌎

Have Fun! :-)

⭐PLAYLIST⭐

⭐FINAL APP⭐

💻CODE💻
9. Integration = follow along
10. OpenStreetMap = code after this lesson

⭐LINKS⭐

⭐ALL PREREQUISITES⭐

⭐Emoji I used in the video⭐
🗺️✔️❌

☕Buy me a Coffee?☕

⚡️Join this Channel⚡️

⭐Timestamps⭐
00:00 Introduction
01:01 Preparing to use OSM Data
05:55 OpenStreetMap and Overpass Turbo
12:53 Parsing OSM Data
16:19 Latitude and Longitude
24:29 Understanding Coordinates
25:34 Proper Scaling
34:46 One-way Road Segments
38:14 Optimization
42:50 Saving the World Failed (Partially)

[TheZibx]

Great! I am so happy that somebody is still using just js without tons of libraries.

[javifontalva]

If I thought this was the pinnacle then you come up with something even more unbelievable! Amazing!!

[sirmuzz]

amazing course btw, learning a lot. Great job!

[difficultdo]

10 of 10 for so detailed explanation and interesting course. Thank you for sharing your skills and knowledge 👍

[_elusivex_]

Hi radu. I had taken a pause from this course for some time. And i am back at it here again. Just finished this video and moving to the next one. Thanks for the quality content.

[drumforhim]

This is a wonderful course! Thanks so much. One friendly suggestion, when you load the data and you have an intensive task, you could pass the task to a web worker. But I understand if for the sake of this project it is ok to wait a bit. Thank you and continue teaching us great things!!!

[DanielJoseAutodesk]

👏👏👏👏Very .... really really good ... the explanation was very good. Although I am not programming in Java Script, I am studying to be able to translate the code into the language that I already know how to program 😁.... I'm going little by little, but due to its excellent didactics, I will be able to translate the code little by little. Congratulations on your work and for dedicating this time to passing on your knowledge. Thank you. 🙂👍

[shaddowro]

@Radu, amazing work as usual! Thank you for showing us.

[Deditzy.]

18:21 “We’ll refactor this later” is and has always been my downfall! 😂😂😂

[javifontalva]

Radu: I hope you have learnt something.
me: Hell yeah!
Radu: if you got so far congratulation.
me: I did it!!!

[sirmuzz]

When multiplying the deltaLat * 111000 * 10 it makes my x y values on the canvas very large and way off the screen. How could i fix this?

[edutechwithaditya]

I made dedicated buttons when to generate buildings and trees, but still nothing is generated smoothly, lot of unresponsive errors come from browser. Even tried to use requestIdleCallback, but didn't worked. Is there anyway to run it smoothly, and have loading screen also? Loading screens are way nicer than unresponsive browser.

[ChrisLong-xq]

// Open Street Map Query

[out:json];
(
way['highway']
['highway' !~'pedestrian']
['highway' !~'footway']
['highway' !~'cycleway']
['highway' !~'path']
['highway' !~'service']
['highway' !~'corridor']
['highway' !~'track']
['highway' !~'steps']
['highway' !~'raceway']
['highway' !~'bridleway']
['highway' !~'proposed']
['highway' !~'construction']
['highway' !~'elevator']
['highway' !~'bus_guideway']
['access' !~'private']
['access' !~'no']
({{bbox}});
);
out body;
>;
out skel;