seisobs-webapp/www/map.js

/**********************************************************************
 * map.js                                                             *
 * script for map specific functions and setup                        *
 **********************************************************************/

/*	License
	Copyright 2020 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 https://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']['defaultSize'],
			className: id+' stationMarker',
		});
	marker.bindTooltip('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 'nuclear explosion':
				markerOptions['numberOfSides'] = 4;
				markerOptions['radius'] = 2.0*markerOptions['radius'];
				markerOptions['innerRadius'] = 0.3*markerOptions['radius'];
				marker = L.regularPolygonMarker(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':
			case 'controlled explosion':
				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('im Fokus (rot)');
				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
	
	// create baselayer
	switch ( config['map']['baselayer'] ) {
	case 'esrigray': // add ESRI Grayscale World Map (neither city nor road names)
		map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
		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
		map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
		L.tileLayer('https://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 'opentopo': // add OpenTopoMap tile layer https://opentopomap.org/
		map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
		L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
		{
			attribution: 'Kartendaten: &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, SRTM | Kartendarstellung: &copy; <a href="http://opentopomap.org/">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>)'
		}).addTo(map);
		break;	
	case 'osmde': // add OpenStreetMap.DE tile layer, default
		null;
	default:
		map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
		L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',
		{
			attribution: '&copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
		}).addTo(map);
	};

	// add controls
	new L.Control.Zoom({ position: 'topright' }).addTo(map);
	new L.control.scale({position: 'bottomright', imperial: false}).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);
});