libs/js/jquery-geo-1.0a4/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" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
  10   <link rel="stylesheet" type="text/css" href="css/style.css" />
  11   <style type="text/css">
  12     #map
  13     {
  14       position: fixed;
  15       left: 0;
  16       top: 0;
  17       right: 0;
  18       bottom: 0;
  19     }
  20   </style>
  21 </head>
  22 <body>
  23   <div>
  24     <div id="map">
  25     </div>
  26     <div class="info">
  27       <div class="links">
  28         <a href="../" class="docLink">&lt; docs</a>
  29         <a href="http://jsfiddle.net/ryanttb/==JSFIDDLE==/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  30       </div>
  31       <h1>image</h1>
  32       <p></p>
  33       <button id="cmdZoom" type="button">zoom in</button>
  34     </div>
  35   </div>
  36   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  37   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  38   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  39   <script>
  40     $(function () {
  41       // set $.geo.proj to null because images don't have a projection
  42       $.geo.proj = null;
  43
  44       // create a map
  45       var map = $("#map").geomap({
  46         center: [ 5616/2, 3744/2 ],
  47         zoom: 4,
  48         axisLayout: "image",
  49         services: [
  50           {
  51             type: "tiled",
  52             src: function (view) {
  53               return "http://localhost:36426/ObliqueViewer/tiles/RightImage/000230-101708154420-cam5/" + (10 - view.zoom) + "/" + view.tile.column + "/" + view.tile.row;
  54             },
  55             attr: "&copy; Sanborn"
  56           }
  57         ],
  58         tilingScheme: {
  59           tileWidth: 256,
  60           tileHeight: 256,
  61           pixelSizes: [
  62             32,
  63             22.6274166,
  64             16,
  65             11.3137083,
  66             8,
  67             5.656854,
  68             4,
  69             2.828427,
  70             2,
  71             1.414213547,
  72             1
  73           ],
  74           origin: [ 0, 0 ]
  75         },
  76       });
  77
  78       $("#cmdZoom").button().click(function() {
  79         map.geomap("zoom", +1);
  80       });
  81     });
  82   </script>
  83
  84   <script>
  85     var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
  86     (function (d, t) {
  87       var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
  88       g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
  89       s.parentNode.insertBefore(g, s);
  90     } (document, 'script'));
  91   </script>
  92 </body>
  93 </html>