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">
21 label { white-space: nowrap; }
23 label span { display: inline-block; width: 7rem; }
24 input { width: 6rem; }
26 button { width: 16rem; }
30 <div class="shapeStyle">
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 shapeStyle option to change the default style or and passing a shape-specific style to the append method.</p>
40 <form id="shapeStyle">
42 <legend>base geomap shapeStyle option</legend>
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>
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>
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>
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>
62 <button type="button">set shapeStyle</button>
63 <button type="reset">reset shapeStyle</button>
67 <legend>specific append style argument</legend>
69 <label><span>color</span> <input type="color" name="color" value="" /></label>
70 <label><span>opacity</span> <input type="text" name="opacity" value="" /></label>
73 <label><span>fill</span> <input type="color" name="fill" value="" /></label>
74 <label><span>fillOpacity</span> <input type="text" name="fillOpacity" value="" /></label>
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>
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>
87 <button type="reset">clear append style</button>
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>
97 var map = $( "#map" ).geomap( {
98 center: [ -71.0595678, 42.3604823 ],
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 = { };
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
111 appendStyle[ this.name ] = this.value;
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 );
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
128 // first, we can grab a jQuery reference to the input that changed
129 var $this = $( this );
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();
137 map.geomap( "option", "shapeStyle", shapeOption );
140 // jQuery UI for pretty reset buttons
141 $( "button" ).button( );
143 // maintin a copy of the original shapeStyle so we can reset it later
144 var originalShapeStyle = map.geomap( "option", "shapeStyle" );
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 );