/** * @namespace Diese Klasse zeigt die Map mit den Veranstaltungen an. * @author Jan Kossick, jankossick@online.de * @version 2.0 * @requires http://maps.google.com/maps/api/js * @requires Geo * @requires Info * @requires Events */ var Map = { /** * Der Zugriffspunkt auf das map-Objekt von Google. */ Map : null, /** * Die Legende der Karte. */ Legende : null, /** * Enthält die auf der Karte befindlichen Marker. */ Markers : new Array(), /** * Enthält den Index des derzeitig ausgewählten Markers. * @see Map.Markers */ SelectedMarker : { EventType: null, Address: null, //für Doodles LocId: null //für Events }, /** * Der Marker der eine Position als Standort markiert. */ PositionMarker : null, /** * Speichert die Daten des aktuell ausgewählten Markers um nach einem * Refresh den Marker evtl. wieder auswählen zu können. * @param {Object} marker Der Marker der gespeichert werden soll. */ saveSelectedMarker : function(marker) { var locId = null; var address = null; if(typeof marker.EventType == 'undefined') marker.EventType = null; switch(marker.EventType) { case 'event': locId = marker.LocId; break; case 'yourbash': case 'doodle': address = marker.Address; break; } Map.SelectedMarker.EventType = marker.EventType; Map.SelectedMarker.LocId = locId; Map.SelectedMarker.Address = address; }, /** * Selektiert einen Marker. * @param {String} type Der Typ des Markers. * @param {String} id Die Id des Markers. */ selectMarker : function(marker) { //altes Symbol deselektieren var sel = Map.indexOfMarker(Map.SelectedMarker); if(sel > -1) Map.Markers[sel].setShadow(null); //neues Symbol selektieren Map.saveSelectedMarker(marker); try { //falls tatsächlich ein google.maps.Marker marker.setShadow('img/selected.png'); } catch(ex) { //sonst sel = Map.indexOfMarker(Map.SelectedMarker); if(sel > -1) Map.Markers[sel].setShadow('img/selected.png'); } }, /** * Gibt den Index eines Markers im Array Markers zurück. * @param {Object} m Der Marker, dessen Index gesucht wird. * @see Map#Markers */ indexOfMarker : function(marker) { for(var i=0; i < Map.Markers.length; i++) { if(marker.EventType != Map.Markers[i].EventType) continue; switch(marker.EventType) { case 'event': if(Map.Markers[i].LocId == marker.LocId) return i; break; case 'yourbash': case 'doodle': if(Map.Markers[i].Address == marker.Address) return i; break; } } return -1; }, /** * Bindet eine Callback-Funktion an die einzelnen Marker. Der * Callback-Funktion wird das selektierte Marker-Objekt übergeben. * @param {Function} callback Die aufzurufende Callback-Funktion. */ bind : function(callback) { for(var i=0; i < Map.Markers.length; i++) { google.maps.event.addListener(Map.Markers[i], 'click', function() { Map.selectMarker(this); callback(this); }); } }, /** * Initialisiert die Map und weist ihr einen Container zu. * @param {google.maps.LatLng} [center] Gibt den Mittelpunkt der Karte an. * Falls nicht angegeben, wird die StandardPosition des Geo-Moduls * verwendet. * @param {Object} [legende] Gibt die legende an, die am unteren linken * Bildrand eingeblendet werden kann. Falls nicht angegeben, wird * '#map_legende' verwendet. * @param {Object} [container] Der Container, in dem die Karte angezeigt * wird. Falls nicht angegeben, wird '#map_canvas' verwendet. * @see Geo#StandardPosition */ setMap : function(center, zoom, legende, container) { if(typeof container == 'undefined') container = document.getElementById('map_canvas'); if(typeof zoom == 'undefined') zoom = 15; if(typeof legende == 'undefined') legende = document.getElementById('map_legende'); if(typeof center == 'undefined') center = Geo.StandardPosition.LatLng; Map.Map = new google.maps.Map( container, { zoom: zoom, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP } ); // Das delay dient dazu, nicht bei jedem kurz hintereinander folgendem // bounds_changed-Ereignis alles neu zu laden. google.maps.event.addListener(Map.Map, 'bounds_changed', function() { try { window.clearTimeout(delayRefresh); } catch(ex) {} delayRefresh = window.setTimeout("Map.refresh()", 1000); }); Map.Legende = legende; }, /** * Löscht alle Elemente auf der Karte und lädt dann neu. */ reload : function() { if(Map.Map == null) return; //Marker löschen for(var i = 0; i < Map.Markers.length; i++) { Map.Markers[i].setMap(null); } Map.Markers = new Array(); Map.refresh(); }, /** * Lädt neue Elemente auf die Karte. */ refresh : function() { if(Map.Map == null) return; Events.getEvents(Map.Map.getBounds(), Map.setEventMarkers); Events.getYourbashs(Map.Map.getBounds(), Map.setYourbashMarkers); Events.getDoodles(Map.Map.getBounds(), Map.setDoodleMarkers); }, /** * Setzt Veranstaltungen auf die Karte. */ setEventMarkers : function(data) { if(Map.Map == null) return; if(data.length == 0) return; for(var i = 0; i < data.length; i++) { var marker = new google.maps.Marker(); //LocationID, Typ setzen, Kategorie marker.LocId = data[i].loc_id; marker.EventType = 'event'; //prüfen, ob bereits gesetzt if(Map.indexOfMarker(marker) > -1) continue; //Kategorie, Position, Title setzen marker.Category = data[i].category; marker.setPosition(new google.maps.LatLng(data[i].lat, data[i].lng)), marker.setTitle(Encoder.htmlDecode(data[i].name)); //Ort ist als Favorit markiert if(Events.isLocationFavorite(data[i].loc_id)) { marker.setIcon('img/favorite.png'); } else { //Standardsymbol switch (data[i].category) { case 'cinema': marker.setIcon('img/cinema.png'); break; case 'theatre': marker.setIcon('img/theatre.png'); break; case 'museum': marker.setIcon('img/museum.png'); break; case 'arts': marker.setIcon('img/arts.png'); break; default: marker.setIcon('img/yb.png'); } } //auf die Karte setzen marker.setMap(Map.Map); Map.Markers.push(marker); } //Events an die Marker binden Map.bind(function(marker) { if(marker.EventType == 'event') Info.event(marker.LocId); if(marker.EventType == 'yourbash') Info.yourbash(marker.Id); if(marker.EventType == 'doodle') Info.doodle(marker.Vkey); }); //ausgewählten Marker setzen Map.selectMarker(Map.SelectedMarker); }, /** * Setzt Yourbashs auf die Karte. */ setYourbashMarkers : function(data) { if(Map.Map == null) return; if(data.length == 0) return; for(i = 0; i < data.length; i++) { var marker = new google.maps.Marker(); //YourbashID speichern marker.Id = data[i].id; marker.EventType = 'yourbash'; //einfügen, falls nicht schon vorhanden if(Map.indexOfMarker(marker) > -1) continue; marker.Group = data[i].group; marker.Category = data[i].category; marker.Address = data[i].address; marker.setPosition(new google.maps.LatLng(data[i].lat, data[i].lng)); marker.setTitle(Encoder.htmlDecode(data[i].title)); switch (data[i].category) { case 'concert': marker.setIcon('img/yb-concert.png'); break; case 'exhibition': marker.setIcon('img/yb-exhibition.png'); break; case 'theatre': marker.setIcon('img/yb-theatre.png'); break; case 'sport': marker.setIcon('img/yb-sports.png'); break; case 'party': marker.setIcon('img/yb-party.png'); break; default: marker.setIcon('img/yb-unknown.png'); } marker.setMap(Map.Map); Map.Markers.push(marker); } //Events an die Marker binden Map.bind(function(marker) { if(marker.EventType == 'event') Info.event(marker.LocId); if(marker.EventType == 'yourbash') Info.yourbash(marker.Id); if(marker.EventType == 'doodle') Info.doodle(marker.Vkey); }); //ausgewählten Marker setzen Map.selectMarker(Map.SelectedMarker); }, /** * Setzt Doodles auf die Karte. */ setDoodleMarkers : function(data) { if(Map.Map == null) return; if(data.length == 0) return; for(i = 0; i < data.length; i++) { var marker = new google.maps.Marker(); //DoodleID speichern marker.Id = data[i].id; marker.EventType = 'doodle'; //einfügen, falls nicht schon vorhanden if(Map.indexOfMarker(marker) > -1) continue; marker.Address = data[i].address; marker.Vkey = data[i].vkey; marker.setPosition(new google.maps.LatLng(data[i].lat, data[i].lng)); marker.setTitle(Encoder.htmlDecode(data[i].name)); marker.setIcon('img/doodle.png'); marker.setMap(Map.Map); Map.Markers.push(marker); } //Events an die Marker binden Map.bind(function(marker) { if(marker.EventType == 'event') Info.event(marker.LocId); if(marker.EventType == 'yourbash') Info.yourbash(marker.Id); if(marker.EventType == 'doodle') Info.doodle(marker.Vkey); }); //ausgewählten Marker setzen Map.selectMarker(Map.SelectedMarker); }, /** * Setzt den Standort-Marker auf eine angegebene Position und zeigt ihn * auf der entsprechenden Karte an. * @param {google.maps.LatLng} [position] Die Position des Markers. Falls * nicht angegeben, wird versucht die vorherige Position * beizubehalten. Falls das auch nicht gelingt, wird die * StandardPosition des Geo-Moduls verwendet. * @param {title} [title] * @see Geo#StandardPosition */ setPositionMarker : function(position, title) { if(Map.Map == null) return; if(typeof title == 'undefined') title = ''; if(typeof position == 'undefined') { if(Map.PositionMarker == null) { position = Geo.StandardPosition.LatLng; title = Geo.StandardPosition.Address; } else { position = Map.PositionMarker.getPosition(); title = Map.PositionMarker.getTitle(); } } if(Map.PositionMarker == null) { var image = new google.maps.MarkerImage('', new google.maps.Size(, ), new google.maps.Point(0,0), new google.maps.Point(, ) ); Map.PositionMarker = new google.maps.Marker({ position: position, title: title, icon: image, map: Map.Map }); } else { Map.PositionMarker.setPosition(position); Map.PositionMarker.setTitle(title); } }, /** * Setzt das Zentrum der Karte auf den angegebenen Punkt. * @param {google.maps.LatLng} latlng Die Koordinaten des Punktes. * @param {String} [title] Der Titel des Markers. */ setLatLng : function(latlng, title) { if(Map.Map == null) return; if(latlng == false) { Info.message(title); return; } if(typeof title == 'undefined') title = ''; Map.Map.setCenter(latlng); Map.setPositionMarker(latlng, title); }, /** * Setzt das Zentrum der Karte auf die angegebene Adresse. * @param {String} address Die Adresse. * @see Geo#getLatLng */ setAddress : function(address) { if(address == '' || typeof address == 'undefined') return; Geo.getLatLng(address, Map.setLatLng); }, /** * Zeigt die Legende an oder blendet diese aus. * @param {Boolean} show Gibt an, ob die Legende sichtbar ist oder nicht. */ showLegende : function(show) { if(show) jQuery(Map.Legende).show(); else jQuery(Map.Legende).hide(); }, /** * Ändert das Yourbash-Icon in der Legende. * ! Funktioniert nur mit der bereitgestellten Legende. */ changeYourbashIcon : function(icon, name) { //jQuery('#map_legende .symbol_yourbash').attr('src', icon); jQuery('#map_legende .yourbash').attr('src', icon); jQuery('#map_legende #yourbash .short_title').html(name); }, /** * Ändert CSS-Eigenschaften der Karte. Vor allem für Größen- und * Positionsänderungen gedacht. * @param {Object} opt Zu ändernde CSS-Eigenschaften als Objekt, siehe * {@link http://api.jquery.com/css/#css2}. */ setCSS : function(opt) { if(Map.Map == null) return; jQuery(Map.Map.getDiv()).css(opt); } }; // Event-Listener für die Event-Symbole auf der Legende anmelden jQuery('#map_legende .symbol_event.clickable').click(function() { if(Events.toggleEventCategories(jQuery(this).attr('alt'))) jQuery(this).css('opacity', 1); else jQuery(this).css('opacity', 0.5); }); // Event-Listener für die Yourbash-Symbole auf der Legende anmelden jQuery('#map_legende .symbol_yourbash.clickable').click(function() { if(Events.toggleYourbashCategories(jQuery(this).attr('alt'))) jQuery(this).css('opacity', 1); else jQuery(this).css('opacity', 0.5); }); // Event-Listener für das allgemeine Yourbash-Symbol auf der Legende anmelden jQuery('#map_legende .yourbash.clickable').click(function() { if(jQuery(this).css('opacity') == 1) { for (var cat in Events.YourbashCategories) Events.YourbashCategories[cat] = false; Map.reload(); jQuery(this).css('opacity', 0.5); jQuery('#map_legende .symbol_yourbash.clickable').css('opacity', 0.5); } else { for (var cat in Events.YourbashCategories) Events.YourbashCategories[cat] = true; Map.reload(); jQuery(this).css('opacity', 1); jQuery('#map_legende .symbol_yourbash.clickable').css('opacity', 1); } }); // Event-Listener für Standort anmelden jQuery('#map_legende .position.clickable').click(function() { Geo.getPosition(function(latlng) { if(latlng == false) latlng = Geo.StandardPosition.LatLng; Map.setLatLng(latlng); Map.setPositionMarker(latlng); }); }); // Event-Listener für toggelOptions anmelden jQuery('#map_legende #toggle_yourbashs').click(function() { if(jQuery(this).hasClass('open')) { jQuery(this).removeClass('open'); jQuery('#map_legende .container.yourbashs').hide(); jQuery('#map_legende #toggle_yourbashs').html('►

►'); } else { jQuery(this).addClass('open'); jQuery('#map_legende .container.yourbashs').show(); jQuery('#map_legende #toggle_yourbashs').html('◄

◄'); } });