ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Making the UTFGrid examples more like the rest.

Browse Source
This commit is contained in:
Tim Schaub
2012-02-25 16:18:43 -07:00
parent 34a9c46243
commit 6284e44d2e
2 changed files with 71 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
examples/utfgrid.html
View File

@@ -1,23 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title> OpenLayers UTFGrid Demo </title>
<script src='./OpenLayers.js' type='text/javascript'></script>
<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>
#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>
<h1 id="title">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="shortdesc">
This page demonstrates the use of the OpenLayers UTFGrid Controls.
</div>
<div id="selector">
<div id="attrsdiv"></div>
<div id="themap" class="smallmap"></div>
<p>
When the selected event is triggered, the underlying feature attributes are shown on the right.
</p>
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="move" id="moveHandler"
@@ -40,12 +46,8 @@
<label for="clickHandlerCustom">Click with custom callback</label>
</li>
</ul>
</div>
</div>
<div id="attrsdiv"></div>
<div id="themap">
</div>
<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
@@ -63,11 +65,9 @@
/*
* 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),
var map = new OpenLayers.Map({
div: "themap",
projection: "EPSG:900913",
controls: [] // No default controls; no pan zoom for demo
});
@@ -85,26 +85,26 @@
this.element.innerHTML = '';
return false;
}
}
};
controls = {
'move': new OpenLayers.Control.UTFGrid({
'div': 'attrsdiv',
'handlerMode': 'move'
var controls = {
move: new OpenLayers.Control.UTFGrid({
div: 'attrsdiv',
handlerMode: 'move'
}),
'hover': new OpenLayers.Control.UTFGrid({
'div': 'attrsdiv',
'handlerMode': 'hover'
hover: new OpenLayers.Control.UTFGrid({
div: 'attrsdiv',
handlerMode: 'hover'
}),
'click': new OpenLayers.Control.UTFGrid({
'div': 'attrsdiv',
'handlerMode': 'click'
click: new OpenLayers.Control.UTFGrid({
div: 'attrsdiv',
handlerMode: 'click'
}),
'click_callback': new OpenLayers.Control.UTFGrid({
'handlerMode': 'click',
'callback': callback
click_callback: new OpenLayers.Control.UTFGrid({
handlerMode: 'click',
callback: callback
}),
}
};
var control;
for(var key in controls) {
control = controls[key];
@@ -126,11 +126,8 @@
* Layers
*/
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'}
);
map.addLayer(ol_wms);
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
var grid_layer = new OpenLayers.Layer.UTFGrid(
'Invisible UTFGrid Layer',