Problem Retrieving Radar Map Image

  • 2
  • Problem
  • Updated 5 months ago
  • (Edited)
I am currently trying to retrieve a radar image via the API. I have run into a few issues that I will outline below.

  1. The first issue I encountered was receiving an error in the response (Chrome browser) stating "No 'Access-Control-Allow-Origin' header is present on the current resource" and the browser blocked the image from loading. After some research, this appears to be an issue on the server side where the server is not allowing cross-domain calls for that particular resource. I am also calling the forecast and conditions resources in another place on the page, but the header is being added there without issue. It seems to only not be added when requesting the radar image. I am specifically requesting the animatedradar resource in this case.
  2. As a work around I have seen other posts where forums where JSONP callbacks are used to avoid the cross-domain error. I have implemented that with jQuery. However, I am now receiving a different error stating "Refused to execute script from 'https://api.wunderground.com/api/d4ba8fbded665688/animatedradar/image.gif?centerlat=34.0644337999999...' because MIME type ('image/gif') is not executable." I assume this to mean JSONP can only be used when receiving an JSON response from the API. In this case, it is an image.
As you can see in the JS section of the Codepen, the full API endpoint I am trying to hit is: 

 https://api.wunderground.com/api/d4ba8fbded665688/animatedradar/image.gif?centerlat=location.lat&centerlon=location.lon&radius=100&width=600&height=350&newmaps=0&timelabel=1&timelabel.y=10&num=5&delay=50

 I'm not sure where to go from here so I wanted to see what help you could provide. I have included the Codepen below where I am implementing this. I am ultimately attempting to overlay the weather underground radar on top of a Google map if that is possible.

http://codepen.io/dfully0814/pen/vGdGGQ
Photo of dfuller2326

dfuller2326

  • 4 Posts
  • 0 Reply Likes

Posted 3 years ago

  • 2
Photo of Ravi Yadav

Ravi Yadav

  • 82 Posts
  • 9 Reply Likes
You can create overlays on top of Google Maps. 
https://developers.google.com/maps/documentation/javascript/examples/overlay-simple with Javascript. You can also get the radar image via the img tag and overlay that on top of the map. 
Photo of dfuller2326

dfuller2326

  • 4 Posts
  • 0 Reply Likes
How would this address the 'No Access-Control-Allow-Origin' error I am receiving from the API? Would that not still occur when I try to retrieve the radar image resource from the API? Retrieving the image from the API in the first place is where I am having the issue.
(Edited)
Photo of dfuller2326

dfuller2326

  • 4 Posts
  • 0 Reply Likes
This is the full error message I receive from the API without using JSONP. XMLHttpRequest cannot load https://api.wunderground.com/api/d4ba8fbded665688/animatedradar/image.gif?c...0&width=600&heig.... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
Photo of dfuller2326

dfuller2326

  • 4 Posts
  • 0 Reply Likes
Can you guys add the header when requesting radar to resolve the issue?
Photo of Jim Ziegener

Jim Ziegener

  • 1 Post
  • 0 Reply Likes
This is a Chrome problem.  Switch to Edge or Firefox and radar works fine.