diff options
Diffstat (limited to 'apps/maps/map.html')
| -rw-r--r-- | apps/maps/map.html | 116 |
1 files changed, 116 insertions, 0 deletions
diff --git a/apps/maps/map.html b/apps/maps/map.html new file mode 100644 index 0000000..19bf1bf --- /dev/null +++ b/apps/maps/map.html @@ -0,0 +1,116 @@ + <!DOCTYPE html> + <html lang="en"> + <head> + <title>Maps</title> + <meta http-equiv="x-ua-compatible" content="IE=edge"> + <meta charset="utf-8" /> +<link rel="stylesheet" href="style.css"/> +<link rel="shortcut icon" href="favicon.ico"/> + +<script type="text/javascript"> +function printpage() +{ +window.print(); +} +function showbar(){ +document.getElementById('commands').style.display='inline'; +} +function hidebar(){ +document.getElementById('commands').style.display='none'; +} +</script> + </head> + + <body onload="GetMap()"> +<div id="splashscreen"></div> + <div id="mapDiv" style="" oncontextmenu="showbar();return false;" onclick="hidebar()"></div> + + <div class="commands" id="commands"> + <ul class="commands-list place-left"> + + + <li> + <a class="command" onclick="document.location.reload()"> + <img src="img/reload.png" alt="Refresh"/> + <span>Refresh</span> + </a> + + </li> + <li> + <a class="command" onclick="printpage();hidebar();"> + <img src="img/print.png" alt="Print"/> + <span>Print</span> + </a> + </li> + + </ul> + </div> + <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> + <script type="text/javascript"> + 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/ */ + var cred = "AlGKiCV2-DPhuwAoWfDfBPLg4VEnsHDLkrLWbNmsAXJ5c6KEVPgubMg47GeGkHDt"; + // 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_DENIED + 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> + + </body> + </html>
\ No newline at end of file |