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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8" />
   5   <title>drawStyle test</title>
   6   <meta name="description" content="geomap drawStyle 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="drawStyle">
  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>drawStyle</h1>
  39       <p>This page tests various style properties using the drawStyle option to change the style displayed when a user is drawing shapes in drawLineString and drawPolygon modes.</p>
  40       <div id="modes">
  41         <input type="radio" id="drawPoint" name="mode" value="drawPoint" checked="checked" /><label for="drawPoint">point</label>
  42         <input type="radio" id="drawLineString" name="mode" value="drawLineString" /><label for="drawLineString">line</label>
  43         <input type="radio" id="drawPolygon" name="mode" value="drawPolygon" /><label for="drawPolygon">polygon</label>
  44       </div>
  45       <form id="drawStyle">
  46         <fieldset>
  47           <legend>geomap drawStyle option</legend>
  48           <div>
  49             <label><span>color</span> <input type="color" name="color" value="#7f0000" /></label>
  50             <label><span>opacity</span> <input type="text" name="opacity" value="1.0" /></label>
  51           </div>
  52           <div>
  53             <label><span>fill</span> <input type="color" name="fill" value="" /></label>
  54             <label><span>fillOpacity</span> <input type="text" name="fillOpacity" value=".2" /></label>
  55           </div>
  56           <div>
  57             <label><span>stroke</span> <input type="color" name="stroke" value="" /></label>
  58             <label><span>strokeOpacity</span> <input type="text" name="strokeOpacity" value="1" /></label>
  59             <label><span>strokeWidth</span> <input type="number" name="strokeWidth" value="2" /></label>
  60           </div>
  61           <div>
  62             <label><span>width</span> <input type="number" name="width" value="8" /></label>
  63             <label><span>height</span> <input type="number" name="height" value="8" /></label>
  64             <label><span>borderRadius</span> <input type="number" name="borderRadius" value="8" /></label>
  65           </div>
  66         </fieldset>
  67         <button type="button">set drawStyle</button>
  68         <button type="reset">reset drawStyle</button>
  69       </form>
  70     </div>
  71   </div>
  72   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  73   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  74   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  75   <script>
  76     $(function () {
  77       // create a map
  78       var map = $( "#map" ).geomap( {
  79         center: [ -71.0595678, 42.3604823 ],
  80         zoom: 8,
  81         mode: "drawPoint",
  82         shape: function( e, geo ) {
  83           // the shape event triggers when the user finishes drawing a shape
  84           // the geo argument is a GeoJSON object representing the shape
  85           // for this example, we'll append it to the map forcing an
  86           // individual style that matches the current drawStyle
  87
  88           // make a copy of the current drawStyle
  89           var drawStyle = $.extend( { }, map.geomap( "option", "drawStyle" ) );
  90
  91           // append the shape using that style
  92           map.geomap( "append", geo, drawStyle );
  93
  94         }
  95       } );
  96
  97       $( "#drawStyle input" ).change( function( ) {
  98         // when an input of the drawStyle form changes,
  99         // immediately set the property of geomap's drawStyle option
 100
 101         // keep in mind that the three point-only styles (width, height & borderRadius)
 102         // cannot be seen because with drawPoint, the shape event triggers immediately
 103         // without drawing a shape
 104         // this example, however, does use them when appending the shape after a click
 105
 106         // first, we can grab a jQuery reference to the input that changed
 107         var $this = $( this );
 108
 109         // next, we can create an object that represents this change
 110         // this example doesn't, but you can set more than one property
 111         // on geomap's drawStyle option at a time
 112         var styleOption = { };
 113         styleOption[ $this.attr( "name" ) ] = $this.val();
 114
 115         map.geomap( "option", "drawStyle", styleOption );
 116       } );
 117
 118       // jQuery UI for pretty buttons
 119       $("#modes").buttonset();
 120
 121       $("#modes input").click(function () {
 122         // set the map's mode option based on value of the input clicked
 123         // this will change the map's mode to drawPoint, drawLineString or drawPolygon
 124         map.geomap("option", "mode", $(this).val());
 125       });
 126
 127       // jQuery UI for pretty reset buttons
 128       $( "button" ).button( );
 129
 130       // maintin a copy of the original drawStyle so we can reset it later
 131       var originaldrawStyle = map.geomap( "option", "drawStyle" );
 132
 133       $( "#drawStyle button[type='reset']" ).click( function( ) {
 134         // when the user resets the drawStyle form,
 135         // we want to also reset the drawStyle option
 136         // back to its original state
 137         map.geomap( "option", "drawStyle", originaldrawStyle );
 138       } );
 139     });
 140   </script>
 141 </body>
 142 </html>