libs/js/jquery-geo-1.0a4/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.16/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 class="not-mobile">tiled</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               <!--
 104               jQuery Geo supports custom modes by letting you set the mode option to
 105               any string you want. You can set a cursor for your custom mode using the
 106               cursors option. When on a custom mode, you will get the geomapclick event.
 107               -->
 108               <input type="radio" id="remove" name="mode" value="remove" /><label for="remove">remove</label>
 109             </div>
 110
 111             <div class="modes">
 112               <input type="radio" id="measureLength" name="mode" value="measureLength" /><label for="measureLength">measureLength</label>
 113               <input type="radio" id="measureArea" name="mode" value="measureArea" /><label for="measureArea">measureArea</label>
 114             </div>
 115           </div>
 116         </section>
 117
 118         <section id="shapeLabels" style="display: none;">
 119           <label>
 120             <h2>label</h2>
 121             <input type="text" name="shapeLabel" />
 122           </label>
 123         </section>
 124
 125         <div class="not-mobile">
 126           <section id="drawStyle" style="display: none;">
 127             <h2>style</h2>
 128               <div>
 129                 <label><span>color</span> <input type="color" name="color" value="#7f0000" /></label>
 130                 <label><span>opacity</span> <input type="text" name="opacity" value="1.0" /></label>
 131               </div>
 132               <div>
 133                 <label><span>fill</span> <input type="color" name="fill" value="" /></label>
 134                 <label><span>fillOpacity</span> <input type="text" name="fillOpacity" value=".2" /></label>
 135               </div>
 136               <div>
 137                 <label><span>stroke</span> <input type="color" name="stroke" value="" /></label>
 138                 <label><span>strokeOpacity</span> <input type="text" name="strokeOpacity" value="1" /></label>
 139               </div>
 140               <div>
 141                 <label><span>strokeWidth</span> <input type="number" name="strokeWidth" value="2" /></label>
 142               </div>
 143               <div>
 144                 <label><span>width</span> <input type="number" name="width" value="8" /></label>
 145                 <label><span>height</span> <input type="number" name="height" value="8" /></label>
 146               </div>
 147               <div>
 148                 <label><span>borderRadius</span> <input type="number" name="borderRadius" value="8" /></label>
 149               </div>
 150
 151           </section>
 152         </div>
 153
 154         <section id="clickTarget" style="display: none;">
 155           <h2>target</h2>
 156           <div class="clickTargets">
 157             <input type="radio" id="clickTargetWidget" name="clickTarget" value="widget" checked="checked" /><label for="clickTargetWidget">widget</label>
 158             <input type="radio" id="clickTargetBasemapService" name="clickTarget" value="mapquest-open" /><label for="clickTargetBasemapService">basemap</label>
 159             <input type="radio" id="clickTargetSpeedtestService" name="clickTarget" value="broadband-speedtest" /><label for="clickTargetSpeedtestService">speedtest</label>
 160           </div>
 161         </section>
 162
 163         <section id="serviceToggle">
 164           <h2>toggle</h2>
 165
 166           <div class="toggleTargets">
 167             <input type="checkbox" id="toggleTargetBasemapService" name="toggleTarget" value="mapquest-open" checked="checked" /><label for="toggleTargetBasemapService">basemap</label>
 168             <input type="checkbox" id="toggleTargetSpeedtestService" name="toggleTarget" value="broadband-speedtest" checked="checked" /><label for="toggleTargetSpeedtestService">speedtest</label>
 169           </div>
 170         <section>
 171
 172         <section id="zoomButtons">
 173           <h2>zoom</h2>
 174
 175           <button id="zoomOut" type="button">out</button>
 176
 177           <button id="zoomIn" type="button">in</button>
 178         </section>
 179       </form>
 180     </div>
 181   </div>
 182   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 183   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
 184   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
 185   <script src="js/all-tiled.js"></script>
 186
 187   <script>
 188     var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
 189     (function (d, t) {
 190       var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
 191       g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
 192       s.parentNode.insertBefore(g, s);
 193     } (document, 'script'));
 194   </script>
 195 </body>
 196 </html>