libs/js/jquery-geo-1.0a4/docs/examples/tracking.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>GPS Tracking</title>
   6   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   7   <meta name="description" content="A demo that continually tracks your current location">
   8   <meta name="author" content="Ryan Westphal">
   9   <link rel="stylesheet" href="css/style.css" />
  10   <style type="text/css">
  11     #map
  12     {
  13       position: fixed;
  14       bottom: 0;
  15       left: 0;
  16       right: 0;
  17       top: 0;
  18     }
  19   </style>
  20 </head>
  21 <body>
  22   <div>
  23     <div id="map">
  24     </div>
  25     <div class="info">
  26       <a href="../" class="docLink">&lt; docs</a>
  27       <h1>
  28         GPS Tracking</h1>
  29       <p>
  30         This simple demo continually follows your location at zoom level 15 showing the Esri World Street Map tiles.</p>
  31       <p>
  32         <a href="http://roycesimpson.wordpress.com/2011/07/19/air-android-arcgis-server-flex-api-gps-activated-mapping-apps/" target="_blank">Inspired by Royce Simpson</a></p>
  33     </div>
  34   </div>
  35   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  36   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  37   <script>
  38     $(function () {
  39       var map = null;
  40
  41       function initMap(center) {
  42         map = $("#map").geomap({
  43           center: center || [-71.0597732, 42.3584308],
  44           zoom: 15,
  45           services: [
  46             {
  47               type: "tiled",
  48               src: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{{=zoom}}/{{=tile.row}}/{{=tile.column}}",
  49               attr: "&copy; Esri"
  50             }
  51           ]
  52         });
  53       }
  54
  55       if (navigator.geolocation) {
  56         navigator.geolocation.watchPosition( function (p) {
  57           coord = [p.coords.longitude, p.coords.latitude];
  58           if (!map) {
  59             initMap(coord);
  60           } else {
  61             map.geomap("option", "center", coord);
  62           }
  63           map.geomap("empty");
  64           map.geomap("append", { type: "Point", coordinates: coord });
  65         }, function (error) {
  66           if ( !map ) {
  67             initMap();
  68           }
  69         }, {
  70           enableHighAccuracy: true,
  71           maximumAge: 10000
  72         } );
  73       } else {
  74         initMap();
  75       }
  76     });
  77   </script>
  78 </body>
  79 </html>