All About SharePoint is a blog about SharePoint, InfoPath and related technologies. It was started in 2005 and has good readership in many countries. It covers SharePoint 2003, 2007, 2010, 2013, 2016 and Office 365. You can read articles, tips, tutorials and news. It has code samples and complete applications as well.

In this article, we will extend the idea further and include Twitter. In last article we saw how one can find location of site visitors using HTML5 Geolocation feature. Now we will use that feature to find Twitter users in your area. We will add two text boxes in the application. One to enter the search term and the other to enter the radius of the search. Application will first find your location on the map and then search in the proximity of your location. You can set radius to any value you like. Application will find Twitter users in that radius of your location and then show their logo, name, tweet and tweet time. It works in browsers as well as mobile devices. If you haven't figured out how to run HTML5 in SharePoint, read following article.

searchResults() is the callback function. We pass search keyword in the query parameter called "q" and then we pass geocode that comprises of latitude, longitude and radius. Then we add this search query dynamically to the page body. searchResults() function is given below:

Now access this ASPX page in browser and you are done. Again if you want to see how to configure SharePoint to run HTML5 code, please visit following URL. It has complete detail on how to configure the server.

Enter search term and the radius and click Submit. Your browser will ask for your permission to use your location. Allow it and search will show all Twitter users in your area tweeting about the search keyword.

This is how it will look in SharePoint:

Figure 1 : Twitter results in SharePoint

If you access following URL in your browser, you will see results as shown below in Figure 2.

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:

position of the user. OK, now we know how to find the location. Next goal is to show this location on the map. We will use Google Maps for this purpose. Again, it's not difficult to use Google Maps. If you haven't used Google Maps before, you may want to check out the documentation online at http://code.google.com/apis/maps/documentation/javascript. You have to include a Google Map link in your code before you can actually use this service. Add following line between the <head> ... </head> tags.

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:

"You have decided not to share your location.";}else if (positionError.code == 2) { results.innerHTML = "The network is down or the positioning service can't be reached.";}else if (positionError.code == 3) {

results.innerHTML = "The attempt timed out before it could get the location data.";}

else { results.innerHTML = "Unknown error. Please try later.";}

}

In geolocationFailure() function we check different conditions to know the cause of failure and then show message accordingly. That's it.

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:

Sunday, February 19, 2012

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:

We get latitude and longitude coords to find the position of the user. OK, now we know how to find the location. Next goal is to show this location on the map. We will use Google Maps for this purpose. Again, it's not difficult to use Google Maps. If you haven't used Google Maps before, you may want to check out the documentation online at http://code.google.com/apis/maps/documentation/javascript. You have to include a Google Map link in your code before you can actually use this service. Add following line between the <head> ... </head> tags.

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:

map.setCenter(location);var infowindow = new
google.maps.InfoWindow();
infowindow.setContent("This is your location on the
map!");

infowindow.setPosition(location);

infowindow.open(map); results.innerHTML = "You are 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:

"You have decided not to share your
location.";
}
else if (positionError.code == 2)
{
results.innerHTML
=
"The network is down or the
positioning service can't be reached.";
}
else
if (positionError.code == 3) {

results.innerHTML =
"The attempt timed
out before it could get the location data.";
}

else {
results.innerHTML
=
"Unknown error. Please try
later.";
}

}

In geolocationFailure() function we check different conditions to know the cause of failure and then show message
accordingly. That's it.

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: