Current Weather Location using Wunderground Google Static Map APIs
Current Weather at Your Location Using Wunderground and Google Static Map APIs

I was more concerned with ‘Feel Like’ temperature and wind speeds for my neighborhood. Also, I live much close to neighboring town which is next to river, the weather app on iPhone always showed by hometown conditions in locked screen widget. All this lead me to build a custom page for my needs using wunderground APIs.

Current Weather Location using Wunderground Google Static Map APIs

Some key items before we move to the code:

  • Needs valid API key from wunderground (see http://api.wunderground.com/weather/api/d/docs)
  • Needs valid API key from Google Static Maps (see https://developers.google.com/maps/documentation/static-maps/)
  • It used meta¬†viewport for proper viewing on desktop and iPhone
  • I have added an icon used by iOS when page is added to Home Screen, that makes it feel like a real app ūüôā
  • It open your default (and hard coded location)
  • There is a ‘ReLocate’ button that will refresh for your current geo-location. This however, works only on https. So if you do not see the red¬†‘ReLocate’ button, you are not on https
  • The page shows the map of you location so you get an idea which direction wind is flowing in from to prepare accordingly.

On Github

To extract code from git:

$ git clone https://github.com/ddiinnxx/weather_php

The PHP Code

<?php

// git clone https://github.com/ddiinnxx/weather_php 
 // more at www.ddiinnxx.com

// various defualts. get the right keys
 // check https://developers.google.com/maps/documentation/static-maps/
 $googleapi_key = "GOOGLE_MAPS_KEY";
 // check http://api.wunderground.com/weather/api/d/docs
 $wunderground_key = "YOUR_KEY";
 
 // enter location for which you check weather most often. avoids frequent geo-lookup. 
 $def_location = "IA/Cedar_Rapids";
 $p_lat = "41.9650539";
 $p_long = "-91.802762";
 
 // if new latitude and longitude were sent in params, use them instead of the defaults. 
 // the re-locate button send lat long of your current location and call this php file again
 if (isset($_GET["lat"]) && isset($_GET["long"])) {
 $p_lat = $_GET["lat"];
 $p_long = $_GET["long"];
 
 $location_url = "http://api.wunderground.com/api/" . $wunderground_key . "/geolookup/q/" . $p_lat . "," . $p_long . ".json";
 // get location for the lat long sent via params
 $location_string = file_get_contents($location_url);

$parsed_loc_json = json_decode($location_string);
 
 // name of state. eg: NY, MA, etc
 $loc_state = $parsed_loc_json->{'location'}->{'state'};
 
 // name of city. eg: New York, Boston
 $loc_city_raw = $parsed_loc_json->{'location'}->{'city'}; 
 
 // replace blanks with _. This is how the wunderground API understand multiworded cities.
 $loc_city = str_replace(" ", "_", $loc_city_raw); 
 
 $condition_url = "http://api.wunderground.com/api/" . $wunderground_key . "/conditions/q/" . $loc_state . "/" . $loc_city . ".json";
 
 // get weather conditions from wunderground
 $json_string = file_get_contents($condition_url);
 }
 else
 {
 $condition_url = "http://api.wunderground.com/api/" . $wunderground_key . "/conditions/q/" . $def_location . ".json";
 
 // get weather conditions of default location from wunderground
 $json_string = file_get_contents($condition_url);
 
 }

$parsed_json = json_decode($json_string);

$co_location = $parsed_json->{'current_observation'}->{'display_location'}->{'full'};
 $co_city = $parsed_json->{'current_observation'}->{'display_location'}->{'city'};
 $co_temp_str = $parsed_json->{'current_observation'}->{'temperature_string'};
 $co_feels_like = $parsed_json->{'current_observation'}->{'feelslike_string'};
 $co_wind_str = $parsed_json->{'current_observation'}->{'wind_string'};
 $co_rel_humidity = $parsed_json->{'current_observation'}->{'relative_humidity'};
 $co_precip_str = $parsed_json->{'current_observation'}->{'precip_today_string'};

echo "<html>"; echo "n"; echo "n";
 echo "<head>n"; echo "n";
 // using a google font
 echo '<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">'; echo "n";
 // we have a css style sheet
 echo "<link rel='stylesheet' type='text/css' href='./weather.css'>"; echo "n";
 echo "<title>${co_feels_like}</title>"; echo "n";
 // using viewport ot make sure page is displayed fine in mobile too
 echo '<meta name="viewport" content="width=device-width, initial-scale=1.0">'; echo "n";
 // for iOS. icon to be used when someone adds the page to their home screen
 echo '<link href="apple-touch-icon.png" rel="apple-touch-icon" />'; echo "n";
 // get location script using getCurrentPosition function of browser. will pass the lat long as
 // param to this page via URL and reload it using new URL.
 // NOTE: Re-Locate will work only in HTTPS pages
 echo '<script>'; echo "n";
 echo 'function getLocation() {'; echo "n";
 echo ' if (navigator.geolocation) {'; echo "n";
 echo ' navigator.geolocation.getCurrentPosition(showPosition);'; echo "n";
 echo ' }'; echo "n";
 echo '}'; echo "n";
 echo 'function showPosition(position) {'; echo "n";
 echo ' window.location.href = "index.php?lat=" + position.coords.latitude + "&long=" + position.coords.longitude;'; echo "n";
 echo '}'; echo "n";
 echo '</script>'; echo "n";
 echo "</head>"; echo "n";
 echo "<body>"; echo "n";
 echo "<h1>${co_location}</h1>"; echo "n";
 // NOTE: Re-Locate will work only in HTTPS pages
 echo '<button id="relocate_btn" class="button" onclick="getLocation()">Re-Locate</button>'; echo "n";
 echo '<script>'; echo "n";
 // in case we are not on https, better hide the button as it will not work anyway
 echo " if (location.protocol != 'https:') {"; echo "n";
 echo ' document.getElementById("relocate_btn").style.display = "none";'; echo "n";
 echo '}'; echo "n";
 echo '</script>'; echo "n";
 echo "<p><b>Now: </b>${co_temp_str}</p>"; echo "n";
 echo "<p><b>Feels like: </b>${co_feels_like}</p>"; echo "n";
 // load a static map of the location to give a good idea of where the wind is coming in from
 echo '<img src="https://maps.googleapis.com/maps/api/staticmap?center=' . $p_lat . ',' . $p_long . '&zoom=15&size=300x300&maptype=roadmap&key=' . $googleapi_key . '" />'; echo "n";
 echo "<p><b>Winds: </b>${co_wind_str}</p>"; echo "n";
 echo "<p><b>Humidity: </b>${co_rel_humidity}</p>"; echo "n";
 echo "<p><b>Precipitation: </b>${co_precip_str}</p>"; echo "n";
 echo "<hr />"; echo "n";
 // thanking wunderground for their free and useful API
 echo "<p><img src='https://icons.wxug.com/logos/JPG/wundergroundLogo_4c.jpg' alt='Weather Underground' height='50'/></p>"; echo "n";
 echo "</body>"; echo "n";
 echo "</html>"; echo "n";
?>

 

Dinker has over a decade of experience in building products across diverse domains as Industrial Automation, Home Automations, Operating Systems, High Energy Particle Physics, Embedded Systems, Online Video Advertising, Messaging and K-12. He also founded Gungroo Software.