Wednesday, March 6, 2013

GPS geolocation in HTML5


<%@ 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;">
          &nbsp;
        </div>
    </form>
</body>
</html>