/
center.html
147 lines (134 loc) · 5.88 KB
/
center.html
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
143
144
145
146
147
<!DOCTYPE html>
<html>
<head>
<title>center/zoom example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta name="description" content="An example of the center, zoom and pixelSize options">
<meta name="author" content="Ryan Westphal">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/blitzer/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
#map
{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>
<div id="map">
</div>
<div class="info">
<div class="links">
<a href="../" class="docLink">< docs</a>
<a href="http://jsfiddle.net/ryanttb/ku2eC/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
</div>
<h1>center & zoom example</h1>
<p>This page tests getting and setting the center & zoom options as well as getting the read-only pixelSize.</p>
<p class="not-mobile">The center option is a <a href="http://geojson.org/geojson-spec.html#positions">GeoJSON position</a>. The zoom option for a tiled service a whole number from zero to the number of levels defined by the tilingScheme minus one. The pixelSize is the number of map units that fit in a single pixel of the current view. By default, pixelSize is in meters because the default map service is in web mercator meters.</p>
<h2>runtime options</h2>
<p>Change the center or zoom option and click set to update the map.</p>
<div>
<label>center <input type="text" name="runtimeCenter" value="[-74.5,40.3]" /></label>
<button id="cmdRuntimeCenter" type="button">set</button>
</div>
<div>
<label>zoom <input type="number" name="runtimeZoom" value="8" /></label>
<button id="cmdRuntimeZoom" type="button">set</button>
</div>
<h2>actual values</h2>
<p class="not-mobile">The center option is in geodetic cooridinates, [lon, lat], but the internal center is in map units, web mercator by default.</p>
<table>
<tr>
<th>.geomap( "option", "center" )</th>
<td id="lblCenterPublic"></td>
</tr>
<tr>
<th>$.geo.proj.toGeodetic( center )</th>
<td id="lblCenterGeodetic"></td>
</tr>
<tr>
<th><i>internal center, always projected</i></th>
<td id="lblCenterInternal"></td>
</tr>
<tr>
<th>.geomap( "option", "zoom" )</th>
<td id="lblZoom"></td>
</tr>
<tr>
<th>.geomap( "option", "pixelSize" )</th>
<td id="lblPixelSize"></td>
</tr>
</table>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="http://code.jquerygeo.com/jquery.geo-1.0b1.min.js"></script>
<script>
$(function () {
// store references to the inputs
var runtimeCenter = $("input[name='runtimeCenter']"),
runtimeZoom = $("input[name='runtimeZoom']");
// create a map, base the initial center and zoom on the inputs
var map = $("#map").geomap({
center: $.parseJSON(runtimeCenter.val()),
zoom: parseInt(runtimeZoom.val()),
bboxchange: function (e, geo) {
// when the bbox changes, update the displayed values
refreshActual();
}
});
$("#cmdRuntimeCenter").button().click(function () {
// when the user sets the center, pass the new value to geomap
// since plain JavaScript arrays are valid JSON,
// we can use $.parseJSON to convert the string into a value
map.geomap("option", "center", $.parseJSON(runtimeCenter.val()));
// geomap doesn't trigger the bbox event when options are set programmatically
// update the displayed values
refreshActual();
});
$("#cmdRuntimeZoom").button().click(function () {
// when the user sets the zoom, pass the new value to geomap
// zoom is always a whole number
map.geomap("option", "zoom", parseInt(runtimeZoom.val()));
// geomap doesn't trigger the bbox event when options are set programmatically
// update the displayed values
refreshActual();
});
// update the displayed values with how the map widget was initialized
refreshActual();
function refreshActual() {
// get the center
// by default, this is in geodetic coordinates, [lon, lat]
// but the developer can use projected coordinates
var actualCenter = map.geomap("option", "center");
$("#lblCenterPublic").text("[" + actualCenter + "]");
if ($.geo.proj) {
// if there is a projection set,
// we can display the center in both geodetic and projected units
var geodetic = $.geo.proj.toGeodetic(actualCenter);
$("#lblCenterGeodetic").text("[" + geodetic + "]");
// the internal center is always projected
var internal = $.geo.proj.fromGeodetic(actualCenter);
$("#lblCenterInternal").text("[" + internal + "]");
} else {
// if not, then both the center option and internal center are the same
$("#lblCenterInternal").text("[" + actualCenter + "]");
// also, we have no way to display the center in lon, lat
}
// get and display the current zoom value
$("#lblZoom").text(map.geomap("option", "zoom"));
// get and display the current pixelSize value
// you cannot set pixelSize, it's read only
$("#lblPixelSize").text(map.geomap("option", "pixelSize"));
}
});
</script>
</body>
</html>