Adding first English translation.

This commit is contained in:
Kasper D. Fischer 2015-04-09 11:41:17 +00:00
parent 5433cb606a
commit 52b55705b8
Notes: subgit 2018-03-07 17:59:09 +01:00
r822 www/trunk
4 changed files with 1073 additions and 0 deletions

434
www/events.js.en Normal file
View File

@ -0,0 +1,434 @@
/**********************************************************************
* events.js *
* script for event specific functions and setup *
**********************************************************************/
/* License
Copyright 2014 Kasper D. Fischer <kasper.fischer@rub.de>
This program is free software: you can redistribute it and/or modify it
under the terms of the GNU General Public License as published by the Free
Software Foundation, either version 3 of the License, or (at your option)
any later version.
This program is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
for more details.
You should have received a copy of the GNU General Public License along
with this program. If not, see http://www.gnu.org/licenses/.
$Id$
*/
/* adding row(s) to a table and format date strings afterwards */
function addTableRow(row, table) {
var added = $('#'+table+' tbody').append(row);
added.find('.tablesorter-childRow td').hide();
$('#'+table).find('td.utctime-date').each(function() {
$.localtime.formatObject($(this), "dd.MM.yyyy");
$(this).removeClass('utctime-date');
$(this).addClass('localtime-date');
});
$('#'+table).find('td.utctime-time').each(function() {
$.localtime.formatObject($(this), "HH:mm");
$(this).removeClass('utctime-time');
$(this).addClass('localtime-time');
});
};
/* do reverse geolocation lookup */
function getGeolocation(id, lat, lng) {
if ( !geolocationTable[id] ) {
$.getJSON( config['ajax']['nominatimURL'], { lat: lat, lon: lng, zoom: 10, format: "json" } )
.done(function( json ) {
var city = json.address["city"];
var country = json.address["country"];
var countryCode = json.address["country_code"].toUpperCase();
geolocationTable[id] = city;
( country != "Deutschland" ) ? geolocationTable[id] = geolocationTable[id] + " ("+countryCode+")" : null;
if ( city ) {
$("#eventstable a.toggle[eventid="+id+"]").text(geolocationTable[id]);
var sort = [[0,1],[1,1],[2,1]];
$("#eventstable").trigger("update", [true]);
$("#eventstable").trigger("updateCache");
$("#eventstable").trigger("sorton", [sort]);
} else {
console.log("Nominatim did not provide a city tag for "+lat+" / "+lng);
};
})
.fail(function( jqxhr, textStatus, error ) {
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err );
});
};
};
/* Load events using ajax */
function ajaxLoadEvents(stime, etime, eventid, url, target) {
var mapBounds = map.getBounds();
var request_data = {};
var rtime;
var ajax_url = config['ajax']['eventURL'];
if ( stime == '' || !stime ) {
stime = new Date();
stime.setDate(stime.getDate()-config['map']['timespan']);
rtime = new Date();
rtime.setDate(rtime.getDate()-Math.min(config['ajax']['timespan'], config['map']['timespan']));
} else {
rtime = stime;
};
if ( url ) {
var ajax_url = url;
request_data = {};
} else {
if ( eventid ) {
request_data = { eventid: eventid };
} else {
request_data = {
starttime: sprintf("%d-%02d-%02d", rtime.getFullYear(), rtime.getMonth()+1, rtime.getDate()),
orderby: 'time',
minlat: sprintf('%.2f', mapBounds.getSouth()-config['map']['latlngDelta']),
maxlat: sprintf('%.2f', mapBounds.getNorth()+config['map']['latlngDelta']),
minlon: sprintf('%.2f', mapBounds.getWest()-config['map']['latlngDelta']),
maxlon: sprintf('%.2f', mapBounds.getEast()+config['map']['latlngDelta']),
minmag: sprintf('%.1f', config['event']['minMag']-config['event']['minMagDelta']),
};
if ( etime ) {
request_data['endtime'] = sprintf("%d-%02d-%02d", etime.getFullYear(), etime.getMonth()+1, etime.getDate());
};
};
};
if ( etime == '' || !etime ) { etime = new Date(); };
$.ajax({
type: "GET",
url: ajax_url,
data: request_data,
dataType: "xml",
success: function (xml) {
$(xml).find('event').each(function () {
var id = $(this).attr('publicID').split('/')[2];
var mag = $(this).find('magnitude > mag > value').text();
var otime = $(this).find('origin > time > value').text();
var lng = $(this).find('origin > longitude > value').text();
var lat = $(this).find('origin > latitude > value').text();
var depth = $(this).find('origin > depth > value').text();
var evaluationMode = $(this).find('origin > evaluationMode').text();
var evaluationStatus = $(this).find('origin > evaluationStatus').text();
var type = $(this).find('type').last().text();
var location
// get location, try this in order:
// regional map name, given value, cached value, or nominatim lookup
geolocationTable[id] ? null : getGeolocation(id, lat, lng); // do AJAX lookup if not cached, location will be updated later
location = ( geolocationTable[id] || getLocation(lat, lng)[0] || $(this).find('description > text').text() );
// create table row: Date, Time, Mag, Location
if ( !eventTable[id] && $.inArray(type, config['event']['typeWhitelist'] )+1 && $.inArray(evaluationStatus, config['event']['evaluationBlacklist'])<0 && Number(mag)+0.05 >= config['event']['minMag'] ) {
// general event info (1st line)
var row = '<tr class="tablesorter-hasChildRow">'
+ '<td class="utctime-date">'+otime.split('.')[0]+'Z</td>'
+ '<td class="utctime-time">'+otime.split('.')[0]+'Z</td>'
+ sprintf('<td class="ar">%.1f</td>', Number(mag))
+ '<td><a href="#" class="toggle" eventid="'+id+'">'+location+'</a> <a class="map-link" href="#" eventid="'+id+'">map</a></td>'
+ '</tr>';
// setting up event details (2nd line)
row += '<tr class="tablesorter-childRow event-details">'
+ '<td colspan="4" eventid="'+id+'">Daten werden geladen ...</td></tr>';
// setting up download links (3nd line)
var xmlurl = sprintf('%s?formatted=true&includearrivals=true&eventid=%s', config['ajax']['eventURL'], id);
var oTime = new Date(otime);
var sTime = new Date(oTime.getTime()-10*1000.-oTime.getMilliseconds());
var eTime = new Date(oTime.getTime()+50*1000.-oTime.getMilliseconds());
var mseedurl = sprintf('%s?net=GE,GR,RN&cha=EH?,HH?&start=%04d-%02d-%02dT%02d:%02d:%02d&end=%04d-%02d-%02dT%02d:%02d:%02d', config['ajax']['mseedURL'], Number(sTime.getUTCFullYear()), Number(sTime.getUTCMonth())+1, Number(sTime.getUTCDate()), Number(sTime.getUTCHours()), Number(sTime.getUTCMinutes()), Number(sTime.getUTCSeconds()), Number(eTime.getUTCFullYear()), Number(eTime.getUTCMonth())+1, Number(eTime.getUTCDate()), Number(eTime.getUTCHours()), Number(eTime.getUTCMinutes()), Number(eTime.getUTCSeconds()));
row += '<tr class="tablesorter-childRow event-download">'
+ '<td colspan="4" eventid="'+id+'">'
+ sprintf('Download <a class="xml-link" target="_blank" download="%s.xml" href="%s">QuakeML</a> or <a class="mseed-link" target="_blank" download="%s.mseed" href="%s">miniSEED</a>', id, xmlurl, id, mseedurl)
+ '</td></tr>';
// add row to table
if ( stime <= oTime && etime >= oTime ) {
addTableRow(row, 'eventstable');
};
if ( target ) {
addTableRow(row, target);
}
// create marker
if ((stime <= oTime && etime >= oTime ) || ( id == eventid )) {
var marker = addEventMarker(id, Number(lat), Number(lng), Number(mag), type);
var text = sprintf('<h3 eventid="%s">%s</h3>', id, location)
+ sprintf('<p>Ereignis: %s</br>', id)
+ sprintf('Type: %s</br>', type)
+ sprintf('Magnitude: %3.1f</br>', Number(mag))
+ sprintf('Ort: %.4f °N, %.4f °O </br>', Number(lat), Number(lng))
+ sprintf('Tiefe: %.1f km</br>', Number(depth)/1000.)
+ sprintf('Zeit: <span class="utctime">%sZ</span></p>', otime.split('.')[0], otime.split('.')[0]);
marker.bindPopup(text);
};
};
});
},
complete: function () {
var sort = [[0,1],[1,1],[2,1]];
$("#eventstable").trigger("update", [true]);
$("#eventstable").trigger("updateCache");
$("#eventstable").trigger("sorton", [sort]);
initMapLink();
eventLayer.bringToBack();
highlightFirstEvent();
},
error: function( jqxhr, textStatus, error ) {
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err );
}
});
// create events csv download link
request_data['format'] = 'text';
if ( eventid == '' || !eventid ) { $('#events-csv-link').attr('href', config['ajax']['eventURL']+'?'+$.param(request_data)) };
};
/* ajaxLoadEventInfo */
function ajaxLoadEventInfo(id) {
var request_data = {
eventid: id,
includeArrivals: true,
};
$.ajax({
type: "GET",
url: config['ajax']['eventURL'],
data: request_data,
dataType: "xml",
success: function (xml) {
eventDetails[id] = true;
$(xml).find('event').each(function () {
var event = $(this);
var mag = $(this).find('magnitude > mag > value').text();
var otime = $(this).find('origin > time > value').text();
var lng = $(this).find('origin > longitude > value').text();
var lng_err = $(this).find('origin > longitude > uncertainty').text();
var lat = $(this).find('origin > latitude > value').text();
var lat_err = $(this).find('origin > latitude > uncertainty').text();
var depth = $(this).find('origin > depth > value').text();
var depth_err = $(this).find('origin > depth > uncertainty').text();
var rms = $(this).find('origin > quality > standardError').text();
var gap = $(this).find('origin > quality > azimuthalGap').text();
var phases_count = $(this).find('origin > quality > usedPhaseCount').text();
var type = $(this).find('type').last().text();
// setting up general event info
var row = "<pre>"
+ sprintf("ID %49s\n", id)
+ sprintf("Type %47s\n\n", type)
+ "Origin\n"
+ sprintf("Date %18s\n", otime.split('T')[0])
+ sprintf("Time %18s UTC\n", otime.split('T')[1].substring(0, 11))
+ sprintf("Latitude %14.4f °N +- %4.1f km\n",Number(lat), Number(lat_err))
+ sprintf("Longitude %13.4f °E +- %4.1f km\n", Number(lng), Number(lng_err))
+ sprintf("Depth %14.1f km +- %4.1f km\n", Number(depth)/1000., Number(depth_err)/1000.)
+ sprintf("Magnitude %10.1f\n", Number(mag))
+ sprintf("Residual RMS %7.1f sec\n", Number(rms))
+ sprintf("Azimuthal gap %6.1f °\n\n", Number(gap))
+ sprintf("%d Phase arrivals:\n", Number(phases_count))
+ "sta net dist azi phase time res wt\n";
// adding phase info (TODO sort by distance)
$(this).find('origin > arrival').each(function() {
var pickid = $(this).find('pickID').text();
var azi = $(this).find('azimuth').text();
var dist = $(this).find('distance').text();
var tres = $(this).find('timeResidual').text();
var phase = $(this).find('phase').text();
var tweight = $(this).find('timeWeight').text();
if ( Number(tweight) > 0.0 ) {
var waveformid = event.find('pick[publicID="'+pickid+'"] > waveformID');
var networkcode = waveformid.attr('networkCode');
var stationcode = waveformid.attr('stationCode');
var channel = waveformid.attr('channelCode').substring(2,2);
var phasemode = event.find('pick[publicID="'+pickid+'"] > evaluationMode').text().substring(0,1).toUpperCase();
var picktime = event.find('pick[publicID="'+pickid+'"] > time > value').text().split('T')[1].substring(0,11);
row = row
+ sprintf('%-4s %2s %5.1f %5.1f %3s %1s %13s %5.1f %5.2f\n', stationcode, networkcode, Number(dist), Number(azi), phase, phasemode, picktime, Number(tres), Number(tweight));
};
});
row = row + '</pre>';
$('#eventstable > tbody > tr.event-details > td[eventid='+id+']').html(row);
});
},
complete: function () {
null;
},
error: function( jqxhr, textStatus, error ) {
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err );
}
});
};
/* toggles visibility of filtered markers
* only events in the event list are shown */
function toggleFilteredMarkers() {
// show all shown events in map
$("#eventstable > tbody > tr:not(.filtered) > td > a.map-link").each( function() {
if ( $(this).attr("eventid") ) {
map.addLayer(eventTable[$(this).attr("eventid")]);
};
});
// hide filtered events in map
$("#eventstable > tbody > tr.filtered > td > a.map-link").each( function() {
if ( $(this).attr("eventid") ) {
map.removeLayer(eventTable[$(this).attr("eventid")]);
};
});
highlightFirstEvent();
};
/* Highlight the first event of the event list on the map if no
* other event is selected */
function highlightFirstEvent() {
var highlightStyle = {
color: config['event']['markerColorH'],
fillColor: config['event']['markerColorH'],
fillOpacity: 1,
};
var normalStyle = {
fillColor: config['event']['markerColor'],
color: config['event']['markerColor'],
fillOpacity: config['event']['markerOpacity'],
};
$("#eventstable a.map-link").each( function() {
if ( $(this).attr("eventid") ) {
eventTable[$(this).attr("eventid")].setStyle(normalStyle);
$(this).removeClass('first');
$(this).text('map');
};
});
$("#eventstable > tbody > tr:not(.filtered):visible").first().find("a.map-link").each(function() {
if ( $(this).attr("eventid") ) {
eventTable[$(this).attr("eventid")].setStyle(highlightStyle);
eventTable[$(this).attr("eventid")].bringToFront();
$(this).addClass('first');
$(this).text('map (red)');
};
});
};
function highlightEvent( id ) {
var highlightStyle = {
color: config['event']['markerColorH'],
fillColor: config['event']['markerColorH'],
fillOpacity: 1,
};
var normalStyle = {
fillColor: config['event']['markerColor'],
color: config['event']['markerColor'],
fillOpacity: config['event']['markerOpacity'],
};
$("#eventstable > tbody > tr:not(.filtered)").find("a.map-link").each( function() {
if ( $(this).attr("eventid") ) {
if ( $(this).attr("eventid") == id ) {
eventTable[$(this).attr("eventid")].setStyle(highlightStyle);
eventTable[$(this).attr("eventid")].bringToFront();
$(this).addClass('first');
$(this).text('map (red)');
} else {
eventTable[$(this).attr("eventid")].setStyle(normalStyle);
$(this).removeClass('first');
$(this).text('map');
}
};
});
};
/**********************************************************************
* document ready *
**********************************************************************/
$(document).ready(function() {
// tablesorter for event list
$("#eventstable").tablesorter(
{
theme : 'blue',
dateFormat : "ddmmyyyy",
headers: {
0: { sorter: "shortDate" }
},
cssChildRow: "tablesorter-childRow", // this is the default setting
widgets: ["uitheme", "zebra", "filter", "pager"], // initialize zebra and filter widgets, "scroller"
widgetOptions: {
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
pager_output: '# {startRow} - {endRow} ({totalRows}) | page {page} ({totalPages})',
pager_removeRows: false,
pager_size: 35,
filter_childRows : true,
filter_cssFilter : 'tablesorter-filter',
filter_startsWith : false,
filter_ignoreCase : true,
scroller_height: $('div.map').height() - 250,
scroller_barWidth: 10,
scroller_jumpToHeader: false,
sortList: "[[0,1], [1,1], [2,1]]",
resort: true,
showProcessing: true,
}
});
// hide child rows
$('#eventstable > tbody > tr.tablesorter-childRow td').hide();
// update map after filtering
$('#eventstable').bind('filterEnd', function(){
toggleFilteredMarkers();
});
// highlight first event
$('#eventstable').bind('sortEnd', function(){
highlightFirstEvent();
});
$('#eventstable').bind('pagerComplete', function(){
highlightFirstEvent();
});
// show / hide event info
$('#eventstable').delegate('.toggle', 'click' , function(){
// load event details
var eventid = $(this).attr('eventid');
( eventDetails[eventid] ) ? null : ajaxLoadEventInfo(eventid);
// toggle visibility of selected row
$(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').toggle('slow');
// mark currently selected row and remove class selected from all other rows
// hide other rows
$(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').addClass('selected-now');
$(this).closest('tbody').find('td.selected').each(function(){
if ( ! $(this).hasClass('selected-now') ) {
$(this).hide();
$(this).removeClass('selected');
};
});
$(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').each(function(){
$(this).removeClass('selected-now');
var selected = $(this).hasClass('selected');
if ( selected ) {
$(this).removeClass('selected');
highlightFirstEvent();
} else {
$(this).addClass('selected');
highlightEvent($(this).attr('eventid'));
};
});
return false;
});
// update selection / type info
$("#events-timespan").text(config['map']['timespan']);
$("#events-minmag").text(sprintf('%.1f', config['event']['minMag']));
config['event']['typeWhitelist'].map(function(type) {
var typetext;
( $("#events-type").text() == "Symbols:" ) ? typetext = ' ' : typetext = ', ';
switch ( type ) {
case 'earthquake':
typetext += 'tectonic earthquake&nbsp;(star)';
break;
case 'explosion':
typetext += 'explosion&nbsp;(hexagon)';
break;
case 'induced or triggered event':
typetext += '(mining-)induced event&nbsp;(circle)';
break;
case 'quarry blast':
typetext += 'quarry blast&nbsp;(wheel)';
break;
};
$("#events-type").append(typetext);
});
});

184
www/index.html.en Executable file
View File

@ -0,0 +1,184 @@
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<!-- $Id$ -->
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='de' lang='de'>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>RUB SeisObs - Event and Station Map</title>
<!-- Style definitions -->
<link rel="stylesheet" href="main.css" />
<!-- link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" / -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.css" />
<link rel="stylesheet" href="external/theme.blue.css"/>
<link rel="stylesheet" href="external/jquery.tablesorter.pager.css" />
<link rel="stylesheet" href="external/leaflet.css" />
<!-- link rel="stylesheet" href="external/css/dvf.css" type="text/css" media="screen" / -->
<link rel="stylesheet" href="external/css/leaflet.label.css" type="text/css" media="screen" />
<!-- <link rel="stylesheet" href="external/easyPrint.css"/> -->
<!-- jQuery & jQueryUI -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Localtime & sprintf -->
<script type="text/javascript" src="external/jquery.localtime-0.9.1.min.js"></script>
<script type="text/javascript" src="external/sprintf.min.js"></script>
<!-- Tablesorter: required -->
<script type="text/javascript" src="external/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="external/jquery.tablesorter.widgets.min.js"></script>
<script type="text/javascript" src="external/widget-pager.js"></script>
<!-- script type="text/javascript" src="external/jquery.tablesorter.pager.min.js"></script -->
<!-- script type="text/javascript" src="external/widget-scroller.js"></script -->
<!-- Leaflet -->
<script type="text/javascript" src="external/leaflet.js"></script>
<script type="text/javascript" src="external/TileLayer.Grayscale.js"></script>
<script type="text/javascript" src="external/leaflet-dvf.markers.min.js"></script>
<script type="text/javascript" src="external/leaflet.label.js"></script>
<!-- <script src="external/jQuery.print.js"></script> -->
<!-- <script src="external/leaflet.easyPrint.js"></script> -->
<!-- Map, Events & Stations -->
<script type="text/javascript" src="misc.js"></script>
<script type="text/javascript" src="geolocation.js"></script>
<script type="text/javascript" src="specialevents.js"></script>
<script type="text/javascript" src="map.js.en"></script>
<script type="text/javascript" src="events.js.en"></script>
<script type="text/javascript" src="stations.js.en"></script>
</head>
<body>
<!-- noscript -->
<noscript>
<div class="noscript">
<div class="noscriptcontent">
<h2>JavaScript disabled!</h2>
<p>This page requires JavaScript to work. Please enable JavaScript.</p>
<h2>Kein JavaScript verfügbar!</h2>
<p>Diese Seite benötigt JavaScript. Bitte schalten Sie JavaScript ein.</p>
<h2>Impressum</h2>
<!--#include virtual="impressum.inc.de" -->
</div>
</div>
</noscript>
<!-- Tabs -->
<div class="info" id="tabs">
<ul>
<li><a href="#eventstab"><span>Events</span></a></li>
<li><a href="#stationstab"><span>Stations</span></a></li>
<li><a href="#moretab"><span>More</span></a></li>
<li class="infotab"><a href="#infotab"><span>Info</span></a></li>
</ul>
<!-- Ereignisse -->
<div class="tab" id="eventstab">
<div class="pager events" id="eventspager">
<img src="external/first.png" class="first" alt="First" />
<img src="external/prev.png" class="prev" alt="Prev" />
<span class="pagedisplay"></span>
<img src="external/next.png" class="next" alt="Next" />
<img src="external/last.png" class="last" alt="Last" />
<select class="pagesize" title="Select page size">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
</select>
<select class="gotoPage" title="Select page number"></select>
</div>
<table class="tablesorter" id="eventstable">
<colgroup>
<col width="85" />
<col width="50" />
<col width="50" />
<col />
<col width="30" />
</colgroup>
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Mag.</th>
<th>Place</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<p class="table-caption">
Events of the last <span id="events-timespan">180</span> days with magnitude <span id="events-minmag">1.2</span> or larger in the area of the map and special events in adjacents regions. Download as <a id="events-csv-link" href="link" download="events.csv">CSV file</a>.
</p>
<p class="table-caption">
<span id="events-type">Symbols:</span>
</p>
<p class="table-caption">
Nominatim Search Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img alt="Mapquest Logo" src="//developer.mapquest.com/content/osm/mq_logo.png" />
</p>
</div>
<!-- Stations -->
<div class="tab" id="stationstab">
<div class="pager stationspager" id="stationspager">
<img src="external/first.png" class="stationsfirst" alt="First" />
<img src="external/prev.png" class="stationsprev" alt="Prev" />
<span class="stationspagedisplay"></span>
<img src="external/next.png" class="stationsnext" alt="Next" />
<img src="external/last.png" class="stationslast" alt="Last" />
<select class="stationspagesize" title="Select page size">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
</select>
<select class="stationsgotoPage" title="Select page number"></select>
</div>
<table class="tablesorter" id="stationstable">
<colgroup>
<col width="77" />
<col/>
<col width="100" align="char" char="." />
<col width="100" align="char" char="." />
</colgroup>
<thead>
<tr>
<th>Network</th>
<th>Station</th>
<th>Latitude [°]</th>
<th>Longitude [°]</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<p class="table-caption">Download as <a id="stations-csv-link" href="link" download="stations.csv">CSV file</a>.</p>
</div>
<!-- More -->
<div class="tab" id="moretab"><!--include virtual="more.html.de" --></div>
<!-- Info -->
<div class="tab" id="infotab">
<div id="infoaccordion">
<h3 class="aheader">Navigation / Links</h3>
<!--#include virtual="info.inc.de" -->
<h3 class="aheader">Copyright / License</h3>
<!--#include virtual="copyright.inc.de" -->
<h3 class="aheader">Imprint</h3>
<!--#include virtual="impressum.inc.de" -->
<div>
</div>
</div>
</div>
</div>
<!-- Logo -->
<div class="rublogo"><a href="http://www.gmg.ruhr-uni-bochum.de/geophysik/seisobs"><img class="rublogo" src="logo_RUB_155x30.png" alt="Ruhr-University Bochum" title="Ruhr-University Bochum" border="0"/></a></div>
<!-- Map -->
<div id="map" class="map"></div>
<div id="spinner" class="spinner" style="display:none;"><img id="img-spinner" src="spinner.gif" alt="Loading"/></br>Loading ...</div>
</body>
</html>

221
www/map.js.en Normal file
View File

@ -0,0 +1,221 @@
/**********************************************************************
* map.js *
* script for map specific functions and setup *
**********************************************************************/
/* License
Copyright 2014 Kasper D. Fischer <kasper.fischer@rub.de>
This program is free software: you can redistribute it and/or modify it
under the terms of the GNU General Public License as published by the Free
Software Foundation, either version 3 of the License, or (at your option)
any later version.
This program is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
for more details.
You should have received a copy of the GNU General Public License along
with this program. If not, see http://www.gnu.org/licenses/.
$Id$
*/
/* add station marker */
function addStationMarker(id, lat, lng, station) {
var marker = L.triangleMarker(L.latLng(lat, lng),
{
gradient: true,
fillColor: config['station']['markerColor'],
fillOpacity: config['station']['markerOpacity'],
color: config['station']['markerColor'],
weight: 1,
opacity: 1,
radius: config['station']['markerSize'][id] || config['station']['markerSize']['default'],
className: id+' stationMarker',
});
marker.bindLabel('Station '+station);
stationLayer.addLayer(marker);
stationTable[id] = marker;
};
/* add event marker */
function addEventMarker(id, lat, lng, mag, type) {
if ( eventTable[id] ) {
return eventTable[id];
} else {
var markerOptions = {
gradient: true,
dropShadow: false,
fillColor: config['event']['markerColor'],
fillOpacity: config['event']['markerOpacity'],
color: config['event']['markerColor'],
weight: 0,
opacity: 1,
className: id+' eventMarker',
radius: mag2radius(mag)
};
var marker;
switch ( type ) {
case 'earthquake':
marker = L.starMarker(L.latLng(lat, lng), markerOptions);
break;
case 'explosion':
markerOptions['numberOfSides'] = 6;
markerOptions['radius'] = 2.0*markerOptions['radius'];
markerOptions['innerRadius'] = 0.3*markerOptions['radius'];
marker = L.regularPolygonMarker(L.latLng(lat, lng), markerOptions);
break;
case 'quarry blast':
markerOptions['numberOfPoints'] = 7;
markerOptions['innerRadius'] = 0.3*markerOptions['radius'];
marker = L.starMarker(L.latLng(lat, lng), markerOptions);
break;
default:
marker = L.circleMarker(L.latLng(lat, lng), markerOptions);
};
eventLayer.addLayer(marker);
eventTable[id] = marker;
return marker;
};
};
/* handle to show events on map */
function initMapLink() {
$("#eventstable > tbody > tr > td > a.map-link").off('click');
$("#eventstable > tbody > tr > td > a.map-link").on('click' , function(){
var highlightStyle = {
color: config['event']['markerColorH'],
fillColor: config['event']['markerColorH'],
fillOpacity: 1,
className: $(this).attr('eventid')
}
var normalStyle = {
fillColor: config['event']['markerColor'],
fillOpacity: config['event']['markerOpacity'],
color: config['event']['markerColor']
};
// mark currently selected link and remove class selected from all other links
// set everything to normal state
$(this).addClass('selected-now');
$("#eventstable > tbody > tr:not(.filtered) > td > a.map-link:not(.selected-now)").each(function(){
$(this).removeClass('selected');
$(this).text('Karte');
eventTable[$(this).attr('eventid')].setStyle(normalStyle);
});
// switch event of first row to normalStyle if it is not the selected one
( $(this).hasClass('first') ) ? null : eventTable[$("#eventstable > tbody > tr:not(.filtered)").first().find("a.map-link").attr("eventid")].setStyle(normalStyle);
$(this).each(function(){
$(this).removeClass('selected-now');
// selected -> unselected
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
$(this).text('Karte');
map.setView(config['map']['centerDefault'], config['map']['zoomDefault']);
eventTable[$(this).attr('eventid')].setStyle(normalStyle);
highlightFirstEvent();
// unselected -> selected
} else {
$(this).addClass('selected');
$(this).text('at focus (red)');
map.setView(eventTable[$(this).attr('eventid')].getLatLng(), config['map']['zoomFocus']);
eventTable[$(this).attr('eventid')].setStyle(highlightStyle)
};
});
return false;
});
};
/**********************************************************************
* document ready *
**********************************************************************/
$(document).ready(function() {
// create a map in the "map" div, set the view to a given place and zoom
map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
new L.Control.Zoom({ position: 'topright' }).addTo(map);
new L.control.scale({position: 'bottomright', imperial: false}).addTo(map);
// create baselayer
switch ( config['map']['baselayer'] ) {
case 'osmde': // add OpenStreetMap.DE tile layer
L.tileLayer('http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',
{
attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
}).addTo(map);
break;
case 'esrigray': // add ESRI Grayscale World Map (neither city nor road names)
L.tileLayer('//server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
{
attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
maxZoom: 16
}).addTo(map);
break;
case 'aerial': // add ESRI WordImagery tile layer
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
{
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
}).addTo(map);
break;
case 'mapquestgray': // add MapQuestOSM tile layer
L.tileLayer.grayscale('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg',
{
subdomains: '1234',
detectRetina: true,
attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> <img src="https://developer.mapquest.com/content/osm/mq_logo.png">',
}).addTo(map);
break;
case 'mapquest': // add MapQuestOSM tile layer
null;
default:
L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg',
{
subdomains: '1234',
detectRetina: true,
attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> <img src="https://developer.mapquest.com/content/osm/mq_logo.png">',
}).addTo(map);
};
// create station and event layer
// stationLayer = L.geoJson().addTo(map);
stationLayer = new L.MarkerGroup().addTo(map);
eventLayer = new L.MarkerGroup().addTo(map);
// load events
ajaxLoadEvents('', '', '', 'events.xml');
ajaxLoadEvents();
specialEvents.map(function(id) {
ajaxLoadEvents('', '', id)
});
toggleFilteredMarkers();
// bind popupopen event
map.on('popupopen', function() {
// convert date/time to localtime
$("div.leaflet-popup span.utctime").each(function(){$(this).addClass("localtime").removeClass("utctime");$.localtime.formatObject($(this), "dd.MM.yyyy - HH:mm")});
openMarkerID = $("div.leaflet-popup h3").attr("eventid");
if ( openMarkerID ) {
// update city in popup
$("div.leaflet-popup h3").text(geolocationTable[openMarkerID]);
// highlight event in table and show details
// highlightEvent(eventid);
$('#eventstable > tbody > tr > td > a.toggle').each(function() {
if ( $(this).attr('eventid') == openMarkerID ) {
$(this)[0].click();
};
});
};
});
map.on('popupclose', function() {
$('#eventstable > tbody > tr > td > a.toggle').each(function() {
if ( $(this).attr('eventid') == openMarkerID ) {
$(this)[0].click();
};
});
});
// print icon
// L.easyPrint().addTo(map);
});

