1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>drawStyle test</title>
<meta name="description" content="geomap drawStyle test" />
<meta name="author" content="Ryan Westphal" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
<link rel="stylesheet" href="css/style.css" />
<style type="text/css">
#map
{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
label { white-space: nowrap; }
label span { display: inline-block; width: 7rem; }
input { width: 6rem; }
button { width: 16rem; }
</style>
</head>
<body>
<div class="drawStyle">
<div id="map">
</div>
<div class="info">
<div class="links">
<a href="../" class="docLink">< docs</a>
<a href="http://jsfiddle.net/ryanttb/BXgV4/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
</div>
<h1>drawStyle</h1>
<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>
<div id="modes">
<input type="radio" id="drawPoint" name="mode" value="drawPoint" checked="checked" /><label for="drawPoint">point</label>
<input type="radio" id="drawLineString" name="mode" value="drawLineString" /><label for="drawLineString">line</label>
<input type="radio" id="drawPolygon" name="mode" value="drawPolygon" /><label for="drawPolygon">polygon</label>
</div>
<form id="drawStyle">
<fieldset>
<legend>geomap drawStyle option</legend>
<div>
<label><span>color</span> <input type="color" name="color" value="#7f0000" /></label>
<label><span>opacity</span> <input type="text" name="opacity" value="1.0" /></label>
</div>
<div>
<label><span>fill</span> <input type="color" name="fill" value="" /></label>
<label><span>fillOpacity</span> <input type="text" name="fillOpacity" value=".2" /></label>
</div>
<div>
<label><span>stroke</span> <input type="color" name="stroke" value="" /></label>
<label><span>strokeOpacity</span> <input type="text" name="strokeOpacity" value="1" /></label>
<label><span>strokeWidth</span> <input type="number" name="strokeWidth" value="2" /></label>
</div>
<div>
<label><span>width</span> <input type="number" name="width" value="8" /></label>
<label><span>height</span> <input type="number" name="height" value="8" /></label>
<label><span>borderRadius</span> <input type="number" name="borderRadius" value="8" /></label>
</div>
</fieldset>
<button type="button">set drawStyle</button>
<button type="reset">reset drawStyle</button>
</form>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
<script>
$(function () {
// create a map
var map = $( "#map" ).geomap( {
center: [ -71.0595678, 42.3604823 ],
zoom: 8,
mode: "drawPoint",
shape: function( e, geo ) {
// the shape event triggers when the user finishes drawing a shape
// the geo argument is a GeoJSON object representing the shape
// for this example, we'll append it to the map forcing an
// individual style that matches the current drawStyle
// make a copy of the current drawStyle
var drawStyle = $.extend( { }, map.geomap( "option", "drawStyle" ) );
// append the shape using that style
map.geomap( "append", geo, drawStyle );
}
} );
$( "#drawStyle input" ).change( function( ) {
// when an input of the drawStyle form changes,
// immediately set the property of geomap's drawStyle option
// keep in mind that the three point-only styles (width, height & borderRadius)
// cannot be seen because with drawPoint, the shape event triggers immediately
// without drawing a shape
// this example, however, does use them when appending the shape after a click
// first, we can grab a jQuery reference to the input that changed
var $this = $( this );
// next, we can create an object that represents this change
// this example doesn't, but you can set more than one property
// on geomap's drawStyle option at a time
var styleOption = { };
styleOption[ $this.attr( "name" ) ] = $this.val();
map.geomap( "option", "drawStyle", styleOption );
} );
// jQuery UI for pretty buttons
$("#modes").buttonset();
$("#modes input").click(function () {
// set the map's mode option based on value of the input clicked
// this will change the map's mode to drawPoint, drawLineString or drawPolygon
map.geomap("option", "mode", $(this).val());
});
// jQuery UI for pretty reset buttons
$( "button" ).button( );
// maintin a copy of the original drawStyle so we can reset it later
var originaldrawStyle = map.geomap( "option", "drawStyle" );
$( "#drawStyle button[type='reset']" ).click( function( ) {
// when the user resets the drawStyle form,
// we want to also reset the drawStyle option
// back to its original state
map.geomap( "option", "drawStyle", originaldrawStyle );
} );
});
</script>
</body>
</html>
|
