Added plugin "Data Visualisation Framework" for nicer markers.

r644 www/trunk

.gitattributes

@@ -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

www/events.js

@@ -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 {

www/index.html.de

@@ -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="//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/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,9 +38,11 @@
 	<!-- 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>
 </head>
@@ -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">

www/map.js

@@ -23,34 +23,39 @@
 */
 
 /* add station marker */
-function addStationMarker(id, lat, lng) {
+function addStationMarker(id, lat, lng, station) {
-	var a = 0.0025,
+	var marker = L.triangleMarker(L.latLng(lat, lng), 
-		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, 
 		{
+			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
+	// create baselayer
-	// L.tileLayer.grayscale('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg',
+	switch ( config['map']['baselayer'] ) {
-	L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg',
+	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 © Esri — 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;
-	// add ESRI Grayscale World Map (neither city nor road names)
+	case 'mapquest': // add MapQuestOSM tile layer
-	/* L.tileLayer('//server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
+		null;
+	default:
+		L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg',
 		{
-			attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
+			subdomains: '1234',
-			maxZoom: 16
+			detectRetina: true,
-		}).addTo(map); */
+			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 = L.geoJson().addTo(map);
-	eventLayer = L.geoJson().addTo(map);
+	stationLayer = new L.MarkerGroup().addTo(map);
+	eventLayer = new L.MarkerGroup().addTo(map);
 
 	// load events
 	ajaxLoadEvents();

www/misc.js

@@ -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']);
 	};

www/stations.js

@@ -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();
 		}
 	});
 };