forked from 0x2620/oxjs
add some more documentation, pass some more tests
This commit is contained in:
parent
c6d67420a8
commit
f2dbfbd1e5
9 changed files with 589 additions and 494 deletions
|
|
@ -14,6 +14,7 @@ Ox.Map <function> Basic map object
|
|||
options <o|{}> options
|
||||
clickable <b|false> If true, clicking on the map finds a place
|
||||
editable <b|false> If true, places are editable
|
||||
find <s|""> Initial query
|
||||
findPlaceholder <s|"Find"> Placeholder text for the find input element
|
||||
maxMarkers <n|100> Maximum number of markers to be displayed
|
||||
places <[o]|f|null> Array of, or function that returns, place objects
|
||||
|
|
@ -97,6 +98,7 @@ Ox.Map = function(options, self) {
|
|||
// fixme: isClickable? hasZoombar?
|
||||
clickable: false,
|
||||
editable: false,
|
||||
find: '',
|
||||
findPlaceholder: 'Find',
|
||||
maxMarkers: 100,
|
||||
places: null,
|
||||
|
|
@ -570,15 +572,9 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
|
||||
function getMetersPerPixel() {
|
||||
// fixme: this is wrong when resizing the map horizontally
|
||||
var mapWidth = self.$map.width(),
|
||||
span = self.map.getBounds().toSpan().lng();
|
||||
/*
|
||||
if (span >= 360) {
|
||||
span = 360 * mapWidth / Ox.MAP_TILE_SIZE;
|
||||
}
|
||||
*/
|
||||
return Ox.getMetersPerDegree(self.map.getCenter().lat()) * span / mapWidth;
|
||||
// m/px = m/deg * deg/px
|
||||
var degreesPerPixel = 360 / (Ox.MAP_TILE_SIZE * Math.pow(2, self.map.getZoom()));
|
||||
return Ox.getMetersPerDegree(self.map.getCenter().lat()) * degreesPerPixel;
|
||||
}
|
||||
|
||||
function getMinZoom() {
|
||||
|
|
@ -726,9 +722,18 @@ Ox.Map = function(options, self) {
|
|||
google.maps.event.addListener(self.map, 'zoom_changed', zoomChanged);
|
||||
google.maps.event.addListenerOnce(self.map, 'tilesloaded', tilesLoaded);
|
||||
|
||||
mapBounds && self.map.fitBounds(mapBounds);
|
||||
if (self.map.getZoom() < self.minZoom) {
|
||||
self.map.setZoom(self.minZoom);
|
||||
if (self.options.find) {
|
||||
self.$findInput.options({value: self.options.find})
|
||||
.triggerEvent('submit', {value: self.options.find});
|
||||
} else if (self.options.selected) {
|
||||
selectPlace(self.options.selected);
|
||||
} else {
|
||||
mapBounds && self.map.fitBounds(mapBounds);
|
||||
///*
|
||||
if (self.map.getZoom() < self.minZoom) {
|
||||
self.map.setZoom(self.minZoom);
|
||||
}
|
||||
//*/
|
||||
}
|
||||
|
||||
self.places = [];
|
||||
|
|
@ -754,6 +759,11 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
}
|
||||
|
||||
function crossesDateline() {
|
||||
var bounds = self.map.getBounds();
|
||||
return bounds.getSouthWest().lng() > bounds.getNorthEast().lng();
|
||||
}
|
||||
|
||||
function mapChanged() {
|
||||
// gets called after panning or zooming
|
||||
Ox.print('mapChanged');
|
||||
|
|
@ -765,8 +775,7 @@ Ox.Map = function(options, self) {
|
|||
south = southWest.lat(),
|
||||
west = southWest.lng(),
|
||||
north = northEast.lat(),
|
||||
east = northEast.lng(),
|
||||
crossesDateline = west > east;
|
||||
east = northEast.lng();
|
||||
if (!self.isAsync) {
|
||||
self.places.sort(function(a, b) {
|
||||
var sort = {
|
||||
|
|
@ -784,31 +793,18 @@ Ox.Map = function(options, self) {
|
|||
}
|
||||
});
|
||||
} else {
|
||||
Ox.print('QUERY', {
|
||||
conditions: Ox.merge([
|
||||
{key: 'lat', value: [south, north], operator: '-'}
|
||||
], !crossesDateline ? [
|
||||
{key: 'lng', value: [west, east], operator: '-'}
|
||||
] : [
|
||||
{
|
||||
conditions: [
|
||||
{key: 'lng', value: west, operator: '<'},
|
||||
{key: 'lng', value: east, operator: '>'}
|
||||
],
|
||||
operator: '|'
|
||||
}
|
||||
]),
|
||||
operator: '&'
|
||||
});
|
||||
Ox.print ('sG cD', spansGlobe(), crossesDateline())
|
||||
self.options.places({
|
||||
keys: self.placeKeys,
|
||||
query: {
|
||||
conditions: Ox.merge([
|
||||
{key: 'lat', value: [south, north], operator: '-'}
|
||||
], !crossesDateline ? [
|
||||
{key: 'lng', value: [west, east], operator: '-'}
|
||||
] : [
|
||||
], spansGlobe() ? [
|
||||
{key: 'lng', value: [-180, 180], operator: '-'}
|
||||
] : crossesDateline() ? [
|
||||
{key: 'lng', value: [east, west], operator: '!-'}
|
||||
] : [
|
||||
{key: 'lng', value: [west, east], operator: '-'}
|
||||
]),
|
||||
operator: '&'
|
||||
},
|
||||
|
|
@ -1033,16 +1029,19 @@ Ox.Map = function(options, self) {
|
|||
keys: self.placeKeys,
|
||||
query: {
|
||||
conditions: [
|
||||
{key: 'id', value: id, operator: '='}
|
||||
]
|
||||
{key: 'id', value: id, operator: '=='}
|
||||
],
|
||||
operator: '&'
|
||||
}
|
||||
}, function(result) {
|
||||
if (result.data.items.length) {
|
||||
place = new Ox.MapPlace(Ox.extend({
|
||||
map: that
|
||||
}, result.data.items[0])).add();
|
||||
self.places.push(place);
|
||||
select();
|
||||
that.zoomToPlace();
|
||||
}
|
||||
}, function(results) {
|
||||
place = new Ox.MapPlace(Ox.extend({
|
||||
map: that
|
||||
}, results.data.items[0])).add();
|
||||
self.places.push(place);
|
||||
select();
|
||||
that.panToPlace();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
|
|
@ -1110,6 +1109,11 @@ Ox.Map = function(options, self) {
|
|||
//Ox.print('STATUS DONE');
|
||||
}
|
||||
|
||||
function spansGlobe() {
|
||||
// fixme: or self.options.width ??
|
||||
return self.$map.width() > Ox.MAP_TILE_SIZE * Math.pow(2, self.map.getZoom());
|
||||
};
|
||||
|
||||
function submitFind(data) {
|
||||
that.findPlace(data.value, function(place) {
|
||||
setStatus(place);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue