e1dffacdde
I think it should be the job of the layer to retrieve data for a given location (instead of the control). The first part of this change creates a `getData` method on the layer and updates the control to use this method. The second part of this change removes the assumption that the data returned will be an simple object representing feature attributes. The UTFGrid specification doesn't say anything about the structure of property values in the optional data member. The examples given in the spec use string values. The default callback previously assumed that the data could be rendered in a two column table. I think it would make more sense not to make this assumption. With this change, the user must always provide a callback to do anything with returned data.
117 lines
3.9 KiB
HTML
117 lines
3.9 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"
|
|
);
|
|
var bio_utfgrid = new OpenLayers.Layer.UTFGrid(
|
|
"World Bioregions",
|
|
"./utfgrid/bio_utfgrid/${z}/${x}/${y}.json"
|
|
);
|
|
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>
|