seisobs-webapp/www/map.js

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

/*	License
	Copyright 2014 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 http://www.gnu.org/licenses/.

	$Id$
*/

/* 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: config['station']['markerOpacity'],
			className: id+' stationMarker',
		}).addTo(stationLayer);
	stationTable[id] = marker;
}; 

/* add event marker */
function addEventMarker(id, lat, lng, mag) {
	var markerOptions = {
		fillColor: config['event']['markerColor'],
		color: config['event']['markerColor'],
		weight: 1,
		opacity: 1,
		fillOpacity: config['event']['markerOpacity'],
		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: config['event']['markerColorH'],
			fillColor: config['event']['markerColorH'],
			className: $(this).attr('eventid')
		}
		var normalStyle = {
			fillColor: config['event']['markerColor'],
			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');
				eventTable[$(this).attr('eventid')].setStyle(normalStyle);
				map.setView(config['map']['centerDefault'], config['map']['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(), config['map']['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, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
	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',
	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);

	// load events
	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")});
		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();
			};
		});
	});
});