1

I need to embed the current NOAA GOES-18 Weather Satellite Image onto a web page on the Squarespace platform.

Here is the web page at NOAA where they serve the images for Alaska:

https://www.star.nesdis.noaa.gov/goes/sector.php?sat=G18&sector=cak

On that page, NOAA provides a link to the current image file, but the date and time constantly changes as new data comes down from space every 10 minutes.

For example, here is the current image as of the day/time of this post. I need to figure out a way to have an image link that dynamically changes to the current image that somehow auto-populates the below date/time portion of the URL (....20230592100...) which shows the "day # of the year" (059 for Feb 28th) and then the time in Zulu.

https://cdn.star.nesdis.noaa.gov/GOES18/ABI/SECTOR/cak/GEOCOLOR/20230592100_GOES18-ABI-cak-GEOCOLOR-2400x2400.jpg

I suspect the way to do this would be via a combination of JavaScript and HTML but I would appreciate someone pointing me in the right direction. Thanks.

Tried some rudimentary HTML and JavvaScript code but got nowhere.

Read these as well: Refresh image with a new one at the same url Auto refresh images in HTML

I am a beginner at HTML and JavaScript.

GKTRK
  • 13
  • 4

1 Answers1

0

When you remove the image name from the URL, you get to the folder with the images. There seem to be direct links available:

2400x2400.jpg                                      28-Feb-2023 22:49             1609773
300x300.jpg                                        28-Feb-2023 22:49               50795
600x600.jpg                                        28-Feb-2023 22:49              156535
GOES18-CAK-GEOCOLOR-600x600.gif                    28-Feb-2023 22:36            10207340
latest.jpg                                         28-Feb-2023 22:49             1609773

So you can just load https://cdn.star.nesdis.noaa.gov/GOES18/ABI/SECTOR/cak/GEOCOLOR/latest.jpg

Here is the current image in a smaller resolution:

Moritz Ringler
  • 9,772
  • 9
  • 21
  • 34
  • That is fantastic, thank you so much for taking the time to solve this. Although secretly I wish it was a chance to learn some code! – GKTRK Feb 28 '23 at 23:34
  • @GKTRK lol yes. You can also load the folder page with [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch), parse the result with [DOMParser](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser) and extract the URLs with [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll). That should be a fun project, and you get all the old URLs too. – Moritz Ringler Feb 28 '23 at 23:49
  • Also, if you embed the image in a page, I guess you want it to auto-update. My guess is that this isn't over by a long shot. – Moritz Ringler Mar 01 '23 at 00:04
  • I think NOAA overwrites "latest.jpg" every ten minutes.... – GKTRK Mar 01 '23 at 00:14
  • @GKTRK if an answer answered the question, it's a custom here mark it as "accepted" or at least if it's useful vote up. Now, depending on how you are planning on using this image, browsers might cache it. To force browser reload the image, you could attach a current timestamp as url query: https://cdn.star.nesdis.noaa.gov/GOES18/ABI/SECTOR/cak/GEOCOLOR/latest.jpg?1234567890 – vanowm Mar 01 '23 at 14:24