71 lines
1.8 KiB
JavaScript
71 lines
1.8 KiB
JavaScript
var osm = new OpenLayers.Layer.OSM();
|
|
|
|
var population = new OpenLayers.Layer.UTFGrid({
|
|
name: "World Population",
|
|
url: "utfgrid/world_utfgrid/${z}/${x}/${y}.json",
|
|
utfgridResolution: 4 // default is 2
|
|
});
|
|
var bioregions = new OpenLayers.Layer.UTFGrid({
|
|
name: "World Bioregions",
|
|
url: "utfgrid/bio_utfgrid/${z}/${x}/${y}.json",
|
|
utfgridResolution: 4 // default is 2
|
|
});
|
|
|
|
var map = new OpenLayers.Map({
|
|
div: "map",
|
|
projection: "EPSG:900913",
|
|
controls: [],
|
|
layers: [osm, population, bioregions],
|
|
center: [0, 0],
|
|
zoom: 1
|
|
});
|
|
|
|
var callback = function(infoLookup) {
|
|
var msg = "";
|
|
if (infoLookup) {
|
|
var layer, info;
|
|
for (var idx in infoLookup) {
|
|
layer = map.layers[idx];
|
|
info = infoLookup[idx];
|
|
if (info && info.data) {
|
|
msg += "<strong>" + layer.name + "</strong><br>";
|
|
msg += "feature id: " + info.id + "<br>";
|
|
for (var key in info.data) {
|
|
msg += key + ": " + info.data[key] + "<br>";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
document.getElementById("attrsdiv").innerHTML = msg;
|
|
};
|
|
|
|
var controls = {
|
|
move_pop: new OpenLayers.Control.UTFGrid({
|
|
callback: callback,
|
|
layers: [population],
|
|
handlerMode: "move"
|
|
}),
|
|
move_bio: new OpenLayers.Control.UTFGrid({
|
|
callback: callback,
|
|
layers: [bioregions],
|
|
handlerMode: "move"
|
|
}),
|
|
move_both: new OpenLayers.Control.UTFGrid({
|
|
callback: callback,
|
|
layers: null, // same as all map.layers
|
|
handlerMode: "move"
|
|
})
|
|
};
|
|
|
|
for (var key in controls) {
|
|
map.addControl(controls[key]);
|
|
}
|
|
|
|
function toggleControl(el) {
|
|
for (var c in controls) {
|
|
controls[c].deactivate();
|
|
}
|
|
controls[el.value].activate();
|
|
}
|
|
toggleControl({value: "move_pop"});
|