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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>everything tiled</title>
   6   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   7   <meta name="description" content="A demo of everything using a tiled service">
   8   <meta name="author" content="Ryan Westphal">
   9   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/blitzer/jquery-ui.css" />
  10   <link rel="stylesheet" type="text/css" href="css/style.css" />
  11   <style type="text/css">
  12
  13     h2 { display: inline-block; }
  14     @media only screen and (min-width: 800px)
  15     {
  16       h2 { display: inline-block; min-width: 8em; }
  17     }
  18
  19     h3 { display: inline-block; margin-left: 2em; }
  20
  21     #map
  22     {
  23       position: fixed;
  24       left: 0;
  25       top: 0;
  26       right: 0;
  27       bottom: 0;
  28     }
  29
  30     /* a label CSS example: all text for labels on the speedtest service will be purple and bold! */
  31     #broadband-speedtest
  32     {
  33       color: purple;
  34       font-weight: bold;
  35     }
  36
  37     .modes { margin: .5em 0; }
  38
  39     #drawStyle label span { display: inline-block; font-weight: bold; text-align: right; width: 7em; }
  40     #drawStyle input { width: 6em; }
  41
  42     .scrollOption-container, .scrollOptions, .clickTargets, .toggleTargets { display: inline-block; }
  43
  44   </style>
  45 </head>
  46 <body>
  47   <div>
  48     <div id="map">
  49     </div>
  50     <div class="info mobile-shrink">
  51       <div class="links not-mobile">
  52         <a href="../" class="docLink">&lt; docs</a>
  53         <a href="http://jsfiddle.net/ryanttb/uSMjS/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  54       </div>
  55
  56       <h1>tiled <img id="indicator" alt="" src="img/ajax-loader.gif" style="display: none;" /></h1>
  57
  58       <p class="not-mobile">The everything demo, tiled edition!</p>
  59
  60       <section class="not-mobile">
  61         <h2>info</h2> <button id="toggle-info" type="button" title="click to view some map info">show / hide</button>
  62
  63         <table id="mapInfo" style="display: none;">
  64           <tr><th>bbox</th><td data-option="bbox"></td></tr>
  65           <tr><th>center</th><td data-option="center"></td></tr>
  66           <tr><th>zoom</th><td data-option="zoom"></td></tr>
  67         </table>
  68       </section>
  69
  70       <form>
  71
  72         <section>
  73           <h2>basics</h2>
  74
  75           <input type="checkbox" id="togglePannable" name="togglePannable" value="togglePannable" checked="checked" /><label for="togglePannable">pannable</label>
  76
  77           <div class="scrollOption-container not-mobile">
  78             <h3>scroll</h3>
  79             <div class="scrollOptions">
  80               <input type="radio" id="scrollOptionDefault" name="scrollOption" value="default" checked="checked" /><label for="scrollOptionDefault">default / scroll</label>
  81               <input type="radio" id="scrollOptionOff" name="scrollOption" value="off" /><label for="scrollOptionOff">off</label>
  82             </div>
  83           </div>
  84         </section>
  85
  86         <section>
  87           <h2>mode</h2> <button id="change-mode" type="button" title="click to change the mode">pan</button>
  88
  89           <div id="modeOptions" style="display: none;">
  90             <div class="modes">
  91               <input type="radio" id="static" name="mode" value="static" /><label for="static">static</label>
  92               <input type="radio" id="pan" name="mode" value="pan" checked="checked" /><label for="pan">pan</label>
  93               <input type="radio" id="zoom" name="mode" value="zoom" /><label for="zoom">zoom</label>
  94             </div>
  95
  96             <div class="modes">
  97               <input type="radio" id="drawPoint" name="mode" value="drawPoint" /><label for="drawPoint">drawPoint</label>
  98               <input type="radio" id="drawLineString" name="mode" value="drawLineString" /><label for="drawLineString">drawLineString</label>
  99               <input type="radio" id="drawPolygon" name="mode" value="drawPolygon" /><label for="drawPolygon">drawPolygon</label>
 100             </div>
 101
 102             <div class="modes">
 103               <input type="radio" id="dragBox" name="mode" value="dragBox" /><label for="dragBox">dragBox</label>
 104               <input type="radio" id="dragCircle" name="mode" value="dragCircle" /><label for="dragCircle">dragCircle</label>
 105             </div>
 106
 107             <div class="modes">
 108               <!--
 109               jQuery Geo supports custom modes by letting you set the mode option to
 110               any string you want. You can set a cursor for your custom mode using the
 111               cursors option. When on a custom mode, you will get the geomapclick event.
 112               -->
 113               <input type="radio" id="remove" name="mode" value="remove" /><label for="remove">remove</label>
 114             </div>
 115
 116             <div class="modes">
 117               <input type="radio" id="measureLength" name="mode" value="measureLength" /><label for="measureLength">measureLength</label>
 118               <input type="radio" id="measureArea" name="mode" value="measureArea" /><label for="measureArea">measureArea</label>
 119             </div>
 120           </div>
 121         </section>
 122
 123         <section id="shapeLabels" style="display: none;">
 124           <label>
 125             <h2>label</h2>
 126             <input type="text" name="shapeLabel" />
 127           </label>
 128         </section>
 129
 130         <div class="not-mobile">
 131           <section id="drawStyle" style="display: none;">
 132             <h2>style</h2>
 133               <div>
 134                 <label><span>color</span> <input type="color" name="color" value="#7f0000" /></label>
 135                 <label><span>opacity</span> <input type="text" name="opacity" value="1.0" /></label>
 136               </div>
 137               <div>
 138                 <label><span>fill</span> <input type="color" name="fill" value="" /></label>
 139                 <label><span>fillOpacity</span> <input type="text" name="fillOpacity" value=".2" /></label>
 140               </div>
 141               <div>
 142                 <label><span>stroke</span> <input type="color" name="stroke" value="" /></label>
 143                 <label><span>strokeOpacity</span> <input type="text" name="strokeOpacity" value="1" /></label>
 144               </div>
 145               <div>
 146                 <label><span>strokeWidth</span> <input type="number" name="strokeWidth" value="2" /></label>
 147               </div>
 148               <div>
 149                 <label><span>width</span> <input type="number" name="width" value="8" /></label>
 150                 <label><span>height</span> <input type="number" name="height" value="8" /></label>
 151               </div>
 152               <div>
 153                 <label><span>borderRadius</span> <input type="number" name="borderRadius" value="8" /></label>
 154               </div>
 155
 156           </section>
 157         </div>
 158
 159         <section id="clickTarget" style="display: none;">
 160           <h2>target</h2>
 161           <div class="clickTargets">
 162             <input type="radio" id="clickTargetWidget" name="clickTarget" value="widget" checked="checked" /><label for="clickTargetWidget">widget</label>
 163             <input type="radio" id="clickTargetBasemapService" name="clickTarget" value="mapquest-open" /><label for="clickTargetBasemapService">basemap</label>
 164             <input type="radio" id="clickTargetSpeedtestService" name="clickTarget" value="broadband-speedtest" /><label for="clickTargetSpeedtestService">speedtest</label>
 165           </div>
 166         </section>
 167
 168         <section id="serviceToggle">
 169           <h2>toggle</h2>
 170
 171           <div class="toggleTargets">
 172             <input type="checkbox" id="toggleTargetBasemapService" name="toggleTarget" value="mapquest-open" checked="checked" /><label for="toggleTargetBasemapService">basemap</label>
 173             <input type="checkbox" id="toggleTargetSpeedtestService" name="toggleTarget" value="broadband-speedtest" checked="checked" /><label for="toggleTargetSpeedtestService">speedtest</label>
 174           </div>
 175         <section>
 176
 177         <section id="zoomButtons">
 178           <h2>zoom</h2>
 179
 180           <button id="zoomOut" type="button">out</button>
 181
 182           <button id="zoomIn" type="button">in</button>
 183         </section>
 184       </form>
 185     </div>
 186   </div>
 187   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 188   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
 189   <script src="../../js/excanvas.js"></script>
 190   <script src="../../js/jsrender.js"></script>
 191   <script src="../../js/jquery.mousewheel.js"></script>
 192   <script src="../../js/jquery.ui.widget.js"></script>
 193   <script src="../../js/jquery.geo.core.js"></script>
 194   <script src="../../js/jquery.geo.geographics.js"></script>
 195   <script src="../../js/jquery.geo.geomap.js"></script>
 196   <script src="../../js/jquery.geo.tiled.js"></script>
 197   <script src="../../js/jquery.geo.shingled.js"></script>
 198   <!--<script src="../jquery.geo-test.min.js"></script>-->
 199   <script src="js/all-tiled.js"></script>
 200
 201   <script>
 202     var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
 203     (function (d, t) {
 204       var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
 205       g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
 206       s.parentNode.insertBefore(g, s);
 207     } (document, 'script'));
 208   </script>
 209 </body>
 210 </html>