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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8" />
   5   <title>shapeStyle test</title>
   6   <meta name="description" content="geomap shapeStyle 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 class="shapeStyle">
  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</h1>
  39       <p>This page tests various style properties using the shapeStyle option to change the default style or and passing a shape-specific style to the append method.</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.geomap( "append", geo, appendStyle );
 119         }
 120       } );
 121
 122       $( "#shapeStyle input" ).change( function( ) {
 123         // when an input of the shapeStyle section changes,
 124         // immediately set the property of geomap's shapeStyle option
 125         // this change will effect all appended shapes that don't have
 126         // an explicit override for the style property that's changing
 127
 128         // first, we can grab a jQuery reference to the input that changed
 129         var $this = $( this );
 130
 131         // next, we can create an object that represents this change
 132         // this example doesn't, but you can set more than one property
 133         // on geomap's shapeStyle option at a time
 134         var shapeOption = { };
 135         shapeOption[ $this.attr( "name" ) ] = $this.val();
 136
 137         map.geomap( "option", "shapeStyle", shapeOption );
 138       } );
 139
 140       // jQuery UI for pretty reset buttons
 141       $( "button" ).button( );
 142
 143       // maintin a copy of the original shapeStyle so we can reset it later
 144       var originalShapeStyle = map.geomap( "option", "shapeStyle" );
 145
 146       $( "#shapeStyle button[type='reset']" ).click( function( ) {
 147         // when the user resets the shapeStyle form,
 148         // we want to also reset the shapeStyle option
 149         // back to its original state
 150         map.geomap( "option", "shapeStyle", originalShapeStyle );
 151       } );
 152     });
 153   </script>
 154 </body>
 155 </html>