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.
141 lines
4.7 KiB
HTML
141 lines
4.7 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 UTFGrid Demo</title>
|
|
<link rel="stylesheet" href="style.css" type="text/css">
|
|
<script src="../lib/OpenLayers.js"></script>
|
|
<style>
|
|
#attrsdiv {
|
|
float: right;
|
|
}
|
|
#controlToggle li { list-style: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1 id="title">OpenLayers UTFGrid Demo</h1>
|
|
|
|
<div>
|
|
<div id="shortdesc">
|
|
This page demonstrates the use of the OpenLayers UTFGrid Controls.
|
|
</div>
|
|
<div id="attrsdiv"></div>
|
|
<div id="themap" class="smallmap"></div>
|
|
<p>
|
|
When the selected event is triggered, the underlying feature attributes are shown below.
|
|
</p>
|
|
<ul id="controlToggle">
|
|
<li>
|
|
<input type="radio" name="type" value="move" id="moveHandler"
|
|
onclick="toggleControl(this);" checked="checked" />
|
|
<label for="moveHandler">Move</label>
|
|
</li>
|
|
<li>
|
|
<input type="radio" name="type" value="hover" id="hoverHandler"
|
|
onclick="toggleControl(this);" />
|
|
<label for="hoverHandler">Hover</label>
|
|
</li>
|
|
<li>
|
|
<input type="radio" name="type" value="click" id="clickHandler"
|
|
onclick="toggleControl(this);" />
|
|
<label for="clickHandler">Click</label>
|
|
</li>
|
|
<li>
|
|
<input type="radio" name="type" value="click_callback" id="clickHandlerCustom"
|
|
onclick="toggleControl(this);" />
|
|
<label for="clickHandlerCustom">Click with custom callback</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="docs">
|
|
<p><a href="http://mapbox.com/mbtiles-spec/utfgrid/">UTFGrids</a> can be used to
|
|
output highly optimized feature "hit grids". The UTFGrid encoding scheme encodes
|
|
interactivity data for a tile in a space efficient manner. It is designed to be
|
|
used in browsers for interactive features like displaying tooltips without
|
|
having to hit the server for an "info query".
|
|
</p>
|
|
<p>
|
|
For more info, view the
|
|
<a href="https://github.com/mapbox/utfgrid-spec"> UTFGrid Specification</a>
|
|
or check out the <a href="http://mapbox.com/demo/visiblemap/">Visible Map Demo</a>
|
|
(implemented in Wax and ModestMaps).
|
|
</p>
|
|
</div>
|
|
<script>
|
|
/*
|
|
* Map
|
|
*/
|
|
var map = new OpenLayers.Map({
|
|
div: "themap",
|
|
projection: "EPSG:900913",
|
|
controls: [] // No default controls; no pan zoom for demo
|
|
});
|
|
|
|
/*
|
|
* Controls
|
|
*/
|
|
var callback = function(dataLookup) {
|
|
var msg = "";
|
|
if (dataLookup) {
|
|
var data;
|
|
for (var idx in dataLookup) {
|
|
// idx can be used to retrieve layer from map.layers[idx]
|
|
data = dataLookup[idx];
|
|
msg += "<strong>In 2005, " + data.NAME + " had a population of " +
|
|
data.POP2005 + " people.</strong> ";
|
|
}
|
|
}
|
|
document.getElementById("attrsdiv").innerHTML = msg;
|
|
};
|
|
|
|
var controls = {
|
|
move: new OpenLayers.Control.UTFGrid({
|
|
callback: callback,
|
|
handlerMode: 'move'
|
|
}),
|
|
hover: new OpenLayers.Control.UTFGrid({
|
|
callback: callback,
|
|
handlerMode: 'hover'
|
|
}),
|
|
click: new OpenLayers.Control.UTFGrid({
|
|
callback: callback,
|
|
handlerMode: 'click'
|
|
})
|
|
};
|
|
var control;
|
|
for(var key in controls) {
|
|
control = controls[key];
|
|
control.deactivate();
|
|
map.addControl(control);
|
|
}
|
|
controls['move'].activate();
|
|
|
|
function toggleControl(el) {
|
|
for(var c in controls) {
|
|
control = controls[c];
|
|
control.deactivate();
|
|
}
|
|
control = controls[el.value];
|
|
control.activate();
|
|
}
|
|
|
|
/*
|
|
* Layers
|
|
*/
|
|
|
|
var osm = new OpenLayers.Layer.OSM();
|
|
map.addLayer(osm);
|
|
|
|
var grid_layer = new OpenLayers.Layer.UTFGrid(
|
|
'Invisible UTFGrid Layer',
|
|
"./utfgrid/world_utfgrid/${z}/${x}/${y}.json"
|
|
);
|
|
map.addLayer(grid_layer);
|
|
|
|
map.zoomTo(1);
|
|
</script>
|
|
</body>
|
|
</html>
|