more useful version of Ox.MapImage

This commit is contained in:
rolux 2012-04-01 23:05:53 +02:00
parent 6a39bdd3bd
commit fbc15dcadf

View file

@ -9,8 +9,7 @@ Ox.MapImage <f:Ox.Element> MapImage Object
(options, self) -> <f> MapImage Object
options <o> Options object
height <n|360> image height (px)
places <a|o|[]> array of either names (''), points ([0, 0]),
or objects ({name, point, highlight})
place <o|null> Object with south, west, north and east properties
type <s|satellite> map type ('hybrid', 'roadmap', 'satellite', 'terrain')
width <n|640> image width (px)
self <o> shared private variable
@ -21,44 +20,37 @@ Ox.MapImage = function(options, self) {
var self = self || {},
that = Ox.Element('<img>', self)
.defaults({
backgroundColor: [0, 0, 0, 0],
borderColor: [0, 0, 0, 0],
borderWidth: 0,
height: 360,
markerColorHighlight: 'yellow',
markerColorNormal: 'blue',
places: [],
place: null,
type: 'satellite',
width: 640
})
.options(options || {})
Ox.extend(self, {
markers: {
highlight: [],
normal: []
},
src: document.location.protocol + '//maps.google.com/maps/api/staticmap?sensor=false' +
'&size=' + self.options.width + 'x' + self.options.height +
'&maptype=' + self.options.type
});
self.src = document.location.protocol
+ '//maps.google.com/maps/api/staticmap?sensor=false' +
'&size=' + self.options.width + 'x' + self.options.height +
'&maptype=' + self.options.type;
if (self.options.places.length) {
self.options.places.forEach(function(place) {
if (Ox.isString(place)) {
self.markers.normal.push(place);
} else if (Ox.isArray(place)) {
self.markers.normal.push(place.join(','));
} else {
self.markers[place.highlight ? 'highlight' : 'normal']
.push('point' in place ? place.point.join(',') : place.name)
}
});
Ox.forEach(self.markers, function(markers, k) {
if (markers.length) {
self.src += '&markers=icon:' + 'http://dev.pan.do:8000' +
Ox.UI.PATH + 'png/marker' +
Ox.toTitleCase(self.options['markerColor' + Ox.toTitleCase(k)]) +
'.png|' + markers.join('|')
}
});
if (self.options.place) {
self.src += '&path=fillcolor:' + formatColor(self.options.backgroundColor)
+ '|color:0x' + formatColor(self.options.borderColor)
+ '|weight:' + self.options.borderWidth + '|'
+ [
['south', 'west'],
['north', 'west'],
['north', 'east'],
['south', 'east'],
['south', 'west']
].map(function(keys) {
return [
self.options.place[keys[0]],
self.options.place[keys[1]]
].join(',');
}).join('|');
} else {
self.src += '&center=0,0&zoom=2'
}
@ -67,6 +59,12 @@ Ox.MapImage = function(options, self) {
src: self.src
});
function formatColor(color) {
return color.map(function(c) {
return Ox.pad(c.toString(16), 2);
}).join('')
}
self.setOption = function(key, value) {
};