0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add proper tooltips to map

Browse source
This commit is contained in:
rlx 2011-10-31 11:29:59 +00:00
parent 479e7da2f5
commit 64032b5e9c
8 changed files with 57 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
source/Ox.UI/css/Ox.UI.css
View file

@ -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 {

8
source/Ox.UI/js/Core/Ox.Element.js
View file

@ -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

6
source/Ox.UI/js/Map/Ox.ListMap.js
View file

@ -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});

19
source/Ox.UI/js/Map/Ox.Map.js
View file

@ -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(
$('<img>')
.attr({
src: Ox.getImageByGeoname('icon', 16, place.geoname)
})
$('<img>').attr({
src: Ox.getImageByGeoname('icon', 16, place.geoname)
})
).show();
self.$placeControls.name.options({title: place.name})
!isVisible && $placeControls.show().animate({opacity: 1}, 250);

29
source/Ox.UI/js/Map/Ox.MapMarker.js
View file

@ -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: '<img src="'
+ Ox.getImageByGeoname('icon', 16, that.place.geoname)
+ '" style="float: left; margin: 1px 0 1px -1px; border-radius: 4px"/>'
+ '<div style="float: left; margin: 4px -1px 0 4px; font-size: 9px;">'
+ that.place.name
+ (country && country.name != that.place.name ? ', ' + country.name : '')
+ '</div>'
});
}
/*@
@ -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;
};

1
source/Ox.UI/js/Map/Ox.MapPlace.js
View file

@ -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();
}

4
source/Ox.UI/themes/classic/css/classic.css
View file

@ -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);

4
source/Ox.UI/themes/modern/css/modern.css
View file

@ -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);