Weather forecasting with SAS-generated Google maps

2

Photograph of Northern Cardinal in snow stormThe Earth is flat. At least as far as Google maps are concerned. Don’t just take my word for it though. Bring up a Google map onto your computer screen and make sure of this with your own eyes.

Now, when you got comfortable with that revolutionary concept, here’s another one: weather is weird. You’d know this firsthand if you live in the East of the United States, where the first week of March brought almost a foot of snow and record-low temperatures well below freezing (like 10-15 F°). This didn’t seem to concern the cardinal that made its way into my backyard igloo during the March blizzard in misguided hopes of Spring.

Combining weather and Google maps seems to be so natural since weather is a property of a particular location at a given time. Of course, weather changes in time, but if we can connect and stream weather data into a location on the map, wouldn’t that be cool?  Whether you want a broad, synoptic view of the weather forecast over a country or a continent, or you are just interested in the current weather conditions in a particular locale, I see possible business applications in any field that relies on weather forecast—agriculture, aviation, tourism, vacation and trips planning to name a few. This application would also provide access to the weather information around the globe.

A little history about weather on a map

In search for a solution for combining weather and Google maps, I stumbled upon the Google’s own Weather layer and Cloud layer functionality that can be easily utilized and that looks like this:

Weather map using Google weather overlay.

This looks awesome – it is too good to be true, I thought, and as it turned out, it is. The bad news was that these Google map weather and cloud layers are reaching their expiration date. They are being put out of commission after June 4, 2015. Bummer! If you find this to be a strange move to make, you’re not alone.

This, however, did not deter me from searching and finding an alternative solution of overlaying weather on Google map.

Finding an alternative solution

weather widgetI noticed that the above Google’s historic (literally) solution features a link to weather.com as the weather data source. Hmm, maybe these two companies did not come to terms or maybe it is weather.com who pulls the plug on their data I speculated. I took a closer look at the weather.com website and found that they used to provide free weather widgets ready to embed in any website, such as this one (on the right).

But not anymore. Now they just sell apps. However, I found other companies (e.g. Accuweather) that provide free weather widgets delivering weather information in quasi real-time. In many cases, these widgets are customizable.

Here is what I have come up with after playing a little bit with the Accuweather widgets. Feel free to explore the interactive Google map below to experience the weather forecasting functionality by clicking here or on the image below:

Weather overlay using Accuweather feed

How to capture and embed the weather widget

I went to the Accuweather page http://www.accuweather.com/en/free-weather-widgets, and picked widget style, desired location and got a code snippet for embedding. For example, for Chicago IL, the code snippet will be as follows:

<!--
By accessing and/or using this code snippet, 
you agree to AccuWeather’s terms and conditions (in English) 
which can be found at http://www.accuweather.com/en/free-weather-widgets/terms 
and AccuWeather’s Privacy Statement (in English) 
which can be found at http://www.accuweather.com/en/privacy.
-->

<a href="http://www.accuweather.com/en/us/chicago-il/60608/current-weather/348308" class="aw-widget-legal"></a>
<div id="awtd1427398199573" class="aw-widget-36hour"  data-locationkey="348308" data-unit="f" data-language="en-us" data-useip="false" data-uid="awtd1427398199573" data-editlocation="false"></div>
<script type="text/javascript" src="http://oap.accuweather.com/launch.js"></script>

I did this for all the locations that I wanted to display weather on the Google map. However, it turned out that while these weather widgets are easy to embed into a web page, it was a little tricky inserting them into Google map info window. Simply put, it won’t work if you just paste that code into the Google map info window definition. The solution was to create a mini HTML page for each location, and then use <iframe> tags to reference these locations in the Google map info window.

By looking closely at the code snippets for different locations, it is easy to see the pattern, which I used in the SAS code to generate the above interactive Google map with weather widgets embedded into Infowindow. Click to download the full SAS code .

Two key elements of SAS code

In this code, I used a SAS macro to make the weather widget data-driven. I also used a custom marker image to indicate clickable points on the Google map for which weather forecasts are made available. Here are the two key elements of the SAS code:

  1. Create local weather mini-pages for all places you would like to show. This is based on the code snippet generated by Accuweather, I only made a data-driven SAS macro out of it:
  2. %macro create_widgets;
    
      %let dsid = %sysfunc(open(places));
      %let num  = %sysfunc(attrn(&dsid,nlobs));
      %let rc   = %sysfunc(close(&dsid));
    
      %do j=1 %to &num;
    
        data _null_;
          p = &j;
          set places point=p;
          file "&proj_path\widgets\accuweather_com_widget&j..html";
          put
            '<html><body>' /
            '<a href="http://www.accuweather.com/en/' loc +(-1) '/' loczip +(-1) '/current-weather/' lockey +(-1) '" class="aw-widget-legal"></a>' /
            '<div id="' dataid +(-1) '" class="aw-widget-current" data-locationkey="' lockey +(-1) '" data-unit="f" data-language="en-us" data-useip="false" data-uid="' dataid +(-1) '" data-editlocation="false"></div>' /
            '<script type="text/javascript" src="http://oap.accuweather.com/launch.js"></script>' /
            '</body></html>'
          ;
          stop;
        run;
    
      %end;
    
    %mend create_widgets;
    %create_widgets;
    

  3. Define an InfoWindow and a custom marker for the Google map as:
  4. put
       'var info' i '= ''<iframe style="width:400px;height:360px;" src="widgets/accuweather_com_widget' i +(-1) '.html">'';' /
       'var point' i '= new google.maps.LatLng(' lat ',' lng ');' /
       'var marker' i '= new google.maps.Marker({' /
          'position: point' i ',' /
          'icon: ''images/weather-icon.gif'',' /
          'map: map,' /
          'title: "Click here for weather details"' /
       '});' /
       . . . 
    

The rest of the code is no different from all other Google map with SAS posts that I published earlier.

I would love to hear your feedback on this one. And enjoy the weather!

Share

About Author

Leonid Batkhan

Leonid Batkhan, Ph.D. in Computer Science and Automatic Control Systems, has been a SAS user for more than 25 years. He came to work for SAS in 1995 and is currently a Senior Consultant with the SAS Federal Data Management and Business Intelligence Practice. During his career, Leonid has successfully implemented dozens of SAS applications and projects in various industries. All posts by Leonid Batkhan >>>

Related Posts

2 Comments

Leave A Reply

Back to Top