110 lines
3.7 KiB
HTML
110 lines
3.7 KiB
HTML
<html>
|
|
<head>
|
|
<title> OpenLayers Multiple 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 Multiple 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 with <em>more than one UTFGrid Layer</em>.
|
|
</p>
|
|
</div>
|
|
<div id="selector">
|
|
<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>
|
|
</div>
|
|
<div id="attrsdiv"></div>
|
|
<div id="themap"> </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: []
|
|
});
|
|
|
|
var world_utfgrid = new OpenLayers.Layer.UTFGrid(
|
|
'Invisible UTFGrid Layer',
|
|
//"http://tiles/world_utfgrid/${z}/${x}/${y}.json"
|
|
"./utfgrid/world_utfgrid/${z}/${x}/${y}.json"
|
|
);
|
|
var bio_utfgrid = new OpenLayers.Layer.UTFGrid(
|
|
'Invisible UTFGrid Layer of World Bioregions',
|
|
//"http://tiles/bailey_utfgrid/${z}/${x}/${y}.json"
|
|
"./utfgrid/bio_utfgrid/${z}/${x}/${y}.json"
|
|
);
|
|
map.addLayers([bio_utfgrid,world_utfgrid]);
|
|
|
|
controls = {
|
|
'move_pop': new OpenLayers.Control.UTFGrid({
|
|
'div': 'attrsdiv',
|
|
'layers': [world_utfgrid],
|
|
'handlerMode': 'move'
|
|
}),
|
|
'move_bio': new OpenLayers.Control.UTFGrid({
|
|
'div': 'attrsdiv',
|
|
'layers': [bio_utfgrid],
|
|
'handlerMode': 'move'
|
|
}),
|
|
'move_both': new OpenLayers.Control.UTFGrid({
|
|
'div': 'attrsdiv',
|
|
'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 ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
|
"http://vmap0.tiles.osgeo.org/wms/vmap0",
|
|
{layers: 'basic'}
|
|
);
|
|
map.addLayer(ol_wms);
|
|
map.zoomTo(1);
|
|
</script>
|
|
</body>
|
|
</html>
|