234
www/stations.js.en Normal file
View File

@ -0,0 +1,234 @@
/**********************************************************************
* stations.js *
* script for station specific functions and setup *
**********************************************************************/
/* License
Copyright 2014 Kasper D. Fischer <kasper.fischer@rub.de>
This program is free software: you can redistribute it and/or modify it
under the terms of the GNU General Public License as published by the Free
Software Foundation, either version 3 of the License, or (at your option)
any later version.
This program is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
for more details.
You should have received a copy of the GNU General Public License along
with this program. If not, see http://www.gnu.org/licenses/.
$Id$
*/
/* Load the stations using ajax */
function loadStations(stime, etime) {
var mapBounds = map.getBounds();
var N = mapBounds.getNorth();
var E = mapBounds.getEast();
var S = mapBounds.getSouth();
var W = mapBounds.getWest();
if ( !stime ) {
var stime = new Date();
stime.setDate(stime.getDate()-config['map']['timespan']);
};
if ( !etime ) {
var etime = new Date();
etime.setDate(etime.getDate()+1);
};
var request_data = {
endafter: sprintf("%d-%02d-%02d", stime.getFullYear(), stime.getMonth()+1, stime.getDate()),
startbefore: sprintf("%d-%02d-%02d", etime.getFullYear(), etime.getMonth()+1, etime.getDate()),
level: 'channel',
minlat: S-config['map']['latlngDelta'],
maxlat: N+config['map']['latlngDelta'],
minlon: W-config['map']['latlngDelta'],
maxlon: E+config['map']['latlngDelta'],
};
$.ajax({
type: "GET",
url: config['ajax']['stationURL'],
dataType: "xml",
data: request_data,
success: function (xml) {
$(xml).find('Network').each(function () {
var network = $(this).attr('code');
if ( $.inArray(network, config['station']['networkBlacklist'])<0 ) {
$(this).find('Station').each(function () {
var station = $(this).attr('code'),
lat = $(this).find('Latitude:first').text(),
lng = $(this).find('Longitude:first').text(),
stationID = network+'_'+station,
stationText = network+'.'+station;
if ( !stationTable[stationID] ) {
// general station info (1st line)
var row = sprintf('<tr><td><a href="#" class="toggle">%s</a></td><td><a href="#" class="toggle">%s</a></td><td class="ar">%7.4f</td><td class="ar">%7.4f</td></tr>' , network, station, Number(lat), Number(lng));
// setting up network details (2nd line)
row += sprintf('<tr class="tablesorter-childRow station-details"><td colspan="4">%s', networkText[network] || '');
row += ( $.inArray(station, bochumStation)+1 ) ? '</br><em>Operator:</em> Ruhr-University Bochum</td></tr>' : '</td></tr>' ;
if ( network == 'RN' || network == 'X5' || $.inArray(station, bochumStation)+1 ) {
// setting up station details (3rd line)
row += '<tr class="tablesorter-childRow station-details"><td colspan="4">';
row += stationDetails(station, network, lat, lng, stationID, stationText, $(this));
row += '</td></tr>';
// setting up download links (4th line)
var URL, fdsnxmlURL, fdsnxmlRespURL, sc3mlURL, sc3mlRespURL, dlsvURL;
URL = sprintf('%s?network=%s&station=%s', config['ajax']['stationURL'], network, station);
fdsnxmlURL = URL + '&level=station&format=xml';
fdsnxmlRespURL = URL + '&level=response&format=xml';
sc3mlURL = URL + '&level=station&format=sc3ml';
sc3mlRespURL = URL + '&level=response&format=sc3ml';
dlsvFile = sprintf('%s_%s.dlsv', network.toUpperCase(), station.toUpperCase());
row += '<tr class="tablesorter-childRow station-download"><td colspan="4">'
+ sprintf('Download details: <a download="%s.xml" href="%s" target="_blank">FDSNxml</a> or <a download="%s.sc3" href="%s" target="_blank">SC3ml</a></br> ', stationID, fdsnxmlURL, stationID, sc3mlURL)
+ sprintf('Response files: <a download="%s_response.xml" href="%s" target="_blank">FDSNxml</a>, <a download="%s_response.sc3" href="%s" target="_blank">SC3ml</a> ', stationID, fdsnxmlRespURL, stationID, sc3mlRespURL)
+ sprintf('or <a href="%s" download="%s" type="application/octet-stream">datalessSEED</a>', config['ajax']['dlsvURL'] + '/' + dlsvFile, dlsvFile.toLowerCase())
+ '</td></tr>';
}
else {
row += '<tr class="tablesorter-childRow station-details"><td colspan="4">Kontaktieren Sie den ';
row += ( networkURL[network.toUpperCase()] ) ? '<a href="'+networkURL[network.toUpperCase()]+'" target="_blank">Netzwerkkoordinator</a>' : 'Netzwerkkoordinator';
row += ' für weitere Details.</td></tr>';
};
$('#stationstable tbody').append(row);
addStationMarker(stationID, Number(lat), Number(lng), stationText.toUpperCase());
};
});
};
});
},
complete: function () {
initStationTable();
var sort = [[0,0],[1,0]];
$("#stationstable").trigger("update", [true]);
$("#stationstable").trigger("updateCache");
$("#stationstable").trigger("sorton", [sort]);
$("#stationstable > tbody > tr:even").addClass("odd");
$("#stationstable > tbody > tr:odd").addClass("even");
stationLayer.bringToFront();
},
error: function( jqxhr, textStatus, error ) {
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err );
}
});
// create stations csv download link
request_data['format'] = 'text';
$('#stations-csv-link').attr('href', config['ajax']['stationURL']+'?'+$.param(request_data));
};
/* format station Details */
function stationDetails(station, network, lat, lng, stationId, stationText, stationObject) {
var output;
var elevation = stationObject.find('Elevation:first').text();
var name = stationObject.find('Site > Name').text();
output = '<pre>'
+ name + '</br>'
+ 'Position: ' + lat + '°N ' + lng + '°E, height: ' + elevation + ' m a.s.l.</br>';
stationObject.find('Channel').each(function() {
var code = $(this).attr('code');
var sensor = $(this).find('Sensor > Type').text().split(',')[0];
var sampleRate = $(this).find('SampleRate').text();
output += '</br>Chanel ' + code + ', Samplingrate ' + sampleRate + ' Hz, Sensor ' + sensor;
});
output += '</pre>';
return output;
};
/* initStationTable */
function initStationTable() {
// tablesorter for station list
$("#stationstable").tablesorter(
{
theme : 'blue',
cssChildRow: "tablesorter-childRow", // this is the default setting
widgets: ["uitheme", "zebra", "filter", "pager"], // initialize zebra and filter widgets, "scroller"
widgetOptions: {
// output default: '{page}/{totalPages}'
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
pager_output: '# {startRow} - {endRow} ({totalRows}) | page {page} ({totalPages})',
// apply disabled classname to the pager arrows when the rows at either extreme is visible
pager_updateArrows: true,
// starting page of the pager (zero based index)
pager_startPage: 0,
// Number of visible rows
pager_size: 35,
// Save pager page & size if the storage script is loaded (requires $.tablesorter.storage in jquery.tablesorter.widgets.js)
pager_savePages: true,
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
// table row set to a height to compensate; default is false
pager_fixedHeight: false,
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
pager_removeRows: false,
// css class names of pager arrows
pager_css: {
container : 'stations-tablesorter-pager',
errorRow : 'stations-tablesorter-errorRow', // error information row (don't include period at beginning)
disabled : 'disabled' // class added to arrows @ extremes (i.e. prev/first arrows "disabled" on first page)
},
// jQuery pager selectors
pager_selectors: {
container : '.stationspager', // target the pager markup (wrapper)
first : '.stationsfirst', // go to first page arrow
prev : '.stationsprev', // previous page arrow
next : '.stationsnext', // next page arrow
last : '.stationslast', // go to last page arrow
goto : '.stationsgotoPage', // go to page selector - select dropdown that sets the current page
pageDisplay : '.stationspagedisplay', // location of where the "output" is displayed
pageSize : '.stationspagesize' // page size selector - select dropdown that sets the "size" option
},
filter_childRows : true,
filter_cssFilter : 'stations-tablesorter-filter',
filter_startsWith : false,
filter_ignoreCase : true,
scroller_height: $('div.map').height() - 250,
scroller_barWidth: 10,
scroller_jumpToHeader: false,
sortList: "[[0,0], [1,0]]",
resort: true,
showProcessing: true,
}
});
// hide child rows
$('#stationstable > tbody > tr.tablesorter-childRow > td').hide();
// update map after filtering
// $('#stationsstable').bind('filterEnd', function(){
// toggleFilteredMarkers();
// });
};
/**********************************************************************
* document ready *
**********************************************************************/
$(document).ready(function() {
loadStations();
// show / hide station info
$('#stationstable').delegate('.toggle', 'click' , function(){
// toggle visibility of selected row
$(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').toggle('slow');
// mark currently selected row and remove class selected from all other rows
// hide other rows
$(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').addClass('selected-now');
$(this).closest('tbody').find('td.selected').each(function(){
if ( ! $(this).hasClass('selected-now') ) {
$(this).hide();
$(this).removeClass('selected');
};
});
$(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').each(function(){
$(this).removeClass('selected-now');
var selected = $(this).hasClass('selected');
if ( selected ) {
$(this).removeClass('selected');
//highlightFirstEvent();
} else {
$(this).addClass('selected');
//toggleHighlightStation($(this).attr('stationid'));
};
});
return false;
});
});