Separating UTFGrid example markup and js source.
This commit is contained in:
Tim Schaub
@@ -6,7 +6,6 @@
|
||||
<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>
|
||||
#attrs {
|
||||
height: 1.5em;
|
||||
@@ -21,9 +20,10 @@
|
||||
<div id="shortdesc">
|
||||
This page demonstrates the use of the OpenLayers UTFGrid Controls.
|
||||
</div>
|
||||
<div id="themap" class="smallmap"></div>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<p>
|
||||
When the selected event is triggered, the underlying feature attributes are shown below.
|
||||
When the selected event is triggered, the underlying feature
|
||||
attributes are shown below.
|
||||
</p>
|
||||
<div id="attrs"> </div>
|
||||
<ul id="controlToggle">
|
||||
@@ -45,95 +45,19 @@
|
||||
</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>UTFGrids 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).
|
||||
See the <a href="utfgrid.js" target="_blank">utfgrid.js source</a> for
|
||||
detail on using UTFGrids in OpenLayers. For more info, view the
|
||||
<a href="https://github.com/mapbox/utfgrid-spec">UTFGrid Specification</a>.
|
||||
</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(infoLookup) {
|
||||
var msg = "";
|
||||
if (infoLookup) {
|
||||
var info;
|
||||
for (var idx in infoLookup) {
|
||||
// idx can be used to retrieve layer from map.layers[idx]
|
||||
info = infoLookup[idx];
|
||||
if (info && info.data) {
|
||||
msg += "[" + info.id + "] <strong>In 2005, " +
|
||||
info.data.NAME + " had a population of " +
|
||||
info.data.POP2005 + " people.</strong> ";
|
||||
}
|
||||
}
|
||||
}
|
||||
document.getElementById("attrs").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",
|
||||
{utfgridResolution: 4} // default is 2
|
||||
);
|
||||
map.addLayer(grid_layer);
|
||||
|
||||
map.zoomTo(1);
|
||||
</script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="utfgrid.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
61
examples/utfgrid.js
Normal file
61
examples/utfgrid.js
Normal file
@@ -0,0 +1,61 @@
|
||||
var osm = new OpenLayers.Layer.OSM();
|
||||
|
||||
var utfgrid = new OpenLayers.Layer.UTFGrid(
|
||||
"Invisible UTFGrid Layer",
|
||||
"./utfgrid/world_utfgrid/${z}/${x}/${y}.json",
|
||||
{utfgridResolution: 4} // default is 2
|
||||
);
|
||||
|
||||
var map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
projection: "EPSG:900913",
|
||||
controls: [],
|
||||
layers: [osm, utfgrid],
|
||||
center: [0, 0],
|
||||
zoom: 1
|
||||
});
|
||||
|
||||
var callback = function(infoLookup) {
|
||||
var msg = "";
|
||||
if (infoLookup) {
|
||||
var info;
|
||||
for (var idx in infoLookup) {
|
||||
// idx can be used to retrieve layer from map.layers[idx]
|
||||
info = infoLookup[idx];
|
||||
if (info && info.data) {
|
||||
msg += "[" + info.id + "] <strong>In 2005, " +
|
||||
info.data.NAME + " had a population of " +
|
||||
info.data.POP2005 + " people.</strong> ";
|
||||
}
|
||||
}
|
||||
}
|
||||
document.getElementById("attrs").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"
|
||||
})
|
||||
};
|
||||
for (var key in controls) {
|
||||
map.addControl(controls[key]);
|
||||
}
|
||||
|
||||
function toggleControl(el) {
|
||||
for (var c in controls) {
|
||||
controls[c].deactivate();
|
||||
}
|
||||
controls[el.value].activate();
|
||||
}
|
||||
|
||||
// activate the control that responds to mousemove
|
||||
toggleControl({value: "move"});
|
||||
@@ -6,7 +6,6 @@
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>OpenLayers Multiple UTFGrid Demo</title>
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<style>
|
||||
#controlToggle li { list-style: none; }
|
||||
</style>
|
||||
@@ -15,105 +14,38 @@
|
||||
<h1 id="title">OpenLayers Multiple UTFGrid Demo</h1>
|
||||
|
||||
<div id="shortdesc">
|
||||
This page demonstrates the use of the OpenLayers UTFGrid Controls with more than one UTFGrid Layer.
|
||||
This page demonstrates the use of the OpenLayers UTFGrid Controls with
|
||||
more than one UTFGrid Layer.
|
||||
</div>
|
||||
<div id="themap" class="smallmap"></div>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<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>
|
||||
<label for="moveHandler">View population stats</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="type" value="move_bio" id="hoverHandler"
|
||||
onclick="toggleControl(this);" />
|
||||
<label for="hoverHandler">Move (bioregion)</label>
|
||||
<label for="hoverHandler">View bioregion stats</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="type" value="move_both" id="clickHandler"
|
||||
onclick="toggleControl(this);" />
|
||||
<label for="clickHandler">Move (both)</label>
|
||||
<label for="clickHandler">View all stats</label>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example demonstrates the use of two separate UTFGrid layers.
|
||||
See the <a href="utfgrid_twogrids.js">utfgrid_twogrids.js source</a>
|
||||
for detail on how this is done.
|
||||
</p>
|
||||
</div>
|
||||
<div id="attrsdiv"></div>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="utfgrid_twogrids.js"></script>
|
||||
<script>
|
||||
/*
|
||||
* Map
|
||||
*/
|
||||
var map = new OpenLayers.Map({
|
||||
div: "themap",
|
||||
projection: "EPSG:900913",
|
||||
controls: []
|
||||
});
|
||||
|
||||
var world_utfgrid = new OpenLayers.Layer.UTFGrid(
|
||||
"World Population",
|
||||
"./utfgrid/world_utfgrid/${z}/${x}/${y}.json",
|
||||
{utfgridResolution: 4} // default is 2
|
||||
);
|
||||
var bio_utfgrid = new OpenLayers.Layer.UTFGrid(
|
||||
"World Bioregions",
|
||||
"./utfgrid/bio_utfgrid/${z}/${x}/${y}.json",
|
||||
{utfgridResolution: 4} // default is 2
|
||||
);
|
||||
map.addLayers([bio_utfgrid,world_utfgrid]);
|
||||
|
||||
var callback = function(infoLookup) {
|
||||
var msg = "";
|
||||
if (infoLookup) {
|
||||
var layer, info;
|
||||
for (var idx in infoLookup) {
|
||||
layer = map.layers[idx];
|
||||
info = infoLookup[idx];
|
||||
if (info && info.data) {
|
||||
msg += "<strong>" + layer.name + "</strong><br>";
|
||||
msg += "feature id: " + info.id + "<br>";
|
||||
for (var key in info.data) {
|
||||
msg += key + ": " + info.data[key] + "<br>";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
document.getElementById("attrsdiv").innerHTML = msg;
|
||||
};
|
||||
var controls = {
|
||||
move_pop: new OpenLayers.Control.UTFGrid({
|
||||
callback: callback,
|
||||
layers: [world_utfgrid],
|
||||
handlerMode: 'move'
|
||||
}),
|
||||
move_bio: new OpenLayers.Control.UTFGrid({
|
||||
callback: callback,
|
||||
layers: [bio_utfgrid],
|
||||
handlerMode: 'move'
|
||||
}),
|
||||
move_both: new OpenLayers.Control.UTFGrid({
|
||||
callback: callback,
|
||||
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 osm = new OpenLayers.Layer.OSM();
|
||||
map.addLayer(osm);
|
||||
map.zoomTo(1);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
70
examples/utfgrid_twogrids.js
Normal file
70
examples/utfgrid_twogrids.js
Normal file
@@ -0,0 +1,70 @@
|
||||
var osm = new OpenLayers.Layer.OSM();
|
||||
|
||||
var population = new OpenLayers.Layer.UTFGrid(
|
||||
"World Population",
|
||||
"./utfgrid/world_utfgrid/${z}/${x}/${y}.json",
|
||||
{utfgridResolution: 4} // default is 2
|
||||
);
|
||||
var bioregions = new OpenLayers.Layer.UTFGrid(
|
||||
"World Bioregions",
|
||||
"./utfgrid/bio_utfgrid/${z}/${x}/${y}.json",
|
||||
{utfgridResolution: 4} // default is 2
|
||||
);
|
||||
|
||||
var map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
projection: "EPSG:900913",
|
||||
controls: [],
|
||||
layers: [osm, population, bioregions],
|
||||
center: [0, 0],
|
||||
zoom: 1
|
||||
});
|
||||
|
||||
var callback = function(infoLookup) {
|
||||
var msg = "";
|
||||
if (infoLookup) {
|
||||
var layer, info;
|
||||
for (var idx in infoLookup) {
|
||||
layer = map.layers[idx];
|
||||
info = infoLookup[idx];
|
||||
if (info && info.data) {
|
||||
msg += "<strong>" + layer.name + "</strong><br>";
|
||||
msg += "feature id: " + info.id + "<br>";
|
||||
for (var key in info.data) {
|
||||
msg += key + ": " + info.data[key] + "<br>";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
document.getElementById("attrsdiv").innerHTML = msg;
|
||||
};
|
||||
|
||||
var controls = {
|
||||
move_pop: new OpenLayers.Control.UTFGrid({
|
||||
callback: callback,
|
||||
layers: [population],
|
||||
handlerMode: "move"
|
||||
}),
|
||||
move_bio: new OpenLayers.Control.UTFGrid({
|
||||
callback: callback,
|
||||
layers: [bioregions],
|
||||
handlerMode: "move"
|
||||
}),
|
||||
move_both: new OpenLayers.Control.UTFGrid({
|
||||
callback: callback,
|
||||
layers: null, // same as all map.layers
|
||||
handlerMode: "move"
|
||||
})
|
||||
};
|
||||
|
||||
for (var key in controls) {
|
||||
map.addControl(controls[key]);
|
||||
}
|
||||
|
||||
function toggleControl(el) {
|
||||
for (var c in controls) {
|
||||
controls[c].deactivate();
|
||||
}
|
||||
controls[el.value].activate();
|
||||
}
|
||||
toggleControl({value: "move_pop"});
|
||||
Reference in New Issue
Block a user