// Metroseeq namespace var mesq = mesq || {}; // temporary object to enable method outline in JSEclipse mesq._Map = { // objects container: null, dealTypeSelection: null, markers: null, gmap: null, // GMap object list: null, // mesq.List gmapZoomControl: null, gmapTypeControl: null, geocoder: null, // GClientCoder object // state markers: null, // holds GMarker objects selectedItem: null, // set when infowindow is shown in either marker or list link // config minZoom: 14, origCenterPoint: null, // point determined by "where" query and geolocation searchCenterPoint: null, // dynamic point (equals origCenterPoint when "Unlock center point" is not enabled) // overlay overlay_black: null, overlay_loader: null, overlayVisible: false, initialize: function(container) { this.markers = []; this.container = $(container); // initialise geocoder this.geocoder = new GClientGeocoder(); // initialize maps panel this.gmap = new GMap2(this.container); this.gmapZoomControl = new GLargeMapControl(); this.gmap.addControl(this.gmapZoomControl); this.gmapTypeControl = new GMapTypeControl(); this.gmap.addControl(this.gmapTypeControl); // temporarily disabled until "freezing" map is resolved (enableDrag not called for some fricking weird reason) this.gmap.disableDragging(); // re-enabled in last updateResults() call this.gmap.setCenter(new GLatLng(0,0)); this.createOverlay(); // add red center icon for search center var centericon = new GIcon(); centericon.image = MINIMARKER_IMG; centericon.iconSize = new GSize(16, 16); centericon.iconAnchor = new GPoint(1, 1); centericon.infoWindowAnchor = new GPoint(5, 1); this.centerMarker = new GMarker(new GLatLng(0,0), centericon); // disable auto-closing of extinfowindows this.gmap.ClickListener_ = GEvent.addListener(this.gmap, 'click', function(e) {return true;}); }, createOverlay: function(){ this.overlay_black = new GScreenOverlay( 'mesq/images/map_overlay.png', new GScreenPoint(0, 0, 'pixels', 'fraction'), // screenXY new GScreenPoint(0, 0), // overlayXY new GScreenSize(1, 1, 'fraction', 'fraction') // size on screen ); var x=(this.gmap.getSize().width/2)-22; var y=(this.gmap.getSize().height/2)-6; this.gmap.addOverlay(this.overlay_black); /*this.overlay_loader = new GScreenOverlay( 'mesq/images/map_loader.gif', new GScreenPoint(x, y, 'pixels', 'fraction'), // screenXY new GScreenPoint(0, 0), // overlayXY new GScreenSize(43, 11, 'pixels', 'pixels') // size on screen ); this.gmap.addOverlay(this.overlay_loader);*/ if(!document.getElementById('LoaderIcon')){ var loader_icon=document.createElement('div'); loader_icon.className='loader_icon'; loader_icon.id='LoaderIcon'; map=document.getElementById('PlaceMap'); if(!map) map=document.getElementById('DealMap'); if(!map) map=document.getElementById('MiniMap'); loader_icon.style.display='block'; loader_icon.style.top='-' + (map.offsetHeight/2) -6 + 'px'; loader_icon.style.left=(map.offsetWidth/2) -22 + 'px'; map.appendChild(loader_icon); this.overlay_loader=loader_icon; } this.hideOverlay(); }, showOverlay: function(){ // add an overlay if(this.gmap.overlayVisible!=true){ if(this.overlay_black!=null){ this.overlay_black.show(); this.overlay_loader.style.display='block'; this.gmap.overlayVisible=true; } } }, hideOverlay: function(){ //this.gmap.removeOverlay(this.overlay); this.overlay_black.hide(); this.overlay_loader.style.display='none'; this.gmap.overlayVisible=false; }, markCenter: function(centerPoint) { // only mark center if it wasn't previously locked //if($F('MapLockCenter') && !centerPoint) return false; this.searchCenterPoint = centerPoint ? centerPoint : this.getCenterPoint(); this.centerMarker.setPoint(this.searchCenterPoint); // only add marker if no clustering is applied // @todo implement marker excludes for cluster if(!this.clusterMarker) { this.gmap.addOverlay(this.centerMarker); } }, /** * Always set center marker to absolute center of the map, * rather than sticking to the original search location */ lockCenter: function(noRefresh) { // reset to original this.searchCenterPoint = this.gmap.getCenter(); this.origCenterPoint = this.gmap.getCenter(); $('MapLockCenterContainer').addClassName('enabled'); $('MapLockCenterContainer').down('label').update(this.strUnlockCenter); $('MapLockCenter').checked = true; if(!noRefresh) this.refresh(); }, /** * Stick center marker to original search location * (e.g. a city center point), rather than following around * (default setting). */ unlockCenter: function() { // if setting is unticked, refresh current map-area this.searchCenterPoint = this.gmap.getCenter(); $('MapLockCenterContainer').removeClassName('enabled'); $('MapLockCenterContainer').down('label').update(this.strLockCenter); $('MapLockCenter').checked = false; this.markCenter(this.searchCenterPoint); this.refresh(); }, getCenterPoint: function() { return this.searchCenterPoint; return ($F('MapLockCenter')) ? this.origCenterPoint : this.searchCenterPoint; }, refreshMarkers: function() { for(var i=0; i 0)) { var markerdeals = new GIcon(); markerdeals.image = MARKER_DEALS; markerdeals.iconSize = new GSize(20, 32); markerdeals.shadow = MARKER_SHADOW; markerdeals.shadowSize = new GSize(31, 32); markerdeals.iconAnchor = new GPoint(6, 20); markerdeals.infoWindowAnchor = new GPoint(5, 1); var marker = new GMarker(latLng, markerdeals); } else { var markernormal = new GIcon(); markernormal.image = MARKER_NORMAL; markernormal.iconSize = new GSize(20, 32); markernormal.shadow = MARKER_SHADOW; markernormal.shadowSize = new GSize(31, 32); markernormal.iconAnchor = new GPoint(6, 5); markernormal.infoWindowAnchor = new GPoint(5, 1); var marker = new GMarker(latLng, markernormal); } return marker; }, zoomByBounds: function(bounds) { var boundsZoom = this.gmap.getBoundsZoomLevel(bounds); this.gmap.setZoom(boundsZoom); this.gmap.setCenter(bounds.getCenter()); }, onDrag: function(e) { return true; }, setList: function(list) { this.list = list; }, clear: function() { this.searchCenterPoint = null; this.markerList = new Array(); this.gmap.clearOverlays(); } }; mesq.Map = Class.create(mesq._Map); /** * Displays on the restaurant detail page in the righthand navigation. * Works on a single place/marker, so doesn't interact * with a mesq.List. */ mesq._MiniMap = { minZoom: 15, initialize: function($super, container, placeData) { $super(container); this.gmap.setCenter(new GLatLng(placeData.lat, placeData.lng)); this.gmap.setZoom(this.minZoom); this.gmap.removeControl(this.gmapZoomControl); this.gmap.removeControl(this.gmapTypeControl); this.gmapZoomControl = new GSmallMapControl(); this.gmap.addControl(this.gmapZoomControl); this.addMarkerFromData(placeData); this.gmap.enableDragging(); } } mesq.MiniMap = Class.create(mesq.Map, mesq._MiniMap); /** * This map displays distinct places, * similiar to mesq.PlaceMap, but doesn't have searching * capabilities - it will display static */ mesq._DealMap = { dealTypeSelection: null, dealPlacesJsonData: null, clusterMarker: null, // ClusterMarker object minZoom: 13, // covering a large area, independent of marker distribution# baseAccuracyZoom: 7, // zooming based on google geocoder accuracy (added on top of this base value) initialize: function($super, container) { $super(container); if($('ResultsArea')) $('ResultsArea').hide(); this.dealPlacesJsonData = $("DealPlacesJsonData").innerHTML.evalJSON(); if(window.app.debugprofile) console.time('mesq.Map.initialize(): Parse Markers'); // @todo Move this functionality into a DealTypeSelection class var tmpMarkers = []; for(partnerID in this.dealPlacesJsonData) { for(dealCount=0; dealCount getGeocode -> getGeocode_onComplete -> localSearch_onComplete */ search: function() { this.searchParams = window.location.href.toQueryParams(); if($F($('UserSearch').down('input[name=where]'))) this.searchParams.where = $F($('UserSearch').down('input[name=where]')).stripTags(); if(!this.searchParams.where) { $('where').addClassName('error'); return false; } this.getGeocode(this.searchParams.where); }, getGeocode: function(placename) { this.geocoder.getLocations(placename, this.getGeocode_onComplete.bind(this)); }, getGeocode_onComplete: function(response) { if(!response.Placemark || response.Status.code != 200) { mesq.App.errorMessage("I couldn't recognize the location you entered: '" + this.searchParams.where.urldecode().stripTags() + "'.\nPlease try again."); return false; } var placemark = response.Placemark[0]; var point = new GLatLng(placemark.Point.coordinates[1], placemark.Point.coordinates[0]); var zoom = this.baseAccuracyZoom + placemark.AddressDetails.Accuracy; this.searchCenterPoint = point; this.origCenterPoint = point; this.gmap.setCenter(this.searchCenterPoint, zoom); this.markCenter(this.searchCenterPoint); }, zoomByBounds: function(bounds) { var boundsZoom = this.gmap.getBoundsZoomLevel(bounds); this.gmap.setZoom((boundsZoom <= this.minZoom) ? boundsZoom : this.minZoom); this.gmap.setCenter(bounds.getCenter()); }, /** * @todo Needs refactoring into a Place class thats not directly related * to list behaviour. */ createListItemForMarker: function(marker) { if(typeof(marker.listItem) != 'undefined') { // listitem caching marker.listItem.openInfoWindow(); } else { // scaffold new item for quick response in showing infowindow // @todo closure? marker.listItem = this.list.addItem(marker.data, false, marker); // fires off ajax request to get full data and templates (will override the previously set scaffold data) marker.listItem.openInfoWindow(); } this.selectedItem = marker.listItem; }, setSearching: function(isSearching) { }, searchEnabled: function() { return true; //return this.container.hasClassName('enabled'); } }; mesq.DealMap = Class.create(mesq.Map, mesq._DealMap); /** * Wrapper for GMap2 and result-list. * Requests and manages server-data about * restaurants and deals and dynamically produces * the results. */ mesq._PlaceMap = { // configuration numExtendedSearches: 4, numExtendedSearchesShowEverything: 10, maxDistanceKm: 50, // max distance of the search results from center queryAddition: "Restaurants", queryDefaultWhat: 'Restaurants', extendedSearchDistMultiplier: 1.3, printMarkerLabels: $R('A','Z'), printMarkerImgTemplate: 'http://www.google.com/mapfiles/marker#{number}.png', numberedMarkerImgTemplate: 'themes/mesq/images/markers/marker#{number}.png', // state searchParams: null, firstLocalSearch: null, isFirstSearch: true, // no search has been conducted to google local searchMode: 'default', // influences the amount of results delivered (Options: 'default'|'showeverything') hasPinned: null, // determines if pinned items from cookie are already added (to prevent continous re-adding) isZoomBlocked: false, // determines if the zoom block is in place, which keeps markers from showing up on too high zoom levels _runningSearches: $A([]), // stores all pending requests to google API and ajax requests to metroseeq server (used to determine isSearching()) // strings strNoResultsFound: 'No results found. Please try to refine your search terms.', strLoadingFailed: 'Failed to load more information.', strLockCenter: 'Lock Current Location', strUnlockCenter: 'Unlock Current Location', // ressources zoomWarningImgURL: 'themes/mesq/images/zoomWarningOverlay.png', // deprecated/unused googleBaseResultCount: 8, maxResults: 40, // Allows for multiple searches autoZoomDecrease: 0, // decrease zoom on first result to approximate area of subsequent searches initialize: function($super, container) { $super(container); // don't allow search-features for static lists without search parameters if(!this.searchEnabled()) { this.setSearching(false); $('ResultsStopSearch').disable(); $('ResultsStopSearchContainer').addClassName('disabled'); //$('MapLockCenter').disable(); //$('MapLockCenterContainer').addClassName('disabled'); $('ResultsStopSearchContainer').removeClassName('enabled'); } GEvent.addListener(this.gmap, "dragend", this.onDrag.bind(this)); // initiate helpers if(this.searchEnabled() && $('ResultsStopSearch')) { if(window.app.getPref('ResultsStopSearch')) this.enableStopProgressiveSearch(); Event.observe($('ResultsStopSearch'), 'click', function(e) { window.app.setPref('ResultsStopSearch', ($F(Event.element(e)))); // if setting is unticket, refresh current map-area ($F(Event.element(e)) && $F(Event.element(e)) != 'null') ? this.enableStopProgressiveSearch() : this.disableStopProgressiveSearch(); }.bind(this)); } /** * If checkbox is ticked, set the computed center to current map center * (and refresh automatically on each drag). Otherwise set back to original * center point (but stay within the same map space). */ if(this.searchEnabled() && $('MapLockCenter')) { // temporarily disabled (don't react to legacy cookie settings) //if(window.app.getPref('MapLockCenter')) this.lockCenter(true); Event.observe($('MapLockCenter'), 'change', function(e) { //if(this.isSearching) return false; window.app.setPref('MapLockCenter', ($F(Event.element(e)))); ($F(Event.element(e)) && $F(Event.element(e)) != 'null') ? this.lockCenter() : this.unlockCenter(); }.bind(this)); } }, /** * Execution chain: search -> getGeocode -> getGeocode_onComplete -> localSearch_onComplete */ search: function() { this.searchParams = window.location.href.toQueryParams(); if($F($('UserSearch').down('input[name=where]'))) this.searchParams.where = $F($('UserSearch').down('input[name=where]')).stripTags(); if($F($('UserSearch').down('input[name=what]'))) this.searchParams.what = $F($('UserSearch').down('input[name=what]')).stripTags(); if(!this.searchParams.where) { $('where').addClassName('error'); return false; } // if no what was defined, switch to search for default keywords // and trigger more google queries to avoid hidden results // (we're naturally dealing with a larger result-set) if(!this.searchParams.what) { this.searchParams.what = this.queryDefaultWhat; this.searchMode = 'showeverything'; } else { this.searchMode = 'default'; } this.getGeocode(this.searchParams.where); // this.list.showMainLoader(); }, setSearching: function(isSearching) { if(isSearching) { $('ResultsLoaded').hide(); $('ResultsLoadingIndicator').show(); this.showOverlay(); } else { $('ResultsLoadingIndicator').hide(); $('ResultsLoaded').show(); this.hideOverlay(); } }, isSearching: function() { return (this._runningSearches.length > 0); }, getGeocode: function(placename) { this.geocoder.getLatLng(placename, this.getGeocode_onComplete.bind(this)); }, getGeocode_onComplete: function(point) { if(!point) { mesq.App.errorMessage("I couldn't recognize the location you entered: '" + this.searchParams.where.urldecode().stripTags() + "'.\nPlease try again."); return false; } this.searchCenterPoint = point; this.origCenterPoint = point; this.gmap.setCenter(this.searchCenterPoint, this.minZoom); this.markCenter(this.searchCenterPoint); var localSearch = this.createLocalSearchObject(this.searchCenterPoint); localSearch.setSearchCompleteCallback(this, this.firstLocalSearch_onComplete.bind(this,localSearch)); var searchString = this.getWhereQuery(); //console.log('getGeocode_onComplete: searching for: "%s"', searchString); this.setSearching(true); this._runningSearches.push(localSearch); localSearch.execute(searchString); // need to remember first search as a starting point for subsequent searches in the area if(this.isFirstSearch) this.firstLocalSearch = localSearch; // augument rss feed if($('DealRSSLink')) { // update with real location data $('DealRSSLink').href = $('DealRSSLink').href.interpolate({'lat': point.lat(), 'lng': point.lng()}); } //set cookie to save location search var days = 365; //number of days until expires var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); document.cookie = 'last_loc='+this.searchParams.where.replace(/;/,'')+'; expires='+date.toGMTString()+'; path=/'; }, /** * Only triggered after first google query comes back, * which in turn triggers a number of followup queries * (with a different callback). */ firstLocalSearch_onComplete: function(searcher) { this._runningSearches = this._runningSearches.without(searcher); // if we have local search results, put them on the map if(!searcher.results || !searcher.results.length > 0) { if(this.isFirstSearch) { this.list.setMessage(this.strNoResultsFound,'error'); this.gmap.enableDragging(); this.setSearching(false); } return false; } var bounds = new GLatLngBounds(); for(var i=0; i 0) { if(this.isFirstSearch) { this.list.setMessage(this.strNoResultsFound,'error'); this.gmap.enableDragging(); this.setSearching(false); } return false; } if(!this.isSearching()) { this.container.fire('Map:resultsloaded'); } var request = new Ajax.Request( 'place/batchAugumentOrCreate', { method:'post', parameters: { jsonResults: searcher.results.toJSON(), lat: this.searchCenterPoint.lat(), lng: this.searchCenterPoint.lng() }, onSuccess: this.updateResults.bind(this), onFailure: function(e) {this.list.setMessage(this.strLoadingFailed,'error');}.bind(this) } ); this._runningSearches.push(request.transport); searcher = null; }, /** * Work around limitation of 8 results on each API call by * looking at the first result boundaries and triggering * more searches (based on this.maxResults). * * Search area looks like this ('c' is the bounds center, numbers are different increments): * [6] * [1] [2] * [5] [c] [7] * [4] [3] * [8] * We've got two different types of loop ("rectangle-corners" and "diamond-corners") * than can theoretically be followed infinetly, but with decreasing population * in the spaces between the corners as their distance for each other gets larger). */ extendedSearches: function(bounds) { // already did one search, so substract one var southWestPoint = bounds.getSouthWest(); var northEastPoint = bounds.getNorthEast(); var southEastPoint = new GLatLng(northEastPoint.lat(),southWestPoint.lng()); var northWestPoint = new GLatLng(southWestPoint.lat(),northEastPoint.lng()); var boundsCenter = bounds.getCenter(); var times = (this.searchMode == 'showeverything') ? this.numExtendedSearchesShowEverything : this.numExtendedSearches; for(var i=1; i distLngFromCenter) distLngFromCenter = distLatFromCenter; if(distLngFromCenter > distLatFromCenter) distLatFromCenter = distLngFromCenter; // TODO replace with a bit smarter sine/cosine computation if(loopType == 'diamond') { // choose four corners of a diamond switch(loopCorner) { case 1: // or 5,13,... var areaPoint = new GLatLng( northWestPoint.lat() - distLatFromCenter, northWestPoint.lng() - distLngFromCenter ); break; case 2: // or 6,14,... var areaPoint = new GLatLng( northEastPoint.lat() + distLatFromCenter, northEastPoint.lng() - distLngFromCenter ); break; case 3: var areaPoint = new GLatLng( southEastPoint.lat() + distLatFromCenter, southEastPoint.lng() + distLngFromCenter ); break; case 4: var areaPoint = new GLatLng( southWestPoint.lat() - distLatFromCenter, southWestPoint.lng() + distLngFromCenter ); break; } } else if(loopType == 'rect') { // choose four corners of a rect switch(loopCorner) { case 1: // or 1,9,... var areaPoint = new GLatLng( northWestPoint.lat() - distLatFromCenter, northWestPoint.lng() - distLngFromCenter ); break; case 2: // or 2,10, ... var areaPoint = new GLatLng( northEastPoint.lat() + distLatFromCenter, northEastPoint.lng() - distLngFromCenter ); break; case 3: var areaPoint = new GLatLng( southEastPoint.lat() + distLatFromCenter, southEastPoint.lng() + distLngFromCenter ); break; case 4: var areaPoint = new GLatLng( southWestPoint.lat() - distLatFromCenter, southWestPoint.lng() + distLngFromCenter ); break; } } var localSearch = this.createLocalSearchObject(areaPoint); localSearch.setSearchCompleteCallback(this, this.localSearch_onComplete.bind(this,localSearch)); // add center markers if(window.app.debug) { var icon = new GIcon(); icon.image = window.app.baseURL() + this.numberedMarkerImgTemplate.interpolate({'number':i}); icon.iconSize = new GSize(20, 32); icon.iconAnchor = new GPoint(6, 5); icon.clickable = false; var marker = new GMarker(areaPoint, icon); this.gmap.addOverlay(marker, icon); } // performance: delay calls for a bit as they cause serious computing in their callbacks // (mainly DOM manipulation and list sorting) setTimeout(function(_localSearch) { this.setSearching(true); this._runningSearches.push(_localSearch); _localSearch.execute(this.getWhereQuery()); }.bind(this, localSearch), i*500); } // add center markers if(window.app.debug) { $A([boundsCenter, northWestPoint, southWestPoint, northEastPoint, southEastPoint]).each(function(p) { var marker = new GMarker(p); this.gmap.addOverlay(marker); }.bind(this)); } }, refresh: function() { if(window.app.debug) console.debug("PlaceMap.refresh() called"); //then move center point of search to center point on map and re-run the search this.searchCenterPoint = this.gmap.getCenter(); // has to be searchCenterPoint, unrelated to UnlockCenter flag // TODO resolve closure var localSearch = this.createLocalSearchObject(this.searchCenterPoint); localSearch.setSearchCompleteCallback(this, this.localSearch_onComplete.bind(this,localSearch)); this.setSearching(true); this._runningSearches.push(localSearch); localSearch.execute(this.getWhereQuery()); }, updateResults:function(response) { this._runningSearches = this._runningSearches.without(response.transport); var filteredResults = response.responseText.evalJSON(); // hide loaders // this.list.hideMainLoader(); if(window.app.debugprofile) console.time('mesq.PlaceMap.updateResults(): Add ListItems'); // TODO Merge filtered and original results for(var i=0; i