Writing a Mashup with Maps and Weather

Few weeks back, I did a screencast on how to consume a web service using WSF/PHP demonstrating an application of US National Digital Weather Forecast Database. In that webservice there are operations like “GmlLatLonList” that retrieve a KML for a given longitude and latitude inside USA. I wrote a simple mashup that load this KML from the web service and set it as a layer in a map which is created using openlayers.

There I use the WSO2 Mashup Server to create the stub to invoke the weather forecasting web service. This stub can be easily used to invoke the service from a javascript in a HTML page.

You can visit the mashup from the Mashup Server community site mooshup.com from here, http://mooshup.com/services/Dimuthu/weatherMap/.

Here are the steps I used to create this mashup.

1. First I wrote a javascript to wrap the web service. It has a function that can be used as a stub to invoke the web service operation just as a javascript function call. Here is the source of the javascript I wrote. It wraps the “GmlLatLonList” service operation in the “fetchWeatherInfo” function. I gave this javascript service the name “weatherMap”.

   this.serviceName = "weatherMap";
   this.scope = "application";
   this.documentation = "Visit the weather information from just a mouse click";
   
   fetchWeatherInfo.documentation = "Retrieve the weather information for the given inputs" ;
   fetchWeatherInfo.inputTypes = {"listLatLon" : "string",
                                  "startTime" : "string",
                                  "endTime" : "string"};
   fetchWeatherInfo.outputType = "xml";
   function fetchWeatherInfo(listLatLon, startTime, endTime){
   
       var url = "http://www.weather.gov/forecasts/xml/SOAP_server/ndfdXMLserver.php";
   
       // setting up the the WSRequest
       var request = new WSRequest();
   
       var options = new Array();
       options.useSOAP = 1.1;
       options.useWSA = false;
   
       // do the request
       request.open(options, url, false);
   
       var reqXml =
           <ns:GmlTimeSeries xmlns:ns="uri:DWMLgen">
               <listLatLon>{listLatLon}</listLatLon>
               <startTime>{startTime}</startTime>
               <endTime>{endTime}</endTime>
               <compType>Between</compType>
               <featureType>Ndfd_KmlPoint</featureType>
               <propertyName></propertyName>
           </ns:GmlTimeSeries>
   
       request.send(reqXml);
   
       return request.responseXML;
   }

2. Deployed it in the WSO2 Mashup server. I downloaded and setup the mashup server locally. Then I just needed to put the script inside “scripts/dimuthu” directory. There is an online instance of mashup server called mooshup.com in which I later deployed my service. After deployed it in the mashup, it will generate the javascript stub for that service. You can view the generated stub by adding a “?stub” to the mashup url. Here is the stub for the “weatherMap” mashup deployed in the mooshup server, http://mooshup.com/services/Dimuthu/weatherMap?stub. Similarly you can view the try out page for the service from, http://mooshup.com/services/Dimuthu/weatherMap?tryit
3. Wrote an HTML interface for the service. I used the openlayers javascript library to load google map in to my page. And added a custom control that handles the click. In the click handler, I just call the stub and get the response KML string back using a code similar to this.

   <!-- include the script for the stub -->
   <script type="text/javascript" src="../weatherMap?stub"></script>
   
   <script language="javascript">
   ...
   
   // the code inside the handler of the click control
   
      // preparing the stub call
      weatherMap.fetchWeatherInfo.onError = handleError;
      weatherMap.fetchWeatherInfo.callback = function(response) {
          if(response && response.firstChild.firstChild.nodeValue) {
   
              // handling kml document
              var kmlDoc = response.firstChild.firstChild.nodeValue;
   
              // the code to add the kml layer to the map and render it
              ....
            }
       };
      // preparing the startTime, endTIme, lat, lon values
      ...
   
      // doing the request call
      weatherMap.fetchWeatherInfo(lat + "," + lon, startTime, endTime);
   
   </script>

   The KML style icon will be shown in the map after adding the KML layer to the map. And we can render the KML style details which in this case contain the weather forecast data in detail in some other place easily.

So this way you can create a mashup using openlayers and the data retrieved from different web services. You can find another mashup that shows the twitter updates on a map in real time at here, http://mooshup.com/services/tyrell/TwitterMap/.