89e8a872a5
According to the latest [spec](https://github.com/mapbox/utfgrid-spec/blob/master/1.2/utfgrid.md): "By default, UTFGrid operates on a 2x2 grid."
119 lines
4.0 KiB
HTML
119 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<title>OpenLayers Multiple UTFGrid Demo</title>
|
|
<link rel="stylesheet" href="style.css" type="text/css">
|
|
<script src="../lib/OpenLayers.js"></script>
|
|
<style>
|
|
#controlToggle li { list-style: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1 id="title">OpenLayers Multiple UTFGrid Demo</h1>
|
|
|
|
<div id="shortdesc">
|
|
This page demonstrates the use of the OpenLayers UTFGrid Controls with more than one UTFGrid Layer.
|
|
</div>
|
|
<div id="themap" class="smallmap"></div>
|
|
<ul id="controlToggle">
|
|
<li>
|
|
<input type="radio" name="type" value="move_pop" id="moveHandler"
|
|
onclick="toggleControl(this);" checked="checked" />
|
|
<label for="moveHandler">Move (population)</label>
|
|
</li>
|
|
<li>
|
|
<input type="radio" name="type" value="move_bio" id="hoverHandler"
|
|
onclick="toggleControl(this);" />
|
|
<label for="hoverHandler">Move (bioregion)</label>
|
|
</li>
|
|
<li>
|
|
<input type="radio" name="type" value="move_both" id="clickHandler"
|
|
onclick="toggleControl(this);" />
|
|
<label for="clickHandler">Move (both)</label>
|
|
</li>
|
|
</ul>
|
|
<div id="attrsdiv"></div>
|
|
<script>
|
|
/*
|
|
* Map
|
|
*/
|
|
var map = new OpenLayers.Map({
|
|
div: "themap",
|
|
projection: "EPSG:900913",
|
|
controls: []
|
|
});
|
|
|
|
var world_utfgrid = new OpenLayers.Layer.UTFGrid(
|
|
"World Population",
|
|
"./utfgrid/world_utfgrid/${z}/${x}/${y}.json",
|
|
{utfgridResolution: 4} // default is 2
|
|
);
|
|
var bio_utfgrid = new OpenLayers.Layer.UTFGrid(
|
|
"World Bioregions",
|
|
"./utfgrid/bio_utfgrid/${z}/${x}/${y}.json",
|
|
{utfgridResolution: 4} // default is 2
|
|
);
|
|
map.addLayers([bio_utfgrid,world_utfgrid]);
|
|
|
|
var callback = function(dataLookup) {
|
|
var msg = "";
|
|
if (dataLookup) {
|
|
var layer, data;
|
|
for (var idx in dataLookup) {
|
|
layer = map.layers[idx];
|
|
data = dataLookup[idx];
|
|
if (data) {
|
|
msg += "<strong>" + layer.name + "</strong><br>";
|
|
for (var key in data) {
|
|
msg += key + ": " + data[key] + "<br>";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
document.getElementById("attrsdiv").innerHTML = msg;
|
|
};
|
|
var controls = {
|
|
move_pop: new OpenLayers.Control.UTFGrid({
|
|
callback: callback,
|
|
layers: [world_utfgrid],
|
|
handlerMode: 'move'
|
|
}),
|
|
move_bio: new OpenLayers.Control.UTFGrid({
|
|
callback: callback,
|
|
layers: [bio_utfgrid],
|
|
handlerMode: 'move'
|
|
}),
|
|
move_both: new OpenLayers.Control.UTFGrid({
|
|
callback: callback,
|
|
layers: null, // same as [bio_utfgrid,world_utfgrid]
|
|
handlerMode: 'move'
|
|
})
|
|
};
|
|
var control;
|
|
for(var key in controls) {
|
|
control = controls[key];
|
|
control.deactivate();
|
|
map.addControl(control);
|
|
}
|
|
controls['move_pop'].activate();
|
|
|
|
function toggleControl(el) {
|
|
for(var c in controls) {
|
|
control = controls[c];
|
|
control.deactivate();
|
|
}
|
|
control = controls[el.value];
|
|
control.activate();
|
|
}
|
|
|
|
// Visible Layers
|
|
var osm = new OpenLayers.Layer.OSM();
|
|
map.addLayer(osm);
|
|
map.zoomTo(1);
|
|
</script>
|
|
</body>
|
|
</html>
|