forked from 0x2620/oxjs
more map
This commit is contained in:
rlx
parent
b7e236f056
commit
0fc4338bfd
6 changed files with 3719 additions and 218 deletions
|
|
@ -9208,13 +9208,9 @@ requires
|
|||
Ox.print('PLACES', places)
|
||||
self.$map = new Ox.Map({
|
||||
clickable: true,
|
||||
editable: true,
|
||||
height: self.options.height,
|
||||
// fixme: place can still be string, and maybe shouldn't be array at all
|
||||
places: places.map(function(place) {
|
||||
return Ox.extend({}, place, {
|
||||
name: place.name.length == 0 ? '' : place.name[0]
|
||||
});
|
||||
}),
|
||||
places: places,
|
||||
statusbar: true,
|
||||
toolbar: true,
|
||||
width: self.mapResize[1],
|
||||
|
|
@ -9429,7 +9425,7 @@ requires
|
|||
.appendTo(that);
|
||||
self.$labelsButton = new Ox.Button({
|
||||
title: 'Show Labels',
|
||||
width: 80
|
||||
width: 96
|
||||
})
|
||||
.css({float: 'left', margin: '4px'})
|
||||
.bindEvent({
|
||||
|
|
@ -9470,19 +9466,19 @@ requires
|
|||
.appendTo(that);
|
||||
self.$placeNameInput = new Ox.Input({
|
||||
placeholder: 'Name',
|
||||
width: Math.floor((self.options.width - 96) / 2)
|
||||
width: Math.floor((self.options.width - 112) / 2)
|
||||
})
|
||||
.css({float: 'left', margin: '2px'})
|
||||
.appendTo(self.$statusbar);
|
||||
self.$placeGeonameInput = new Ox.Input({
|
||||
placeholder: 'Geoname',
|
||||
width: Math.ceil((self.options.width - 96) / 2)
|
||||
width: Math.ceil((self.options.width - 112) / 2)
|
||||
})
|
||||
.css({float: 'left', margin: '2px'})
|
||||
.appendTo(self.$statusbar)
|
||||
self.$placeButton = new Ox.Button({
|
||||
title: 'New Place',
|
||||
width: 80
|
||||
width: 96
|
||||
})
|
||||
.css({float: 'left', margin: '2px'})
|
||||
.bindEvent({
|
||||
|
|
@ -9550,37 +9546,54 @@ requires
|
|||
initMap();
|
||||
}
|
||||
|
||||
function addNewPlace() {
|
||||
var bounds = self.map.getBounds(),
|
||||
center = self.map.getCenter(),
|
||||
southwest = new google.maps.LatLngBounds(
|
||||
bounds.getSouthWest(), center
|
||||
).getCenter(),
|
||||
northeast = new google.maps.LatLngBounds(
|
||||
center, bounds.getNorthEast()
|
||||
).getCenter(),
|
||||
place = new Place({
|
||||
countryCode: '',
|
||||
geoname: '',
|
||||
id: '_' + Ox.uid(), // fixme: stupid
|
||||
name: '',
|
||||
south: southwest.lat(),
|
||||
west: southwest.lng(),
|
||||
north: northeast.lat(),
|
||||
east: northeast.lng()
|
||||
});
|
||||
addPlace(place);
|
||||
selectPlace(place.name);
|
||||
}
|
||||
|
||||
function addPlace(place) {
|
||||
Ox.print('addPlace', place)
|
||||
function addPlaceToMap(place) {
|
||||
if (!place) {
|
||||
var bounds = self.map.getBounds(),
|
||||
center = self.map.getCenter(),
|
||||
southwest = new google.maps.LatLngBounds(
|
||||
bounds.getSouthWest(), center
|
||||
).getCenter(),
|
||||
northeast = new google.maps.LatLngBounds(
|
||||
center, bounds.getNorthEast()
|
||||
).getCenter(),
|
||||
place = new Ox.MapPlace({
|
||||
countryCode: '',
|
||||
editable: true,
|
||||
geoname: '',
|
||||
id: '_' + Ox.uid(), // fixme: stupid
|
||||
lat: center.lat(),
|
||||
lng: center.lng(),
|
||||
map: that,
|
||||
name: '',
|
||||
south: southwest.lat(),
|
||||
west: southwest.lng(),
|
||||
north: northeast.lat(),
|
||||
east: northeast.lng()
|
||||
});
|
||||
}
|
||||
Ox.print('addPlaceToMap', place)
|
||||
Ox.print('self.resultPlace', self.resultPlace)
|
||||
self.resultPlace && self.resultPlace.remove();
|
||||
if (place.id[0] == '_') {
|
||||
self.resultPlace = place;
|
||||
}
|
||||
self.resultPlace = place;
|
||||
place.add();
|
||||
selectPlace(place.id);
|
||||
}
|
||||
|
||||
function addPlaceToPlaces() {
|
||||
var place = getSelectedPlace();
|
||||
if (self.options.selected == place.id) {
|
||||
self.options.selected = place.id.substr(1);
|
||||
self.selected = self.options.selected;
|
||||
}
|
||||
place.id = place.id.substr(1); // fixme: NOT SAFE!
|
||||
place.name = self.$placeNameInput.value();
|
||||
place.geoname = self.$placeGeonameInput.value();
|
||||
place.countryCode = Ox.getCountryCode(place.geoname);
|
||||
place.marker.update();
|
||||
self.places.push(place);
|
||||
self.resultPlace = null;
|
||||
that.triggerEvent('addplace', place)
|
||||
Ox.print('SSSS', self.options.selected)
|
||||
}
|
||||
|
||||
function boundsChanged() {
|
||||
|
|
@ -9610,7 +9623,7 @@ requires
|
|||
if (self.options.clickable/* && !editing()*/) {
|
||||
getPlaceByLatLng(event.latLng, self.map.getBounds(), function(place) {
|
||||
if (place) {
|
||||
addPlace(place);
|
||||
addPlaceToMap(place);
|
||||
selectPlace(place.id);
|
||||
}
|
||||
});
|
||||
|
|
@ -9618,22 +9631,14 @@ requires
|
|||
}
|
||||
|
||||
function clickPlaceButton() {
|
||||
if (self.$placeButton.options('title') == 'New Place') {
|
||||
addNewPlace();
|
||||
} else {
|
||||
var place = getSelectedPlace(),
|
||||
data = {
|
||||
place: {}
|
||||
};
|
||||
data.place.name = self.$placeNameInput.value();
|
||||
data.place.geoname = self.$placeGeonameInput.value();
|
||||
data.place.countryCode = Ox.getCountryCode(data.place.geoname);
|
||||
[
|
||||
'lat', 'lng', 'south', 'west', 'north', 'east', 'size'
|
||||
].forEach(function(key) {
|
||||
data.place[key] = place[key];
|
||||
});
|
||||
that.triggerEvent('addplace', data)
|
||||
var place = getSelectedPlace(),
|
||||
title = self.$placeButton.options('title');
|
||||
if (title == 'New Place') {
|
||||
addPlaceToMap();
|
||||
} else if (title == 'Add Place') {
|
||||
addPlaceToPlaces();
|
||||
} else if (title == 'Remove Place') {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -9658,7 +9663,21 @@ requires
|
|||
}
|
||||
|
||||
function editing() {
|
||||
return self.selected && getSelectedPlace().editing;
|
||||
var place = getSelectedPlace();
|
||||
return place && place.editing;
|
||||
}
|
||||
|
||||
function getElevation(point, callback) {
|
||||
// fixme: unused
|
||||
if (arguments.length == 1) {
|
||||
callback = point;
|
||||
point = self.map.getCenter();
|
||||
}
|
||||
self.elevationService.getElevationForLocations({
|
||||
locations: [point]
|
||||
}, function(data) {
|
||||
callback(data.elevation);
|
||||
});
|
||||
}
|
||||
|
||||
function getMapHeight() {
|
||||
|
|
@ -9678,7 +9697,7 @@ requires
|
|||
point = self.map.getCenter();
|
||||
}
|
||||
self.maxZoomService.getMaxZoomAtLatLng(point, function(data) {
|
||||
callback(data.status == 'OK' ? data.zoom : -1);
|
||||
callback(data.status == 'OK' ? data.zoom : null);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -9761,11 +9780,13 @@ requires
|
|||
}
|
||||
|
||||
function getSelectedPlace() {
|
||||
return self.selected ? getPlaceById(self.selected) : null;
|
||||
return self.options.selected ?
|
||||
getPlaceById(self.options.selected) : null;
|
||||
}
|
||||
|
||||
function initMap() {
|
||||
var mapBounds;
|
||||
self.elevationService = new google.maps.ElevationService();
|
||||
self.geocoder = new google.maps.Geocoder();
|
||||
self.maxZoomService = new google.maps.MaxZoomService();
|
||||
self.places = [];
|
||||
|
|
@ -9841,6 +9862,7 @@ requires
|
|||
components: data.address_components,
|
||||
countryCode: getCountryCode(data.address_components),
|
||||
east: bounds.getNorthEast().lng(),
|
||||
editable: self.options.editable,
|
||||
fullGeoname: getFullGeoname(data.address_components),
|
||||
geoname: data.formatted_address,
|
||||
id: '_' + Ox.uid(),
|
||||
|
|
@ -9937,10 +9959,14 @@ requires
|
|||
Ox.print('Ox.Map selectPlace()', id, self.selected)
|
||||
var place;
|
||||
if (id != self.selected) {
|
||||
place = getSelectedPlace();
|
||||
place = getPlaceById(self.selected);
|
||||
place && place.deselect();
|
||||
place = getPlaceById(id);
|
||||
place && place.select();
|
||||
self.selected = id;
|
||||
self.options.selected = id;
|
||||
setStatus();
|
||||
that.triggerEvent('selectplace', place);
|
||||
}
|
||||
if (id) {
|
||||
//self.map.setCenter(place.center);
|
||||
|
|
@ -9954,32 +9980,31 @@ requires
|
|||
}
|
||||
*/
|
||||
}
|
||||
self.options.selected = id;
|
||||
self.selected = id;
|
||||
setStatus();
|
||||
that.triggerEvent('selectplace', place);
|
||||
/*
|
||||
that.triggerEvent('select', {
|
||||
id: self.options.selected
|
||||
});
|
||||
*/
|
||||
//Ox.print('????', place)
|
||||
};
|
||||
|
||||
function setStatus() {
|
||||
Ox.print('setStatus()', self.options.selected)
|
||||
var place;
|
||||
var disabled, place, title;
|
||||
if (self.options.statusbar) {
|
||||
if (self.options.selected) {
|
||||
place = getPlaceById(self.options.selected);
|
||||
place = getSelectedPlace();
|
||||
title = place.id[0] == '_' ? 'Add Place' : 'Remove Place';
|
||||
} else {
|
||||
title = 'New Place';
|
||||
}
|
||||
disabled = place && !place.editable;
|
||||
self.$placeNameInput.options({
|
||||
disabled: disabled,
|
||||
value: self.options.selected ? place.name : ''
|
||||
});
|
||||
self.$placeGeonameInput.options({
|
||||
disabled: disabled,
|
||||
value: self.options.selected ? place.geoname : ''
|
||||
});
|
||||
self.$placeButton.options({
|
||||
title: self.options.selected ? 'Add Place' : 'New Place'
|
||||
disabled: disabled,
|
||||
title: title
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -10094,12 +10119,13 @@ requires
|
|||
|
||||
that.editPlace = function() {
|
||||
getPlaceById(self.options.selected).edit();
|
||||
return that;
|
||||
}
|
||||
|
||||
that.findPlace = function(name, callback) {
|
||||
getPlaceByName(name, function(place) {
|
||||
if (place) {
|
||||
addPlace(place);
|
||||
addPlaceToMap(place);
|
||||
self.resultPlace = place;
|
||||
selectPlace(place.id);
|
||||
self.bounds = place.bounds;
|
||||
|
|
@ -10112,13 +10138,13 @@ requires
|
|||
|
||||
that.panToPlace = function() {
|
||||
Ox.print('panToPlace:', self.options.selected)
|
||||
if (self.options.selected !== null) {
|
||||
self.map.panTo(getPlaceById(self.options.selected).center);
|
||||
}
|
||||
var place = getSelectedPlace();
|
||||
place && self.map.panTo(place.center);
|
||||
return that;
|
||||
};
|
||||
|
||||
that.removePlace = function(id) {
|
||||
|
||||
return that;
|
||||
};
|
||||
|
||||
that.resizeMap = function() {
|
||||
|
|
@ -10136,17 +10162,19 @@ requires
|
|||
self.options.zoombar && self.$zoomInput.options({
|
||||
size: self.options.width
|
||||
});
|
||||
return that;
|
||||
}
|
||||
|
||||
that.zoomToPlace = function() {
|
||||
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);
|
||||
return that;
|
||||
};
|
||||
|
||||
that.zoom = function(value) {
|
||||
self.map.setZoom(value);
|
||||
return that;
|
||||
};
|
||||
|
||||
return that;
|
||||
|
|
@ -10193,6 +10221,7 @@ requires
|
|||
nw: new google.maps.LatLng(that.north, that.west),
|
||||
w: new google.maps.LatLng(that.lat, that.west),
|
||||
});
|
||||
// fixme: use bounds.toSpan()
|
||||
that.sizeNorthSouth = (that.north - that.south) *
|
||||
Ox.EARTH_CIRCUMFERENCE / 360;
|
||||
that.sizeEastWest = (that.east + (that.west > that.east ? 360 : 0) - that.west) *
|
||||
|
|
@ -10214,6 +10243,10 @@ requires
|
|||
//Ox.print('PLACE', that)
|
||||
}
|
||||
|
||||
function editable() {
|
||||
return that.map.options('editable') && that.editable;
|
||||
}
|
||||
|
||||
that.add = function() {
|
||||
Ox.print('MapPlace add', that)
|
||||
that.marker.add();
|
||||
|
|
@ -10221,10 +10254,12 @@ requires
|
|||
};
|
||||
|
||||
that.cancel = function() {
|
||||
that.undo();
|
||||
that.editing = false;
|
||||
that.marker.update();
|
||||
that.rectangle.deselect();
|
||||
if (editable()) {
|
||||
that.undo();
|
||||
that.editing = false;
|
||||
that.marker.update();
|
||||
that.rectangle.deselect();
|
||||
}
|
||||
return that;
|
||||
};
|
||||
|
||||
|
|
@ -10241,15 +10276,17 @@ requires
|
|||
};
|
||||
|
||||
that.edit = function() {
|
||||
that.editing = true;
|
||||
that.original = {
|
||||
east: that.east,
|
||||
north: that.north,
|
||||
south: that.south,
|
||||
west: that.west
|
||||
};
|
||||
that.marker.edit();
|
||||
that.rectangle.select();
|
||||
if (editable()) {
|
||||
that.editing = true;
|
||||
that.original = {
|
||||
east: that.east,
|
||||
north: that.north,
|
||||
south: that.south,
|
||||
west: that.west
|
||||
};
|
||||
that.marker.edit();
|
||||
that.rectangle.select();
|
||||
}
|
||||
return that;
|
||||
}
|
||||
|
||||
|
|
@ -10269,24 +10306,30 @@ requires
|
|||
};
|
||||
|
||||
that.submit = function() {
|
||||
Ox.print('submit')
|
||||
that.editing = false;
|
||||
that.marker.update();
|
||||
that.rectangle.deselect();
|
||||
if (editable()) {
|
||||
Ox.print('submit')
|
||||
that.editing = false;
|
||||
that.marker.update();
|
||||
that.rectangle.deselect();
|
||||
}
|
||||
return that;
|
||||
};
|
||||
|
||||
that.update = function() {
|
||||
update();
|
||||
return that;
|
||||
};
|
||||
|
||||
that.undo = function() {
|
||||
Ox.forEach(that.original, function(v, k) {
|
||||
that[k] = v;
|
||||
});
|
||||
that.update();
|
||||
that.marker.update();
|
||||
that.rectangle.update();
|
||||
if (editable()) {
|
||||
Ox.forEach(that.original, function(v, k) {
|
||||
that[k] = v;
|
||||
});
|
||||
that.update();
|
||||
that.marker.update();
|
||||
that.rectangle.update();
|
||||
}
|
||||
return that;
|
||||
};
|
||||
|
||||
return that;
|
||||
|
|
@ -10455,7 +10498,7 @@ requires
|
|||
setOptions();
|
||||
|
||||
function click() {
|
||||
if (!that.place.editing) {
|
||||
if (that.map.options('editable') && that.place.editable && !that.place.editing) {
|
||||
that.place.edit();
|
||||
} else if (that.map.getKey() == 'meta') {
|
||||
that.place.submit();
|
||||
|
|
@ -10553,6 +10596,7 @@ requires
|
|||
}
|
||||
|
||||
function drag(e) {
|
||||
// fixme: implement shift+drag (center stays the same)
|
||||
Ox.print(e.pixel.x, e.pixel.y)
|
||||
var lat = Ox.limit(e.latLng.lat(), Ox.MIN_LATITUDE, Ox.MAX_LATITUDE),
|
||||
lng = e.latLng.lng();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue