Skip to content

Commit e0278c8

Browse files
ryanttbryanttb
committed
copy all examples local
1 parent 4520ba3 commit e0278c8

File tree

32 files changed

+7578
-48
lines changed

32 files changed

+7578
-48
lines changed

‎examples/OGUGaxO/index.html‎

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="description" content="jQuery Geo bbox functions" />
5+
<meta charset="utf-8" />
6+
<!--
7+
Created using JS Bin
8+
http://jsbin.com
9+
10+
Copyright (c) 2025 by ryanttb (http://jsbin.com/OGUGaxO/6/edit)
11+
12+
Released under the MIT license: http://jsbin.mit-license.org
13+
-->
14+
<meta name="robots" content="noindex">
15+
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
16+
<title>jQuery Geo bbox functions</title>
17+
18+
<style id="jsbin-css">
19+
/* example style */
20+
21+
table {
22+
width: 100%;
23+
}
24+
25+
#bbox-prop {
26+
width: 70%;
27+
}
28+
29+
.ops {
30+
list-style: none;
31+
margin: 0;
32+
padding: 0;
33+
}
34+
35+
.ops button {
36+
width: 6em;
37+
}
38+
39+
.ops input {
40+
width: 3.5em;
41+
}
42+
43+
/* template style */
44+
45+
html {
46+
font-family: sans-serif;
47+
font-size: 100%;
48+
}
49+
50+
#map {
51+
position: absolute;
52+
top: 0;
53+
right: 0;
54+
bottom: 0;
55+
left: 0;
56+
}
57+
58+
#info {
59+
background: #fafafa;
60+
border-radius: .5em;
61+
box-shadow: .2em .2em .4em #222;
62+
font-size: .8em;
63+
width: 32em;
64+
padding: .25em .5em;
65+
position: absolute;
66+
left: 1em;
67+
top: 1em;
68+
}
69+
70+
</style>
71+
</head>
72+
73+
<body>
74+
75+
<div id="map"></div>
76+
<div id="info">
77+
<span>Some bbox functions in $.geo. The buttons manipulate the red box.</span>
78+
79+
<table>
80+
<tr class="map-bbox">
81+
<th>map bbox</th>
82+
<td></td>
83+
</tr>
84+
<tr class="bbox-prop">
85+
<th><label for="bbox-prop">red bbox</label> </th>
86+
<td>
87+
<input id="bbox-prop" name="bbox-prop" type="text" />
88+
<button id="set-bbox" type="button">set</button>
89+
</td>
90+
</tr>
91+
<tr class="bbox-center">
92+
<th>center</th>
93+
<td></td>
94+
</tr>
95+
<tr class="bbox-width">
96+
<th>width</th>
97+
<td></td>
98+
</tr>
99+
<tr class="bbox-height">
100+
<th>height</th>
101+
<td></td>
102+
</tr>
103+
</table>
104+
105+
<ul class="ops">
106+
<li class="expandBy">
107+
<button>expandBy</button>
108+
<input name="width" value="10000" />
109+
<span>,</span>
110+
<input name="height" value="10000" />
111+
<span>m</span>
112+
</li>
113+
114+
<li class="scaleBy">
115+
<button>scaleBy</button>
116+
<input value="2" />
117+
</li>
118+
119+
<li class="reaspect">
120+
<button>reaspect</button>
121+
<select>
122+
<option value="1.78">16:9</option>
123+
<option value="1.33">4:3</option>
124+
</select>
125+
</li>
126+
</ul>
127+
</div>
128+
129+
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
130+
<script src="../../js/jquery.geo-1.1.0.min.js"></script>
131+
<script>
132+
$(function() {
133+
// the display bbox is different from the map's bbox in this example
134+
var bboxDisplay;
135+
136+
var $bboxInput = $( '#bbox-prop' );
137+
138+
// create a map
139+
var map = $("#map").geomap({
140+
center: [ -71, 42.25 ],
141+
zoom: 10,
142+
shapeStyle: {
143+
strokeWidth: 8,
144+
fillOpacity: 0.1
145+
},
146+
bboxchange: updateMapBbox
147+
});
148+
149+
$( '#set-bbox' ).click( function( e ) {
150+
try {
151+
// remove spaces & try to parse as an array
152+
var bbox = $.parseJSON( $bboxInput.val( ).replace( ' ', '' ) );
153+
updateBboxDisplay( bbox );
154+
} catch ( er ) {
155+
}
156+
} );
157+
158+
$( '.expandBy button' ).click( function( ) {
159+
// grab the amounts to expand
160+
var width = parseFloat( $( '.expandBy input[name="width"]' ).val( ) );
161+
162+
var height = parseFloat( $( '.expandBy input[name="height"]' ).val( ) );
163+
164+
// expand the display bbox
165+
var bbox = $.geo.expandBy( bboxDisplay, width, height );
166+
167+
// set the new one
168+
updateBboxDisplay( bbox );
169+
} );
170+
171+
$( '.scaleBy button' ).click( function( ) {
172+
// grab the amount to scale
173+
// anything over 1 increases the bbox size
174+
// between 0 & 1 will shrink the bbox
175+
var value = parseFloat( $( '.scaleBy input' ).val( ) );
176+
177+
// expand the display bbox
178+
var bbox = $.geo.scaleBy( bboxDisplay, value );
179+
180+
// set the new one
181+
updateBboxDisplay( bbox );
182+
} );
183+
184+
$( '.reaspect button' ).click( function( ) {
185+
// grab the amount to scale
186+
// anything over 1 increases the bbox size
187+
// between 0 & 1 will shrink the bbox
188+
var value = parseFloat( $( '.reaspect select' ).val( ) );
189+
190+
// expand the display bbox
191+
var bbox = $.geo.reaspect( bboxDisplay, value );
192+
193+
// set the new one
194+
updateBboxDisplay( bbox );
195+
} );
196+
197+
function prettyArray( value ) {
198+
// return a string of the array having spaces between values and with each number having only two decimal places
199+
var str = '';
200+
201+
if ( value && $.isArray( value ) ) {
202+
for ( var i = 0; i < value.length; i++ ) {
203+
if ( $.isNumeric( value[ i ] ) ) {
204+
if ( i > 0 ) {
205+
str += ', ';
206+
}
207+
str += value[ i ].toFixed( 2 );
208+
}
209+
}
210+
}
211+
212+
return '[ ' + str + ' ]';
213+
}
214+
215+
function updateMapBbox( e, geo ) {
216+
// show the map's bbox at the top for reference
217+
$( '.map-bbox td' ).text( prettyArray( geo.bbox ) );
218+
219+
}
220+
221+
function updateBboxDisplay(bbox) {
222+
// store the updated bbox
223+
bboxDisplay = bbox;
224+
225+
// show the requested bbox in red
226+
map.geomap( 'empty', false ).geomap( 'append', $.geo.polygonize( bbox ), false );
227+
228+
// make sure the bbox is visible in the current view
229+
map.geomap( 'option', 'bbox', $.geo.scaleBy( bbox, 1.5 ) );
230+
231+
// update the bbox displayed in the input
232+
// the bbox argument is a GeoJSON bounding box, which is a JavaScript array
233+
// the values are: min longitude/x, min latitude/y, max longitude/x, max latitude/y
234+
$bboxInput.val( prettyArray( bbox ) );
235+
236+
// center of the bbox, a GeoJSON position
237+
$(".bbox-center td").text( prettyArray( $.geo.center(bbox) ) );
238+
239+
// width & height of the bbox, in meters because the default service is web mercator meters
240+
// the units will match whatever coordinate system you set via geomap's tilingScheme or bboxMax properties
241+
$(".bbox-width td").text($.geo.width(bbox).toFixed(2) + " m");
242+
$(".bbox-height td").text($.geo.height(bbox).toFixed(2) + " m");
243+
}
244+
245+
// display the map's initial bbox
246+
updateMapBbox( null, { bbox: map.geomap( 'option', 'bbox' ) } );
247+
248+
// display an initial bbox based on the map's current bbox
249+
updateBboxDisplay( $.geo.scaleBy( map.geomap( 'option', 'bbox' ), 0.75 ) );
250+
251+
});
252+
</script>
253+
254+
255+
<script>
256+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
257+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
258+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
259+
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
260+
261+
262+
263+
ga('require', 'displayfeatures');
264+
265+
266+
</script>
267+
268+
</body>
269+
</html>
270+

0 commit comments

Comments
 (0)