kasper/seisobs-webapp
1
0
Fork 0
Code Issues 7 Pull Requests Releases 1 Wiki Activity

Added plugin "Data Visualisation Framework" for nicer markers.

Browse Source
This commit is contained in:
Kasper D. Fischer 2014-05-14 15:33:43 +00:00
parent 49b9e492ac
commit e50c816f05
Notes: subgit 2018-03-07 17:58:54 +01:00 
r644 www/trunk
7 changed files with 88 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitattributes vendored
View File

@ -7,6 +7,7 @@ www/external/jquery.tablesorter.pager.css -text
www/external/jquery.tablesorter.pager.min.js -text
www/external/jquery.tablesorter.widgets.min.js -text
www/external/last.png -text
www/external/leaflet-dvf.markers.min.js -text
www/external/leaflet.css -text
www/external/leaflet.js -text
www/external/next.png -text

13
www/events.js
View File

@ -144,6 +144,7 @@ function ajaxLoadEvents(stime, etime) {
$("#eventstable").trigger("updateCache");
$("#eventstable").trigger("sorton", [sort]);
initMapLink();
eventLayer.bringToBack();
},
error: function( jqxhr, textStatus, error ) {
var err = textStatus + ", " + error;
@ -251,10 +252,12 @@ function highlightFirstEvent() {
var highlightStyle = {
color: config['event']['markerColorH'],
fillColor: config['event']['markerColorH'],
fillOpacity: 1,
};
var normalStyle = {
fillColor: config['event']['markerColor'],
color: config['event']['markerColor']
color: config['event']['markerColor'],
fillOpacity: config['event']['markerOpacity'],
};
$("#eventstable a.map-link").each( function() {
if ( $(this).attr("eventid") ) {
@ -263,9 +266,10 @@ function highlightFirstEvent() {
$(this).text('Karte');
};
});
$("#eventstable > tbody > tr:not(.filtered)").first().find("a.map-link").each(function() {
$("#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('Karte (rot)');
};
@ -276,15 +280,18 @@ 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']
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('Karte (rot)');
} else {

7
www/external/leaflet-dvf.markers.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

10
www/index.html.de
View File

@ -10,8 +10,8 @@
<link rel="stylesheet" href="main.css" />
<!-- jQuery & jQueryUI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.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" />
<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>
@ -38,8 +38,10 @@
<!-- Leaflet -->
<link rel="stylesheet" href="external/leaflet.css" />
<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/TileLayer.Grayscale.js"></script>
<script type="text/javascript" src="map.js"></script>
<link rel="stylesheet" href="external/css/dvf.css" type="text/css" media="screen" />
<script type="text/javascript" src="external/leaflet-dvf.markers.min.js"></script>
<!-- Stations -->
<script type="text/javascript" src="stations.js"></script>
@ -90,7 +92,7 @@
<tbody>
</tbody>
</table>
<p>Nominatim Search Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img alt="Mapquest Logo" src="http://developer.mapquest.com/content/osm/mq_logo.png" /></p>
<p>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">

65
www/map.js
View File

@ -23,34 +23,39 @@
*/
/* add station marker */
function addStationMarker(id, lat, lng) {
var a = 0.0025,
b = Math.sqrt(3)*a,
a = a * Math.cos(lat*Math.PI/180);
var corners = [L.latLng(lat+2*a, lng), L.latLng(lat-a, lng+b), L.latLng(lat-a, lng-b)];
var marker = L.polygon(corners,
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,
fillOpacity: config['station']['markerOpacity'],
radius: config['station']['markerSize'][id] || config['station']['markerSize']['default'],
className: id+' stationMarker',
}).addTo(stationLayer);
title: station,
alt: station,
});
stationLayer.addLayer(marker);
stationTable[id] = marker;
};
/* add event marker */
function addEventMarker(id, lat, lng, mag) {
var markerOptions = {
gradient: true,
dropShadow: false,
fillColor: config['event']['markerColor'],
color: config['event']['markerColor'],
weight: 1,
opacity: 1,
fillOpacity: config['event']['markerOpacity'],
color: config['event']['markerColor'],
weight: 0,
opacity: 1,
className: id+' eventMarker',
radius: mag2radius(mag)
};
var marker = L.circle(L.latLng(lat, lng), mag2radius(mag), markerOptions).addTo(eventLayer);
var marker = L.circleMarker(L.latLng(lat, lng), markerOptions);
eventLayer.addLayer(marker);
eventTable[id] = marker;
return marker;
};
@ -61,10 +66,12 @@ function initMapLink() {
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
@ -108,25 +115,39 @@ $(document).ready(function() {
new L.Control.Zoom({ position: 'topright' }).addTo(map);
new L.control.scale({position: 'bottomright', imperial: false}).addTo(map);
// add MapQuestOSM tile layer
// L.tileLayer.grayscale('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg',
// create baselayer
switch ( config['map']['baselayer'] ) {
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 '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);
};
// 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); */
// create station and event layer
stationLayer = L.geoJson().addTo(map);
eventLayer = L.geoJson().addTo(map);
// stationLayer = L.geoJson().addTo(map);
stationLayer = new L.MarkerGroup().addTo(map);
eventLayer = new L.MarkerGroup().addTo(map);
// load events
ajaxLoadEvents();

19
www/misc.js
View File

@ -25,7 +25,7 @@
/* calculate marker radius from magnitude
* both formulas have equal radii at mag=1.2 */
function mag2radius(mag) {
return 400*mag; // radius proportional to magagnitude
return 3*mag; // radius proportional to magagnitude
// return 8.104*Math.pow(30,mag) // radius proportional to energy
};
@ -90,7 +90,7 @@ var eventDetails = {};
var stationTable = {};
var config = {
ajax: {
timeout: 150000, // 15 seconds
timeout: 10000, // 10 seconds
eventURL: 'https://ariadne.geophysik.ruhr-uni-bochum.de/fdsnws/event/1/query',
mseedURL: 'https://ariadne.geophysik.ruhr-uni-bochum.de/fdsnws/dataselect/1/query',
stationURL: 'https://ariadne.geophysik.ruhr-uni-bochum.de/fdsnws/station/1/query',
@ -99,7 +99,7 @@ var config = {
},
event: {
evaluationBlacklist: ['automatic', 'preliminary', 'rejected'],
markerOpacity: 0.3,
markerOpacity: 0.4,
markerColor: 'blue',
markerColorH: 'red',
minMag: 1.2,
@ -115,7 +115,15 @@ var config = {
},
station: {
markerColor: 'darkgreen',
markerOpacity: 0.5,
markerOpacity: 1,
markerSize: {
default: 8,
GE_IBBN: 10,
GR_BUG: 10,
GR_KAST: 10,
NL_OPLO: 3,
NL_WTSB: 3,
},
},
};
@ -125,6 +133,9 @@ var config = {
$(document).ready(function() {
// parse query string
var parameters = parseQueryString();
if ( parameters['baselayer'] ) {
config['map']['baselayer'] = parameters['baselayer'][0];
};
if ( Number(parameters['minmag']) ) {
config['event']['minMag'] = Number(parameters['minmag']);
};

6
www/stations.js
View File

@ -57,12 +57,13 @@ function loadStations(stime, etime) {
var station = $(this).attr('code'),
lat = $(this).find('Latitude').text(),
lng = $(this).find('Longitude').text(),
stationID = network+'.'+station;
stationID = network+'_'+station,
stationText = network+'.'+station;
if ( !stationTable[stationID] ) { // && N >= lat && S <= lat && W<= lng && E >= lng
var row = sprintf('<tr><td>%s</td><td>%s</td><td class="ar">%7.4f</td><td class="ar">%7.4f</td></tr>' , network, station, Number(lat), Number(lng));
var r = $(row);
$('#stationstable tbody').append(r);
addStationMarker(stationID, Number(lat), Number(lng));
addStationMarker(stationID, Number(lat), Number(lng), stationText.toUpperCase());
};
});
});
@ -75,6 +76,7 @@ function loadStations(stime, etime) {
$("#stationstable").trigger("sorton", [sort]);
$("#stationstable > tbody > tr:even").addClass("odd");
$("#stationstable > tbody > tr:odd").addClass("even");
stationLayer.bringToFront();
}
});
};