forked from 0x2620/oxjs
make map controls work
This commit is contained in:
rlx
parent
bbef38f0a9
commit
df3ea541b3
14 changed files with 177 additions and 132 deletions
|
|
@ -118,7 +118,7 @@ Ox.Map = function(options, self) {
|
|||
})
|
||||
.bindEvent({
|
||||
key_0: function() {
|
||||
that.panToPlace()
|
||||
panToPlace()
|
||||
},
|
||||
key_down: function() {
|
||||
pan(0, 1);
|
||||
|
|
@ -158,7 +158,7 @@ Ox.Map = function(options, self) {
|
|||
pan(0, 2);
|
||||
},
|
||||
key_shift_0: function() {
|
||||
that.zoomToPlace();
|
||||
zoomToPlace();
|
||||
},
|
||||
key_shift_equal: function() {
|
||||
zoom(2);
|
||||
|
|
@ -211,18 +211,41 @@ Ox.Map = function(options, self) {
|
|||
})
|
||||
.appendTo(that);
|
||||
self.$select = Ox.Select({
|
||||
items: [
|
||||
{id: 'new Place', title: 'New Place...', keyboard: 'n'},
|
||||
{},
|
||||
{id: 'toggleLabels', title: 'Show Labels', keyboard: 'l', checked: self.options.showLabels},
|
||||
{id: 'toggleControls', title: 'Show Controls', keyboard: 'c', checked: self.options.showControls},
|
||||
],
|
||||
min: 0,
|
||||
max: 2,
|
||||
items: Ox.merge(
|
||||
self.options.editable
|
||||
? [{id: 'new Place', title: 'New Place...', keyboard: 'n'}, {}]
|
||||
: [],
|
||||
[
|
||||
{
|
||||
id: 'toggleLabels',
|
||||
title: self.options.showLabels
|
||||
? ['Hide Labels', 'Show Labels']
|
||||
: ['Show Labels', 'Hide Labels'],
|
||||
keyboard: 'l'
|
||||
},
|
||||
{
|
||||
id: 'toggleControls',
|
||||
title: self.options.showLabels
|
||||
? ['Hide Controls', 'Show Controls']
|
||||
: ['Show Controls', 'Hide Controls'],
|
||||
keyboard: 'c'
|
||||
}
|
||||
]
|
||||
),
|
||||
selectable: false,
|
||||
title: 'Options...',
|
||||
width: 96
|
||||
})
|
||||
.css({float: 'left', margin: '4px'})
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
if (data.id == 'toggleLabels') {
|
||||
toggleLabels();
|
||||
} else if (data.id == 'toggleControls') {
|
||||
toggleControls();
|
||||
}
|
||||
}
|
||||
})
|
||||
.appendTo(self.$toolbar);
|
||||
/*
|
||||
self.$labelsButton = Ox.Checkbox({
|
||||
|
|
@ -306,66 +329,82 @@ Ox.Map = function(options, self) {
|
|||
.appendTo(self.$statusbar);
|
||||
}
|
||||
|
||||
self.$navigationButtons = {
|
||||
self.$controls = {
|
||||
'center': Ox.Button({
|
||||
title: 'close',
|
||||
title: 'center',
|
||||
type: 'image'
|
||||
})
|
||||
.addClass('OxMapButton')
|
||||
.css({
|
||||
left: '24px',
|
||||
top: '24px'
|
||||
.addClass('OxMapControl OxMapButtonCenter')
|
||||
.bindEvent({
|
||||
singleclick: function() {
|
||||
panToPlace();
|
||||
},
|
||||
doubleclick: function() {
|
||||
zoomToPlace();
|
||||
}
|
||||
}),
|
||||
'east': Ox.Button({
|
||||
title: 'right',
|
||||
type: 'image'
|
||||
})
|
||||
.addClass('OxMapButton')
|
||||
.css({
|
||||
left: '44px',
|
||||
top: '24px',
|
||||
.addClass('OxMapControl OxMapButtonEast')
|
||||
.bindEvent({
|
||||
singleclick: function() {
|
||||
pan(1, 0);
|
||||
},
|
||||
doubleclick: function() {
|
||||
pan(2, 0);
|
||||
}
|
||||
}),
|
||||
'north': Ox.Button({
|
||||
title: 'up',
|
||||
type: 'image'
|
||||
})
|
||||
.addClass('OxMapButton')
|
||||
.css({
|
||||
left: '24px',
|
||||
top: '4px',
|
||||
.addClass('OxMapControl OxMapButtonNorth')
|
||||
.bindEvent({
|
||||
singleclick: function() {
|
||||
pan(0, -1);
|
||||
},
|
||||
doubleclick: function() {
|
||||
pan(0, -2);
|
||||
}
|
||||
}),
|
||||
'south': Ox.Button({
|
||||
title: 'down',
|
||||
type: 'image'
|
||||
})
|
||||
.addClass('OxMapButton')
|
||||
.css({
|
||||
left: '24px',
|
||||
top: '44px',
|
||||
.addClass('OxMapControl OxMapButtonSouth')
|
||||
.bindEvent({
|
||||
singleclick: function() {
|
||||
pan(0, 1);
|
||||
},
|
||||
doubleclick: function() {
|
||||
pan(0, 2);
|
||||
}
|
||||
}),
|
||||
'west': Ox.Button({
|
||||
title: 'left',
|
||||
type: 'image'
|
||||
})
|
||||
.addClass('OxMapButton')
|
||||
.css({
|
||||
left: '4px',
|
||||
top: '24px',
|
||||
.addClass('OxMapControl OxMapButtonWest')
|
||||
.bindEvent({
|
||||
singleclick: function() {
|
||||
pan(-1, 0);
|
||||
},
|
||||
doubleclick: function() {
|
||||
pan(-2, 0);
|
||||
}
|
||||
}),
|
||||
'scale': Ox.Label({
|
||||
textAlign: 'center',
|
||||
title: '...' // fixme ???
|
||||
})
|
||||
.addClass('OxMapControl')
|
||||
};
|
||||
Ox.forEach(self.$navigationButtons, function($button) {
|
||||
$button.attr({
|
||||
src: $button.attr('src').replace('/classic/', '/modern/')
|
||||
});
|
||||
!self.options.showControls && Ox.forEach(self.$controls, function($control) {
|
||||
$control.css({opacity: 0}).hide();
|
||||
});
|
||||
|
||||
self.$scaleLabel = Ox.Label({
|
||||
textAlign: 'center',
|
||||
title: '...' // fixme ???
|
||||
})
|
||||
.addClass('OxMapLabel')
|
||||
.css({right: '4px', top: '4px'});
|
||||
|
||||
if (!self.isAsync) {
|
||||
self.options.places.forEach(function(place) {
|
||||
if (Ox.isUndefined(place.id)) {
|
||||
|
|
@ -755,10 +794,9 @@ Ox.Map = function(options, self) {
|
|||
|
||||
function tilesLoaded() {
|
||||
// fixme: can add earlier, use don't replace map contents option
|
||||
Ox.forEach(self.$navigationButtons, function(button) {
|
||||
button.appendTo(self.$map);
|
||||
Ox.forEach(self.$controls, function($control) {
|
||||
$control.appendTo(self.$map);
|
||||
});
|
||||
self.$scaleLabel.appendTo(self.$map);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -862,6 +900,11 @@ Ox.Map = function(options, self) {
|
|||
self.map.panBy(x * self.$map.width() / 2, y * self.$map.height() / 2);
|
||||
};
|
||||
|
||||
function panToPlace() {
|
||||
var place = getSelectedPlace();
|
||||
place && self.map.panTo(place.center);
|
||||
}
|
||||
|
||||
function parseGeodata(data) {
|
||||
var bounds = data.geometry.bounds || data.geometry.viewport,
|
||||
northEast = bounds.getNorthEast(),
|
||||
|
|
@ -1043,7 +1086,7 @@ Ox.Map = function(options, self) {
|
|||
}, result.data.items[0])).add();
|
||||
self.places.push(place);
|
||||
select();
|
||||
that.zoomToPlace();
|
||||
zoomToPlace();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -1066,7 +1109,7 @@ Ox.Map = function(options, self) {
|
|||
Ox.forEach(self.scaleMeters, function(meters) {
|
||||
var scaleWidth = Math.round(meters / metersPerPixel);
|
||||
if (scaleWidth <= self.options.width / 2 - 4) {
|
||||
self.$scaleLabel
|
||||
self.$controls.scale
|
||||
.options({
|
||||
title: '\u2190 ' + (
|
||||
meters > 1000 ? Ox.formatNumber(meters / 1000) + ' k' : meters + ' '
|
||||
|
|
@ -1123,16 +1166,28 @@ Ox.Map = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function toggleLabels() {
|
||||
self.options.showLabels = !self.options.showLabels
|
||||
//Ox.print('toggle', getMapType())
|
||||
self.map.setMapTypeId(google.maps.MapTypeId[getMapType()]);
|
||||
/*
|
||||
self.$labelsButton.options({
|
||||
title: self.$labelsButton.options('title') == 'Show Labels' ?
|
||||
'Hide Labels' : 'Show Labels'
|
||||
function toggleControls() {
|
||||
// fixme: that.find() doesn't work here
|
||||
var $controls = that.$element.find('.OxMapControl');
|
||||
self.options.showControls = !self.options.showControls;
|
||||
if (self.options.showControls) {
|
||||
$controls.show().animate({opacity: 1}, 250);
|
||||
} else {
|
||||
$controls.animate({opacity: 0}, 250, function() {
|
||||
$controls.hide();
|
||||
});
|
||||
}
|
||||
that.triggerEvent('togglecontrols', {
|
||||
visible: self.options.showControls
|
||||
});
|
||||
}
|
||||
|
||||
function toggleLabels() {
|
||||
self.options.showLabels = !self.options.showLabels;
|
||||
self.map.setMapTypeId(google.maps.MapTypeId[getMapType()]);
|
||||
that.triggerEvent('togglelabels', {
|
||||
visible: self.options.showLabels
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
function triggerGeocodeEvent(data) {
|
||||
|
|
@ -1209,10 +1264,8 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
|
||||
function zoomToPlace() {
|
||||
Ox.print('zoomToPlace')
|
||||
if (self.options.selected !== null) {
|
||||
self.map.fitBounds(getPlaceById(self.options.selected).bounds);
|
||||
}
|
||||
var place = getSelectedPlace();
|
||||
place && self.map.fitBounds(place.bounds);
|
||||
}
|
||||
|
||||
self.setOption = function(key, value) {
|
||||
|
|
@ -1276,9 +1329,7 @@ Ox.Map = function(options, self) {
|
|||
};
|
||||
|
||||
that.panToPlace = function() {
|
||||
Ox.print('panToPlace:', self.options.selected)
|
||||
var place = getSelectedPlace();
|
||||
place && self.map.panTo(place.center);
|
||||
panToPlace();
|
||||
return that;
|
||||
};
|
||||
|
||||
|
|
@ -1348,9 +1399,7 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
|
||||
that.zoomToPlace = function() {
|
||||
Ox.print('zoomToPlace')
|
||||
var place = getSelectedPlace();
|
||||
place && self.map.fitBounds(place.bounds);
|
||||
zoomToPlace();
|
||||
return that;
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue