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">
21 label { white-space: nowrap; }
23 label span { display: inline-block; width: 7rem; }
24 input { width: 6rem; }
26 button { width: 16rem; }
30 <div class="drawStyle">
35 <a href="../" class="docLink">< docs</a>
36 <a href="http://jsfiddle.net/ryanttb/BXgV4/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
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>
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>
47 <legend>geomap drawStyle option</legend>
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>
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>
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>
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>
67 <button type="button">set drawStyle</button>
68 <button type="reset">reset drawStyle</button>
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>
78 var map = $( "#map" ).geomap( {
79 center: [ -71.0595678, 42.3604823 ],
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
88 // make a copy of the current drawStyle
89 var drawStyle = $.extend( { }, map.geomap( "option", "drawStyle" ) );
91 // append the shape using that style
92 map.geomap( "append", geo, drawStyle );
97 $( "#drawStyle input" ).change( function( ) {
98 // when an input of the drawStyle form changes,
99 // immediately set the property of geomap's drawStyle option
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
106 // first, we can grab a jQuery reference to the input that changed
107 var $this = $( this );
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();
115 map.geomap( "option", "drawStyle", styleOption );
118 // jQuery UI for pretty buttons
119 $("#modes").buttonset();
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());
127 // jQuery UI for pretty reset buttons
128 $( "button" ).button( );
130 // maintin a copy of the original drawStyle so we can reset it later
131 var originaldrawStyle = map.geomap( "option", "drawStyle" );
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 );