seisobs-webapp/www/map.js

/* 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") ) {
			eventTable[$(this).attr("eventid")].setStyle({opacity: 1, strokeOpacity: 1, fillOpacity: eventMarkerOpacity});
		};
	});

	// hide filtered events in map
	$("#eventstable > tbody > tr.filtered > td > a.map-link").each( function() {
		if ( $(this).attr("eventid") ) {
			eventTable[$(this).attr("eventid")].setStyle({opacity: 0, strokeOpacity: 0, fillOpacity: 0});
		};
	});
	highlightFirstEvent();
};

/* Highlight the first event of the event list on the map if no
 * other event is selected                                      */
function highlightFirstEvent() {
	var highlightStyle = {
		color: 'red',
		fillColor: '#f03',
	};
	var normalStyle = {
		fillColor: "#FFF500",
		color: "#FFF500"
	};
	$("#eventstable a.map-link").each( function() {
		if ( $(this).attr("eventid") ) {
			eventTable[$(this).attr("eventid")].setStyle(normalStyle);
			$(this).removeClass('first');
			$(this).text('Karte');
		};
	});
	$("#eventstable > tbody > tr:not(.filtered)").first().find("a.map-link").each(function() {
		if ( $(this).attr("eventid") ) {
			eventTable[$(this).attr("eventid")].setStyle(highlightStyle);
			$(this).addClass('first');
			$(this).text('Karte (rot)');
		};
	});
};

function highlightEvent( id ) {
	var highlightStyle = {
		color: 'red',
		fillColor: '#f03',
	};
	var normalStyle = {
		fillColor: "#FFF500",
		color: "#FFF500"
	};
	$("#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);
				$(this).addClass('first');
				$(this).text('Karte (rot)');
			} else {
				eventTable[$(this).attr("eventid")].setStyle(normalStyle);
				$(this).removeClass('first');
				$(this).text('Karte');
			}
		};
	});
};

/* 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, 
		{
			fillColor: "#1C771C",
			color: "#1C771C",
			weight: 1,
			opacity: 1,
			fillOpacity: stationMarkerOpacity,
			className: id+' stationMarker',
		}).addTo(stationLayer);
	stationTable[id] = marker;
}; 

/* add event marker */
function addEventMarker(id, lat, lng, mag) {
	var markerOptions = {
		fillColor: "#FFF500",
		color: "#FFF500",
		weight: 1,
		opacity: 1,
		fillOpacity: eventMarkerOpacity,
		className: id+' eventMarker',
	};
	var marker = L.circle(L.latLng(lat, lng), mag2radius(mag), markerOptions).addTo(eventLayer);
	eventTable[id] = marker;
	return marker;
}; 

/* handle to show events on map */
function initMapLink() {
	$("#eventstable > tbody > tr > td > a.map-link").on('click' , function(){
		var highlightStyle = {
			color: 'red',
			fillColor: '#f03',
			className: $(this).attr('eventid')
		}
		var normalStyle = {
			fillColor: "#FFF500",
			color: "#FFF500"
		};
		// 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');
				eventTable[$(this).attr('eventid')].setStyle(normalStyle);
				map.setView(mapCentreDefault, zoomDefault);
				highlightFirstEvent();
			// unselected -> selected
			} else {
				$(this).addClass('selected');
				$(this).text('im Fokus (rot)');
				eventTable[$(this).attr('eventid')].setStyle(highlightStyle);
				map.setView(eventTable[$(this).attr('eventid')].getLatLng(), zoomFocus);
			};
		});
		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 }).setView(mapCentreDefault, zoomDefault);
	new L.Control.Zoom({ position: 'topright' }).addTo(map);

	// add MapQuestOSM tile layer
	// L.tileLayer.grayscale('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg',
	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); */

	// read in stations
	stationLayer = L.geoJson().addTo(map);

	// read in events, process filter
	eventLayer = L.geoJson().addTo(map);
	ajaxLoadEvents();
	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")});
		var eventid = $("div.leaflet-popup h3").attr("eventid");
		if ( eventid ) {
			// highlight event in table
			highlightEvent(eventid);
			// update city in popup
			$("div.leaflet-popup h3").text(geolocationTable[eventid]);
		};
	});
});