libs/js/jquery-geo-1.0a4/docs/examples/all-shingled.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>everything shingled</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 shingled 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 hydro service will be blue! */
  31     #massgis_hydrography
  32     {
  33       color: blue;
  34     }
  35
  36     .modes { margin: .5em 0; }
  37
  38     #drawStyle label span { display: inline-block; font-weight: bold; text-align: right; width: 7em; }
  39     #drawStyle input { width: 6em; }
  40
  41     .scrollOption-container, .scrollOptions, .clickTargets, .toggleTargets { display: inline-block; }
  42
  43   </style>
  44 </head>
  45 <body>
  46   <div>
  47     <div id="map">
  48     </div>
  49     <div class="info mobile-shrink">
  50       <div class="links not-mobile">
  51         <a href="../" class="docLink">&lt; docs</a>
  52         <a href="http://jsfiddle.net/ryanttb/69mFE/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  53       </div>
  54
  55       <h1 class="not-mobile">shingled</h1>
  56
  57       <p class="not-mobile">The everything demo, shingled edition!</p>
  58
  59       <section class="not-mobile">
  60         <h2>info</h2> <button id="toggle-info" type="button" title="click to view some map info">show / hide</button>
  61
  62         <table id="mapInfo" style="display: none;">
  63           <tr><th>bbox</th><td data-option="bbox"></td></tr>
  64           <tr><th>center</th><td data-option="center"></td></tr>
  65           <tr><th>zoom</th><td data-option="zoom"></td></tr>
  66         </table>
  67       </section>
  68
  69       <form>
  70
  71         <section>
  72           <h2>basics</h2>
  73
  74           <input type="checkbox" id="togglePannable" name="togglePannable" value="togglePannable" checked="checked" /><label for="togglePannable">pannable</label>
  75
  76           <div class="scrollOption-container not-mobile">
  77             <h3>scroll</h3>
  78             <div class="scrollOptions">
  79               <input type="radio" id="scrollOptionDefault" name="scrollOption" value="default" checked="checked" /><label for="scrollOptionDefault">default / scroll</label>
  80               <input type="radio" id="scrollOptionOff" name="scrollOption" value="off" /><label for="scrollOptionOff">off</label>
  81             </div>
  82           </div>
  83         </section>
  84
  85         <section>
  86           <h2>mode</h2> <button id="change-mode" type="button" title="click to change the mode">pan</button>
  87
  88           <div id="modeOptions" style="display: none;">
  89             <div class="modes">
  90               <input type="radio" id="static" name="mode" value="static" /><label for="static">static</label>
  91               <input type="radio" id="pan" name="mode" value="pan" checked="checked" /><label for="pan">pan</label>
  92               <input type="radio" id="zoom" name="mode" value="zoom" /><label for="zoom">zoom</label>
  93             </div>
  94
  95             <div class="modes">
  96               <input type="radio" id="drawPoint" name="mode" value="drawPoint" /><label for="drawPoint">drawPoint</label>
  97               <input type="radio" id="drawLineString" name="mode" value="drawLineString" /><label for="drawLineString">drawLineString</label>
  98               <input type="radio" id="drawPolygon" name="mode" value="drawPolygon" /><label for="drawPolygon">drawPolygon</label>
  99             </div>
 100
 101             <div class="modes">
 102               <!--
 103               jQuery Geo supports custom modes by letting you set the mode option to
 104               any string you want. You can set a cursor for your custom mode using the
 105               cursors option. When on a custom mode, you will get the geomapclick event.
 106               -->
 107               <input type="radio" id="remove" name="mode" value="remove" /><label for="remove">remove</label>
 108             </div>
 109
 110             <div class="modes">
 111               <input type="radio" id="measureLength" name="mode" value="measureLength" /><label for="measureLength">measureLength</label>
 112               <input type="radio" id="measureArea" name="mode" value="measureArea" /><label for="measureArea">measureArea</label>
 113             </div>
 114           </div>
 115         </section>
 116
 117         <section id="shapeLabels" style="display: none;">
 118           <label>
 119             <h2>label</h2>
 120             <input type="text" name="shapeLabel" />
 121           </label>
 122         </section>
 123
 124         <div class="not-mobile">
 125           <section id="drawStyle" style="display: none;">
 126             <h2>style</h2>
 127               <div>
 128                 <label><span>color</span> <input type="color" name="color" value="#7f0000" /></label>
 129                 <label><span>opacity</span> <input type="text" name="opacity" value="1.0" /></label>
 130               </div>
 131               <div>
 132                 <label><span>fill</span> <input type="color" name="fill" value="" /></label>
 133                 <label><span>fillOpacity</span> <input type="text" name="fillOpacity" value=".2" /></label>
 134               </div>
 135               <div>
 136                 <label><span>stroke</span> <input type="color" name="stroke" value="" /></label>
 137                 <label><span>strokeOpacity</span> <input type="text" name="strokeOpacity" value="1" /></label>
 138               </div>
 139               <div>
 140                 <label><span>strokeWidth</span> <input type="number" name="strokeWidth" value="2" /></label>
 141               </div>
 142               <div>
 143                 <label><span>width</span> <input type="number" name="width" value="8" /></label>
 144                 <label><span>height</span> <input type="number" name="height" value="8" /></label>
 145               </div>
 146               <div>
 147                 <label><span>borderRadius</span> <input type="number" name="borderRadius" value="8" /></label>
 148               </div>
 149
 150           </section>
 151         </div>
 152
 153         <section id="clickTarget" style="display: none;">
 154           <h2>target</h2>
 155           <div class="clickTargets">
 156             <input type="radio" id="clickTargetWidget" name="clickTarget" value="widget" checked="checked" /><label for="clickTargetWidget">widget</label>
 157             <input type="radio" id="clickTargetBasemapService" name="clickTarget" value="massgis_basemap" /><label for="clickTargetBasemapService">basemap</label>
 158             <input type="radio" id="clickTargetHydroService" name="clickTarget" value="massgis_hydrography" /><label for="clickTargetHydroService">hydro</label>
 159           </div>
 160         </section>
 161
 162         <section id="serviceToggle">
 163           <h2>toggle</h2>
 164
 165           <div class="toggleTargets">
 166             <input type="checkbox" id="toggleTargetBasemapService" name="toggleTarget" value="massgis_basemap" checked="checked" /><label for="toggleTargetBasemapService">basemap</label>
 167             <input type="checkbox" id="toggleTargetHydroService" name="toggleTarget" value="massgis_hydrography" checked="checked" /><label for="toggleTargetHydroService">hydro</label>
 168           </div>
 169         <section>
 170
 171         <section id="zoomButtons">
 172           <h2>zoom</h2>
 173
 174           <button id="zoomOut" type="button">out</button>
 175
 176           <button id="zoomIn" type="button">in</button>
 177         </section>
 178       </form>
 179     </div>
 180   </div>
 181   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 182   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
 183   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
 184   <script src="js/all-shingled.js"></script>
 185
 186   <script>
 187     var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
 188     (function (d, t) {
 189       var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
 190       g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
 191       s.parentNode.insertBefore(g, s);
 192     } (document, 'script'));
 193   </script>
 194 </body>
 195 </html>