libs/js/jquery-geo-1.0b2/docs/examples/image.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>image example</title>
   6   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   7   <meta name="description" content="An example of image display">
   8   <meta name="author" content="Ryan Westphal">
   9   <link rel="stylesheet" type="text/css" href="css/style.css" />
  10   <style type="text/css">
  11     #map
  12     {
  13       position: absolute;
  14       top: 0;
  15       right: 0;
  16       bottom: 0;
  17       left: 0;
  18     }
  19   </style>
  20 </head>
  21 <body>
  22   <div>
  23     <div id="map">
  24     </div>
  25     <div class="info">
  26       <div class="links">
  27         <a href="../" class="docLink">&lt; docs</a>
  28         <a href="http://jsfiddle.net/ryanttb/x6Sq3/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  29       </div>
  30       <h1>axisLayout: &quot;image&quot;</h1>
  31       <p>Viewing a GigaPan image from the 2012 Olympic Games in London with jQuery Geo.</p>
  32       <p>Inspired by: <a href="http://sportsillustrated.cnn.com/olympics/2012/gigapan/beach_volleyball/" target="_blank">Beach Volleyball GigaPan</a></p>
  33     </div>
  34   </div>
  35   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  36   <script src="../jquery.geo-test.min.js"></script>
  37   <script>
  38     $(function () {
  39       // set $.geo.proj to null because images don't have a projection
  40       $.geo.proj = null;
  41
  42       // create a map
  43       var map = $("#map").geomap({
  44         bbox: [ 0, 0, 768 * 64, 256 * 64 ],
  45         zoom: 3,
  46         zoomMin: 3,
  47         axisLayout: "image",
  48         services: [
  49           {
  50             type: "tiled",
  51             src: function (view) {
  52               if ( view.tile.column >= 0 && view.tile.row >= 0 ) {
  53                 var quadKey = tileToQuadkey(view.tile.column, view.tile.row, view.zoom),
  54                     r = quadKey.substr( 0, 2 );
  55
  56                 if ( quadKey.length > 5 ) {
  57                   return "http://tile111.gigapan.org/gigapans0/111225/tiles.83f6152eea5140f76880a283c3479288//r" + r + "/" + quadKey.substr( 2, 3 ) + "/r" + quadKey + ".jpg";
  58                 } else {
  59                   return "http://tile111.gigapan.org/gigapans0/111225/tiles.83f6152eea5140f76880a283c3479288//r" + r + "/r" + quadKey + ".jpg";
  60                 }
  61               } else {
  62                 return "";
  63               }
  64             },
  65             attr: '<span style="color: white; font-weight: bold;">&copy; David Bergman, Sports Illustrated</span>'
  66           }
  67         ],
  68         tilingScheme: {
  69           tileWidth: 256,
  70           tileHeight: 256,
  71           levels: 9,
  72           basePixelSize: 256,
  73           origin: [ 0, 0 ]
  74         },
  75       });
  76
  77       function tileToQuadkey(column, row, zoom) {
  78         var quadKey = "",
  79             digit,
  80             mask;
  81
  82         for ( var i = zoom; i > 0; i-- ) {
  83           digit = 0;
  84           mask = 1 << (i - 1);
  85           if ((column & mask) !== 0) {
  86             digit++;
  87           }
  88           if ((row & mask) !== 0) {
  89             digit += 2;
  90           }
  91           quadKey += digit;
  92         }
  93         return quadKey;
  94       }
  95     });
  96   </script>
  97
  98   <script>
  99     var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
 100     (function (d, t) {
 101       var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
 102       g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
 103       s.parentNode.insertBefore(g, s);
 104     } (document, 'script'));
 105   </script>
 106 </body>
 107 </html>