diff --git a/source/Ox.UI/js/Map/Ox.ListMap.js b/source/Ox.UI/js/Map/Ox.ListMap.js index 7f501f59..a43b2479 100644 --- a/source/Ox.UI/js/Map/Ox.ListMap.js +++ b/source/Ox.UI/js/Map/Ox.ListMap.js @@ -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(); } } diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js index 82c0d613..27daa36f 100644 --- a/source/Ox.UI/js/Map/Ox.Map.js +++ b/source/Ox.UI/js/Map/Ox.Map.js @@ -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; };