var $bboxInput = $(".bbox-prop input"); //< bbox input reference
// create a map
var map = $("#map").geomap({
center: [-71.0595678, 42.3604823],
zoom: 8,
bboxchange: function(e, geo) {
// inside the bboxchange event, update the input with the current bbox
// the geo object has a bbox property which is the new bbox
updateBboxDisplay(geo.bbox);
}
});
$("form.bbox").submit(function() {
// a new bbox is submitted, update the bbox option
// since the bbox is a JavaScript array, jQuery's parseJSON method will work
map.geomap("option", "bbox", $.parseJSON($bboxInput.val()));
// based on the map view's aspect ratio, the final bbox can be different than the one set
// update the input and display based on the new/final value
updateBboxDisplay(map.geomap("option", "bbox"));
// return false to short circuit the form, we don't want to actually submit
return false;
});
$("form.expandBy").submit(function() {
// read the bbox from the input using jQuery's parseJSON method
var bbox = $.parseJSON($bboxInput.val());
// read the dx, dy inputs
var dx = parseFloat($("input[name='dx']").val()),
dy = parseFloat($("input[name='dy']").val());
// call expandBy
// expandBy takes a bbox argument & returns an updated bbox
bbox = $.geo.expandBy(bbox, dx, dy);
// only update the bbox input for now and let the user click set
$bboxInput.val("[" + bbox + "]");
return false;
});
$("form.scaleBy").submit(function() {
// read the bbox from the input using jQuery's parseJSON method
var bbox = $.parseJSON($bboxInput.val());
// read the scale input
var scale = parseFloat($("input[name='scale']").val());
// call scaleBy
// scaleBy takes a bbox argument & returns an updated bbox
bbox = $.geo.scaleBy(bbox, scale);
// only update the bbox input for now and let the user click set
$bboxInput.val("[" + bbox + "]");
return false;
});
$("form.reaspect").submit(function() {
// read the bbox from the input using jQuery's parseJSON method
var bbox = $.parseJSON($bboxInput.val());
// read the aspect ratio input
var ratio = parseFloat($("input[name='ratio']").val());
// call reaspect
// reaspect takes a bbox argument & returns an updated bbox
bbox = $.geo.reaspect(bbox, ratio);
// only update the bbox input for now and let the user click set
$bboxInput.val("[" + bbox + "]");
return false;
});
// jQuery UI for a pretty button
$("button").button();
// set the initial display based on the map's current bbox
updateBboxDisplay(map.geomap("option", "bbox"));
function updateBboxDisplay(bbox) {
// update the bbox displayed in the input and calculated values
// the bbox argument is a GeoJSON bounding box, which is a JavaScript array
// we can call join on the array to add spaces after the bbox values
// the values are: min longitude/x, min latitude/y, max longitude/x, max latitude/y
$bboxInput.val("[" + bbox + "]");
// center of the bbox, a GeoJSON position
$(".bbox-center td").text("[" + $.geo.center(bbox) + "]");
// width & height of the bbox, in meters because the default service is web mercator meters
// the units will match whatever coordinate system you set via geomap's tilingScheme or bboxMax properties
$(".bbox-width td").text($.geo.width(bbox) + " m");
$(".bbox-height td").text($.geo.height(bbox) + " m");
}
<div id="map">
</div>
<div class="info">
<p>This example tests getting and setting the bbox property on the geomap widget as well as calling various $.geo bbox functions.</p>
<form action="bbox.html" class="bbox">
<table>
<tr class="bbox-prop">
<th><label for="bbox-prop">.geomap("option", "bbox",</label> </th>
<td><input id="bbox-prop" name="bbox-prop" type="text" /> <b>)</b> <button type="submit">set</button></td>
</tr>
<tr class="bbox-center">
<th>$.geo.center( bbox )</th>
<td></td>
</tr>
<tr class="bbox-width">
<th>$.geo.width( bbox )</th>
<td></td>
</tr>
<tr class="bbox-height">
<th>$.geo.height( bbox )</th>
<td></td>
</tr>
</table>
</form>
<p>For this example, the functions below operate on the above text input only. After using them, you can click <b>set</b> to update the map and other info.</p>
<form action="bbox.html" class="expandBy">
<table>
<tr>
<th>$.geo.expandBy( bbox, </th>
<td><input type="text" name="dx" value="20000" /> <b>,</b> <input type="text" name="dy" value="20000" /> <b>)</b> <button type="submit">expand</button></td>
</tr>
</table>
</form>
<form action="bbox.html" class="scaleBy">
<table>
<tr>
<th>$.geo.scaleBy( bbox, </th>
<td><input type="text" name="scale" value="2" /> <b>)</b> <button type="submit">scale</button></td>
</tr>
</table>
</form>
<p>This last function, reaspect, forces an aspect ratio (calculation of width divided height) onto the bbox. You can run this but it will be difficult to visually see the effects because the geomap widget will automatically reaspect again to fit the bbox back into the viewport.</p>
<p>Common aspect ratio values: 16:9 = 16/9 ~ <b>1.78</b>:1 & 4:3 = 4/3 ~ <b>1.33</b>:1</p>
<form action="bbox.html" class="reaspect">
<table>
<tr>
<th>$.geo.reaspect( bbox, </th>
<td><input type="text" name="ratio" value="1.78" /> <b>)</b> <button type="submit">reaspect</button></td>
</tr>
</table>
</form>
</div>
html
{
font:13px/1.231 Calibri,Arial,sans-serif; *font-size:small;
}
.info
{
background: #fff;
border-radius: 8px;
box-shadow: -4px 4px #444;
opacity: .8;
padding: 8px;
position: absolute !important;
right: 16px;
top: 16px;
}
#map
{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
table
{
table-layout: fixed;
width: 99%;
}
table th
{
font-weight: bold;
padding-right: 2px;
text-align: right;
width: 35%;
}
.bbox-prop input
{
font-family: Courier New, Monospace;
width: 70%;
}
.expandBy input
{
width: 80px;
}
.scaleBy input, .reaspect input
{
width: 64px;
}
External resources loaded into this fiddle: