Skip to content

Instantly share code, notes, and snippets.

@autermann

autermann/content.ftl

Last active November 5, 2015 14:36
Show Gist options
  • Save autermann/4156d875be0c8a1799c7 to your computer and use it in GitHub Desktop.
Save autermann/4156d875be0c8a1799c7 to your computer and use it in GitHub Desktop.
Download ZIP
GetFeatureInfo for IMIS WFS
Raw
content.ftl
<#list features as feature>
<div class="list-group-item">
<div class="panel panel-primary feature" data-id="${feature.featureId.value}"></div>
</div>
</#list>
Raw
featureInfo.html
<!DOCTYPE html>
<html>
<head>
<title>FeatureInfo</title>
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="featureInfo.js"></script>
<script type="text/javascript">
$(document).ready(function() {
showFeatureInfo("#features");
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="list-group" id="features">
<div class="list-group-item">
<div class="panel panel-primary feature" data-id="OM/PedestrianCounting/Wil277_T">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
featureInfo.js
(function() {
var sensorWebApiUrl = this.sensorWebApiUrl ||
'http://pilot.52north.org/rtp-sos-webapp/api/v1';
this.showFeatureInfo = function(selector) {
$(selector).find('.feature').each(requestFeature);
};
var format = {
timeseries: function (data) {
var $div = $('<div>');
var string = data.label;
if (data.lastValue) {
string += ' (Last value @ ';
string += new Date(data.lastValue.timestamp).toISOString();
string += ': ';
string += data.lastValue.value;
if (data.uom) string += ' ' + data.uom;
string += ')';
}
$div.append($('<p>').text(string));
if (data.lastValue && data.firstValue) {
var timespan = encodeURIComponent(new Date(data.firstValue.timestamp).toISOString() +
'/' + new Date(data.lastValue.timestamp).toISOString());
var url = sensorWebApiUrl + '/timeseries/' + data.id +
'/getData.png?base64=false&width=400&height=300&grid=true&timespan=' + timespan;
$('<img>').attr('src', url).addClass('img-rounded').appendTo($div);
}
return $div;
},
service: function(data) {
return data.label + ' (' + data.type + ' ' + data.version + ', ' + data.serviceUrl + ')';
},
station: function(data) {
return data.properties.label;
},
category: function(data) {
return data.label;
},
offering: function(data) {
return data.label + ' (' + data.domainId + ')';
},
procedure: function(data) {
return data.label + ' (' + data.domainId + ')';
},
phenomenon: function (data) {
return data.label + ' (' + data.domainId + ')';
}
};
function requestFeature() {
var $this = $(this);
var id = $this.data('id');
$.getJSON(sensorWebApiUrl + '/search?q=' + id, function(data) {
$.each(data, function(i, r) {
if (r.type === 'feature' && r.label === id) {
requestFeatureRelations($this, r.id, r.label);
}
});
});
}
function requestFeatureRelations($div, id, label) {
$div.append($('<div>').addClass('panel-heading')
.append($('<h3>').addClass('panel-title')
.text(label)));
var $relations = $('<div>').addClass('panel-body').appendTo($div);
requestObjects({
div: $relations,
featureId: id,
title: 'Stations',
collection: 'stations',
css: 'station',
format: format.station
}, function(x) { return x.properties.id; });
requestObjects({
div: $relations,
featureId: id,
title: 'Services',
collection: 'services',
css: 'service',
format: format.service
});
requestObjects({
div: $relations,
featureId: id,
title: 'Phenomenon',
collection: 'phenomena',
css: 'phenomenon',
format: format.phenomenon
});
requestObjects({
div: $relations,
featureId: id,
title: 'Timeseries',
collection: 'timeseries',
css: 'timeseries',
format: format.timeseries
});
requestObjects({
div: $relations,
featureId: id,
title: 'Categories',
collection: 'categories',
css: 'category',
format: format.category
});
requestObjects({
div: $relations,
featureId: id,
title: 'Offerings',
collection: 'offerings',
css: 'offering',
format: format.offering
});
}
function requestObjects(param, getId) {
var $title = $('<h4>').addClass('panel-title').text(param.title).append(' ');
var $wrapper = $('<div>')
.addClass('panel panel-primary')
.append($('<div>').addClass('panel-heading')
.append($title))
.appendTo(param.div);
var $container = $('<div>').addClass('panel-body list-group').addClass(param.css + '-container').appendTo($wrapper);
var url = sensorWebApiUrl + '/' + param.collection + '?feature=' + param.featureId;
getId = getId || function(x) { return x.id; };
$.getJSON(url, function(data) {
$('<span>').addClass('badge pull-right').text(data.length).appendTo($title);
$.each(data, function(i, e) {
var url = sensorWebApiUrl + '/' + param.collection +'/' + getId(e);
$.getJSON(url, function(data) {
$('<div>').addClass('list-group-item').data('id', getId(data)).addClass(param.css)
.append(param.format(data)).appendTo($container);
});
});
});
}
}).call(window);
Raw
header.ftl
<!DOCTYPE html>
<html>
<head>
<title>FeatureInfo</title>
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type='text/javascript'>
<#include "featureInfo.js" parse=false>
</script>
<script type="text/javascript">
$(document).ready(function() {
showFeatureInfo('#features');
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="list-group" id="features">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment