How To Use Mapbox To Create A Google Maps Clone Quickly
HTML-код
- Опубликовано: 23 июл 2024
- 🚨 IMPORTANT:
JavaScript Simplified Course: www.javascriptsimplified.com
Mapbox is an incredibly powerful tool for creating any map based applications, but it can be pretty daunting to get started with. In this video I will show you how to get started with Mapbox as easily as possible. I will also show you how to use the browser's geolocation API as well as Mapbox plugins.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/G...
🧠 Concepts Covered:
- How to setup Mapbox
- Geolocation API
- Mapbox plugins
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:21 - Demo
01:04 - Setting Up The Map
04:37 - Get Current Location
08:54 - Adding Direction Support
12:10 - Conclusion
#GoogleMapsClone #WDS #Mapbox
Others youtuber - A long 4/5 hour project.
Kyle - A 12 min google map program.
I always try to make my videos as short and to the point as possible.
@@WebDevSimplified Like it 👍🏼
@@WebDevSimplified It's perfect, keep it up! Love your tutorials
@@WebDevSimplified THANK YOU SOO MUCH!
@@WebDevSimplified That's why I've pretty much given up on Brad Traversy's channel at this point. Too many faces teaching too many totally unrelated topics in one go for hours on end. Don't get me wrong, most of his guest hosts undoubtedly are experts in their respective fields, know exactly what they're doing and are excellent teachers. Kudos to them and especially to Brad - he ranks high on my list of people I definitely look up to (goes without saying that you're on this list as well ;) ). I really do wish Brad the best of health and hope he'll get better soon. Unfortunately, his channel is a bit all over the place and doesn't seem to know which direction it's headed any more lately.
Your content's a blessing as it is, please keep it this way.
That was impressive young man. Love your delivery... so calm and smoothing:)
Great work! Really Look forward to such short duration projects!
Awesome...really simple and straight to the point. Thanx Kyle
Wow, exactly when I started looking into Mapbox! That timing 👌
You are just amazing man 😁 i have no words for you !!! Thanks for all the stufff ❤️
what a coincidence I was just trying to find a video like this thanks man
Thanks So Much Kyle, Your videos are so well explained and inspire me everyday
Gonna be really helpful for other projects I got in mind! 🤓
Hey, thanks for the tutorial man. It was really helpful.
This was a great video! Helped me a lot with a personal project
you are doing great work!!
Great tutorial. Thanks Kyle!
thank you, this made a lot of things easier for me.
That's really interesting , great work 🔥❤️
This Is great i need a tutorial for a Google maps website and you upload this video, awesome!
DUDE, I can't WAIT for your javascript course.
Only a few more days!
Thanks Man. You saved my day. Nice Tutorial. :)
Thanks Kyle you are a saviour
Hi Kyle,
This is a very informative video!!
Thank you! i really needed this tutorial and i will stick to your teaching tutorial concept too i saw your tutorial hell video and the reason why you keep making it short and simple is to let us build up stuff ourselves. i i will try to create something based on your video!
You are brilliant Sir. Thanks for the video.😊
Was waiting for this since the repo was created 😉
Another Great video, thanks again.
I wanted to thank you for making these videos
Thanks bro
Amazing, Loved it.
Great video! Thanks!
I will create it ,
Thanks for sharing your knowledge
Super Awesome!!! TQVM!
wow, amazing bro, I loved your videos..
you are the best teacher!!
Thankx a lot. Left Leaflet because of wierd perforamnce in bootstrap modals. Mapbox does have issues in them too, but more affordable
Great tutorial, thank you!
I assume that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
Book a meeting with me here:
Link: calendly.com/utkarsh-rawat
Email: Utkarsh.rawat@jungleworks.com
Looking forward to hearing from you!
Nice video, thanks!
This is Amazing !
You just saved my life!!
Google: We have worked hard for years to make an app called Google Maps. It's not easy.
Kyle: Hold my code
Great video! :D
short but powerful.....thanks for always
Thank you.
I really like your subjects
"And now, in only in 55 hours, we're going to be in Manchester" lol
Just a general tip which I see being done in almost all programming tutorials: when teaching people that are new to programming, they have a hard time instantly understanding what is appended to what. So, at the timestamp 3:58, don't name the div id "map", as well as the variable "map" AND the parameter value "map". Then beginners just have to look what is appended to what, and sometimes even wrongfully think that something else is appended to something else. It's not as intuitive to beginners as it is to programmers with at least some experience. The same goes with naming everything simply as "name", etc. Just make mini differences and it will be much clearer as to what is what.
P. S. I'm not a beginner, but this very think bothered me so much when I was a beginner and learning over RUclips.
Yes I agree it all becomes rather abstract.
@@jasonsworld333 At minute 11:46, a choice of departure and arrival is made.
I can do that but in my city, that is, how do I restrict it?
Thanks man!
super cool, thanks a lot Bro, keep it up :)
I assume that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
Book a meeting with me here:
Link: calendly.com/utkarsh-rawat
Email: Utkarsh.rawat@jungleworks.com
Looking forward to hearing from you!
Super COOL!!!!!!!!!!!!!!
and now i will build create personal maps navigator.
Thanks a lotttttttt
Too cool!
excelent tutorial
Hey Kyle, I am visiting a bootcamp in which I am learning about Web-Development. I am trying to integrate in my organizer application a map component. I am working with React js and I wonder if you have any recommendations on how to integrate your example in a React js Project? I would be thankful for any help =) I love your tutorials and hope to see more
Hi . Pls make more css clones like the youtube one.. I loved it
very good, Thanks
Are you able to use this to calculate the estimated carbon emissions between point A and B?
Awesome!!!
Hi Kyle, Can you please make a video over authentication without depencies in Nodejs
The video is great
Good stuff
Wowww, u'r different, thanks alot
love the tutorial, when i click on map that coordinates were passed to the direction API and the route changes to the point I clicked, I don't want this to happen what should I do to turn of that. thanks in advanced..
Nice video. But how do we dynamically put "From-To" places in javascript?
I used this in one of the challenges from Frontendmentor
Thanks to this tutorial, please can you make again some videos about mapbox? Thnx, you're awesome
I assume that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
Book a meeting with me here:
Link: calendly.com/utkarsh-rawat
Email: Utkarsh.rawat@jungleworks.com
Looking forward to hearing from you!
Hello! I'd just like to know what app/program you used to run the Mapbox code, as I need to use it to run the codes for Mapbox. Thanks!
thanks so much.
I assume that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
Book a meeting with me here:
Link: calendly.com/utkarsh-rawat
Email: Utkarsh.rawat@jungleworks.com
Looking forward to hearing from you!
Is it possible to retreive the locations entered in the default input fields into state variables in React?
how do i add navigation, google navigation sdk on react native? so i can add a navigation route like in the google map, when we click on 'start'
very usefulllll
Hi Kyle, How can I add ‘’ C or D clones ‘’ to search? İs it possible?Thanks a lot
Could you do this one in React please? The demo on the documentation is not working for me.
Wut?? Hey crazy person!! Love you 😘 loved the project
Pretty cool! I don't suppose you could show us how to display geolocation data from a third party API on MapBox...?
Hello sir, really useful tutorial...what about live movement of user
How would I go about having the server pre render all that and then just spitting out a grid of jpegs wherever the web client goes.
Excellent and to the point video. Can we add Navigation and multiple stops in between with optimized routes here?
Did you find out how to do this?
terima kasih :) tutorialnya berhasil !
bjir mantap banh
Best!
was trying to be the first commenter but I think I am way late! great videos kyle
hey, so does this mean, the map can also track the device's location too?? cause that's something I wanted in my web application.
Can I use this for Augmented reality?
Awesome, thanks for this useful post.. Just one question is it possible to get district, city, country using current location and save it to mysql?
Thanks
I assume that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
Book a meeting with me here:
Link: calendly.com/utkarsh-rawat
Email: Utkarsh.rawat@jungleworks.com
Looking forward to hearing from you!
Well, I tried to look a location and it gives me other locations but the one that I require doesn't appear in the suggestions
how to add few marker and label?
Could you make a google classroom clone, that would be really helpful!!!
Make a vedio on how to stream vedio on nodejs like RUclips .
I have searched on Google but it's give code of that but I can not understand
I got a question KYLE sir would it be fine if we just copy this and add the UI/UX from our side and make an app to publish?
Great video. Is it possible to indicate to Mapbox that you want to avoid certain location and to calculate an alternative route?
you could make it?
How to extract elevations and open it on 3d software
I think your tutorials are amazing but I was thinking if you could make tutorials on PHP langauge too as it is also related to web development.
I assume that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
Book a meeting with me here:
Link: calendly.com/utkarsh-rawat
Email: Utkarsh.rawat@jungleworks.com
Looking forward to hearing from you!
another simplified tutorial. thank you. if you don't mind, can you make a similar tutorial using leaflet or a basic to intermediate course on leaflet using opensource tileset? mapbox is really awesome but they get expensive after 25k users.
I assume that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
Book a meeting with me here:
Link: calendly.com/utkarsh-rawat
Email: Utkarsh.rawat@jungleworks.com
Looking forward to hearing from you!
thank you that was helpful! I'm working on a side project and refuse to use Google api (broke ppl problem). also one of those days we will hear play the guitar lol
Wow🤯
i'm trying your code and tutorial its work fluenty on website,but when i'm try on mobile,its so lag, any suggest?
mapbox control for c# winforms?
I have an error on my side in script.js . I have mapboxgl is not defined . Anyone can help out ? Thank you
Awesome men, could you do this using react-native
Do you freelance for a Laravel project?
Kyle, I had one question that what you think between using gmap API Vs mapbox API. In my opinion no-one is as close and accurate to Google maps and generally pricing are even same. What's your opinion on it
You should try us once. I guess that you are using Google Maps for Mapping solutions or vehicle tracking. I would like to suggest you have a sheer look at Mapping Solutions which we provide by our product Flightmap, which could save around 90% of your valuable money on mapping services without any compromise in the service qualities.
Let me know if this is something you're interested in. I’d love to provide more insights and present some of the endless use cases that are possible with our technology.
Book a meeting with me here:
Link: calendly.com/utkarsh-rawat
Email: Utkarsh.rawat@jungleworks.com
Looking forward to hearing from you!
How can life be this easy ? Nice thanks !
*Last few minutes* there is no way he can implement that directional feature in this video.
*1 min later*
😐😱😵 Shouldn't have doubted him.
Great video, big time fan of yours. The projects you bring are so much better and real world that it amazes me everytime.❤️
Thank you so much!
I am somewhat in pitfall, where I see every day new technology and brain is diverting it from the current technology I am working on. It's hard to manage as I just started my career in web development.
I mean, the thing is that you can either implement it by yourself with fetch/ajax requests tot the Directions API or you use the plugins the people created and that just goes holy hecking fast!
@@WebDevSimplified At minute 11:46, a choice of departure and arrival is made.
I can do that but in my city, that is, how do I restrict it?
my bro..
please help me the code for "add marker at my location"
so for me the last 2 things is not working its not zooming in/out also Direction