make Ox.Map lead geocode results, in case someone wants to 'cache' them

This commit is contained in:
rolux 2011-04-29 16:56:40 +02:00
parent 7380595c7e
commit 506a2f2923
9 changed files with 97 additions and 31 deletions

View file

@ -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'},

View file

@ -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)

View file

@ -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',

View file

@ -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'

View file

@ -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
}, },

View file

@ -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();

View file

@ -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() {

View file

@ -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'

View file

@ -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]])