From 64032b5e9c48f1d3f61f3f30a3555940674e0a2e Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Mon, 31 Oct 2011 11:29:59 +0000 Subject: [PATCH] add proper tooltips to map --- source/Ox.UI/css/Ox.UI.css | 3 ++- source/Ox.UI/js/Core/Ox.Element.js | 8 +++--- source/Ox.UI/js/Map/Ox.ListMap.js | 6 ++--- source/Ox.UI/js/Map/Ox.Map.js | 19 +++++++++++--- source/Ox.UI/js/Map/Ox.MapMarker.js | 29 ++++++++++++++++++++- source/Ox.UI/js/Map/Ox.MapPlace.js | 1 - source/Ox.UI/themes/classic/css/classic.css | 4 +-- source/Ox.UI/themes/modern/css/modern.css | 4 +-- 8 files changed, 57 insertions(+), 17 deletions(-) diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index a4aaf107..3b2f6de2 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -1322,7 +1322,8 @@ Maps top: 4px; width: 12px; height: 12px; - border: 2px solid rgb(192, 192, 192); + border-width: 2px; + border-style: solid; border-radius: 8px; } .OxMap .OxPlaceControl.OxPlaceFlag > img { diff --git a/source/Ox.UI/js/Core/Ox.Element.js b/source/Ox.UI/js/Core/Ox.Element.js index 6d4fb56e..261e3c7e 100644 --- a/source/Ox.UI/js/Core/Ox.Element.js +++ b/source/Ox.UI/js/Core/Ox.Element.js @@ -258,11 +258,13 @@ Ox.Element = function(options, self) { }).show(e); } - self.setOption = function() { - // self.setOptions(key, value) + self.setOption = function(key, value) { + // self.setOption(key, value) // is called when an option changes // (to be implemented by widget) - // FIXME: can't set tooltip options this way + if (key == 'tooltip') { + that.$tooltip && that.$tooltip.options({title: value}); + } }; that._self = self; // fixme: remove diff --git a/source/Ox.UI/js/Map/Ox.ListMap.js b/source/Ox.UI/js/Map/Ox.ListMap.js index df3f5f50..df922a12 100644 --- a/source/Ox.UI/js/Map/Ox.ListMap.js +++ b/source/Ox.UI/js/Map/Ox.ListMap.js @@ -804,8 +804,8 @@ Ox.ListMap = function(options, self) { }); self.$placeName.options({title: place.geoname || ''}); self.$placeTitle.show(); - self.$placeForm.values(place).show(); self.$areaKmInput.options({value: Ox.formatArea(place.area)}); + self.$placeForm.values(place).show(); self.$placeButton.options({title: isResult ? 'Add Place' : 'Remove Place'}).show(); updateMatches(); } else { @@ -848,10 +848,10 @@ Ox.ListMap = function(options, self) { names = Ox.filter(Ox.merge([place.name], place.alternativeNames), function(name) { return name !== ''; }); - Ox.print('names', names); if (names.length) { + self.$matchesInput.options({value: ''}); self.options.getMatches(names, function(matches) { - self.$matchesInput.options({value: matches}); + self.$matchesInput.options({value: Ox.formatNumber(matches)}); }); } else { self.$matchesInput.options({value: 0}); diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js index cbea6d6e..38e66e50 100644 --- a/source/Ox.UI/js/Map/Ox.Map.js +++ b/source/Ox.UI/js/Map/Ox.Map.js @@ -797,6 +797,18 @@ Ox.Map = function(options, self) { google.maps.event.addListener(self.map, 'zoom_changed', zoomChanged); google.maps.event.addListenerOnce(self.map, 'tilesloaded', tilesLoaded); + // needed to get mouse x/y coordinates on marker mouseover, + // see http://code.google.com/p/gmaps-api-issues/issues/detail?id=2342 + that.overlayView = new google.maps.OverlayView(); + that.overlayView.setMap(self.map); + that.overlayView.draw = function () { + if (!this.ready) { + this.ready = true; + google.maps.event.trigger(this, 'ready'); + } + } + that.overlayView.draw(); + if (self.options.find) { self.$findInput.options({value: self.options.find}) .triggerEvent('submit', {value: self.options.find}); @@ -1161,10 +1173,9 @@ Ox.Map = function(options, self) { isVisible = self.$placeControls.name.is(':visible'); if (place) { self.$placeControls.flag.empty().append( - $('') - .attr({ - src: Ox.getImageByGeoname('icon', 16, place.geoname) - }) + $('').attr({ + src: Ox.getImageByGeoname('icon', 16, place.geoname) + }) ).show(); self.$placeControls.name.options({title: place.name}) !isVisible && $placeControls.show().animate({opacity: 1}, 250); diff --git a/source/Ox.UI/js/Map/Ox.MapMarker.js b/source/Ox.UI/js/Map/Ox.MapMarker.js index 49be3844..4386f301 100644 --- a/source/Ox.UI/js/Map/Ox.MapMarker.js +++ b/source/Ox.UI/js/Map/Ox.MapMarker.js @@ -45,7 +45,7 @@ Ox.MapMarker = function(options) { that.marker = new google.maps.Marker({ raiseOnDrag: false, shape: {coords: [8, 8, 8], type: 'circle'}, - title: that.place.name, + //title: that.place.name, //zIndex: 1000 }); @@ -183,6 +183,17 @@ Ox.MapMarker = function(options) { } } + function mouseover(e) { + var offset = that.map.offset(), + xy = that.map.overlayView.getProjection() + .fromLatLngToContainerPixel(e.latLng); + that.tooltip.show(offset.left + xy.x - 4, offset.top + xy.y + 20); + } + + function mouseout() { + that.tooltip.hide(); + } + function setOptions() { // workaround to prevent marker from appearing twice // after setting draggable from true to false (google maps bug) @@ -218,6 +229,20 @@ Ox.MapMarker = function(options) { that.marker.setVisible(true); }, 0); } + setTooltip(); + } + + function setTooltip() { + var country = Ox.getCountryByGeoname(that.place.geoname); + that.tooltip = Ox.Tooltip({ + title: '' + + '
' + + that.place.name + + (country && country.name != that.place.name ? ', ' + country.name : '') + + '
' + }); } /*@ @@ -228,6 +253,8 @@ Ox.MapMarker = function(options) { that.marker.setMap(that.map.map); google.maps.event.addListener(that.marker, 'click', click); google.maps.event.addListener(that.marker, 'dblclick', dblclick); + google.maps.event.addListener(that.marker, 'mouseover', mouseover); + google.maps.event.addListener(that.marker, 'mouseout', mouseout); return that; }; diff --git a/source/Ox.UI/js/Map/Ox.MapPlace.js b/source/Ox.UI/js/Map/Ox.MapPlace.js index f3e73ca6..591968b2 100644 --- a/source/Ox.UI/js/Map/Ox.MapPlace.js +++ b/source/Ox.UI/js/Map/Ox.MapPlace.js @@ -83,7 +83,6 @@ Ox.MapPlace = function(options) { place: that }); } else if (updateMarker) { - Ox.print('UPDATING marker and rectangle ... llswne', that.lat, that.lng, that.south, that.west, that.north, that.east) that.marker.update(); that.rectangle.update(); } diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css index 30ecc80b..fd578f9e 100644 --- a/source/Ox.UI/themes/classic/css/classic.css +++ b/source/Ox.UI/themes/classic/css/classic.css @@ -465,8 +465,8 @@ Maps ================================================================================ */ -.OxThemeClassic .OxMapControl, -.OxThemeClassic .OxPlaceControl { +.OxThemeClassic .OxMap .OxMapControl, +.OxThemeClassic .OxMap .OxPlaceControl { border-color: rgb(64, 64, 64); background: rgba(255, 255, 255, 0.75); color: rgb(64, 64, 64); diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css index 65a24c4f..b1882f99 100644 --- a/source/Ox.UI/themes/modern/css/modern.css +++ b/source/Ox.UI/themes/modern/css/modern.css @@ -462,8 +462,8 @@ Maps ================================================================================ */ -.OxThemeModern .OxMapControl, -.OxThemeModern .OxPlaceControl { +.OxThemeModern .OxMap .OxMapControl, +.OxThemeModern .OxMap .OxPlaceControl { border-color: rgb(192, 192, 192); background: rgba(0, 0, 0, 0.5); color: rgb(192, 192, 192);