145 lines
5.0 KiB
HTML
145 lines
5.0 KiB
HTML
<html>
|
|
<head>
|
|
<title> OpenLayers UTFGrid Demo </title>
|
|
<script src='./OpenLayers.js' type='text/javascript'></script>
|
|
<style>
|
|
#themap { width:512px; height:380px; border:1px black solid; }
|
|
#attrsdiv { width: 300px; height: 100px; float:right; border: 1px grey dashed;}
|
|
#controlToggle li { list-style: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1> OpenLayers UTFGrid Demo </h1>
|
|
|
|
<div id="top">
|
|
<div>
|
|
<p>
|
|
This page demostrates the use of the OpenLayers <a href="http://mapbox.com/mbtiles-spec/utfgrid/">UTFGrid</a> Controls. When the selected event is triggered, the underlying feature attributes are shown on the right.
|
|
</p>
|
|
</div>
|
|
<div id="selector">
|
|
<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>
|
|
<div id="attrsdiv"></div>
|
|
<div id="themap">
|
|
</div>
|
|
<div>
|
|
<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('themap', {
|
|
projection: new OpenLayers.Projection("EPSG:900913"),
|
|
units: "m",
|
|
maxResolution: 156543.0339,
|
|
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
|
|
controls: [] // No default controls; no pan zoom for demo
|
|
});
|
|
|
|
/*
|
|
* Controls
|
|
*/
|
|
var callback = function(attributes) {
|
|
if (attributes) {
|
|
var msg = "<strong>In 2005, " + attributes.NAME
|
|
msg += " had a population of " + attributes.POP2005 + " people.</strong>";
|
|
var element = OpenLayers.Util.getElement('attrsdiv');
|
|
element.innerHTML = msg;
|
|
return true;
|
|
} else {
|
|
this.element.innerHTML = '';
|
|
return false;
|
|
}
|
|
}
|
|
|
|
controls = {
|
|
'move': new OpenLayers.Control.UTFGrid({
|
|
'div': 'attrsdiv',
|
|
'handlerMode': 'move'
|
|
}),
|
|
'hover': new OpenLayers.Control.UTFGrid({
|
|
'div': 'attrsdiv',
|
|
'handlerMode': 'hover'
|
|
}),
|
|
'click': new OpenLayers.Control.UTFGrid({
|
|
'div': 'attrsdiv',
|
|
'handlerMode': 'click'
|
|
}),
|
|
'click_callback': new OpenLayers.Control.UTFGrid({
|
|
'handlerMode': 'click',
|
|
'callback': callback
|
|
}),
|
|
}
|
|
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 ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
|
"http://vmap0.tiles.osgeo.org/wms/vmap0",
|
|
{layers: 'basic'}
|
|
);
|
|
map.addLayer(ol_wms);
|
|
|
|
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>
|