improve listmap editing functionality
This commit is contained in:
rolux
parent
e80b7bd8e3
commit
76606689d7
2 changed files with 71 additions and 41 deletions
|
|
@ -347,37 +347,53 @@ Ox.ListMap = function(options, self) {
|
|||
});
|
||||
|
||||
self.$newPlaceButton = Ox.Button({
|
||||
disabled: true,
|
||||
title: 'New',
|
||||
width: 64
|
||||
title: 'New Place',
|
||||
width: 96
|
||||
})
|
||||
.css({float: 'left', margin: '4px'})
|
||||
.hide()
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
self.$map.newPlace();
|
||||
}
|
||||
})
|
||||
.appendTo(self.$placeStatusbar);
|
||||
|
||||
self.$removePlaceButton = Ox.Button({
|
||||
disabled: true,
|
||||
title: 'Remove',
|
||||
width: 64
|
||||
title: 'Remove Place',
|
||||
width: 96
|
||||
})
|
||||
.css({float: 'left', margin: '4px'})
|
||||
.hide()
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
self.$map.removePlace(self.selectedPlace);
|
||||
self.$removePlaceButton.hide();
|
||||
self.$addPlaceButton.show();
|
||||
}
|
||||
})
|
||||
.appendTo(self.$placeStatusbar);
|
||||
|
||||
self.$addPlaceButton = Ox.Button({
|
||||
disabled: true,
|
||||
title: 'Add',
|
||||
width: 64
|
||||
title: 'Add Place',
|
||||
width: 96
|
||||
})
|
||||
.css({float: 'left', margin: '4px'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
self.$map.addPlace(self.$placeForm.values);
|
||||
self.$addPlaceButton.hide();
|
||||
self.$removePlaceButton.show();
|
||||
}
|
||||
})
|
||||
.hide()
|
||||
.appendTo(self.$placeStatusbar);
|
||||
|
||||
self.$revertPlaceButton = Ox.Button({
|
||||
disabled: true,
|
||||
title: 'Revert',
|
||||
width: 64
|
||||
width: 96
|
||||
})
|
||||
.css({float: 'right', margin: '4px'})
|
||||
.hide()
|
||||
.appendTo(self.$placeStatusbar);
|
||||
|
||||
/*
|
||||
|
|
@ -525,6 +541,7 @@ Ox.ListMap = function(options, self) {
|
|||
var country = place.id ? Ox.getCountryByGeoname(place.geoname) : '',
|
||||
code = country ? country.code : 'NTHH';
|
||||
if (place.id) {
|
||||
isResult = place.id[0] == '_';
|
||||
self.selectedPlace = place.id;
|
||||
place.id[0] != '_' && self.$list.options({
|
||||
selected: place.id ? [place.id] : []
|
||||
|
|
@ -537,10 +554,18 @@ Ox.ListMap = function(options, self) {
|
|||
self.$placeForm.values(Ox.map(place, function(val, key) {
|
||||
return key == 'size' ? Ox.formatArea(val) : val;
|
||||
})).show();
|
||||
self.$newPlaceButton.hide();
|
||||
self.$addPlaceButton[isResult ? 'show' : 'hide']();
|
||||
self.$removePlaceButton[isResult ? 'hide' : 'show']();
|
||||
self.$revertPlaceButton.options({disabled: true}).show();
|
||||
} else {
|
||||
self.selectedPlace = null;
|
||||
self.$placeTitle.hide();
|
||||
self.$placeForm.hide();
|
||||
self.$newPlaceButton.show();
|
||||
self.$addPlaceButton.hide();
|
||||
self.$removePlaceButton.hide();
|
||||
self.$revertPlaceButton.hide();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -406,20 +406,19 @@ Ox.Map = function(options, self) {
|
|||
selectPlace(place.id);
|
||||
}
|
||||
|
||||
function addPlaceToPlaces() {
|
||||
function addPlaceToPlaces(data) {
|
||||
var place = getSelectedPlace();
|
||||
if (self.options.selected == place.id) {
|
||||
self.options.selected = place.id.substr(1);
|
||||
}
|
||||
place.id = place.id.substr(1); // fixme: NOT SAFE!
|
||||
place.name = self.$placeNameInput.value();
|
||||
place.geoname = self.$placeGeonameInput.value();
|
||||
Ox.extend(place, data);
|
||||
place.countryCode = Ox.getCountryByGeoname(place.geoname).code;
|
||||
place.marker.update();
|
||||
self.places.push(place);
|
||||
self.resultPlace = null;
|
||||
that.triggerEvent('addplace', place)
|
||||
Ox.print('SSSS', self.options.selected)
|
||||
//Ox.print('SSSS', self.options.selected)
|
||||
}
|
||||
|
||||
function boundsChanged() {
|
||||
|
|
@ -445,10 +444,8 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
|
||||
function clickMap(event) {
|
||||
Ox.print('Ox.Map clickMap')
|
||||
if (self.options.clickable/* && !editing()*/) {
|
||||
getPlaceByLatLng(event.latLng, self.map.getBounds(), function(place) {
|
||||
Ox.print('>>>>', place)
|
||||
if (place) {
|
||||
addPlaceToMap(place);
|
||||
//selectPlace(place.id);
|
||||
|
|
@ -472,7 +469,7 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
|
||||
function constructZoomInput() {
|
||||
Ox.print('constructZoomInput', self.minZoom, self.maxZoom)
|
||||
//Ox.print('constructZoomInput', self.minZoom, self.maxZoom)
|
||||
if (self.options.zoombar) {
|
||||
self.$zoomInput && self.$zoomInput.removeElement();
|
||||
self.$zoomInput = new Ox.Range({
|
||||
|
|
@ -532,6 +529,15 @@ Ox.Map = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function getMetersPerPixel() {
|
||||
var mapWidth = self.$map.width(),
|
||||
span = self.map.getBounds().toSpan().lng();
|
||||
if (span >= 360) {
|
||||
span = 360 * mapWidth / Ox.MAP_TILE_SIZE;
|
||||
}
|
||||
return span * Ox.getMetersPerDegree(self.map.getCenter().lat()) / mapWidth;
|
||||
}
|
||||
|
||||
function getMinZoom() {
|
||||
return 0;
|
||||
return Math.ceil(
|
||||
|
|
@ -544,19 +550,19 @@ Ox.Map = function(options, self) {
|
|||
if (!place && self.resultPlace && self.resultPlace.id == id) {
|
||||
place = self.resultPlace;
|
||||
}
|
||||
Ox.print('getPlaceById', id, place)
|
||||
//Ox.print('getPlaceById', id, place)
|
||||
return place;
|
||||
}
|
||||
|
||||
function getPlaceByLatLng(latlng, bounds, callback) {
|
||||
// gets the largest place at latlng that would fit in bounds
|
||||
Ox.print('ll b', latlng, bounds)
|
||||
//Ox.print('ll b', latlng, bounds)
|
||||
var callback = arguments.length == 3 ? callback : bounds,
|
||||
bounds = arguments.length == 3 ? bounds : null;
|
||||
self.geocoder.geocode({
|
||||
latLng: latlng
|
||||
}, function(results, status) {
|
||||
Ox.print('results', results)
|
||||
//Ox.print('results', results)
|
||||
var length = results.length;
|
||||
if (status == google.maps.GeocoderStatus.OK) {
|
||||
if (bounds) {
|
||||
|
|
@ -662,7 +668,7 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
mapBounds = i == 0 ? bounds : mapBounds.union(bounds);
|
||||
});
|
||||
Ox.print('BOUNDS', mapBounds.getSouthWest(), mapBounds.getNorthEast(), mapBounds.getCenter())
|
||||
//Ox.print('BOUNDS', mapBounds.getSouthWest(), mapBounds.getNorthEast(), mapBounds.getCenter())
|
||||
self.center = mapBounds ? mapBounds.getCenter() : new google.maps.LatLng(0, 0);
|
||||
self.zoom = 1; // fixme: should depend on height
|
||||
that.map = self.map = new google.maps.Map(self.$map.$element[0], {
|
||||
|
|
@ -815,8 +821,14 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
}
|
||||
|
||||
function removePlace(id) {
|
||||
|
||||
function removePlace() {
|
||||
var place = getSelectedPlace();
|
||||
place.id = '_' + place.id;
|
||||
self.options.selected = place.id;
|
||||
//Ox.print('removePlace', Ox.getObjectById(self.places, place.id))
|
||||
self.places.splice(Ox.getPositionById(self.places, place.id), 1);
|
||||
self.resultPlace = place;
|
||||
place.marker.update();
|
||||
}
|
||||
|
||||
function reset() {
|
||||
|
|
@ -848,7 +860,7 @@ Ox.Map = function(options, self) {
|
|||
function selectPlace(id) {
|
||||
var place,
|
||||
selected = getSelectedMarker();
|
||||
Ox.print('Ox.Map selectPlace()', id, selected);
|
||||
//Ox.print('Ox.Map selectPlace()', id, selected);
|
||||
if (id != selected) {
|
||||
place = getPlaceById(selected);
|
||||
place && place.deselect();
|
||||
|
|
@ -860,15 +872,6 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
};
|
||||
|
||||
function getMetersPerPixel() {
|
||||
var mapWidth = self.$map.width(),
|
||||
span = self.map.getBounds().toSpan().lng();
|
||||
if (span >= 360) {
|
||||
span = 360 * mapWidth / Ox.MAP_TILE_SIZE;
|
||||
}
|
||||
return span * Ox.getMetersPerDegree(self.map.getCenter().lat()) / mapWidth;
|
||||
}
|
||||
|
||||
function setScale() {
|
||||
var metersPerPixel = getMetersPerPixel();
|
||||
Ox.forEach(self.scaleMeters, function(meters) {
|
||||
|
|
@ -889,7 +892,7 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
|
||||
function setStatus() {
|
||||
Ox.print('setStatus()', self.options.selected)
|
||||
//Ox.print('setStatus()', self.options.selected)
|
||||
var code, country, disabled, place, title;
|
||||
if (self.options.statusbar) {
|
||||
place = getSelectedPlace();
|
||||
|
|
@ -917,7 +920,7 @@ Ox.Map = function(options, self) {
|
|||
title: title
|
||||
});
|
||||
}
|
||||
Ox.print('STATUS DONE');
|
||||
//Ox.print('STATUS DONE');
|
||||
}
|
||||
|
||||
function submitFind(event, data) {
|
||||
|
|
@ -928,7 +931,7 @@ Ox.Map = function(options, self) {
|
|||
|
||||
function toggleLabels() {
|
||||
self.options.showLabels = !self.options.showLabels
|
||||
Ox.print('toggle', getMapType())
|
||||
//Ox.print('toggle', getMapType())
|
||||
self.map.setMapTypeId(google.maps.MapTypeId[getMapType()]);
|
||||
/*
|
||||
self.$labelsButton.options({
|
||||
|
|
@ -1030,8 +1033,8 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
};
|
||||
|
||||
that.addPlace = function() {
|
||||
addPlaceToMap(getSelectedPlace());
|
||||
that.addPlace = function(data) {
|
||||
addPlaceToPlaces(data);
|
||||
};
|
||||
|
||||
that.getKey = function() {
|
||||
|
|
@ -1072,7 +1075,9 @@ Ox.Map = function(options, self) {
|
|||
return that;
|
||||
};
|
||||
|
||||
that.removePlace = function(id) {
|
||||
that.removePlace = function() {
|
||||
// fixme: removePlaceFromPlaces() ?
|
||||
removePlace();
|
||||
return that;
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue