diff --git a/source/Ox.UI/js/Map/Ox.MapImage.js b/source/Ox.UI/js/Map/Ox.MapImage.js index 18f6fbc7..04cf62d7 100644 --- a/source/Ox.UI/js/Map/Ox.MapImage.js +++ b/source/Ox.UI/js/Map/Ox.MapImage.js @@ -9,8 +9,7 @@ Ox.MapImage MapImage Object (options, self) -> MapImage Object options Options object height image height (px) - places array of either names (''), points ([0, 0]), - or objects ({name, point, highlight}) + place Object with south, west, north and east properties type map type ('hybrid', 'roadmap', 'satellite', 'terrain') width image width (px) self shared private variable @@ -21,44 +20,37 @@ Ox.MapImage = function(options, self) { var self = self || {}, that = Ox.Element('', 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 += '¢er=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) { };