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
|
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>shapeStyle | geomap</title>
<meta name="description" content="geomap shapeStyle option">
<meta name="author" content="Ryan Westphal">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/style.css?v=2">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
</head>
<body>
<div id="shapeStyle" data-role="page">
<div data-role="header" data-theme="f">
<h1>shapeStyle</h1>
</div>
<div data-role="content">
<table>
<tr>
<th>type</th>
<td>Object ( geomap style )</td>
</tr>
<tr>
<th>default</th>
<td><pre><code>{
borderRadius: "8px",
color: "#7f0000",
fillOpacity: .2,
height: "8px",
opacity: 1,
strokeOpacity: 1,
strokeWidth: "2px",
visibility: "visible",
width: "8px"
}</code></pre>
</td>
</tr>
<tr>
<th>init</th>
<td><pre><code>$( <i>map or service selector</i> ).geomap( { shapeStyle: { color: "green" } } );</code></pre></td>
</tr>
<tr>
<th>get</th>
<td><pre><code>var shapeStyle = $( <i>map or service selector</i> ).geomap( "option", "shapeStyle" );</code></pre></td>
</tr>
<tr>
<th>set</th>
<td><pre><code>$( <i>map or service selector</i> ).geomap( "option", "shapeStyle", { strokeWidth: "4px" } );</code></pre></td>
</tr>
</table>
<p>The shapeStyle option retrieves or updates the <i>base</i> style of shapes appended to the map.</p>
<p>This differs from the drawStyle option which defines the style of incomplete lines and polygons as they are being drawn.</p>
<p>Two extra color properties, stroke and fill, are not defined by default and use the value of the color property until they are defined individually.</p>
<p>This option changes specific properties of the internal base style. If you send an incomplete style object, only the style properties you reference are updated.</p>
<p>Similar to CSS, you can override this style on a per-shape basis by passing a different style to the append method.</p>
<p>Changing this base style will update how geomap draws existing shapes that do not have their own style. For shapes that do have their own style, changing the base shapeStyle will update any style properties not referenced in the shape-specific style. For example, assume the following:</p>
<ol>
<li>
<span>the base shapeStyle starts with its initial style having a red stroke color and strokeWidth of 2px</span>
<pre><code>$( "#map" ).geomap( );</code></pre>
</li>
<li>
<span>you call append with a style that increases the stroke width to 4px but does not supply a stroke color</span>
<pre><code>$( "#map" ).geomap(
"append",
{ type: "Point", coordinates: [ -71, 42 ] },
{ strokeWidth: "4px" }
);</code></pre>
</li>
<li>
<span>you later change the base shapeStyle's stroke color to blue</span>
<pre><code>$( "#map" ).geomap( "option", "shapeStyle", { stroke: "#00f" } );</code></pre>
</li>
</ol>
<p>The shape described in the above example will draw with a blue stroke color and a strokeWidth of 4px.</p>
<p>You can also set a base style for a specific service. These are called service-level styles and apply only to service-level shapes. To do this, target a service inside a map instead of the map itself for your call to geomap's shapeStyle option. To expand upon the above example, consider the following additional steps:</p>
<ol start="4">
<li>
<span>you change the shapeStyle option of the default service specifically so that points are twice as long as usual; the default service has the CSS class: osm</span>
<pre><code>$( "#map .osm" ).geomap( "option", "shapeStyle", { width: "16px" } )</code></pre>
</li>
<li>
<span>you append a second point directly to the default .osm service</span>
<pre><code>$( "#map .osm" ).geomap(
"append",
{ type: "Point", coordinates: [ -70.5, 42.5 ] }
);</code></pre>
</li>
</ol>
<p>This second point will:</p>
<ul>
<li>have a blue stroke color because it cascades from the base shapeStyle for the map as a whole (which you set with your first call to shapeStyle)</li>
<li>have a strokeWidth of only 2px because it is unaffected by the style applied to the first shape during the first append call</li>
<li>have a width of 16px which it gets from the shapeStyle of the service where it was appended</li>
</ul>
<p>This is the only option that can be applied to services. All other options require a reference to the original map element.</p>
<p>When called with a second argument to set the shapeStyle, the jQuery UI widget factory returns the original jQuery collection to maintain call chaining.</p>
<p>Please see the style section at the bottom of the <a href="#" onclick="javascript:window.history.back();">geomap widget</a> page for more information about the style object.</p>
</div>
</div> <!-- end of #container -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
<script src="../js/script.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</body>
</html>
|
