Useful and Cool HTML5 Features You must Know

By | September 15, 2015

728x90-popads_1

Useful and Cool HTML5 Features You must Know

In this article, we are going to build a simple app that receives the user’s geographic coordinates (latitude and longitude) with the HTML5’s Geolocation API and shows the current weather for the place they are located in (using a remote API provided by OpenWeatherMap).

Useful HTML5 Features

 

live_demo_button.fw_b-download

Geolocation API’s browser support

The Geolocation API has an excellent support so you may feel free to start using it today. 90.68% of Internet users globally have browsers that support it according to Can I Use.

It is supported in the following browsers:
1. IE 9+
2. Firefox 31+
3. Chrome 31+
4. Safari 7+
5. Opera 30+
6. iOS Safari 7.1+
7. Android 4.1+
8. Chrome for Android 42+

Every major browser supports it except Opera Mini.

About Gelocation

Before we start, it is important to know that the user has to allow geolocation usage for your website before you can use his location. If the user does not allow your website to get his coordinates – then you would not be able to use this feature.

Getting the current local weather with the Geolocation API

Our skeleton just loads jQuery and adds some basic styles to the text with the local weather (which will be added with JavaScript. Therefore, if the user does not allow the website to use his location – he will get a blank screen).

We declare our paragraphs to have a white color with a cursive font and be bigger than usual. Then, we add some emphasis to the span tag which will hold the weather values retrieved from the weather API.

If the user supports/has enabled geolocation ( "geolocation" in navigator is true) then we get the weather by calling our getWeather function and pass it the latitude and longitude from the Geolocation API.

The syntax is the following:

Otherwise, we give the user a friendly alert instructing him what to do:

Next is our getWeather function which just performs a XHR GET request to the OpenWeatherMap API and calls showWeather when the results are ready:

Finally, our showWeather method accepts the returned weather data and creates markup using parts of it:

Notice that we are converting the sunrise/sunset times from a UNIX timestamp to a date string in the format that we want.

Conclusion

Geolocation can be the source of powerful applications. Many applications out there are already using it. With it, you can create dating sites that finds people in the area, show the weather for the user’s location in your website (as you just saw), create apps that recommend people sights to visit in their area and an endless more groups of things.

I encourage you to go on and build something cool with the Geolocation API and tell me all about it in the comments below.

728x90-popads_1