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

Providing a method to get data from the layer.

Browse Source 
I think it should be the job of the layer to retrieve data for a given location (instead of the control).  The first part of this change creates a `getData` method on the layer and updates the control to use this method.

The second part of this change removes the assumption that the data returned will be an simple object representing feature attributes.  The UTFGrid specification doesn't say anything about the structure of property values in the optional data member.  The examples given in the spec use string values.  The default callback previously assumed that the data could be rendered in a two column table.  I think it would make more sense not to make this assumption.  With this change, the user must always provide a callback to do anything with returned data.
This commit is contained in:
Tim Schaub
2012-02-25 17:33:32 -07:00
parent 55ffdffd60
commit e1dffacdde
4 changed files with 130 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
examples/utfgrid.html
View File

@@ -8,7 +8,9 @@
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<style>
#attrsdiv { width: 300px; height: 100px; float:right; border: 1px grey dashed;}
#attrsdiv {
float: right;
}
#controlToggle li { list-style: none; }
</style>
</head>
@@ -22,7 +24,7 @@
<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.
When the selected event is triggered, the underlying feature attributes are shown below.
</p>
<ul id="controlToggle">
<li>
@@ -74,36 +76,33 @@
/*
* 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;
var callback = function(dataLookup) {
var msg = "";
if (dataLookup) {
var data;
for (var idx in dataLookup) {
// idx can be used to retrieve layer from map.layers[idx]
data = dataLookup[idx];
msg += "<strong>In 2005, " + data.NAME + " had a population of " +
data.POP2005 + " people.</strong> ";
}
}
document.getElementById("attrsdiv").innerHTML = msg;
};
var controls = {
move: new OpenLayers.Control.UTFGrid({
div: 'attrsdiv',
callback: callback,
handlerMode: 'move'
}),
hover: new OpenLayers.Control.UTFGrid({
div: 'attrsdiv',
callback: callback,
handlerMode: 'hover'
}),
click: new OpenLayers.Control.UTFGrid({
div: 'attrsdiv',
callback: callback,
handlerMode: 'click'
}),
click_callback: new OpenLayers.Control.UTFGrid({
handlerMode: 'click',
callback: callback
}),
})
};
var control;
for(var key in controls) {

72
examples/utfgrid_twogrids.html
View File

@@ -8,37 +8,34 @@
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<style>
#attrsdiv { width: 300px; height: 100px; float:right; border: 1px grey dashed;}
#controlToggle li { list-style: none; }
</style>
</head>
<body>
<h1 id="title">OpenLayers Multiple UTFGrid Demo</h1>
<div>
<div id="shortdesc">
This page demonstrates the use of the OpenLayers UTFGrid Controls with more than one UTFGrid Layer.
</div>
<div id="attrsdiv"></div>
<div id="themap" 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>
</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 id="shortdesc">
This page demonstrates the use of the OpenLayers UTFGrid Controls with more than one UTFGrid Layer.
</div>
<div id="themap" 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>
</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 id="attrsdiv"></div>
<script>
/*
* Map
@@ -50,28 +47,45 @@
});
var world_utfgrid = new OpenLayers.Layer.UTFGrid(
'Invisible UTFGrid Layer',
"World Population",
"./utfgrid/world_utfgrid/${z}/${x}/${y}.json"
);
var bio_utfgrid = new OpenLayers.Layer.UTFGrid(
'Invisible UTFGrid Layer of World Bioregions',
"World Bioregions",
"./utfgrid/bio_utfgrid/${z}/${x}/${y}.json"
);
map.addLayers([bio_utfgrid,world_utfgrid]);
var callback = function(dataLookup) {
var msg = "";
if (dataLookup) {
var layer, data;
for (var idx in dataLookup) {
layer = map.layers[idx];
data = dataLookup[idx];
if (data) {
msg += "<strong>" + layer.name + "</strong><br>";
for (var key in data) {
msg += key + ": " + data[key] + "<br>";
}
}
}
}
document.getElementById("attrsdiv").innerHTML = msg;
};
var controls = {
move_pop: new OpenLayers.Control.UTFGrid({
div: 'attrsdiv',
callback: callback,
layers: [world_utfgrid],
handlerMode: 'move'
}),
move_bio: new OpenLayers.Control.UTFGrid({
div: 'attrsdiv',
callback: callback,
layers: [bio_utfgrid],
handlerMode: 'move'
}),
move_both: new OpenLayers.Control.UTFGrid({
div: 'attrsdiv',
callback: callback,
layers: null, // same as [bio_utfgrid,world_utfgrid]
handlerMode: 'move'
})