Day ten: poly weather

October 5, 2015

Always wanted to know how the weather was without looking out one of those windows? Now you can with the Polymer build weather app!

live demo

Using Polymer and its Google components made the visual part of the applications extremely simple. Let’s look at the official example on how to use Google maps in a standard non Polymer web app:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

    </script>
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
    </script>
  </body>
</html>

Now compare this to the Polymer way of placing a map on the page:

<google-map latitude="37.77493" longitude="-122.41942"></google-map>

Web components are awesome! And thanks to that the weather app was a breeze to build.

I did however have some issues with deployment. The weather API that I’m using serves over HTTP and the app host was serving over HTTPS. When sending an ajax request I got this little mean error:

Mixed Content: The page at 'https://poly-weather.firebaseapp.com/' was loaded over HTTPS, but requested an insecure script 'http://api.openweathermap.org/data/2.5/weather?q=San%20Francisco&units=metr…llback_4ac4db2398fe4cdbb22df6ccf84d3058&_=65ed38e1b19d4d17967a85bb63285a8a'. This request has been blocked; the content must be served over HTTPS.

To fix this I decided to get rid of the HTTPS all together and serve the app over on netlify.

Please leave a star on the repo and let me know what you think!

Comments