<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Geolocation.aspx.vb" Inherits="HTML5Applications.Geolocation" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<!--
These ApI link used for Google
<script
src="http://code.google.com/apis/gears/gears_init.js"
type="text/javascript"></script>
<script src="geo.js"
type="text/javascript" ></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>-->
<script type="text/javascript">
function ShowMyLocation()
{
navigator.geolocation.getCurrentPosition(locationSuccess,
locationFail);
}
function locationSuccess(position)
{
latitude =
position.coords.latitude;
longitude =
position.coords.longitude;
}
function locationFail()
{
alert("Oops, could not find you.");
}
var map = null;
function GetMap()
{
/*
Replace YOUR_BING_MAPS_KEY with your own credentials.
Obtain a key by signing up for a
developer account at
http://www.microsoft.com/maps/developers/ */
/*my key
is AumaKlvNi3BaMXMaE1PmXwa7jpAu29Ot3oQrbpU33wUcVh2k0b2T05Kxu7eVuY9I */
var cred = "AumaKlvNi3BaMXMaE1PmXwa7jpAu29Ot3oQrbpU33wUcVh2k0b2T05Kxu7eVuY9I";
//
Initialize map
map = new
Microsoft.Maps.Map(document.getElementById("mapDiv"),{ credentials: cred });
// Check
if browser supports geolocation
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(locateSuccess, locateFail);
}
else
{
alert('I\'m sorry, but Geolocation is not supported in your current
browser. Have you tried running this demo in IE9?');
}
}
//
Successful geolocation
function locateSuccess(loc)
{
// Set
the user's location
var userLocation = new Microsoft.Maps.Location(loc.coords.latitude,
loc.coords.longitude);
// Zoom
in on user's location on map
map.setView({ center: userLocation,
zoom: 17 });
// Draw
circle of area where user is located
var locationArea = drawCircle(userLocation);
map.entities.push(locationArea);
}
//
Unsuccessful geolocation
function locateFail(geoPositionError)
{
switch (geoPositionError.code)
{
case 0: // UNKNOWN_ERROR.
alert('An unknown error occurred, sorry');
break;
case 1: // PERMISSION_DENIED55.
alert('Permission to use Geolocation was denied');
break;
case 2: // POSITION_UNAVAILABLE
alert('Couldn\'t find you...');
break;
case 3: // TIMEOUT
alert('The Geolocation request took too long and timed out');
break;
default:
}
}
// Draw
blue circle on top of user's location
function drawCircle(loc)
{
var radius = 100;
var R = 6378137;
var lat = (loc.latitude * Math.PI) / 180;
var lon = (loc.longitude * Math.PI) / 180;
var d = parseFloat(radius) / R;
var locs = new Array();
for (x = 0; x <= 360; x++)
{
var p = new Microsoft.Maps.Location();
brng = x * Math.PI / 180;
p.latitude =
Math.asin(Math.sin(lat) * Math.cos(d) + Math.cos(lat) * Math.sin(d) *
Math.cos(brng));
p.longitude = ((lon +
Math.atan2(Math.sin(brng) * Math.sin(d) * Math.cos(lat), Math.cos(d) -
Math.sin(lat) * Math.sin(p.latitude))) * 180) / Math.PI;
p.latitude = (p.latitude * 180)
/ Math.PI;
locs.push(p);
}
return new Microsoft.Maps.Polygon(locs, { fillColor: new Microsoft.Maps.Color(125, 0,
0, 255), strokeColor: new Microsoft.Maps.Color(0, 0, 0, 255) });
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="background-color: lightgoldenrodyellow; text-align: left;">
<H2>CHECK YOUR GEOLOCATION</H2>
</div>
<br /><br />
<input type="button" id="btnShowLocation" name="btnShowLocation" value="Show my Location" onclick="GetMap();" />
<br /><br />
<div id="mapDiv" style="position: relative; width: 800px; height: 600px;"></div>
</div>
<br /><br />
<div style="background-color: GrayText; text-align: center;">
</div>
</form>
</body>
</html>
