/********************************************************************** * map.js * * script for map specific functions and setup * **********************************************************************/ /* License Copyright 2014 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 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: config['station']['markerColor'], color: config['station']['markerColor'], 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 © OpenStreetMap contributors, CC-BY-SA | Tiles Courtesy of MapQuest ', }).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 © Esri — 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(); }; }); }); });