more useful version of Ox.MapImage

source/Ox.UI/js/Map/Ox.MapImage.js

@@ -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) {
         
     };