Skip to content

Commit

Permalink
Revised class names, fixed random color generator, re-added support f…
Browse files Browse the repository at this point in the history 
…or lat/lon bbox, and minor markup changes.
  • Loading branch information
@jvanulde
jvanulde committed Jan 25, 2013
1 parent 7eda20f commit feca332
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 57 deletions.
67 changes: 31 additions & 36 deletions demos/geomap/geomap-eng.html
View file
Expand Up @@ -111,52 +111,42 @@ <h1 id="wb-cont">Geomap</h1>

<div class="span-12">
<div class="span-4 row-start">
<div class="wet-boew-geomap span-4 border-all position scaleline layerswitcher" data-wet-boew="{ tables: ['cityE', 'cityW', 'bbox'], features:[ 'POINT (-123.1119, 49.2505)', 'POLYGON ((-120 54, -111 54, -111 50, -120 50, -120 54))', 'LINESTRING (-110 63, -105 60, -100 63)' ] }"></div>
<div class="wet-boew-geomap span-4 border-all position scaleline layerswitcher" data-wet-boew="{ tables: ['cityE', 'cityW', 'bbox'], features:[ 'POINT (-100, 50)', 'POLYGON ((-120 54, -111 54, -111 50, -120 50, -120 54))', 'LINESTRING (-110 63, -105 60, -100 63)' ] }"></div>
</div>
<div class="wet-boew-tabbedinterface">
<div class="wet-boew-tabbedinterface span-4 row-end">
<ul class="tabs">
<li class="default"><a href="#tabs1_1">Tab 1</a></li>
<li><a href="#tabs1_2">Tab 2</a></li>
<li><a href="#tabs1_3">Tab 3</a></li>
<li class="default"><a href="#tabs1_1">Maritime Cities</a></li>
<li><a href="#tabs1_2">Western Cities</a></li>
<li><a href="#tabs1_3">Search Results</a></li>
</ul>
<div class="tabs-panel">
<div id="tabs1_1">
<table id="cityE" aria-label="Maritime Cities">
<caption>Maritime Cities</caption>
<caption class="wb-invisible">Maritime Cities</caption>
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Geometry</th>
<th class="wb-invisible">Geometry</th>
</tr>
</thead>
<tbody>
<tr class="background-white">
<td><a href="#" class="Table1Link" id="link1"><span id="linkCity1">St. John's</span></a></td>
<td><a href="#" class="link-hover" id="link1"><span id="linkCity1">St. John's</span></a></td>
<td>St. John's, the capital city of Newfoundland and Labrador, is the most easterly point in North America.</td>
<td class="feature">POINT (-52.7097, 47.5649)</td>
</tr>
<tr class="background-white">
<td><a href="#" class="Table1Link" id="link2"><span id="linkCity2">Charlottetown</span></a></td>
<td>The City of Charlottetown is a flourishing community of over 32000 people located on the south shore of Prince Edward Island.</td>
<td class="feature">POINT (-63.1283, 46.2336)</td>
</tr>
<tr class="background-white">
<td><a href="#" class="Table1Link" id="link2"><span id="linkCity3">Polygon</span></a></td>
<td>The City of Charlottetown is a flourishing community of over 32000 people located on the south shore of Prince Edward Island.</td>
<td class="feature">POLYGON ((-120 54, -111 54, -111 50, -120 50, -120 54))</td>
<td class="geometry wb-invisible">POINT (-52.7097, 47.5649)</td>
</tr>
<tr class="background-white">
<td><a href="#" class="Table1Link" id="link2"><span id="linkCity4">Linestring</span></a></td>
<td><a href="#" class="link-hover" id="link2"><span id="linkCity2">Charlottetown</span></a></td>
<td>The City of Charlottetown is a flourishing community of over 32000 people located on the south shore of Prince Edward Island.</td>
<td class="feature">LINESTRING (-110 63, -105 60, -100 63)</td>
</tr>
<td class="geometry wb-invisible">POINT (-63.1283, 46.2336)</td>
</tr>
</tbody>
</table>
</div>
<div id="tabs1_2">
<table id="cityW" aria-label="Maritime Cities">
<caption>Western Cities</caption>
<caption class="wb-invisible">Western Cities</caption>
<thead>
<tr>
<th>Title</th>
Expand All @@ -166,37 +156,42 @@ <h1 id="wb-cont">Geomap</h1>
</thead>
<tbody>
<tr class="background-white">
<td><a href="#" class="Table1Link" id="link1"><span id="linkCity1">Vancouver</span></a></td>
<td>St. John's, the capital city of Newfoundland and Labrador, is the most easterly point in North America.</td>
<td class="feature">POINT (-123.1119, 49.2505)</td>
<td><a href="#" class="link-hover" id="link1"><span id="linkCity1">Vancouver</span></a></td>
<td>Vancouver is a coastal seaport city on the mainland of British Columbia, Canada. The 2011 census recorded more than 603,000 people in the city, making it the eighth largest Canadian city.</td>
<td class="geometry">POINT (-123.1119, 49.2505)</td>
</tr>
<tr class="background-white">
<td><a href="#" class="Table1Link" id="link2"><span id="linkCity2">Calgary</span></a></td>
<td>The City of Charlottetown is a flourishing community of over 32000 people located on the south shore of Prince Edward Island.</td>
<td class="feature">POINT (-90.1283, 55.2336)</td>
</tr>
<td><a href="#" class="link-hover" id="link2"><span id="linkCity2">Calgary</span></a></td>
<td>Calgary is a city in the province of Alberta, Canada. It is located in the south of the province, in an area of foothills and prairie, approximately 80 km east of the front ranges of the Canadian Rockies.</td>
<td class="geometry">POINT (-114.0669 51.0544)</td>
</tr>
<tr class="background-white">
<td><a href="#" class="link-hover" id="link3"><span id="linkCity3">Edmonton</span></a></td>
<td>Calgary is a city in the province of Alberta, Canada. It is located in the south of the province, in an area of foothills and prairie, approximately 80 km east of the front ranges of the Canadian Rockies.</td>
<td class="geometry">POINT (-113.5006 53.5472)</td>
</tr>
</tbody>
</table>
</div>
<div id="tabs1_3">
<table id="bbox" aria-label="Search Results">
<caption>Search Results</caption>
<caption class="wb-invisible">Search Results</caption>
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Description</th>
<th>Geometry</th>
</tr>
</thead>
<tbody>
<tr>
<tr class="link-hover">
<td class="position">1</td>
<td class="title">Report on 2011 field activities and collection of ground thermal and active layer data in the Mackenzie Corridor completed under Northwest Territories science licence #14918</td>
<td class="description">This report presents a summary of field activities conducted in 2011 in the Mackenzie Corridor under N.W.T. Science Licence #14918. Air temperature, ground thermal and active layer data acquired from permafrost monitoring sites visited in 2011 throughout the corridor are provided in graphical and tabular format. This report will be distributed to community organizations and stakeholders in the study region to provide an update on field activities. The ground thermal and active layer data presented provide essential baseline information that can be utilized by stakeholders and others for various purposes such as land management activities, regulatory processes and design of northern infrastructure.</td>
<td class="geometry bbox">-136, 61, -118, 70</td>
</tr>
<tr>
<tr class="link-hover">
<td class="position">2</td>
<td class="title">Dinoflagellate cysts from upper cretaceous-lower tertiary sections, Bylot and Devon Islands, Arctic Archipelago</td>
<td class="description"> Abstract not available</td>
<td class="geometry bbox">-92.5, 72.75, -79, 75.5</td>
</tr>
</tbody>
Expand Down
92 changes: 71 additions & 21 deletions src/js/workers/geomap.js
View file
Expand Up @@ -255,8 +255,8 @@
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
},

},
getRandomColor: function() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
Expand All @@ -269,7 +269,7 @@
getMap: function() {
return map;
},

