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
|
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>find | geomap</title>
<meta name="description" content="geomap find method">
<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="find" data-role="page">
<div data-role="header" data-theme="e">
<h1>find</h1>
</div>
<div data-role="content">
<table>
<tr>
<th>return type</th>
<td>Array<Object> ( <a href="http://geojson.org/geojson-spec.html" rel="external">GeoJSON objects</a> )</td>
</tr>
<tr>
<th>syntax</th>
<td>.geomap( "find", Object point (<a href="http://geojson.org/geojson-spec.html#point" rel="external">GeoJSON Point</a>), Number pixelTolerance )</td>
</tr>
<tr>
<td></td>
<td>.geomap( "find", <i>shape selector</i> )</td>
</tr>
<tr>
<th>usage</th>
<td><pre><code>var existingShape = $( <i>map or service selector</i> ).geomap( "find", { type: "Point", coordinates: [ -71.098709, 42.330322 ] }, 8 )
var allShapes = $( <i>map or service selector</i> ).geomap( "find", "*" )</code></pre></td>
</tr>
</table>
<p>The find method allows you to search for shapes appended to the map and/or services. There are two distinct ways to call this method.</p>
<h2>geometry search</h2>
<p>The find method can take a single GeoJSON map point and return all shapes within a pixel radius of the given location that have been added with append. If there are no shapes at the location, this method returns an empty array.</p>
<p>The pixelTolerance argument is always in pixels. This allows for pixel-based searches regardless of the map's current zoom. A high-zoom search is finer than a low-zoom one because at lower zoom levels, i.e., the map is zoomed out more, the Earth-size of a pixel is greater causing this search to reach out farther from the supplied position.</p>
<p>Duplicate shape references <b>are</b> included in the return value. For example, if you have appended the same GeoJSON object to both the map and a specific service, and then call find at that location, the returned array will contain two, identical shape references.</p>
<h2>selector search</h2>
<p>The find method can also take a single string. The string is in CSS selector syntax but currently only one selector is supported: *. Use the * selector to return an array of all shapes that have been appended to the map or service. If there are no shapes on the map or service, this method returns an empty array. Searching for all shapes at the map level will return all shapes that have been appended to the map or any service.</p>
<p>Duplicate shape references <b>are</b> included in the return value. For example, if you have appended the same GeoJSON object to both the map and a specific service, and then call find( "*" ) at the map level, the returned array will contain two, identical shape references.</p>
<p>The shape selector cannot include service ids or classes. To search for shapes within a specific service, see below.</p>
<h2>service-level shapes</h2>
<p>Similar to how you can append shapes to specific services, you can find shapes in specific services as well.</p>
<p>You do this by targeting a service inside a map instead of the map itself for your call to geomap's find method. For example, the default map service has the CSS class: osm. We can find a shape from that service specifically by using jQuery to target the service:</p>
<pre><code>var osmShapes = $( "#map .osm" ).geomap( "find", [ -71, 42 ], 8 );</code></pre>
<p>However, unlike the other three shape methods, shapes appended to a specific service <b>will be</b> returned by calling find on the map itself. In this way, calling find on the map is a deep search for shapes on all services. For example, after this sequence the shapes variable will contain the shape even though it was appended to a service specifically:<p>
<pre><code>var point = {
type: "Point",
coordinates: [ -71, 42 ]
};
<span class="comment">// add the shape to the osm service</span>
$( "#map .osm" ).geomap( "append", point );
<span class="comment">// use the original point to search for shapes on the map widget</span>
var shapes = $( "#map" ).geomap( "find", point, 3 );</code></pre>
<p>Another difference between the find method and the append, remove, and empty methods, is that the find method cannot currently be used on multiple targets simultaneously. For example, the return value of the following is undefined:</p>
<pre><code><span class="comment">// attempt to search the osm service and a second service at the same time</span>
var shapes = $( "#map .osm,#map .massgis" ).geomap( "find", point, 8 );</code></pre>
<p>To find shapes in two specific services without searching all services you should use two find calls:</p>
<pre><code><span class="comment">// find shapes on the default service and a second service</span>
var osmShapes = $( "#map .osm" ).geomap( "find", point, 8 ),
massgisShapes = $( "#map .massgis" ).geomap( "find", point, 8 );</code></pre>
<p>The selector-based version also follows this requirement. You cannot target more than one element with the initial selector and you cannot use the shape selector to search services. A multi-service selector-based search would be the same as above but with "*" instead of: point, 8.</p>
<pre><code><span class="comment">// the following are invalid and their return value is undefined</span>
var multiTarget = $( "#map .massgis,#map .osm" ).geomap( "find", "*" );
var shapeSubSelector = $( "#map" ).geomap( "find", ".massgis *" );
<span class="comment">// proper way to get all shapes from multiple services</span>
var osmShapes = $( "#map .osm" ).geomap( "find", "*" ),
massgisShapes = $( "#map .massgis" ).geomap( "find", "*" );</code></pre>
</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>
|
