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
|
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>bbox | geomap</title>
<meta name="description" content="geomap bbox property">
<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="bbox" data-role="page">
<div data-role="header" data-theme="f">
<h1>bbox</h1>
</div>
<div data-role="content">
<table>
<tr>
<th>type</th>
<td>Array ( <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> )</td>
</tr>
<tr>
<th>default</th>
<td>[ -180, -85, 180, 85 ]</td>
</tr>
<tr>
<th>init</th>
<td><code><pre>$( <i>selector</i> ).geomap( { bbox: [ -71, 40, -69, 44 ] } );</pre></code></td>
</tr>
<tr>
<th>get</th>
<td><code><pre>var bbox = $( <i>selector</i> ).geomap( "option", "bbox" );</pre></code></td>
</tr>
<tr>
<th>set</th>
<td><code><pre>$( <i>selector</i> ).geomap( "option", "bbox", [ -122, 42, -118, 46 ] );</pre></code></td>
</tr>
</table>
<p>The bbox property calculates or modifies the bounding box of the map view the user currently sees. The geomap widget creates the bounding box based on the current center point, map zoom and size of the map view.</p>
<p>When you set a new bbox, the center and zoom properties are set as close as they can be based on the services you've added and the size of the map view.</p>
<p>For example, if you have a cached service with specific zoom levels, the map widget will have to pick a zoom level even though it may result in a bbox that is quite different from the one passed. When your services are fully dynamic, i.e., they allow arbitrary zoom levels, the final bbox will not likely match the one passed either due to ratio differences between the requested bbox and the map view's size. The map will attempt to pick a bounding box that best fits the one you request.</p>
<p>This property is a JavaScript array consisting of four values which can be thought of as: minx, miny, maxx and maxy of the current map view in map units and in that order. By default the values are in geodetic coordinates, e.g., bbox[0] is the longitude of the left of the current map view, bbox[1] is the latitude of the bottom, bbox[2] is the longitude of the right and bbox[3] is the latitude of the top. You can change the default when you initialize the widget by passing projected coordinates as the bbox option.</p>
<p>Setting a new bbox will refresh the map services.</p>
<p>If you attempt to initialize both center and bbox at the same time when creating a geomap widget, center will override bbox.</p>
<p>If you attempt to initialize both zoom and bbox at the same time when creating a geomap widget, bbox will be applied and zoom will modify the final bbox.</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>
|