/*
* Create a table for vector features added in Load Overlays
*/
Expand All @@ -285,7 +285,18 @@

$('body').append($table);
},


/*
* Random Color Generator
*/
randomColor: function() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
},

_exec: function (elm) {

Expand Down Expand Up @@ -382,7 +393,8 @@
var projMap = map.getProjectionObject();

console.log("WET-Geomap: using projection " + projMap.getCode());



/*
* Load overlays
*
Expand Down Expand Up @@ -512,27 +524,58 @@

map.addLayer(vectorLayer);




/*
* Add tabluar data
*
* TODO: turn this into a public function
*/

$.each(opts.tables, function(index, table) {
$.each(opts.tables, function(index, table) {

randomColor = pe.fn.geomap.randomColor();

var my_style = new OpenLayers.StyleMap({
"default": new OpenLayers.Style(
{
'strokeColor': randomColor,
'fillColor': randomColor,
'fillOpacity': 0.5,
'pointRadius': 5,
'strokeWidth': 0.5
})
});

var table_ = $("table#" + table);
$table = $("table#" + table);

var tableLayer = new OpenLayers.Layer.Vector(table_.find('caption').text(), { /*styleMap: my_style*/ });
var tableLayer = new OpenLayers.Layer.Vector($table.find('caption').text(), { styleMap: my_style });

var wktParser = new OpenLayers.Format.WKT({
'internalProjection': projMap,
'externalProjection': projLatLon
});

$.each($("table#" + table + ' td.geometry'), function(index, feature) {

if($(feature).hasClass('bbox')) {

$.each($("table#" + table + ' td.feature'), function(index, feature) {
bbox = $(feature).text().split(',');
wktFeature = "POLYGON(("
+ bbox[0] + " " + bbox[1] + ", "
+ bbox[0] + " " + bbox[3] + ", "
+ bbox[2] + " " + bbox[3] + ", "
+ bbox[2] + " " + bbox[1] + ", "
+ bbox[0] + " " + bbox[1] +
"))";
} else {
wktFeature = $(feature).text();
}

tableLayer.addFeatures([
wktParser.read($(feature).text())
]);
wktParser.read(wktFeature)
]);
});

map.addLayer(tableLayer);
Expand Down Expand Up @@ -574,9 +617,16 @@
map.zoomToMaxExtent();
}

// add a graphic layer
var styleBBOX=new OpenLayers.Style({'fillOpacity':0.2,'fillColor':'#008000','strokeColor':'#008000','strokeWidth':1,'pointRadius': 10})
var graphicLayer = new OpenLayers.Layer.Vector("graphicLayer", {styleMap:styleBBOX});
// add a graphic layer to highlight features
var styleBBOX=new OpenLayers.Style({
'fillOpacity':0.2,
'fillColor':'#008000',
'strokeColor':'#008000',
'strokeWidth':1,
'pointRadius': 10
});

var graphicLayer = new OpenLayers.Layer.Vector("graphicLayer", { styleMap:styleBBOX });
graphicLayer.id = "graphicLayer";
graphicLayer.displayInLayerSwitcher = false;
map.addLayer(graphicLayer);
Expand All @@ -585,22 +635,22 @@
$(document).ready(function(){

// add mouse event function
$(".Table1Link").mouseenter(function (){
$(".link-hover").mouseenter(function (){

// get the parser
var wktParser = new OpenLayers.Format.WKT({
'internalProjection': projMap,
'externalProjection': projLatLon
});

// get the feature fromt he table and add to the map
var $val = $(event.target).closest('tr').find('.feature');
// get the feature from the table and add to the map
var $val = $(event.target).closest('tr').find('.geometry');
map.getLayer("graphicLayer").addFeatures(wktParser.read($val.html()));

// highlight the row
$(event.target).closest('tr').attr('class', 'background-highlight')
});
$(".Table1Link").mouseleave(function (){
$(".link-hover").mouseleave(function (){
// remove feature from map
map.getLayer("graphicLayer").destroyFeatures();

Expand All @@ -609,7 +659,7 @@
});

// add keyboard event function
$(".Table1Link").focus(function (){
$(".link-hover").focus(function (){

// get the parser
var wktParser = new OpenLayers.Format.WKT({
Expand All @@ -618,13 +668,13 @@
});

// get the feature fromt he table and add to the map
var $val = $(event.target).closest('tr').find('.feature');
var $val = $(event.target).closest('tr').find('.geometry');
map.getLayer("graphicLayer").addFeatures(wktParser.read($val.html()));

// highlight the row
$(event.target).closest('tr').attr('class', 'background-highlight')
});
$(".Table1Link").blur(function (){
$(".link-hover").blur(function (){
// remove feature from map
map.getLayer("graphicLayer").destroyFeatures();

Expand Down

0 comments on commit feca332

Please sign in to comment.