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">
27 <a href="../" class="docLink">< docs</a>
28 <a href="http://jsfiddle.net/ryanttb/x6Sq3/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
30 <h1>axisLayout: "image"</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>
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>
39 // set $.geo.proj to null because images don't have a projection
43 var map = $("#map").geomap({
44 bbox: [ 0, 0, 768 * 64, 256 * 64 ],
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 );
56 if ( quadKey.length > 5 ) {
57 return "http://tile111.gigapan.org/gigapans0/111225/tiles.83f6152eea5140f76880a283c3479288//r" + r + "/" + quadKey.substr( 2, 3 ) + "/r" + quadKey + ".jpg";
59 return "http://tile111.gigapan.org/gigapans0/111225/tiles.83f6152eea5140f76880a283c3479288//r" + r + "/r" + quadKey + ".jpg";
65 attr: '<span style="color: white; font-weight: bold;">© David Bergman, Sports Illustrated</span>'
77 function tileToQuadkey(column, row, zoom) {
82 for ( var i = zoom; i > 0; i-- ) {
85 if ((column & mask) !== 0) {
88 if ((row & mask) !== 0) {
99 var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
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'));