/********************************************************************** * map.js * * script for map specific functions and setup * **********************************************************************/ /* License Copyright 2020 Kasper D. Fischer 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('at focus (red)'); 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 map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']); // create baselayer switch ( config['map']['baselayer'] ) { case 'esrigray': // add ESRI Grayscale World Map (neither city nor road names) L.tileLayer.provider('Esri.WorldGrayCanvas').addTo(map); break; case 'aerial': // add ESRI WordImagery tile layer L.tileLayer.provider('Esri.WorldImagery').addTo(map); break; case 'opentopo': // add OpenTopoMap tile layer L.tileLayer.provider('OpenTopoMap').addTo(map); break; case 'osmde': // add OpenStreetMap.DE tile layer, default L.tileLayer.provider('OpenStreetMap.DE').addTo(map); break; case 'mapnik': // add OpenStreetMap.Mapni tile layer L.tileLayer.provider('OpenStreetMap.Mapnik').addTo(map); break; default: // use OpenStreetMap.DE as default L.tileLayer.provider(config['map']['baselayer']).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.control.browserPrint({ title: 'print map', position: 'topright', }).addTo(map); });