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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8" />
   5   <title>shapeStyle service test</title>
   6   <meta name="description" content="geomap shapeStyle service test" />
   7   <meta name="author" content="Ryan Westphal" />
   8   <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
   9   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
  10   <link rel="stylesheet" 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
  21     label { white-space: nowrap; }
  22
  23     label span { display: inline-block; width: 7rem; }
  24     input { width: 6rem; }
  25
  26     button { width: 16rem; }
  27   </style>
  28 </head>
  29 <body>
  30   <div>
  31     <div id="map">
  32     </div>
  33     <div class="info">
  34       <div class="links">
  35         <a href="../" class="docLink">&lt; docs</a>
  36         <a href="http://jsfiddle.net/ryanttb/BXgV4/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  37       </div>
  38       <h1>shapeStyle service</h1>
  39       <p>This page is similar to the regular shapeStyle example but tests changing the style of a specific service instead of the map itself.</p>
  40       <form id="shapeStyle">
  41         <fieldset>
  42           <legend>base geomap shapeStyle option</legend>
  43           <div>
  44             <label><span>color</span> <input type="color" name="color" value="#7f0000" /></label>
  45             <label><span>opacity</span> <input type="text" name="opacity" value="1.0" /></label>
  46           </div>
  47           <div>
  48             <label><span>fill</span> <input type="color" name="fill" value="" /></label>
  49             <label><span>fillOpacity</span> <input type="text" name="fillOpacity" value=".2" /></label>
  50           </div>
  51           <div>
  52             <label><span>stroke</span> <input type="color" name="stroke" value="" /></label>
  53             <label><span>strokeOpacity</span> <input type="text" name="strokeOpacity" value="1" /></label>
  54             <label><span>strokeWidth</span> <input type="number" name="strokeWidth" value="2" /></label>
  55           </div>
  56           <div>
  57             <label><span>width</span> <input type="number" name="width" value="8" /></label>
  58             <label><span>height</span> <input type="number" name="height" value="8" /></label>
  59             <label><span>borderRadius</span> <input type="number" name="borderRadius" value="8" /></label>
  60           </div>
  61         </fieldset>
  62         <button type="button">set shapeStyle</button>
  63         <button type="reset">reset shapeStyle</button>
  64       </form>
  65       <form id="append">
  66         <fieldset>
  67           <legend>specific append style argument</legend>
  68           <div>
  69             <label><span>color</span> <input type="color" name="color" value="" /></label>
  70             <label><span>opacity</span> <input type="text" name="opacity" value="" /></label>
  71           </div>
  72           <div>
  73             <label><span>fill</span> <input type="color" name="fill" value="" /></label>
  74             <label><span>fillOpacity</span> <input type="text" name="fillOpacity" value="" /></label>
  75           </div>
  76           <div>
  77             <label><span>stroke</span> <input type="color" name="stroke" value="" /></label>
  78             <label><span>strokeOpacity</span> <input type="text" name="strokeOpacity" value="" /></label>
  79             <label><span>strokeWidth</span> <input type="number" name="strokeWidth" value="" /></label>
  80           </div>
  81           <div>
  82             <label><span>width</span> <input type="number" name="width" value="" /></label>
  83             <label><span>height</span> <input type="number" name="height" value="" /></label>
  84             <label><span>borderRadius</span> <input type="number" name="borderRadius" value="" /></label>
  85           </div>
  86         </fieldset>
  87         <button type="reset">clear append style</button>
  88       </form>
  89     </div>
  90   </div>
  91   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  92   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  93   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  94   <script>
  95     $(function () {
  96       // create a map
  97       var map = $( "#map" ).geomap( {
  98             center: [ -71.0595678, 42.3604823 ],
  99             zoom: 8,
 100             click: function ( e, geo ) {
 101               // in the click handler append the shape to the map
 102               // the final display style will be the base shapeStyle
 103               // plus individual shape style property overrides via
 104               // a style passed to the append method
 105               var appendStyle = { };
 106
 107               $.each( $( "#append input" ).serializeArray( ), function( ) {
 108                 // run through each input in the append fieldset and
 109                 // build a style object if there are any style overrides
 110                 if ( this.value ) {
 111                   appendStyle[ this.name ] = this.value;
 112                 }
 113               } );
 114
 115               // append the shape
 116               // it will get the base shapeStyle (which can change later)
 117               // plus any overrides from the append style (which cannot change)
 118               map.find( ".osm" ).geomap( "append", geo, appendStyle );
 119             }
 120           } ),
 121           service = map.find( ".osm" );
 122
 123       $( "#shapeStyle input" ).change( function( ) {
 124         // when an input of the shapeStyle section changes,
 125         // immediately set the property of geomap's shapeStyle option
 126         // this change will effect all appended shapes that don't have
 127         // an explicit override for the style property that's changing
 128
 129         // first, we can grab a jQuery reference to the input that changed
 130         var $this = $( this );
 131
 132         // next, we can create an object that represents this change
 133         // this example doesn't, but you can set more than one property
 134         // on geomap's shapeStyle option at a time
 135         var shapeOption = { };
 136         shapeOption[ $this.attr( "name" ) ] = $this.val();
 137
 138         service.geomap( "option", "shapeStyle", shapeOption );
 139       } );
 140
 141       // jQuery UI for pretty reset buttons
 142       $( "button" ).button( );
 143
 144       // maintin a copy of the original shapeStyle so we can reset it later
 145       var originalShapeStyle = service.geomap( "option", "shapeStyle" );
 146
 147       $( "#shapeStyle button[type='reset']" ).click( function( ) {
 148         // when the user resets the shapeStyle form,
 149         // we want to also reset the shapeStyle option
 150         // back to its original state
 151         service.geomap( "option", "shapeStyle", originalShapeStyle );
 152       } );
 153     });
 154   </script>
 155 </body>
 156 </html>