138 lines
4.5 KiB
HTML
138 lines
4.5 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>
|
|
</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];
|
|
if (data) {
|
|
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>
|