API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 30th, 2015
162
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.13 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Nearby</title>
  5. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  6. <meta name="Copyright" content="&copy; 2013, Intel Corporation. All rights reserved." />
  7. <!--
  8. * Copyright (c) 2013, Intel Corporation. All rights reserved.
  9. * Please see http://software.intel.com/html5/license/samples
  10. * and the included README.md file for license terms and conditions.
  11. -->
  12. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  13. <meta name="apple-mobile-web-app-capable" content="yes" />
  14.  
  15. <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
  16. <script src="lib/jquery/jquery-1.8.2.min.js"></script>
  17. <script src="cordova.js"></script>
  18. <script src="intelxdk.js"></script>
  19. <script>
  20. var pin = [
  21. {"name":"First", "lat":"8.3635595", "lng":"80.5042495"},
  22. {"name":"Second", "lat":"8.35059440", "lng":"80.5169444"}
  23. ];
  24. var markersArray = [], bounds;
  25. var myLat = 0, myLng = 0;
  26. var bearing, distance;
  27. var dataStatus = 0;
  28.  
  29. // setup map and listen to deviceready
  30. $( document ).ready(function() {
  31. document.addEventListener("deviceready", onDeviceReady, false);
  32. });
  33.  
  34. // start device compass, accelerometer and geolocation after deviceready
  35. function onDeviceReady() {
  36. navigator.splashscreen.hide();
  37. setupMap();
  38. // start cordova device sensors
  39. startAccelerometer();
  40. startCompass();
  41. startGeolocation();
  42. }
  43.  
  44. function xdkStartAR(){
  45. intel.xdk.display.startAR();
  46. $('#arView').css('background-color','transparent');
  47. $('body').css('background-color','transparent');
  48. document.getElementById('body').style.background = "transparent";
  49. }
  50.  
  51. function xdkStopAR(){
  52. intel.xdk.display.stopAR();
  53. }
  54.  
  55.  
  56. // setup google maps api
  57. function setupMap(){
  58. $("#map").height($(window).height()-60);
  59. var mapOptions = {
  60. zoom: 13,
  61. mapTypeControl: false,
  62. streetViewControl: false,
  63. navigationControl: true,
  64. scrollwheel: false,
  65. navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
  66. mapTypeId: google.maps.MapTypeId.ROADMAP
  67. };
  68. map = new google.maps.Map(document.getElementById("map"), mapOptions);
  69. }
  70.  
  71. // toggle between list view and map view
  72. function toggleView(){
  73. if($(".listView").is(":visible")){
  74. $(".listView").hide();
  75. $("#map").height($(window).height()-60);
  76. $(".mapView").fadeIn(function(){google.maps.event.trigger(map, "resize");map.fitBounds(bounds);});
  77. $("#viewbtn").html("List");
  78. } else {
  79. $(".mapView").hide();
  80. $(".listView").fadeIn();
  81. $("#viewbtn").html("Map");
  82. }
  83. }
  84.  
  85. // get data from API and store in array, add to list view and create markers on map, calculate
  86. function loadData(){
  87. dataStatus = "loading";
  88. markersArray = [];
  89. bounds = new google.maps.LatLngBounds();
  90. // add blue gps marker
  91. var icon = new google.maps.MarkerImage('http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',new google.maps.Size(30, 28),new google.maps.Point(0,0),new google.maps.Point(9, 28));
  92. var gpsMarker = new google.maps.Marker({position: new google.maps.LatLng(myLat, myLng), map: map, title: "My Position", icon:icon});
  93. bounds.extend(new google.maps.LatLng(myLat, myLng));
  94. markersArray.push(gpsMarker);
  95. // add all location markers to map and list view and array
  96. for(var i=0; i< pin.length; i++){
  97. $(".listItems").append("<div class='item'>"+pin[i].name+"</div>");
  98. addMarker(i);
  99. relativePosition(i);
  100. }
  101. map.fitBounds(bounds);
  102. google.maps.event.trigger(map, "resize");
  103. dataStatus = "loaded";
  104. }
  105.  
  106. // add marker to map and in array
  107. function addMarker(i){
  108. var marker = new google.maps.Marker({position: new google.maps.LatLng(pin[i].lat, pin[i].lng), map: map, title: pin[i].name});
  109. bounds.extend(new google.maps.LatLng(pin[i].lat, pin[i].lng));
  110. markersArray.push(marker);
  111. }
  112.  
  113. // clear all markers from map and array
  114. function clearMarkers() {
  115. while (markersArray.length) {
  116. markersArray.pop().setMap(null);
  117. }
  118. }
  119.  
  120. // calulate distance and bearing value for each of the points wrt gps lat/lng
  121. function relativePosition(i){
  122. var pinLat = pin[i].lat;
  123. var pinLng = pin[i].lng;
  124. var dLat = (myLat-pinLat)* Math.PI / 180;
  125. var dLon = (myLng-pinLng)* Math.PI / 180;
  126. var lat1 = pinLat * Math.PI / 180;
  127. var lat2 = myLat * Math.PI / 180;
  128. var y = Math.sin(dLon) * Math.cos(lat2);
  129. var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
  130. bearing = Math.atan2(y, x) * 180 / Math.PI;
  131. bearing = bearing + 180;
  132. pin[i]['bearing'] = bearing;
  133.  
  134. var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
  135. var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  136. distance = 3958.76 * c;
  137. pin[i]['distance'] = distance;
  138. }
  139.  
  140. // calculate direction of points and display
  141. function calculateDirection(degree){
  142. var detected = 0;
  143. $("#spot").html("");
  144. for(var i=0;i<pin.length;i++){
  145. if(Math.abs(pin[i].bearing - degree) <= 20){
  146. var away, fontSize, fontColor;
  147. // varry font size based on distance from gps location
  148. if(pin[i].distance>1500){
  149. away = Math.round(pin[i].distance);
  150. fontSize = "16";
  151. fontColor = "#ccc";
  152. } else if(pin[i].distance>500){
  153. away = Math.round(pin[i].distance);
  154. fontSize = "24";
  155. fontColor = "#ddd";
  156. } else {
  157. away = pin[i].distance.toFixed(2);
  158. fontSize = "30";
  159. fontColor = "#eee";
  160. }
  161. $("#spot").append('<div class="name" data-id="'+i+'" style="margin-left:'+(((pin[i].bearing - degree) * 5)+50)+'px;width:'+($(window).width()-100)+'px;font-size:'+fontSize+'px;color:'+fontColor+'">'+pin[i].name+'<div class="distance">'+ away +' miles away</div></div>');
  162. detected = 1;
  163. } else {
  164. if(!detected){
  165. $("#spot").html("");
  166. }
  167. }
  168. }
  169.  
  170. }
  171.  
  172. // Start watching the geolocation
  173. function startGeolocation(){
  174. var options = { timeout: 30000 };
  175. watchGeoID = navigator.geolocation.watchPosition(onGeoSuccess, onGeoError, options);
  176. }
  177.  
  178. // Stop watching the geolocation
  179. function stopGeolocation() {
  180. if (watchGeoID) {
  181. navigator.geolocation.clearWatch(watchGeoID);
  182. watchGeoID = null;
  183. }
  184. }
  185.  
  186. // onSuccess: Get the current location
  187. function onGeoSuccess(position) {
  188. document.getElementById('geolocation').innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' + 'Longitude: ' + position.coords.longitude;
  189. myLat = position.coords.latitude;
  190. myLng = position.coords.longitude;
  191. if(!dataStatus){
  192. loadData();
  193. }
  194. }
  195.  
  196. // onError: Failed to get the location
  197. function onGeoError() {
  198. document.getElementById('log').innerHTML += "onError=.";
  199. }
  200.  
  201. // Start watching the compass
  202. function startCompass() {
  203. var options = { frequency: 100 };
  204. watchCompassID = navigator.compass.watchHeading(onCompassSuccess, onCompassError, options);
  205. }
  206.  
  207. // Stop watching the compass
  208. function stopCompass() {
  209. if (watchCompassID) {
  210. navigator.compass.clearWatch(watchCompassID);
  211. watchCompassID = null;
  212. }
  213. }
  214.  
  215. // onSuccess: Get the current heading
  216. function onCompassSuccess(heading) {
  217. var directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW', 'N'];
  218. var direction = directions[Math.abs(parseInt((heading.magneticHeading) / 45) + 0)];
  219. document.getElementById('compass').innerHTML = heading.magneticHeading + "<br>" + direction;
  220. document.getElementById('direction').innerHTML = direction;
  221. var degree = heading.magneticHeading;
  222. if($("#arView").is(":visible") && dataStatus != "loading"){
  223. calculateDirection(degree);
  224. }
  225. }
  226.  
  227. // onError: Failed to get the heading
  228. function onCompassError(compassError) {
  229. document.getElementById('log').innerHTML += "onError=."+compassError.code;
  230. }
  231.  
  232. // Start checking the accelerometer
  233. function startAccelerometer() {
  234. var options = { frequency: 100 };
  235. watchAccelerometerID = navigator.accelerometer.watchAcceleration(onAccelerometerSuccess, onAccelerometerError, options);
  236. }
  237.  
  238. // Stop checking the accelerometer
  239. function stopAccelerometer() {
  240. if (watchAccelerometerID) {
  241. navigator.accelerometer.clearWatch(watchAccelerometerID);
  242. watchAccelerometerID = null;
  243. }
  244. }
  245.  
  246. // onSuccess: Get current accelerometer values
  247. function onAccelerometerSuccess(acceleration) {
  248. // for debug purpose to print out accelerometer values
  249. var element = document.getElementById('accelerometer');
  250. element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' +
  251. 'Acceleration Y: ' + acceleration.y + '<br />' +
  252. 'Acceleration Z: ' + acceleration.z ;
  253. if(acceleration.y > 7){
  254. $("#arView").fadeIn();
  255. $("#topView").hide();
  256. document.getElementById('body').style.background = "#d22";
  257. xdkStartAR();
  258. } else {
  259. $("#arView").hide();
  260. $("#topView").fadeIn();
  261. document.getElementById('body').style.background = "#fff";
  262. xdkStopAR();
  263. }
  264. }
  265.  
  266. // onError: Failed to get the acceleration
  267. function onAccelerometerError() {
  268. document.getElementById('log').innerHTML += "onError.";
  269. }
  270. </script>
  271. <style>
  272. body {background-color:#fff;font-family:Arial;margin:0;overflow-x:hidden;-webkit-user-select: none;}
  273. .navbar {background-color:#222;height:40px;padding:10px;text-align:center;color:#fff;font-size:20px;font-weight:bold;line-height:40px;}
  274. .navtitle {text-align:center;margin:auto}
  275. .navbtn {background-color:#333;padding:5px 10px;height:30px;color:#fff;font-size:18px;font-weight:bold;line-height:30px;border-radius:4px;border:1px solid #666}
  276. #actionbtn {float:right;}
  277. #viewbtn {float:left;}
  278. .query {padding:10px;background-color:#aaa;border-bottom:1px solid #fff;font-size:14px;font-weight:bold;color:#222;}
  279. .item {padding:20px 10px; background-color:#eee;border-bottom:1px solid #fff;font-size:18px;color:#333;text-shadow:0 1px #fff}
  280. .searchbox {padding:5px;background-color:#eee;border-bottom:1px solid #fff;}
  281. #search {box-sizing: border-box;width:100%;height:40px;font-size:16px;border-radius:20px;border:1px solid #bbb}
  282. .mapView {display:none}
  283. #map {height:200px;}
  284. #arView, #topView {display:none;}
  285. #arView{padding:30px 0; height:70px;text-align:center}
  286. .arMessage {color:#ddd;font-size:14px}
  287. #spot {text-align:center}
  288. .name, .distance {text-shadow:0 1px #666}
  289. .name {padding:15px;font-weight:bold;;background-color:#c22;border-radius:40px;margin-bottom:10px}
  290. #direction {color:#d55;font-size:20px;padding:15px;font-weight:bold;;background-color:#a22;border-radius:40px;display:inline-block;margin-bottom:10px;width:40px;line-height:40px}
  291. .distance {font-size:14px;font-weight:normal;}
  292. #debug {border:1px solid #999;display:none}
  293. .heading {background-color:#999;color:#eee;padding:5px;}
  294. #compass, #accelerometer, #geolocation {padding:5px}
  295. </style>
  296. </head>
  297. <body id="body">
  298. <div id="arView">
  299. <div class="arMessage">&uarr;<br>Tilt down to see all places</div>
  300. <br>
  301. <div class="arMessage">&larr; Move the device around to find spots &rarr;</div>
  302. <br>
  303. <div id="direction"></div>
  304. <br>
  305. <div id="spot"></div>
  306. </div>
  307. <div id="topView">
  308. <div class="navbar">
  309. <div id="actionbtn" class="navbtn"> &crarr; </div>
  310. <div id="viewbtn" class="navbtn" onclick="toggleView()">Map</div>
  311. <div class="navtitle">Nearby</div>
  312. </div>
  313. <div class="listView">
  314. <div class="listItems"></div>
  315. </div>
  316. <div class="mapView">
  317. <div id="map"></div>
  318. </div>
  319. </div>
  320. <div id="debug">
  321. <div class="heading">Geolocation</div>
  322. <div id="geolocation"></div>
  323. <div class="heading">Compass</div>
  324. <div id="compass"></div>
  325. <div class="heading">Accelerometer</div>
  326. <div id="accelerometer"></div>
  327. <div class="heading">Log</div>
  328. <div id="log"></div>
  329. </div>
  330. </body>
  331. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!