forked from 0x2620/oxjs
more map
This commit is contained in:
parent
5d644badd4
commit
3605ae1afb
306 changed files with 114880 additions and 84 deletions
|
|
@ -9331,7 +9331,9 @@ requires
|
|||
var self = self || {}
|
||||
that = new Ox.Element('div', self)
|
||||
.defaults({
|
||||
// fixme: isClickable? hasZoombar?
|
||||
clickable: false,
|
||||
editable: false,
|
||||
height: 256,
|
||||
labels: false,
|
||||
places: [],
|
||||
|
|
@ -9347,20 +9349,21 @@ requires
|
|||
height: self.options.height + 'px'
|
||||
})
|
||||
.bindEvent({
|
||||
key_up: function() {
|
||||
pan(0, -1);
|
||||
key_0: function() {
|
||||
that.panToPlace()
|
||||
},
|
||||
key_down: function() {
|
||||
pan(0, 1);
|
||||
},
|
||||
key_enter: pressEnter,
|
||||
key_escape: pressEscape,
|
||||
key_equal: function() {
|
||||
zoom(1);
|
||||
},
|
||||
key_l: toggleLabels,
|
||||
key_left: function() {
|
||||
pan(-1, 0);
|
||||
},
|
||||
key_right: function() {
|
||||
pan(1, 0);
|
||||
},
|
||||
key_0: reset,
|
||||
key_meta: function() {
|
||||
self.metaKey = true;
|
||||
$(document).one({
|
||||
|
|
@ -9372,12 +9375,9 @@ requires
|
|||
key_minus: function() {
|
||||
zoom(-1);
|
||||
},
|
||||
key_equal: function() {
|
||||
zoom(1);
|
||||
key_right: function() {
|
||||
pan(1, 0);
|
||||
},
|
||||
key_enter: function() {
|
||||
that.panToPlace();
|
||||
},
|
||||
key_shift: function() {
|
||||
self.shiftKey = true;
|
||||
$(document).one({
|
||||
|
|
@ -9386,14 +9386,36 @@ requires
|
|||
}
|
||||
});
|
||||
},
|
||||
key_shift_enter: function() {
|
||||
key_shift_down: function() {
|
||||
pan(0, 2);
|
||||
},
|
||||
key_shift_0: function() {
|
||||
that.zoomToPlace();
|
||||
},
|
||||
key_escape: function() {
|
||||
pressEscape();
|
||||
}
|
||||
key_shift_equal: function() {
|
||||
zoom(2)
|
||||
},
|
||||
key_shift_left: function() {
|
||||
pan(-2, 0);
|
||||
},
|
||||
key_shift_minus: function() {
|
||||
zoom(-2);
|
||||
},
|
||||
key_shift_right: function() {
|
||||
pan(2, 0);
|
||||
},
|
||||
key_shift_up: function() {
|
||||
pan(0, -2);
|
||||
},
|
||||
key_up: function() {
|
||||
pan(0, -1);
|
||||
},
|
||||
key_z: undo
|
||||
});
|
||||
|
||||
self.mapHeight = getMapHeight();
|
||||
self.minZoom = getMinZoom();
|
||||
|
||||
Ox.extend(self, {
|
||||
metaKey: false,
|
||||
resultPlace: null,
|
||||
|
|
@ -9438,17 +9460,6 @@ requires
|
|||
size: 16
|
||||
})
|
||||
.appendTo(that);
|
||||
self.$zoomInput = new Ox.Range({
|
||||
arrows: true,
|
||||
max: 22,
|
||||
size: self.options.width,
|
||||
thumbSize: 32,
|
||||
thumbValue: true
|
||||
})
|
||||
.bindEvent({
|
||||
change: changeZoom
|
||||
})
|
||||
.appendTo(self.$zoombar)
|
||||
}
|
||||
|
||||
if (self.options.statusbar) {
|
||||
|
|
@ -9480,6 +9491,54 @@ requires
|
|||
.appendTo(self.$statusbar);
|
||||
}
|
||||
|
||||
self.$navigationButtons = {
|
||||
'center': new Ox.Button({
|
||||
title: 'close',
|
||||
type: 'image'
|
||||
})
|
||||
.addClass('OxMapButton')
|
||||
.css({
|
||||
left: '24px',
|
||||
top: '24px'
|
||||
}),
|
||||
'east': new Ox.Button({
|
||||
title: 'next',
|
||||
type: 'image'
|
||||
})
|
||||
.addClass('OxMapButton')
|
||||
.css({
|
||||
left: '44px',
|
||||
top: '24px',
|
||||
}),
|
||||
'north': new Ox.Button({
|
||||
title: 'above',
|
||||
type: 'image'
|
||||
})
|
||||
.addClass('OxMapButton')
|
||||
.css({
|
||||
left: '24px',
|
||||
top: '4px',
|
||||
}),
|
||||
'south': new Ox.Button({
|
||||
title: 'below',
|
||||
type: 'image'
|
||||
})
|
||||
.addClass('OxMapButton')
|
||||
.css({
|
||||
left: '24px',
|
||||
top: '44px',
|
||||
}),
|
||||
'west': new Ox.Button({
|
||||
title: 'previous',
|
||||
type: 'image'
|
||||
})
|
||||
.addClass('OxMapButton')
|
||||
.css({
|
||||
left: '4px',
|
||||
top: '24px',
|
||||
})
|
||||
};
|
||||
|
||||
if (Ox.isUndefined(window.google)) {
|
||||
googleCallback = function() {
|
||||
Ox.print('googleCallback')
|
||||
|
|
@ -9524,6 +9583,11 @@ requires
|
|||
place.add();
|
||||
}
|
||||
|
||||
function boundsChanged() {
|
||||
Ox.print('boundsChanged');
|
||||
self.boundsChanged = true;
|
||||
}
|
||||
|
||||
function canContain(outerBounds, innerBounds) {
|
||||
var outerSpan = outerBounds.toSpan(),
|
||||
innerSpan = innerBounds.toSpan();
|
||||
|
|
@ -9531,6 +9595,11 @@ requires
|
|||
outerSpan.lng() > innerSpan.lng();
|
||||
}
|
||||
|
||||
function centerChanged() {
|
||||
Ox.print('centerChanged')
|
||||
self.centerChanged = true;
|
||||
}
|
||||
|
||||
function changeZoom(event, data) {
|
||||
self.map.setZoom(data.value);
|
||||
}
|
||||
|
|
@ -9538,8 +9607,8 @@ requires
|
|||
function clickMap(event) {
|
||||
Ox.print('Ox.Map clickMap')
|
||||
that.gainFocus();
|
||||
if (self.options.clickable) {
|
||||
getPlaceByLatLng(event.latLng, self.map.getBounds(), function(place) {
|
||||
if (self.options.clickable/* && !editing()*/) {
|
||||
getPlaceByLatLng(event.latLng, self.map.getBounds(), function(place) {
|
||||
if (place) {
|
||||
addPlace(place);
|
||||
selectPlace(place.id);
|
||||
|
|
@ -9552,7 +9621,7 @@ requires
|
|||
if (self.$placeButton.options('title') == 'New Place') {
|
||||
addNewPlace();
|
||||
} else {
|
||||
var place = getPlaceById(self.selected),
|
||||
var place = getSelectedPlace(),
|
||||
data = {
|
||||
place: {}
|
||||
};
|
||||
|
|
@ -9568,6 +9637,57 @@ requires
|
|||
}
|
||||
}
|
||||
|
||||
function constructZoomInput() {
|
||||
Ox.print('constructZoomInput', self.minZoom, self.maxZoom)
|
||||
if (self.options.zoombar) {
|
||||
self.$zoomInput && self.$zoomInput.remove();
|
||||
self.$zoomInput = new Ox.Range({
|
||||
arrows: true,
|
||||
max: self.maxZoom,
|
||||
min: self.minZoom,
|
||||
size: self.options.width,
|
||||
thumbSize: 32,
|
||||
thumbValue: true,
|
||||
value: self.map.getZoom()
|
||||
})
|
||||
.bindEvent({
|
||||
change: changeZoom
|
||||
})
|
||||
.appendTo(self.$zoombar);
|
||||
}
|
||||
}
|
||||
|
||||
function editing() {
|
||||
return self.selected && getSelectedPlace().editing;
|
||||
}
|
||||
|
||||
function getMapHeight() {
|
||||
return self.options.height -
|
||||
self.options.statusbar * 24 -
|
||||
self.options.toolbar * 24 -
|
||||
self.options.zoombar * 16;
|
||||
}
|
||||
|
||||
function getMapType() {
|
||||
return self.options.labels ? 'HYBRID' : 'SATELLITE'
|
||||
}
|
||||
|
||||
function getMaxZoom(point, callback) {
|
||||
if (arguments.length == 1) {
|
||||
callback = point;
|
||||
point = self.map.getCenter();
|
||||
}
|
||||
self.maxZoomService.getMaxZoomAtLatLng(point, function(data) {
|
||||
callback(data.status == 'OK' ? data.zoom : -1);
|
||||
});
|
||||
}
|
||||
|
||||
function getMinZoom() {
|
||||
return Math.ceil(
|
||||
Ox.log(self.mapHeight / Ox.MAP_TILE_SIZE, 2)
|
||||
)
|
||||
}
|
||||
|
||||
function getPlaceById(id) {
|
||||
var place = Ox.getObjectById(self.places, id);
|
||||
if (!place && self.resultPlace && self.resultPlace.id == id) {
|
||||
|
|
@ -9629,17 +9749,6 @@ requires
|
|||
});
|
||||
}
|
||||
|
||||
function getMapHeight() {
|
||||
return self.options.height -
|
||||
self.options.statusbar * 24 -
|
||||
self.options.toolbar * 24 -
|
||||
self.options.zoombar * 16;
|
||||
}
|
||||
|
||||
function getMapType() {
|
||||
return self.options.labels ? 'HYBRID' : 'SATELLITE'
|
||||
}
|
||||
|
||||
function getPositionByName(name) {
|
||||
var position = -1;
|
||||
$.each(self.options.places, function(i, place) {
|
||||
|
|
@ -9651,9 +9760,14 @@ requires
|
|||
return position;
|
||||
}
|
||||
|
||||
function getSelectedPlace() {
|
||||
return self.selected ? getPlaceById(self.selected) : null;
|
||||
}
|
||||
|
||||
function initMap() {
|
||||
var mapBounds;
|
||||
self.geocoder = new google.maps.Geocoder();
|
||||
self.maxZoomService = new google.maps.MaxZoomService();
|
||||
self.places = [];
|
||||
self.options.places.forEach(function(place, i) {
|
||||
var placeBounds = new google.maps.LatLngBounds(
|
||||
|
|
@ -9674,24 +9788,51 @@ requires
|
|||
mapTypeId: google.maps.MapTypeId[getMapType()],
|
||||
zoom: self.zoom
|
||||
});
|
||||
google.maps.event.addListener(self.map, 'bounds_changed', boundsChanged);
|
||||
google.maps.event.addListener(self.map, 'center_changed', centerChanged);
|
||||
google.maps.event.addListener(self.map, 'click', clickMap);
|
||||
google.maps.event.addListener(self.map, 'idle', mapChanged);
|
||||
google.maps.event.addListener(self.map, 'zoom_changed', zoomChanged);
|
||||
if (mapBounds) {
|
||||
self.map.fitBounds(mapBounds);
|
||||
self.zoom = self.map.getZoom();
|
||||
}
|
||||
// fixme: use tilesloaded event!
|
||||
/*
|
||||
setTimeout(function() {
|
||||
Ox.forEach(self.$navigationButtons, function(button) {
|
||||
button.appendTo(self.$map);
|
||||
});
|
||||
}, 1000);
|
||||
*/
|
||||
self.options.places.forEach(function(place, i) {
|
||||
self.places[i] = new Ox.MapPlace(Ox.extend({
|
||||
map: that
|
||||
}, place)).add();
|
||||
});
|
||||
google.maps.event.addListener(self.map, 'click', clickMap);
|
||||
google.maps.event.addListener(self.map, 'zoom_changed', zoomChanged);
|
||||
google.maps.event.trigger(self.map, 'resize');
|
||||
that.gainFocus();
|
||||
that.triggerEvent('load');
|
||||
}
|
||||
|
||||
function mapChanged() {
|
||||
// gets called after panning or zooming
|
||||
Ox.print('mapChanged');
|
||||
if (self.centerChanged) {
|
||||
getMaxZoom(function(zoom) {
|
||||
if (zoom != self.maxZoom) {
|
||||
self.maxZoom = zoom;
|
||||
constructZoomInput();
|
||||
}
|
||||
});
|
||||
}
|
||||
self.boundsChanged = false;
|
||||
self.centerChanged = false;
|
||||
self.zoomChanged = false;
|
||||
}
|
||||
|
||||
function pan(x, y) {
|
||||
self.map.panBy(x * self.options.width / 2, y * getMapHeight() / 2);
|
||||
self.map.panBy(x * self.options.width / 2, y * self.mapHeight / 2);
|
||||
};
|
||||
|
||||
function parseGeodata(data) {
|
||||
|
|
@ -9737,13 +9878,25 @@ requires
|
|||
return place;
|
||||
}
|
||||
|
||||
function pressEscape() {
|
||||
var place;
|
||||
if (self.selected) {
|
||||
place = getPlaceById(self.selected);
|
||||
function pressEnter() {
|
||||
var place = getSelectedPlace();
|
||||
if (place) {
|
||||
if (place.editing) {
|
||||
place.submit();
|
||||
} else if (place.selected) {
|
||||
} else {
|
||||
place.edit();
|
||||
}
|
||||
} else if (self.resultPlace) {
|
||||
self.resultPlace.select();
|
||||
}
|
||||
}
|
||||
|
||||
function pressEscape() {
|
||||
var place = getSelectedPlace();
|
||||
if (place) {
|
||||
if (place.editing) {
|
||||
place.cancel();
|
||||
} else {
|
||||
place.deselect();
|
||||
}
|
||||
} else if (self.resultPlace) {
|
||||
|
|
@ -9763,11 +9916,28 @@ requires
|
|||
self.map.fitBounds(self.bounds);
|
||||
}
|
||||
|
||||
function resizeMap() {
|
||||
Ox.print('resizeMap', self.options.width, self.options.height);
|
||||
var center = self.map.getCenter();
|
||||
self.mapHeight = getMapHeight();
|
||||
self.minZoom = getMinZoom();
|
||||
that.css({
|
||||
height: self.options.height + 'px',
|
||||
width: self.options.width + 'px'
|
||||
});
|
||||
self.$map.css({
|
||||
height: self.mapHeight + 'px',
|
||||
width: self.options.width + 'px'
|
||||
});
|
||||
google.maps.event.trigger(self.map, 'resize');
|
||||
self.map.setCenter(center);
|
||||
}
|
||||
|
||||
function selectPlace(id) {
|
||||
Ox.print('Ox.Map selectPlace()', id, self.selected)
|
||||
var place;
|
||||
if (id != self.selected) {
|
||||
place = getPlaceById(self.selected);
|
||||
place = getSelectedPlace();
|
||||
place && place.deselect();
|
||||
place = getPlaceById(id);
|
||||
place && place.select();
|
||||
|
|
@ -9829,19 +9999,10 @@ requires
|
|||
});
|
||||
}
|
||||
|
||||
function resizeMap() {
|
||||
Ox.print('w', self.options.width, 'h', self.options.height);
|
||||
var center = self.map.getCenter();
|
||||
that.css({
|
||||
height: self.options.height + 'px',
|
||||
width: self.options.width + 'px'
|
||||
});
|
||||
self.$map.css({
|
||||
height: getMapHeight() + 'px',
|
||||
width: self.options.width + 'px'
|
||||
});
|
||||
google.maps.event.trigger(self.map, 'resize');
|
||||
self.map.setCenter(center);
|
||||
function undo() {
|
||||
Ox.print('Map undo')
|
||||
var place = getSelectedPlace();
|
||||
place.editing && place.undo();
|
||||
}
|
||||
|
||||
function zoom(z) {
|
||||
|
|
@ -9850,10 +10011,17 @@ requires
|
|||
|
||||
function zoomChanged() {
|
||||
var zoom = self.map.getZoom();
|
||||
self.options.zoombar && self.$zoomInput.options({value: zoom});
|
||||
that.triggerEvent('zoom', {
|
||||
value: zoom
|
||||
});
|
||||
if (zoom < self.minZoom) {
|
||||
self.map.setZoom(self.minZoom);
|
||||
} else if (self.maxZoom && zoom > self.maxZoom) {
|
||||
self.map.setZoom(self.maxZoom);
|
||||
} else {
|
||||
self.zoomChanged = true;
|
||||
self.$zoomInput && self.$zoomInput.options({value: zoom});
|
||||
that.triggerEvent('zoom', {
|
||||
value: zoom
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function zoomToPlace() {
|
||||
|
|
@ -9987,7 +10155,6 @@ requires
|
|||
n: new google.maps.LatLng(place.north, place.lng),
|
||||
ne: new google.maps.LatLng(place.north, place.east),
|
||||
};
|
||||
Ox.print('PLACE', place)
|
||||
marker = Marker(place);
|
||||
polygon = Polygon(place);
|
||||
selected = false;
|
||||
|
|
@ -10246,7 +10413,7 @@ requires
|
|||
self.options.width = that.$element.width();
|
||||
Ox.print(self.options.width, self.options.height)
|
||||
self.$map.css({
|
||||
height: getMapHeight() + 'px',
|
||||
height: self.mapHeight + 'px',
|
||||
width: self.options.width + 'px'
|
||||
});
|
||||
google.maps.event.trigger(self.map, 'resize');
|
||||
|
|
@ -10294,6 +10461,7 @@ requires
|
|||
update();
|
||||
|
||||
function update() {
|
||||
Ox.print('PLACE UPDATE', that.marker);
|
||||
that.points = {
|
||||
ne: new google.maps.LatLng(that.north, that.east),
|
||||
sw: new google.maps.LatLng(that.south, that.west)
|
||||
|
|
@ -10327,7 +10495,7 @@ requires
|
|||
place: that
|
||||
});
|
||||
}
|
||||
Ox.print('PLACE', that)
|
||||
//Ox.print('PLACE', that)
|
||||
}
|
||||
|
||||
that.add = function() {
|
||||
|
|
@ -10336,6 +10504,14 @@ requires
|
|||
return that;
|
||||
};
|
||||
|
||||
that.cancel = function() {
|
||||
that.undo();
|
||||
that.editing = false;
|
||||
that.marker.update();
|
||||
that.polygon.deselect();
|
||||
return that;
|
||||
};
|
||||
|
||||
that.deselect = function() {
|
||||
that.editing && that.submit();
|
||||
that.selected = false;
|
||||
|
|
@ -10346,6 +10522,12 @@ 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.polygon.select();
|
||||
return that;
|
||||
|
|
@ -10374,9 +10556,18 @@ requires
|
|||
return that;
|
||||
};
|
||||
|
||||
that.update = function(str) {
|
||||
that.update = function() {
|
||||
update();
|
||||
}
|
||||
};
|
||||
|
||||
that.undo = function() {
|
||||
Ox.forEach(that.original, function(v, k) {
|
||||
that[k] = v;
|
||||
});
|
||||
that.update();
|
||||
that.marker.update();
|
||||
that.polygon.update();
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
|
|
@ -10394,15 +10585,14 @@ requires
|
|||
that[key] = val;
|
||||
});
|
||||
that.marker = new google.maps.Marker({
|
||||
position: that.place.center,
|
||||
raiseOnDrag: false,
|
||||
shape: {coords: [8, 8, 8], type: 'circle'},
|
||||
title: that.place.name
|
||||
});
|
||||
|
||||
setOptions();
|
||||
|
||||
function click() {
|
||||
var selected = null;
|
||||
if (!that.place.selected) {
|
||||
that.map.options({selected: that.place.id});
|
||||
} else if (that.map.getKey() == 'meta') {
|
||||
|
|
@ -10415,6 +10605,8 @@ requires
|
|||
}
|
||||
|
||||
function setOptions() {
|
||||
// fixme: setting draggable on cancel seems to make additional marker appear
|
||||
Ox.print('Marker setOptions')
|
||||
that.marker.setOptions({
|
||||
cursor: that.place.editing ? 'move' : 'pointer',
|
||||
draggable: that.place.editing,
|
||||
|
|
@ -10428,8 +10620,16 @@ requires
|
|||
new google.maps.Point(0, 0),
|
||||
new google.maps.Point(8, 8)
|
||||
),
|
||||
position: that.place.center
|
||||
position: that.place.center,
|
||||
visible: false
|
||||
});
|
||||
// workaround to prevent marker from appearing twice
|
||||
// after setting draggable from true to false
|
||||
setTimeout(function() {
|
||||
that.marker.setOptions({
|
||||
visible: true
|
||||
});
|
||||
}, 0);
|
||||
}
|
||||
|
||||
function dragstart(e) {
|
||||
|
|
@ -10564,6 +10764,7 @@ requires
|
|||
|
||||
that.deselect = function() {
|
||||
setOptions();
|
||||
Ox.print('MARKERS', that.markers)
|
||||
Ox.forEach(that.markers, function(marker) {
|
||||
marker.remove();
|
||||
});
|
||||
|
|
@ -10577,6 +10778,7 @@ requires
|
|||
|
||||
that.select = function() {
|
||||
setOptions();
|
||||
Ox.print('MARKERS', that.markers)
|
||||
Ox.forEach(that.markers, function(marker) {
|
||||
marker.add();
|
||||
});
|
||||
|
|
@ -10638,8 +10840,7 @@ requires
|
|||
function drag(e) {
|
||||
var lat = Ox.limit(e.latLng.lat(), Ox.MIN_LATITUDE, Ox.MAX_LATITUDE),
|
||||
lng = e.latLng.lng(),
|
||||
crossesDateline = Math.abs(lng - that.drag.lng) > 180,
|
||||
degreesPerMeter = Ox.getDegreesPerMeter(that.place.lat);
|
||||
crossesDateline = Math.abs(lng - that.drag.lng) > 180;
|
||||
that.drag = {
|
||||
lat: lat,
|
||||
lng: lng
|
||||
|
|
@ -10647,20 +10848,31 @@ requires
|
|||
Ox.print('e', e)
|
||||
if (that.position.indexOf('s') > -1) {
|
||||
that.place.south = lat;
|
||||
//Math.min(lat, that.place.north - degreesPerMeter);
|
||||
}
|
||||
if (that.position.indexOf('n') > -1) {
|
||||
that.place.north = lat;
|
||||
//Math.max(lat, that.place.south + degreesPerMeter);
|
||||
}
|
||||
if (that.position.indexOf('w') > -1) {
|
||||
that.place.west = lng;
|
||||
// Math.min(lng, that.place.east - degreesPerMeter);
|
||||
if (lng < that.place.east)
|
||||
that.place.west = lng;
|
||||
else
|
||||
that.place.east = lng;
|
||||
}
|
||||
if (that.position.indexOf('e') > -1) {
|
||||
that.place.east = lng;
|
||||
// Math.max(lng, that.place.west + degreesPerMeter)
|
||||
if (lng > that.place.west)
|
||||
that.place.east = lng;
|
||||
else
|
||||
that.place.west = lng;
|
||||
}
|
||||
Ox.print('west', that.place.west, 'east', that.place.east);
|
||||
/*
|
||||
if (that.place.west > that.place.east) {
|
||||
var west = that.place.west;
|
||||
that.place.west = that.place.east;
|
||||
that.place.east = west;
|
||||
}
|
||||
*/
|
||||
|
||||
that.place.update();
|
||||
that.place.marker.update();
|
||||
that.place.polygon.update();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue