Created custom version of webmaps for inclusion in iframes.
This commit is contained in:
parent
a3138ae638
commit
b7e13d7649
Notes:
subgit
2018-03-07 17:59:12 +01:00
r868 www/branches/iframe
1
.gitattributes
vendored
1
.gitattributes
vendored
@ -2,6 +2,7 @@
|
||||
scripts/mkEvents.csh -text
|
||||
www/.htaccess -text
|
||||
www/copyright.inc.de -text
|
||||
www/eventsXML.js -text
|
||||
www/external/TileLayer.Grayscale.js -text
|
||||
www/external/css/dvf.css -text
|
||||
www/external/css/leaflet.label.css -text
|
||||
|
||||
171
www/events.js
171
www/events.js
@ -22,6 +22,68 @@
|
||||
$Id$
|
||||
*/
|
||||
|
||||
/* process loaded events */
|
||||
function processEvents(xml, target) {
|
||||
$(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+'">Karte</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);
|
||||
};
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
/* adding row(s) to a table and format date strings afterwards */
|
||||
function addTableRow(row, table) {
|
||||
var added = $('#'+table+' tbody').append(row);
|
||||
@ -54,8 +116,6 @@ function getGeolocation(id, lat, lng) {
|
||||
$("#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 ) {
|
||||
@ -66,7 +126,7 @@ function getGeolocation(id, lat, lng) {
|
||||
};
|
||||
|
||||
/* Load events using ajax */
|
||||
function ajaxLoadEvents(stime, etime, eventid, url, target) {
|
||||
function ajaxLoadEvents(startup, stime, etime, eventid, url, target) {
|
||||
var mapBounds = map.getBounds();
|
||||
var request_data = {};
|
||||
var rtime;
|
||||
@ -101,85 +161,30 @@ function ajaxLoadEvents(stime, etime, eventid, url, target) {
|
||||
};
|
||||
};
|
||||
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+'">Karte</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 );
|
||||
}
|
||||
});
|
||||
if ( startup ) {
|
||||
processEvents(eventsXML, false);
|
||||
} else {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: ajax_url,
|
||||
data: request_data,
|
||||
dataType: "xml",
|
||||
success: function ( xml ) { processEvents(xml, target) },
|
||||
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)) };
|
||||
@ -281,6 +286,7 @@ function toggleFilteredMarkers() {
|
||||
/* Highlight the first event of the event list on the map if no
|
||||
* other event is selected */
|
||||
function highlightFirstEvent() {
|
||||
$('div.info').show()
|
||||
var highlightStyle = {
|
||||
color: config['event']['markerColorH'],
|
||||
fillColor: config['event']['markerColorH'],
|
||||
@ -306,6 +312,7 @@ function highlightFirstEvent() {
|
||||
$(this).text('Karte (rot)');
|
||||
};
|
||||
});
|
||||
$('div.info').hide()
|
||||
};
|
||||
|
||||
function highlightEvent( id ) {
|
||||
|
||||
1
www/eventsXML.js
Normal file
1
www/eventsXML.js
Normal file
File diff suppressed because one or more lines are too long
@ -15,7 +15,6 @@
|
||||
<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>
|
||||
@ -38,7 +37,6 @@
|
||||
<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>
|
||||
@ -47,6 +45,7 @@
|
||||
<script type="text/javascript" src="map.js"></script>
|
||||
<script type="text/javascript" src="events.js"></script>
|
||||
<script type="text/javascript" src="stations.js"></script>
|
||||
<script type="text/javascript" src="eventsXML.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -176,7 +175,7 @@
|
||||
</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-Universität Bochum" title="Ruhr-Universität Bochum" border="0"/></a></div>
|
||||
<!-- Map -->
|
||||
<!-- 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>
|
||||
|
||||
19
www/map.js
19
www/map.js
@ -24,7 +24,7 @@
|
||||
|
||||
/* add station marker */
|
||||
function addStationMarker(id, lat, lng, station) {
|
||||
var marker = L.triangleMarker(L.latLng(lat, lng),
|
||||
var marker = L.triangleMarker(L.latLng(lat, lng),
|
||||
{
|
||||
gradient: true,
|
||||
fillColor: config['station']['markerColor'],
|
||||
@ -38,7 +38,7 @@ function addStationMarker(id, lat, lng, station) {
|
||||
marker.bindLabel('Station '+station);
|
||||
stationLayer.addLayer(marker);
|
||||
stationTable[id] = marker;
|
||||
};
|
||||
};
|
||||
|
||||
/* add event marker */
|
||||
function addEventMarker(id, lat, lng, mag, type) {
|
||||
@ -79,7 +79,7 @@ function addEventMarker(id, lat, lng, mag, type) {
|
||||
eventTable[id] = marker;
|
||||
return marker;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
/* handle to show events on map */
|
||||
function initMapLink() {
|
||||
@ -183,11 +183,12 @@ $(document).ready(function() {
|
||||
eventLayer = new L.MarkerGroup().addTo(map);
|
||||
|
||||
// load events
|
||||
ajaxLoadEvents('', '', '', 'events.xml');
|
||||
ajaxLoadEvents();
|
||||
specialEvents.map(function(id) {
|
||||
ajaxLoadEvents('', '', id)
|
||||
});
|
||||
ajaxLoadEvents(true);
|
||||
// ajaxLoadEvents(false, '', '', '', 'events.xml');
|
||||
ajaxLoadEvents(false);
|
||||
// specialEvents.map(function(id) {
|
||||
// ajaxLoadEvents(false, '', '', id)
|
||||
//});
|
||||
toggleFilteredMarkers();
|
||||
|
||||
// bind popupopen event
|
||||
@ -216,5 +217,5 @@ $(document).ready(function() {
|
||||
});
|
||||
|
||||
// print icon
|
||||
L.easyPrint().addTo(map);
|
||||
// L.easyPrint().addTo(map);
|
||||
});
|
||||
|
||||
@ -106,12 +106,12 @@ var config = {
|
||||
markerColorH: 'red',
|
||||
minMag: 1.2,
|
||||
minMagDelta: 0.1,
|
||||
typeWhitelist: ['earthquake', 'induced or triggered event', 'quarry blast', 'explosion'],
|
||||
typeWhitelist: ['earthquake', 'induced or triggered event'],
|
||||
},
|
||||
map: {
|
||||
zoomDefault: 9,
|
||||
zoomFocus: 12,
|
||||
centerDefault: [51.85, 7.0],
|
||||
centerDefault: [51.65, 7.2],
|
||||
timespan: 180,
|
||||
latlngDelta: 0.1,
|
||||
},
|
||||
@ -129,7 +129,7 @@ var config = {
|
||||
NL_WIT: 3,
|
||||
NL_WTSB: 3,
|
||||
},
|
||||
networkBlacklist: ['NL', 'X5'],
|
||||
networkBlacklist: ['NL', 'X5', '1A'],
|
||||
},
|
||||
tab: {
|
||||
active: 0,
|
||||
@ -211,4 +211,7 @@ $(document).ready(function() {
|
||||
}).bind("ajaxStop", function() {
|
||||
$("#spinner").hide();
|
||||
});
|
||||
|
||||
// hide info container
|
||||
$('div.info').hide()
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user