For those who prefer km rather than miles use this: const miles_to_km = 1.60934; document.getElementById('alt').textContent = (parseFloat(altitude)/miles_to_km).toFixed(2); Thank you Dan! I am learning a lot working with data.
I cannot say how much I appreciate the effort you put into each video and the enthusiasm you show. You explain things so well and provide awesome examples to work with. Thank you so much coding train for giving so much back to the community. Much appreciated
What I really love about these series' is that they're so good you could get away with charging for them online but you don't; it's all on RUclips for anyone to obtain this knowledge. Massive props!
As usual, you so a great job of entertaining and educating at the same time. Thank you for all you work. I had followed along with a lot of you p5.js videos, making up my own canvas library as I went just to learn more. But ultimately, I needed to move in from canvas to more real-world applications. Glad to see you moving that direction cause I like to style more than many others in the web. Again, Thanks!
This is really amazing, i have been overthinking a simple solution can be done like this , setInterval, and update some longitude or latitude on map show moving marker
You can omit the zoom from the setView function. That's the way I did it, every two seconds it moves the station icon and centres the map, but I can change the zoom while I'm looking at it.
You should consider to replace setInterval with a recursive setTimeout because setInterval will trigger every X seconds, no matter if the function callback finished executing or not
what do you mean by " no matter if the function callback finished executing or not" in this context? Does this means that sometimes location updates can overlap or get updated in similar times because getIss() fetches data and is a async function?
You should look into Promise with async/await functions, you could use a .then() after getISS() to initialize the setView for example getISS().then( setView and so on )
Good tutorial thanks. I'm wondering if I need to use data as a parameter for another function out of setInterval, I mean get the current data and use that data for a different function for example create a function with an alert(), and run it only once and not every second or any argument of setInterval method. What do you recommend for this task?
You can set the zoom level first when creating the map: const map = L.map("map").setView([0, 0], 5); and than when updating the view you can omit the zoom level so is wont change the zoom level on every update: map.setView([latitude, longitude]);
Daniel, setInterval is a terrible delay function, especially used in an asynchronous context; if the fetch call has latency, then you might get two async fetch requests being performed in shorter intervals. The correct way would be to use setTimeout. For example : function autoUpdate() { getISS().then(() => setTimeout(autoUpdate, 1000)); } This way, you are garanteed that no two request will stack if there is latency on the network.
@@creeplabs Hi, of course! setTimeout works exactly like setInterval, but it executes only once. Both setInterval and setTimeout returns a timer id, which can be cancelled with clearInterval. See : developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
How would we approach the same problem, if instead of quering the API for the position of the ISS, we have the positions for... say a week, in a JSON file?
my api hit my crypto currency on every refresh i want to limit my refreshes so when use keep refresh once in a day the api doesnt hit the call and the rate remain same , but the rate comes up from database
Awesome!.... I made an web app some time ago combining web sockets with geo location html api, butt unfortunately I couldn't finish because Google maps api restrictions calls 😔
I am facing an issue, I fetching record every 2 second and given a button when I click that button a modal box open and that data show on the modal box and give option to save that in database, but when I close the modal box so i need to refresh the page once, can u give me solution
i want to do site that takes data with positions of vehicles of public transport with possibility of changing number of line wich position i wanna see, could you do sth like that?
I am fetching data every 2 second and it works property but after 5 min iit hangs the pc and freeze the process I am using on good pc and also 8gb ram please suggest me solution.
how can i use restriction in console for print length of bit of image according to image size . because when i increase window size so my bit length is increase and image is not forming in its original shape. please help me in Processing IDE 3.5.3
I am fetching api data every second but it hangs pc after 5 minute, at start it looks very normal, but after 5 minutes it hangs please provide alternative
I GET (Uncaught SyntaxError: Unexpected number) THIS ERROR BECAUSE OF LINE 6. can someone help me to fix this i couldnt find any solution. fetch(request_url) .then(function(response){ return response.json(); }).then(function(data){ //console.log(data); const lon= data.results.0.geometry.lng; // i get console.log(lon); //document.getElementById('latitude'). textContent = lat; //document.getElementById('longtitude'). textContent = lon; }).catch(function(error){ console.error('could not find the file'); console.error(error); });
While I love your videos, they show some seriously bad habits without mentioning them. For example 'GetISS' should be just about getting the ISS information. It shouldn't be setting the position of the map, it shouldn't be updating the marker. it should just be updating the new data information. Separation of concerns is an important thing. It's fine for a quick demo and for learning things. But this caused issues for you when you had getISS and the set interval causing the map size issue. this bug shouldn't have happened.
@youtubesucks It's not just OOP. it's programming in general. This can be done with a functional or procedural system as well. Each function should have a specific 'goal' a single thing it does. It should do that thing and no more nor less. What does GetISS do? It Gets the ISS's position & it sets the map location & it sets the marker. Those &'s are important, they are a clue that the function is doing too much. We should have a "gets the ISS information' function and a 'updates the map' function.
Your overlooking the core function of the tutorial, to inspire and inform. There are so many ways to do things and most are good enough for the job. Refactoring to suit your design choices doesn't mean the original was a serious bad habit as that is why we refactor, getting it working in an easy understandable way is most import with these tutorials and that is why they are so good. Knowing what can be done better is also useful tool in education as it made you think about what could be better.
@@BrettCooper4702 I agree that he goes the extra mile making it easier to understand with the extra examples. That has always impressed me. But I'm not looking for much...a *mention* that these should probably be broken up and why, maybe a mention when the bug caused by this mistake. It's just like error handling, it's common for tutorials to just not do it. That's fine. But failing to *mention* that error handling is needed and should be done right? come on!
my api hit my crypto currency on every refresh i want to limit my refreshes so when use keep refresh once in a day the api doesnt hit the call and the rate remain same , but the rate comes up from database
For those who prefer km rather than miles use this:
const miles_to_km = 1.60934;
document.getElementById('alt').textContent = (parseFloat(altitude)/miles_to_km).toFixed(2);
Thank you Dan! I am learning a lot working with data.
I cannot say how much I appreciate the effort you put into each video and the enthusiasm you show. You explain things so well and provide awesome examples to work with. Thank you so much coding train for giving so much back to the community. Much appreciated
What I really love about these series' is that they're so good you could get away with charging for them online but you don't; it's all on RUclips for anyone to obtain this knowledge. Massive props!
This is an awesome project, it is exciting to see the satellite actual location and movement !!!
I just watched the first series without a break... your explanations are very helpful! Thanks!!
Best coding teacher. Greetings from Mexico.
December 2022 and is still helpful... thanks
As usual, you so a great job of entertaining and educating at the same time. Thank you for all you work.
I had followed along with a lot of you p5.js videos, making up my own canvas library as I went just to learn more. But ultimately, I needed to move in from canvas to more real-world applications. Glad to see you moving that direction cause I like to style more than many others in the web. Again, Thanks!
Este canal es oro para mi. Gracias
Helpful as always! Thanks for putting this all together!
These videos are a godsend. I have a web application exam coming up in a few days, so thanks a lot! This is really helping me out!
Superb! Thanks Dan!
This is really amazing, i have been overthinking a simple solution can be done like this , setInterval, and update some longitude or latitude on map show moving marker
You can omit the zoom from the setView function. That's the way I did it, every two seconds it moves the station icon and centres the map, but I can change the zoom while I'm looking at it.
One of the best on youtube.
Great work as always Dan. Helpful for any level of web dev!
You should consider to replace setInterval with a recursive setTimeout because setInterval will trigger every X seconds, no matter if the function callback finished executing or not
There is a nice module for that, SetIntervalAsync
what do you mean by " no matter if the function callback finished executing or not" in this context? Does this means that sometimes location updates can overlap or get updated in similar times because getIss() fetches data and is a async function?
And this is what you mean i guess:
async function getISS() {
// fetch and update Iss location on map
// ...
setTimeout(getISS, 1500);
}
getISS();
You should look into Promise with async/await functions, you could use a .then() after getISS() to initialize the setView for example
getISS().then( setView and so on )
You are the top dude Love your videos
God bless you
Wish you all the best
RUclips is made for people like you
Thanks for the great tutorial from Korea :)
This series is gold!
you are great ohh man ..most amazing explainations over data and api ever
Good tutorial thanks. I'm wondering if I need to use data as a parameter for another function out of setInterval, I mean get the current data and use that data for a different function for example create a function with an alert(), and run it only once and not every second or any argument of setInterval method. What do you recommend for this task?
You can set the zoom level first when creating the map:
const map = L.map("map").setView([0, 0], 5);
and than when updating the view you can omit the zoom level so is wont change the zoom level on every update:
map.setView([latitude, longitude]);
This is such a great series of videos! Thank you so much, you're an amazing teacher @TheCodingTrain
thankyou very much. you are a great teacher!
Daniel, setInterval is a terrible delay function, especially used in an asynchronous context; if the fetch call has latency, then you might get two async fetch requests being performed in shorter intervals. The correct way would be to use setTimeout. For example :
function autoUpdate() {
getISS().then(() => setTimeout(autoUpdate, 1000));
}
This way, you are garanteed that no two request will stack if there is latency on the network.
@@creeplabs Hi, of course! setTimeout works exactly like setInterval, but it executes only once. Both setInterval and setTimeout returns a timer id, which can be cancelled with clearInterval. See : developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
Ah, yes, that's for this important feedback, great point!
It is such a great tutorial, thank you!!
Cool tutorial ! Thanks :)
Thank you Daniel.
Thank you! So interesting and useful.
@@fraqxxnoorhanijs5515 This video was unlisted :)
@@fraqxxnoorhanijs5515 Also see the description you can already watch the whole series. Linked there.
How would we approach the same problem, if instead of quering the API for the position of the ISS, we have the positions for... say a week, in a JSON file?
Good Job, Dan! Keep it up.
Please try to visualize the Milankovic-Cycles with precession, eccentricity and obliquity.
Would be great.
How might I add css rules to the map to make it fit a screen better or perhaps only appear in the middle of the screen?
my api hit my crypto currency on every refresh i want to limit my refreshes so when use keep refresh once in a day the api doesnt hit the call and the rate remain same , but the rate comes up from database
Great series! Thank you! 👍🌈
thank you, i learned a lot :)
THE BEST !!!!!!!!
my man that feeling when my search result pop one of your vid
Is there a way to fetch real time data from an API without requesting it every second or so suing setInterval?
Awesome!.... I made an web app some time ago combining web sockets with geo location html api, butt unfortunately I couldn't finish because Google maps api restrictions calls 😔
I am facing an issue, I fetching record every 2 second and given a button when I click that button a modal box open and that data show on the modal box and give option to save that in database, but when I close the modal box so i need to refresh the page once, can u give me solution
Hi thanks to the video and i have a question how i can make a search to the location ? to get some direction and put the map ?
cool lessons Thanks.
Thanks so mutch... I learn a lot
I need to do this with data but on the refresh, show the next 10-20 records of the data set. Any suggestions?
i want to do site that takes data with positions of vehicles of public transport with possibility of changing number of line wich position i wanna see, could you do sth like that?
Congratulations for de job. how do I insert and update 184 markers with information from a geojson coordinate server in the range of 20 seconds?
Great job. This is giving me ideas but let's learn coding first. LOL
muito obrigado!!!
I am fetching data every 2 second and it works property but after 5 min iit hangs the pc and freeze the process I am using on good pc and also 8gb ram please suggest me solution.
great tutorials man , thanks
how can i use restriction in console for print length of bit of image according to image size . because when i increase window size so my bit length is increase and image is not forming in its original shape. please help me in Processing IDE 3.5.3
That would be a question for discourse.processing.org/top/all
thanks for this tutorial
I am fetching api data every second but it hangs pc after 5 minute, at start it looks very normal, but after 5 minutes it hangs please provide alternative
Hello, I would like to know if you teach VEX ?
thanks man
Hi dan can you tell us languages that you know?just curious
how to update the starlink train?
Okay my mane man. You cool as it can get with me man> Thank you so much and I love your work.
I GET (Uncaught SyntaxError: Unexpected number) THIS ERROR BECAUSE OF LINE 6. can someone help me to fix this i couldnt find any solution.
fetch(request_url)
.then(function(response){
return response.json();
}).then(function(data){
//console.log(data);
const lon= data.results.0.geometry.lng; // i get
console.log(lon);
//document.getElementById('latitude'). textContent = lat;
//document.getElementById('longtitude'). textContent = lon;
}).catch(function(error){
console.error('could not find the file');
console.error(error);
});
object of that api is in 0 and now i cant use 0.
Sir, please make tutorial move marker based on realtime databse firebase
If your BROWSER IS RETAINING ALL THE MARKERS on the map you may have a line with ( ......... addTo(mymap); ) inside your async function.
👍❤
Nodejs!!! (this.dot song INTENSIFIES!!)
Where's the bell sound at the beginning man..?
you're so cool
if you have the altitude, you can do this in 3d
Is it posible to include some videos about displaying the data using functional react components?
{2021-12-08}, {2022-02-14}
i need to ask you pravent pls
While I love your videos, they show some seriously bad habits without mentioning them.
For example 'GetISS' should be just about getting the ISS information. It shouldn't be setting the position of the map, it shouldn't be updating the marker. it should just be updating the new data information. Separation of concerns is an important thing.
It's fine for a quick demo and for learning things. But this caused issues for you when you had getISS and the set interval causing the map size issue. this bug shouldn't have happened.
@youtubesucks It's not just OOP. it's programming in general. This can be done with a functional or procedural system as well. Each function should have a specific 'goal' a single thing it does. It should do that thing and no more nor less.
What does GetISS do? It Gets the ISS's position & it sets the map location & it sets the marker.
Those &'s are important, they are a clue that the function is doing too much. We should have a "gets the ISS information' function and a 'updates the map' function.
Your overlooking the core function of the tutorial, to inspire and inform. There are so many ways to do things and most are good enough for the job. Refactoring to suit your design choices doesn't mean the original was a serious bad habit as that is why we refactor, getting it working in an easy understandable way is most import with these tutorials and that is why they are so good. Knowing what can be done better is also useful tool in education as it made you think about what could be better.
@@BrettCooper4702 I agree that he goes the extra mile making it easier to understand with the extra examples. That has always impressed me. But I'm not looking for much...a *mention* that these should probably be broken up and why, maybe a mention when the bug caused by this mistake. It's just like error handling, it's common for tutorials to just not do it. That's fine. But failing to *mention* that error handling is needed and should be done right? come on!
my api hit my crypto currency on every refresh i want to limit my refreshes so when use keep refresh once in a day the api doesnt hit the call and the rate remain same , but the rate comes up from database