Get the weather forecast in your webapp with this web component, paper-weather

Web Components Wednesday (WCW) blog series is created for two purposes: introducing easy-to-use components and educating people on the concept of Web Components. All the WCW blogs can be found here.

When satellites came in action, they helped human in many modern technologies, such as broadcasting channels, making a call and paying with credit cards in remote areas, tracking flights, and even assisting farmers to get the best time for irrigating their fields. Along with those, we also achieved the so-called weather prediction.

With that technology, there comes a plenty of online services for fetching the data, and getting the information can be as simple as opening an app. Today, we are going to take a look at one Material Design component, namely paper-weather, which is a highly convenient and functional weather element.

Get Your Weather Prediction Anytime, Anywhere

If you are planning to go to a park or do some camping, you might want to pick a sunny day. That’s why paper-weather can give you the forecast for 7 days. All you need to do is to set the location to your desired city, or its zip code, and voila!

From there, you can see the current weather condition (cloudy, sunny, rainstorm), and also the high/low and condition forecast for the upcoming days. There are around 20 weather conditions in total, and each of them has its own elegant design.

Imperial Unit and Metric Unit

By default, the component uses the Imperial unit. However, you can quickly change this by setting unit to “c,” which stands for Celsius.

As you can see, we can also display extra data, like the sunrise time or wind speed. This can be enabled by applying the attribute show-extra-data. What more? For mobile users, a more compact view can be taken into use with the attribute list. The component makes sure that data is still appropriately displayed using minimal space while being fully responsive.

...

...

Ideas for Localization

While using this component inside an app, you certainly want a good localization system so that it can automatically detect your user's location and measurement system.

For the location, you can adopt some reverse geocoding services or even a web component, like the one we introduced in this previous blog post, geo-codec.

For the unit, only three countries are using the Imperial system, which are Liberia, Myanmar, and the USA. Paper-weather provides a property called lastResponse, which you can use to get the latest response in JSON. From there, you can quickly grab the country from the key location and then detect, if it’s one of those three countries. If the condition passes, it changes to use the default system, otherwise, we use metric units.

Compatibility

The table below will shortly summarize the component info and compatibility on multiple platforms:

Component	Library	Mobile	Browsers
paper-weather	Polymer#1.9 - 2	✔

Final Words

Weather plays a vital role in our everyday life. With this component, you might make it one step easier for users to make better decisions for their plans. Moreover, it’s simple to use: just import and add a pair of HTML tags. Christmas is coming so make sure to use this for snow prediction.

Click here for more awesome web components

Relevant articles:

• Four Web Components that can handle your toast notifications with ease
• A powerful web component that lets you edit JSON in browser
• Lazy loading images with Web Components