HTML5 Geolocation and SharePoint 2010
Let's see how we can take advantage of HTML5 Geolocation feature in SharePoint. Geolocation allows you to find the location of your site visitors. There can be many uses of this feature. For example, you can use it to gather statistics for your site. You can then create a graph or chart widget and show countries that visited your site or blog the most. There are endless possibilities. You can also show cities. It can really come in handy if you run a business on the net. This thing also works in mobile devices. Looking at the number of mobile applications that are sprouting everyday, this feature can really play a pivotal role in gathering geographic data of your visitors. It will directly impact your sales and marketing campaigns. Plus point is that this feature has good support in every browser. Well if you are thinking about IE 7 and IE 8, forget it. You need IE 9 for this thing to work but that's for computers. For devices that use non-IE browsers, this isn't a problem. Almost all browsers support this feature. If you are afraid that this thing will not work in SharePoint, let me tell you that it will work. All you need is IE9 browser. If you don't have IE 9, start using Chrome or Firefox. They work well with SharePoint 2010 and also support other standards that are popular today. This includes HTML5 technology.
If you want to learn how to prepare SharePoint for HTML5 usage, read following article:
Jump to section "Using HTML5 in SharePoint 2010". You will find all the details in that section.
Once you are ready, start coding the HTML5 geolocation page. Using Geolocation is very easy. Check out the following code:
Add a div tag to the page. This will be used to draw the map.
Use following style to design the map layout:
Now, you are ready to see everything in action. Call following function when the window loads:
This code writes results in the "results" div. Variable myOptions contains options like zoom level and the map type. Map type that we are going to use is ROADMAP. After setting the options, create the map:
Following code will set user's location on the map:
Variable location contains the exact location. Then we show a box on the map with a message. We use InfoWindow() function to show the box. This box will appear at user's location. The following function will be called in case of failure:
In geolocationFailure() function we check different conditions to know the cause of failure and then show message accordingly. That's it.
Now you have the code. All you have to do is use it inside a SharePoint page. This has been demostrated in the following article so I am not going to repeat the steps again.
Best way of running HTML5 code on a SharePoint page is to use a content editor web part and then access the URL of the HTML5 page inside the web part. You need to host the page in IIS first. After you have configured the content editor web part, open the SharePoint page in browser.
This is how the map will look like on your page:
Figure 1: Google Map with Geolocation
And this is how it will look on your mobile:
Figure 2: Permission to allow device to use your current location
After you click OK, you see the map.
Figure 3: Google Map on your device using Geolocation
If you want to see your location in the browser, open following link in your browser:
Stay tuned! Next article will show you how to use Geolocation to find Twitter users in your area.