No video

1.5 Mapping Geolocation with Leaflet.js - Working with Data and APIs in JavaScript

  Рет қаралды 278,718

The Coding Train

The Coding Train

Күн бұрын

Пікірлер: 190
@jeslela
@jeslela 2 жыл бұрын
One thing I love about these videos is just watching your workflow and seeing how you use and read documentation. It's like there's a mentor by my side showing me how to navigate this confusing world of self taught programming. Thanks
@RicoMinovo
@RicoMinovo 4 жыл бұрын
If you watch it at 1.5x he is even more excited to teach programming. Thanks!
@tonym_123
@tonym_123 5 жыл бұрын
incredible, how do you make this look so easy? like seriously, i would spend hours just to make half of what you did here. you are truly an inspiration
@prernasharma3439
@prernasharma3439 5 жыл бұрын
Loving this series so much. Thank you so much for making JS fun.
@ShujathHussain0
@ShujathHussain0 4 жыл бұрын
After so many series and lectures. i just love the energy & clarity of your every explanation
@RicoGalassi
@RicoGalassi 5 жыл бұрын
Love this series. Been teaching me so much! Very excited for the last one! And definitely please show how to center the space station while the map moves around it so the ISS is stationary. Can you definitely also show how the page can update with the new lat and lon without refreshing? Love your videos!!
@TheCodingTrain
@TheCodingTrain 5 жыл бұрын
It's all coming in the subsequent videos and you can find the exercise solutions here: github.com/CodingTrain/Intro-to-Data-APIs-JS/
@Matt-tn2on
@Matt-tn2on 2 жыл бұрын
Man I have no words. Daniel Shiffman, you are simply the best!
@julietosunde9475
@julietosunde9475 3 жыл бұрын
You are awesome!! this has helped with a project I have been struggling with for days now. Thanks
@vishalchauhan9832
@vishalchauhan9832 3 жыл бұрын
@Juliet Osunde on which project you are working.
@naveennani1772
@naveennani1772 2 жыл бұрын
It helps me too . 🙂 But we can't share anything about our project as it's against our company policies 🥴
@fastlearner9993
@fastlearner9993 2 жыл бұрын
your TEACHING style is one of a kind !!!!!
@coffeecoder9458
@coffeecoder9458 4 жыл бұрын
This is one of the coolest tutorials ever. This guy has some serious teaching chops. SUBSCRIBED!!!
@ishantchahar901
@ishantchahar901 4 жыл бұрын
I am in love with ur enthusiasm bruh. You are really awesome!
@MrUgleh
@MrUgleh 5 жыл бұрын
Although I have no need to watch this series because this kind of stuff is my bread and butter, I still do because I love watching your videos, and you never know what you will learn. There is always room for improvement. With that said, I think an addition to this "Working with Data" series you could show how to cache data that doesn't need to be repeatedly fetched from the source. Just an idea but picking up from this video, you could grab all the countries latlong via restcountries.eu, which also uses no authentication, and then create a marker that displays their population or something, or using Charts.js create a bubble map that involves area, population, exc.
@TheCodingTrain
@TheCodingTrain 5 жыл бұрын
Ah, thank you for this feedback! A great tip! Feel free to keep commenting with more feedback as I release future videos.
@EduardoLima-pi7fl
@EduardoLima-pi7fl 5 жыл бұрын
Yours videos are just awesome! I hope more people can appreciate your work. Greetings from Brazil!
@alimajidian1974
@alimajidian1974 3 жыл бұрын
Hello from IRAN, you helped me so much, thank you !
@ask7561
@ask7561 Жыл бұрын
I totally love this guys energy and teaching skills, good work bro !
@bienenlapera
@bienenlapera 6 ай бұрын
Thanks for the clarification on merkator's map . It's really important that! I'm from Argentine, It is as long as Europe! Buenos Aires as long as Spain
@Pierstoval
@Pierstoval 5 жыл бұрын
One of my favourite JS libraries, it's really awesome and clean :D ♥
@pollyjesterscodingworld4673
@pollyjesterscodingworld4673 5 жыл бұрын
This is a really good series. Thanks a lot. If you want more rainbows in your VS Code, I'd recommend the imo useful extension indent-rainbow.
@TheCodingTrain
@TheCodingTrain 5 жыл бұрын
Oh, I will check it out!
@digigoliath
@digigoliath 5 жыл бұрын
Magical! Thanks for transporting us to another world.
@pastorhudson
@pastorhudson 4 жыл бұрын
Dude! I love your teaching style. You’re killing it! I love the setup too. Green screen? How do you know where to point? Do you have a monitor like the weather man? It looks fantastic. I teach for a living and this is one of the best coding style lessons I’ve seen.
@TheCodingTrain
@TheCodingTrain 4 жыл бұрын
Yes green screen and monitor! More here: kzfaq.info/get/bejne/qdebqquG3ryRiY0.html
@gakhappy
@gakhappy 4 жыл бұрын
wow!! you are a real teacher. you are my inspiration for coding
@im2godly750
@im2godly750 Жыл бұрын
Thank you so much. You are a great teacher. I know it’s not necessary, but I actually feel comfortable learning with you. I’ll definitely subscribe and check out the rest of your vids! ❤
@SaikatMaiti
@SaikatMaiti 5 жыл бұрын
Just waiting for this session from you! 🤗
@goldenpigcoin8028
@goldenpigcoin8028 4 жыл бұрын
Love your videos! You are very enthusiastic!
@cybersamurai99
@cybersamurai99 Жыл бұрын
Thank you Im glad I found your channel. If anyone is having issus with marker.SetView not working, try using the following method marker.setLatLng( [lat,long ] )
@shinej11
@shinej11 4 жыл бұрын
Thank you very much. I love your presentation style. Apart from the topic of the video, which is always undoubtedly great, I learn a new way of doing things.
@SimPwear84
@SimPwear84 5 жыл бұрын
Great series! It helped me tremendously on my project. Thank you o much, wish I could like this x1000 times.
@matissjudins6272
@matissjudins6272 2 жыл бұрын
thank you man, i made more progress in 1 day than in a week with fetch()
@RugShadow
@RugShadow 3 жыл бұрын
Hey! Your videos are absolutely great, and coding along with them each in order has taught me so much! There's one thing in this video that has me absolutely stumped right now and I'm surprised I don't see anyone else mentioning it in the comments- when I paste in the attribution URL, the URL itself has quotes in it, which JS then treats as the end of the string! How and why is it not doing that for you?
@DrMxy
@DrMxy 5 жыл бұрын
Great stuff! Just a small correction: {s} = subdomain @ 7:35
@TheCodingTrain
@TheCodingTrain 5 жыл бұрын
Ah, thank you!
@enivaldobonelli
@enivaldobonelli 5 жыл бұрын
Beautifull lecture. Thanks a lot, Daniel!
@MiladAKareem
@MiladAKareem 5 жыл бұрын
Very useful video. Thanks for all you share with us.
@digigoliath
@digigoliath 5 жыл бұрын
Revisiting this video. Hey, coding is FUN!!
@SYNAPSEdwl
@SYNAPSEdwl 5 жыл бұрын
Great presentation! All the best!
@hannahejimoforchiamaka3333
@hannahejimoforchiamaka3333 3 жыл бұрын
I'm loving this already
@rotrose7531
@rotrose7531 4 жыл бұрын
Thank you very much. These tutorials are god-sent!
@angelamilton5134
@angelamilton5134 2 жыл бұрын
Lovely presentation and explanantions
@margharetify
@margharetify 3 жыл бұрын
Love your energy! Thank you for the super clear explanation!
@jeansylvestre9270
@jeansylvestre9270 2 жыл бұрын
You're a genius !
@SimonTiger
@SimonTiger 5 жыл бұрын
0:14-0:16 In case anyone hasn't noticed, that was Dan from waaay in the future. That's why his voice was a little bit different. Because, I've actually watched how he recorded this, and he just said "dom" incorrectly. For some reason, that bothered him!
@TheCodingTrain
@TheCodingTrain 5 жыл бұрын
Wow, amazing that you noticed!
@nigusukassahun
@nigusukassahun 4 жыл бұрын
The marker doesn't pin to the map accurately when you insert your own icon, like it normally does when using its default icon.
@kasta867
@kasta867 4 жыл бұрын
Amazing tutorial, just what I was looking for!
@mariusbrinzaru8137
@mariusbrinzaru8137 5 жыл бұрын
A great tutorial sir it was a pleasure to watch!
@celtspeaksgoth7251
@celtspeaksgoth7251 Жыл бұрын
Fantastic. Enthusiastic, great legible code, a sense of direction,
@thaiscorreia9072
@thaiscorreia9072 4 жыл бұрын
You're a life savior!
@Any_key404
@Any_key404 5 жыл бұрын
Dan, VSCode has Emmet built in so you can all kinds of HTML stuff really quickly, like making divs or setting up a boilerplate page. Is this something you normally don’t use or is it jus out of scope and confusing for people browsing your videos to see you do something like .name and a line of code magically appears?
@TheCodingTrain
@TheCodingTrain 5 жыл бұрын
Oh, I should look into this more, thank you!!
@boultifnidhal2600
@boultifnidhal2600 Жыл бұрын
I wish that flat earthers were smart enough to love coding and watch this video.
@neutronstar77
@neutronstar77 2 жыл бұрын
Thank you very much for upload this video, it is very useful!
@MrMaraxli
@MrMaraxli 4 жыл бұрын
i really like how you teaching and explaining. i just start learning javascript and i wanna know do you have javasript tutorial videos like about everything. thank you so much
@gloubiboulgazeblob
@gloubiboulgazeblob 5 жыл бұрын
Nice. Maybe giving it a try with Openlayers ? Doesn't it offers you more possibilities ?
@treestrax1072
@treestrax1072 4 жыл бұрын
how did you figure out the appropriate values for iconAnchor?
@lunes-1
@lunes-1 3 жыл бұрын
Great video,keep it up!⏺⏹⏺
@Dadaadad268
@Dadaadad268 4 жыл бұрын
Where did the tileUrl come from? I know you explained it a bit, but can that url be found in documentation anywhere?
@gauravshetty6944
@gauravshetty6944 4 жыл бұрын
can you make a video showing this same project using processing.
@johnhodgkiss9882
@johnhodgkiss9882 4 жыл бұрын
Great video. How would you click on the target to open another window or perform a function related to that marker?
@t_apk4477
@t_apk4477 4 жыл бұрын
Great Tutorial. Please suggest to restrict the tile to only 1 rather than many more when u r zoom out, please reply
@AndreaVitiani
@AndreaVitiani 5 жыл бұрын
great video as always!!
@hongvicodes
@hongvicodes 5 жыл бұрын
Hey nice video and great presentation, period. But how can you preview your work on VSC ? I was wondering about this for weeks. Thanks in advance.
@vishalsahu4578
@vishalsahu4578 4 жыл бұрын
It's showing 404 error
@furiousjanush5776
@furiousjanush5776 3 жыл бұрын
Great job!
@prashanthkumar5987
@prashanthkumar5987 5 жыл бұрын
Awesome dan🤩
@andresmontoya7852
@andresmontoya7852 5 жыл бұрын
Thanks! Might you make a project with the following option: If I type "Colombia, Bogota" on a input, the library you used can change that text to lat and long? That would be awesome!
@EricWilliamsCG
@EricWilliamsCG 5 жыл бұрын
I recently set up a site that works with Leaflet and Algolia Places that does that. Algolia Places gives you real time update as you type addresses with latitude longitude, leaflet can then update the maps with new data how ever fast you allow it to.
@andresmontoya7852
@andresmontoya7852 5 жыл бұрын
@@EricWilliamsCG Great! Can you pass me any example you have? Thanks!
@marchino3577
@marchino3577 4 жыл бұрын
using leaflet how do I get the set of coordinates of a place sought through the search box and highlight its borders
@usamamajid9697
@usamamajid9697 4 жыл бұрын
How to use them in react js
@rafiel767
@rafiel767 2 жыл бұрын
Love the videos! I am wondering though... Some data seems to be changing but you still used const, instead of let. Why is that and how is the code still able to work?
@shmihshmih4287
@shmihshmih4287 4 жыл бұрын
Great video! Thanks!
@cesaremannino2774
@cesaremannino2774 3 жыл бұрын
You`re a legend!
@vahidsediqi5638
@vahidsediqi5638 2 жыл бұрын
I would love to learn Nodejs or Reactjs from you!
@farahtasneem
@farahtasneem 4 жыл бұрын
Thanks for the video! Do you know how I can make an ordered Leaflet slider showing features by year?
@anadi3279
@anadi3279 5 жыл бұрын
thanks bro
@lipslide101
@lipslide101 5 жыл бұрын
Hey man nice video! I would like to suggest you using npm instead of good old vanilla import into html because that's rarely used in the real world for real applications. Everyone uses things like npm and webpack which is a really essential tool. I think it would be a good idea to always use that even if it's just for good practice and not really necesary :)
@darkceptor44
@darkceptor44 5 жыл бұрын
I personally don't mind, I'm too lazy to create even more projects on my hard-drive so I prefer using online services like codepen.io and repl.it to host simple CSS/JS code, and I already had to change my code a little bit because there's no async and await on browser JS so using NPM and other Node libraries would make it harder for me to keep using it on browser. Btw when I do use Node/NPM I prefer Gulp not Webpack, it's JavaScript style and not JSON style, 100% recommend it.
@TheCodingTrain
@TheCodingTrain 5 жыл бұрын
Ah, good point, I should add to this series to cover this.
@IceMetalPunk
@IceMetalPunk 5 жыл бұрын
NPM is good for Node projects, but when making a fully client-based application, there's not much need for it. To be honest, the reason things like Webpack/Babel/etc. seem to still be used for client-side applications is just for compatibility reasons, but if your application doesn't need to support old browsers (*cough* IE *cough*) then most modern browsers will be just fine with vanilla ES6 features.
@EricWilliamsCG
@EricWilliamsCG 5 жыл бұрын
Have to agree with DarkCeptor and IceMetalPunk. I use vanilla often in real world apps. NPM is just another link in the chain to keep working.
@lipslide101
@lipslide101 5 жыл бұрын
I just find that me and my colleagues always have been using npm for the frontend of our projects, just to keep things clean. But yeah it was just a suggestion :)
@asm7575
@asm7575 3 жыл бұрын
that was helpful thank you. can you make a video about searching marker leaflets that i added on my map ?
@prithwirajdutta3827
@prithwirajdutta3827 5 жыл бұрын
Daniel could you make a video on how to optimize route on a map like the Mapping companies do ! Also, it would be great if you could make an application that uses drag and drop workflows like Salesforce does inorder to automate its applications.
@prithwirajdutta3827
@prithwirajdutta3827 5 жыл бұрын
Thank You.
@rahulnirfarake5355
@rahulnirfarake5355 2 жыл бұрын
Hello, Can you please suggest a library for angular by which we can show different colour on each lat-long point. Thanks
@KosherWithoutBorders
@KosherWithoutBorders 4 жыл бұрын
Thanks for the video! How can I make China's map show up in English characters?
@adrianwalker9917
@adrianwalker9917 3 жыл бұрын
IF your *MAP outline DOESN'T SHOW* one problem could be that where you put it ( ) is below the line where you defined it (const mymap = L.map('mapid').setView([51.505, -0.09], 13); ). I always thought you'd want to define it first and the place it but that's not the case here.
@adityashinde3864
@adityashinde3864 5 жыл бұрын
Please make videos on JavaScript beginners.
@TheCodingTrain
@TheCodingTrain 5 жыл бұрын
That's this one! kzfaq.info/sun/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
@jithinsurendran678
@jithinsurendran678 Жыл бұрын
Sir, you are nothn less than a fuckn legend🤩
@davidplowie4670
@davidplowie4670 5 жыл бұрын
Im not sure this is meant to actually be available yet.... doesnt show on the channel and its unlisted!
@TheCodingTrain
@TheCodingTrain 5 жыл бұрын
I'm working on this full series incrementally and releasing them when I'm sure the video is final. But happy for people to find the draft videos in the playlist in advance and comment!
@davidplowie4670
@davidplowie4670 5 жыл бұрын
@@TheCodingTrain as long as you know buddy :)
@cristiiancu4814
@cristiiancu4814 3 жыл бұрын
Can i make a button,i want to click on a maker for example and it should go to another link,like a building description or something?
@promisemaluleke5690
@promisemaluleke5690 3 жыл бұрын
How do you convert address to latitude and longitude in javascript? when using the leaflet maps?
@geoffreynyamongo4619
@geoffreynyamongo4619 Жыл бұрын
This is a wonderful tutorial. Can you PLEASE help me come up with a simple example of how to develop a Data-Driven Leaflet Interactive Choropleth Map? I wish to fetch my data from MySQL table. Instead of reading from the *.js file in the application folder, can we generate a GeoJSON string from the MySQL table? Please reply. I have been struggling with this,
@FxbyyMC
@FxbyyMC 4 жыл бұрын
Hey great video. Is it possible that when I click on the map, the coordinates are displayed or copied from there?
@ankitkumar-ih8qo
@ankitkumar-ih8qo 3 жыл бұрын
hey.! I want to display current location of me, then what should I do to implement. Can you give me suugestion ?
@nileshgurung9437
@nileshgurung9437 5 жыл бұрын
Awesome🤗
@RiccardoCosenza
@RiccardoCosenza 4 жыл бұрын
how could I do if I wanted to track a group of satellites (for example) doing the same update job with setInterval?
@koszar2005
@koszar2005 3 жыл бұрын
HI, can we give the coordinates from the navigation instead of the ISS ? I tried do this, but console log bugs "map container is already initialized" :/
@codeitdear1904
@codeitdear1904 4 жыл бұрын
Not working. Can u help? The where the ISS at? map is showing for development purposes only water mark
@santiagocastro6701
@santiagocastro6701 4 жыл бұрын
after putting everything, nothing works is there a problem that i don't see?
@shariquekhanoriginal
@shariquekhanoriginal 3 жыл бұрын
It says Map container not found. Why? I had follow all the steps.
@frederickmacdonald4171
@frederickmacdonald4171 4 жыл бұрын
Thank you
@noobdaaviacao
@noobdaaviacao 4 жыл бұрын
could make a video how to put Polyline with the coordinates
@sanchitverma2892
@sanchitverma2892 5 жыл бұрын
Ayeeee notif squadd bois
@Purplejacket
@Purplejacket 5 жыл бұрын
How did you know the syntax for titleUrl? I couldn't find it documented anywhere.
@treestrax1072
@treestrax1072 4 жыл бұрын
likewise. Any luck ?
@treestrax1072
@treestrax1072 4 жыл бұрын
leafletjs.com/reference-1.6.0.html#tilelayer unless you didn't find, it's here in Raster Layers/TileLayer
@dhanalakshmi5341
@dhanalakshmi5341 3 жыл бұрын
How to add right click to the marker or cluster data?
@milakohen630
@milakohen630 4 жыл бұрын
are You on udemy??? I'm buying!
@KirillKlimov_lds
@KirillKlimov_lds Жыл бұрын
How to create track for the ISS locator on the map?
@mapkbalaji
@mapkbalaji 3 жыл бұрын
Hi, I'm able to use p5.js + mappa. But, couldn't achieve using Leaflet + p5.js. As a basic, I need to draw a basic eclipse on the current location on the Leaflet map. I don't want to use mappa.
@joshiadvait8
@joshiadvait8 5 жыл бұрын
How to work with OAuth 2 in js for GitHub , Spotify,etc logins???
@ryanboldi9586
@ryanboldi9586 5 жыл бұрын
Put them inside a config file and add that file to the gitignore.
@ceciliaferraz9248
@ceciliaferraz9248 3 жыл бұрын
I love your videos, I'd like to know if there is a way to chance the icons from the features to images (png), I use the qgis2web plugin to generate the html file, but the icons I set on Qgis aren't working on the html. Can you help me?
The Most Legendary Programmers Of All Time
11:49
Aaron Jack
Рет қаралды 552 М.
Happy birthday to you by Tsuriki Show
00:12
Tsuriki Show
Рет қаралды 12 МЛН
Little brothers couldn't stay calm when they noticed a bin lorry #shorts
00:32
Fabiosa Best Lifehacks
Рет қаралды 21 МЛН
白天使选错惹黑天使生气。#天使 #小丑女
00:31
天使夫妇
Рет қаралды 15 МЛН
1.4: JSON - Working with Data and APIs in JavaScript
16:22
The Coding Train
Рет қаралды 643 М.
Why Democracy Is Mathematically Impossible
23:34
Veritasium
Рет қаралды 2 МЛН
I run untested, viewer-submitted code on my 500-LED christmas tree.
45:17
Coding a Web Server in 25 Lines - Computerphile
17:49
Computerphile
Рет қаралды 334 М.
2.1 Server-side with Node.js - Working with Data and APIs in JavaScript
18:17
Coding Challenge 180: Falling Sand
23:00
The Coding Train
Рет қаралды 883 М.
What was Coding like 40 years ago?
29:05
The Coding Train
Рет қаралды 1,7 МЛН
Data Driven Maps With Python Folium & Leaflet.js
32:56
Traversy Media
Рет қаралды 106 М.
Happy birthday to you by Tsuriki Show
00:12
Tsuriki Show
Рет қаралды 12 МЛН