make Ox.Map lead geocode results, in case someone wants to 'cache' them
This commit is contained in:
parent
7380595c7e
commit
506a2f2923
9 changed files with 97 additions and 31 deletions
|
@ -11,7 +11,7 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
|
||||||
|
|
||||||
//Ox.print('$$$$', Ox.Calendar)
|
//Ox.print('$$$$', Ox.Calendar)
|
||||||
|
|
||||||
new Ox.Calendar({
|
Ox.Calendar({
|
||||||
date: new Date(0),
|
date: new Date(0),
|
||||||
dates: [
|
dates: [
|
||||||
{name: 'Genghis Khan', start: new Date('1162'), stop: new Date('1228'), type: 'Person'},
|
{name: 'Genghis Khan', start: new Date('1162'), stop: new Date('1228'), type: 'Person'},
|
||||||
|
|
|
@ -42,6 +42,11 @@ Ox.load('UI', {
|
||||||
}),
|
}),
|
||||||
width: window.innerWidth
|
width: window.innerWidth
|
||||||
})
|
})
|
||||||
|
.bindEvent({
|
||||||
|
geocode: function(event, data) {
|
||||||
|
Ox.print(JSON.stringify(data))
|
||||||
|
}
|
||||||
|
})
|
||||||
.appendTo(Ox.UI.$body);
|
.appendTo(Ox.UI.$body);
|
||||||
$(window).resize(function() {
|
$(window).resize(function() {
|
||||||
Ox.print('RESIZE', window.innerHeight)
|
Ox.print('RESIZE', window.innerHeight)
|
||||||
|
|
|
@ -20,7 +20,7 @@ Ox.Picker = function(options, self) {
|
||||||
.click(showMenu)
|
.click(showMenu)
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
|
|
||||||
self.$menu = new Ox.Element({})
|
self.$menu = new Ox.Element()
|
||||||
.addClass('OxPicker')
|
.addClass('OxPicker')
|
||||||
.css({
|
.css({
|
||||||
width: self.options.elementWidth + 'px',
|
width: self.options.elementWidth + 'px',
|
||||||
|
|
|
@ -9,7 +9,7 @@ Ox.PlacePicker = function(options, self) {
|
||||||
}),
|
}),
|
||||||
that;
|
that;
|
||||||
|
|
||||||
self.$element = new Ox.Element({})
|
self.$element = new Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
width: '256px',
|
width: '256px',
|
||||||
height: '192px'
|
height: '192px'
|
||||||
|
@ -33,7 +33,7 @@ Ox.PlacePicker = function(options, self) {
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
.append(
|
.append(
|
||||||
self.$container = new Ox.Element({})
|
self.$container = new Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
width: '256px',
|
width: '256px',
|
||||||
height: '160px'
|
height: '160px'
|
||||||
|
|
|
@ -265,6 +265,9 @@ Ox.ListMap = function(options, self) {
|
||||||
addplace: function(event, data) {
|
addplace: function(event, data) {
|
||||||
that.triggerEvent('addplace', data);
|
that.triggerEvent('addplace', data);
|
||||||
},
|
},
|
||||||
|
geocode: function(event, data) {
|
||||||
|
that.triggerEvent('geocode', data);
|
||||||
|
},
|
||||||
resize: function() {
|
resize: function() {
|
||||||
self.$map.resizeMap(); // fixme: don't need event
|
self.$map.resizeMap(); // fixme: don't need event
|
||||||
},
|
},
|
||||||
|
|
|
@ -131,7 +131,7 @@ Ox.Map = function(options, self) {
|
||||||
.appendTo(self.$toolbar)
|
.appendTo(self.$toolbar)
|
||||||
}
|
}
|
||||||
|
|
||||||
self.$map = new Ox.Element({})
|
self.$map = new Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
left: 0,
|
left: 0,
|
||||||
top: self.options.toolbar * 24 + 'px',
|
top: self.options.toolbar * 24 + 'px',
|
||||||
|
@ -317,6 +317,7 @@ Ox.Map = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function canContain(outerBounds, innerBounds) {
|
function canContain(outerBounds, innerBounds) {
|
||||||
|
// checks if outerBounds _can_ contain innerBounds
|
||||||
var outerSpan = outerBounds.toSpan(),
|
var outerSpan = outerBounds.toSpan(),
|
||||||
innerSpan = innerBounds.toSpan();
|
innerSpan = innerBounds.toSpan();
|
||||||
return outerSpan.lat() > innerSpan.lat() &&
|
return outerSpan.lat() > innerSpan.lat() &&
|
||||||
|
@ -336,6 +337,7 @@ Ox.Map = function(options, self) {
|
||||||
Ox.print('Ox.Map clickMap')
|
Ox.print('Ox.Map clickMap')
|
||||||
if (self.options.clickable/* && !editing()*/) {
|
if (self.options.clickable/* && !editing()*/) {
|
||||||
getPlaceByLatLng(event.latLng, self.map.getBounds(), function(place) {
|
getPlaceByLatLng(event.latLng, self.map.getBounds(), function(place) {
|
||||||
|
Ox.print('>>>>', place)
|
||||||
if (place) {
|
if (place) {
|
||||||
addPlaceToMap(place);
|
addPlaceToMap(place);
|
||||||
//selectPlace(place.id);
|
//selectPlace(place.id);
|
||||||
|
@ -434,6 +436,7 @@ Ox.Map = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function getPlaceByLatLng(latlng, bounds, callback) {
|
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,
|
var callback = arguments.length == 3 ? callback : bounds,
|
||||||
bounds = arguments.length == 3 ? bounds : null;
|
bounds = arguments.length == 3 ? bounds : null;
|
||||||
|
@ -443,25 +446,30 @@ Ox.Map = function(options, self) {
|
||||||
Ox.print('results', results)
|
Ox.print('results', results)
|
||||||
var length = results.length;
|
var length = results.length;
|
||||||
if (status == google.maps.GeocoderStatus.OK) {
|
if (status == google.maps.GeocoderStatus.OK) {
|
||||||
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
|
if (bounds) {
|
||||||
if (bounds) {
|
Ox.forEach(results.reverse(), function(result, i) {
|
||||||
Ox.forEach(results.reverse(), function(result, i) {
|
if (
|
||||||
if (
|
i == length - 1 ||
|
||||||
i == length - 1 ||
|
canContain(bounds, result.geometry.bounds || result.geometry.viewport)
|
||||||
canContain(bounds, result.geometry.bounds || result.geometry.viewport)
|
) {
|
||||||
) {
|
callback(new Ox.MapPlace(parseGeodata(results[i])));
|
||||||
callback(new Ox.MapPlace(parseGeodata(results[i])));
|
return false;
|
||||||
return false;
|
}
|
||||||
}
|
});
|
||||||
});
|
|
||||||
} else {
|
|
||||||
callback(new Ox.MapPlace(parseGeodata(results[0])));
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
callback(null);
|
callback(new Ox.MapPlace(parseGeodata(results[0])));
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
status == google.maps.GeocoderStatus.OK ||
|
||||||
|
status == google.maps.GeocoderStatus.ZERO_RESULTS
|
||||||
|
) {
|
||||||
|
triggerGeocodeEvent({
|
||||||
|
latLng: latlng,
|
||||||
|
results: results
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
//Ox.print('geocode failed:', status);
|
Ox.print('geocode failed:', status);
|
||||||
callback(null);
|
callback(null);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -472,12 +480,16 @@ Ox.Map = function(options, self) {
|
||||||
address: name
|
address: name
|
||||||
}, function(results, status) {
|
}, function(results, status) {
|
||||||
if (status == google.maps.GeocoderStatus.OK) {
|
if (status == google.maps.GeocoderStatus.OK) {
|
||||||
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
|
callback(new Ox.MapPlace(parseGeodata(results[0])));
|
||||||
Ox.print('GEOCODER RESULT', results[0])
|
}
|
||||||
callback(new Ox.MapPlace(parseGeodata(results[0])));
|
if (
|
||||||
} else {
|
status == google.maps.GeocoderStatus.OK ||
|
||||||
callback(null);
|
status == google.maps.GeocoderStatus.ZERO_RESULTS
|
||||||
}
|
) {
|
||||||
|
triggerGeocodeEvent({
|
||||||
|
address: name,
|
||||||
|
results: results
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
Ox.print('geocode failed:', status);
|
Ox.print('geocode failed:', status);
|
||||||
callback(null);
|
callback(null);
|
||||||
|
@ -804,6 +816,41 @@ Ox.Map = function(options, self) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function triggerGeocodeEvent(data) {
|
||||||
|
// someone may want to cache google geocode data, so we fire an event.
|
||||||
|
// google puts functions like lat or lng on the objects' prototypes,
|
||||||
|
// so we create properly named properties, for json encoding
|
||||||
|
if (data.latLng) {
|
||||||
|
data.latLng = {
|
||||||
|
lat: data.latLng.lat(),
|
||||||
|
lng: data.latLng.lng()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
data.results.forEach(function(result) {
|
||||||
|
['bounds', 'viewport'].forEach(function(key) {
|
||||||
|
if (result.geometry[key]) {
|
||||||
|
result.geometry[key] = {
|
||||||
|
northEast: {
|
||||||
|
lat: result.geometry[key].getNorthEast().lat(),
|
||||||
|
lng: result.geometry[key].getNorthEast().lng()
|
||||||
|
},
|
||||||
|
southWest: {
|
||||||
|
lat: result.geometry[key].getSouthWest().lat(),
|
||||||
|
lng: result.geometry[key].getSouthWest().lng()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (result.geometry.location) {
|
||||||
|
result.geometry.location = {
|
||||||
|
lat: result.geometry.location.lat(),
|
||||||
|
lng: result.geometry.location.lng()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
that.triggerEvent('geocode', data);
|
||||||
|
}
|
||||||
|
|
||||||
function undo() {
|
function undo() {
|
||||||
Ox.print('Map undo')
|
Ox.print('Map undo')
|
||||||
var place = getSelectedPlace();
|
var place = getSelectedPlace();
|
||||||
|
|
|
@ -39,7 +39,7 @@ Ox.AnnotationPanel = function(options, self) {
|
||||||
|
|
||||||
self.$annotations = new Ox.List({
|
self.$annotations = new Ox.List({
|
||||||
construct: function(data) {
|
construct: function(data) {
|
||||||
return new Ox.Element({})
|
return new Ox.Element()
|
||||||
.addClass('OxAnnotation OxEditable OxTarget')
|
.addClass('OxAnnotation OxEditable OxTarget')
|
||||||
.html(Ox.parseHTML(data.value));
|
.html(Ox.parseHTML(data.value));
|
||||||
},
|
},
|
||||||
|
@ -68,11 +68,11 @@ Ox.AnnotationPanel = function(options, self) {
|
||||||
.appendTo(that.$content);
|
.appendTo(that.$content);
|
||||||
|
|
||||||
/*
|
/*
|
||||||
self.$annotations = new Ox.Element({})
|
self.$annotations = new Ox.Element()
|
||||||
.appendTo(that.$content);
|
.appendTo(that.$content);
|
||||||
self.$annotation = [];
|
self.$annotation = [];
|
||||||
self.options.items.forEach(function(item, i) {
|
self.options.items.forEach(function(item, i) {
|
||||||
self.$annotation[i] = new Ox.Element({})
|
self.$annotation[i] = new Ox.Element()
|
||||||
.addClass('OxAnnotation')
|
.addClass('OxAnnotation')
|
||||||
.html(item.value.replace(/\n/g, '<br/>'))
|
.html(item.value.replace(/\n/g, '<br/>'))
|
||||||
.click(function() {
|
.click(function() {
|
||||||
|
|
|
@ -85,7 +85,7 @@ Ox.BlockTimeline = function(options, self) {
|
||||||
|
|
||||||
function addLine(i) {
|
function addLine(i) {
|
||||||
// fixme: get URLs once, not once for every line
|
// fixme: get URLs once, not once for every line
|
||||||
self.$lines[i] = new Ox.Element({})
|
self.$lines[i] = new Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
top: i * (self.height + self.margin) + 'px',
|
top: i * (self.height + self.margin) + 'px',
|
||||||
width: self.options.width + 'px'
|
width: self.options.width + 'px'
|
||||||
|
|
11
source/Ox.js
11
source/Ox.js
|
@ -915,6 +915,17 @@ Ox.values = function(obj) {
|
||||||
return values;
|
return values;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Ox.walk = function(obj, fn) {
|
||||||
|
/*
|
||||||
|
>>> a = 0; Ox.walk({a: 1, b: {c: 2, d: 3}}, function(v, k) { a += Ox.isNumber(v) ? v : 0}); a
|
||||||
|
6
|
||||||
|
*/
|
||||||
|
Ox.forEach(obj, function(val, key) {
|
||||||
|
fn(val, key, obj);
|
||||||
|
Ox.walk(obj[key], fn);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
Ox.zip = function() {
|
Ox.zip = function() {
|
||||||
/*
|
/*
|
||||||
>>> Ox.zip([[0, 1], [2, 3], [4, 5]])
|
>>> Ox.zip([[0, 1], [2, 3], [4, 5]])
|
||||||
|
|
Loading…
Reference in a new issue