Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
217 lines (187 sloc) 7.04 KB
<!DOCTYPE html>
<html>
<head>
<title>ModestMaps JS: Extent Selector</title>
<script type="text/javascript" src="../../modestmaps.js"></script>
<script type="text/javascript" src="modestmaps.extent-selector.js"></script>
<script type="text/javascript">
var MM = com.modestmaps,
map, selector, extent;
function initMap() {
// the map
var layer = new MM.TemplatedLayer("http://acetate.geoiq.com/tiles/acetate-base/{Z}/{X}/{Y}.png");
map = new MM.Map("map", layer);
// the initial extent
var extent = new MM.Extent(37.837, -122.522, 37.691, -122.350);
map.setExtent(extent);
// the selector is a map "layer"
selector = new MM.ExtentSelector(document.getElementById("extent"));
map.addLayer(selector);
// update the northwest and south east labels when the extent
// changes
var nwLabel = document.getElementById("nw-label"),
seLabel = document.getElementById("se-label"),
extentField = document.getElementById("extent-string");
selector.addCallback("extentset", function(o, ext) {
// these setters all coerce to strings, which implicitly
// calls toString() on the Location and Extent instances
nwLabel.innerText = ext.northWest();
seLabel.innerText = ext.southEast();
// and update the extent string field for good measure
extentField.value = ext;
});
selector.setExtent(extent);
// when the from-map button is pressed, set the selector's
// extent to the map's
MM.addEvent(document.getElementById("from-map"), "click", function(e) {
selector.setExtent(map.getExtent());
return MM.cancelEvent(e);
});
// when the update-extent button is pressed, parse the input
// field's value as an extent and attempt to set it on the
// selector
MM.addEvent(document.getElementById("from-text"), "click", function(e) {
// keep the old extent around in case there's an issue,
// so we can reset the field
var old = selector.getExtent();
try {
var ext = MM.Extent.fromString(extentField.value);
selector.setExtent(ext);
} catch (e) {
alert("Whoops: " + e);
selector.setExtent(old);
}
return MM.cancelEvent(e);
});
// when the to-map button is pressed, set the map's extent to the
// selector's
MM.addEvent(document.getElementById("to-map"), "click", function(e) {
map.setExtent(selector.extent, false);
return MM.cancelEvent(e);
});
// the checkbox determines if you can drag the extent selector
// by its center
var checkbox = document.getElementById("move-center");
MM.addEvent(checkbox, "change", function(e) {
selector.allowMoveCenter = checkbox.checked;
});
}
</script>
<style type="text/css">
body {
margin: 0;
padding: 20px;
}
h1,
p { margin: 0 0 .5em 0; }
#map {
height: 500px;
}
.map-extent {
background-color: rgba(255,0,0,.1);
background-color: transparent;
z-index: 1000;
}
/*
* FIXME: IE apparently needs the transparent PNG background to
* receive mouse events.
*/
.map-extent .handles {
cursor: move;
border: 1px solid red;
background-image: url(1px.png);
}
.map-extent .handle {
background-image: url(1px.png);
}
.map-extent .handle:hover {
background-color: red;
}
.map-extent .handle-north,
.map-extent .handle-south { cursor: ns-resize; }
.map-extent .handle-east,
.map-extent .handle-west { cursor: ew-resize; }
.map-extent .handle-northwest,
.map-extent .handle-southeast { cursor: nwse-resize; }
.map-extent .handle-northeast,
.map-extent .handle-southwest { cursor: nesw-resize; }
.map-extent .handle-north {
height: 5px;
width: 100%;
top: -1px;
}
.map-extent .handle-south {
height: 5px;
width: 100%;
bottom: -1px;
}
.map-extent .handle-east {
width: 5px;
height: 100%; right: -1px;
}
.map-extent .handle-west {
width: 5px;
height: 100%;
left: -1px;
}
.map-extent .handle-northwest,
.map-extent .handle-northeast,
.map-extent .handle-southeast,
.map-extent .handle-southwest {
width: 9px;
height: 9px;
border-radius: 5px;
}
.map-extent .handle-northeast {
top: -4px;
right: -4px;
}
.map-extent .handle-southeast {
bottom: -4px;
right: -4px;
}
.map-extent .handle-southwest {
bottom: -4px;
left: -4px;
}
.map-extent .handle-northwest {
top: -4px;
left: -4px;
}
/* labels (optional) */
.map-extent .label {
position: absolute;
display: block;
text-align: center;
width: 10em;
}
#nw-label {
top: -1em;
margin-top: -10px;
left: -5em;
}
#se-label {
top: 100%;
margin-top: 10px;
right: -5em;
}
</style>
</head>
<body onload="initMap()">
<h1>ModestMaps JS: Extent Selector</h1>
<p>Extent (N,W,S,E):
<input id="extent-string" type="text" size="40">
<button id="from-text">update from input</button>
<button id="from-map">grab from map</button>
<button id="to-map">snap map to selector</button>
<br>
<label><input id="move-center" type="checkbox" checked> allow moving the extent by its center</label>
</p>
<div id="map">
<div id="extent" class="map-extent">
<span id="nw-label" class="label"></span>
<span id="se-label" class="label"></span>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.