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

Filled out the html example page

Browse Source
This commit is contained in:
Matthew Perry
2012-02-07 12:21:03 -08:00
parent 80656cdfd0
commit 0a74cb45f8
1 changed files with 35 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/utfgrid.html
+35 -8
View File
@@ -3,15 +3,20 @@
<title> OpenLayers UTFGrid Demo </title> <title> OpenLayers UTFGrid Demo </title>
<script src='./OpenLayers.js' type='text/javascript'></script> <script src='./OpenLayers.js' type='text/javascript'></script>
<style> <style>
.olTileImage { border: 1px solid #DDD !important; }
#themap { width:512px; height:380px; border:1px black solid; } #themap { width:512px; height:380px; border:1px black solid; }
#debugdiv { float:right; } #attrsdiv { width: 300px; height: 100px; float:right; border: 1px grey dashed;}
</style> </style>
</head> </head>
<body> <body>
<h1> OpenLayers UTFGrid Demo </h1> <h1> OpenLayers UTFGrid Demo </h1>
<div id="selector"> <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"> <ul id="controlToggle">
<li> <li>
<input type="radio" name="type" value="move" id="moveHandler" <input type="radio" name="type" value="move" id="moveHandler"
@@ -34,9 +39,25 @@
<label for="clickHandlerCustom">Click with custom callback</label> <label for="clickHandlerCustom">Click with custom callback</label>
</li> </li>
</ul> </ul>
</div>
</div> </div>
<div id="themap"></div>
<div id="attrsdiv"></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> <script>
/* /*
* Map * Map
@@ -53,9 +74,16 @@
* Controls * Controls
*/ */
var callback = function(attributes) { var callback = function(attributes) {
var msg = "<strong>In 2005, " + attributes.NAME + " had a population of " + attributes.POP2005 + " people.</strong>"; if (attributes) {
var element = OpenLayers.Util.getElement('attrsdiv'); var msg = "<strong>In 2005, " + attributes.NAME
element.innerHTML = msg; 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 = { controls = {
@@ -105,7 +133,6 @@
var grid_layer = new OpenLayers.Layer.UTFGrid( var grid_layer = new OpenLayers.Layer.UTFGrid(
'Invisible UTFGrid Layer', 'Invisible UTFGrid Layer',
//"http://tiles/world_utfgrid/${z}/${x}/${y}.json"
"./utfgrid/${z}/${x}/${y}.json" "./utfgrid/${z}/${x}/${y}.json"
); );
map.addLayer(grid_layer); map.addLayer(grid_layer);