Make google interaction code usable via wax.

control/g/interaction.js

@@ -5,30 +5,35 @@
 var wax = wax || {};
 wax.g = wax.g || {};
 
+// Controls constructor.
+wax.g.Controls = function(map) {
+    this.map = map;
+};
+
 // Since Google Maps obscures mouseover events, grids need to calculated
 // in order to simulate them, and eventually do multi-layer interaction.
-wax.g.calculateGrid = function(map) {
-  if (map.interaction_grid) return;
-  // Get all 'marked' tiles, added by the `wax.g.MapType` layer.
-  var interactive_tiles = $('.interactive-div-' + map.getZoom() + ' img', map.d);
-  var start_offset = $(map.d).offset();
-  // Return an array of objects which have the **relative** offset of
-  // each tile, with a reference to the tile object in `tile`, since the API
-  // returns evt coordinates as relative to the map object.
-  var tiles = $(interactive_tiles).map(function(t) {
-    var e_offset = $(interactive_tiles[t]).offset();
-    return {
-        xy: {
-            left: e_offset.left - start_offset.left,
-            top: e_offset.top - start_offset.top
-        },
-        tile: interactive_tiles[t]
-    };
-  });
-  return tiles;
+wax.g.Controls.prototype.calculateGrid = function() {
+    if (this.map.interaction_grid) return;
+    // Get all 'marked' tiles, added by the `wax.g.MapType` layer.
+    var interactive_tiles = $('.interactive-div-' + this.map.getZoom() + ' img', this.map.d);
+    var start_offset = $(this.map.d).offset();
+    // Return an array of objects which have the **relative** offset of
+    // each tile, with a reference to the tile object in `tile`, since the API
+    // returns evt coordinates as relative to the map object.
+    var tiles = $(interactive_tiles).map(function(t) {
+        var e_offset = $(interactive_tiles[t]).offset();
+        return {
+            xy: {
+                left: e_offset.left - start_offset.left,
+                top: e_offset.top - start_offset.top
+            },
+            tile: interactive_tiles[t]
+        };
+    });
+    return tiles;
 };
 
-wax.g.inTile = function(sevt, xy) {
+wax.g.Controls.prototype.inTile = function(sevt, xy) {
     if ((xy.top < sevt.y) &&
         ((xy.top + 256) > sevt.y) &&
          (xy.left < sevt.x) &&
@@ -37,52 +42,68 @@ wax.g.inTile = function(sevt, xy) {
     }
 };
 
-wax.g.Interaction = function(map) {
+wax.g.Controls.prototype.Interaction = function() {
+  var that = this;
   var gm = new wax.GridManager();
   var f = null;
   var find = function(map, evt) {
     var found = false;
-    var interaction_grid = wax.g.calculateGrid(map);
+    var interaction_grid = that.calculateGrid();
     for (var i = 0; i < interaction_grid.length && !found; i++) {
-      if (wax.g.inTile(evt.pixel, interaction_grid[i].xy)) {
+      if (that.inTile(evt.pixel, interaction_grid[i].xy)) {
           var found = interaction_grid[i];
       }
     }
     return found;
   };
-  google.maps.event.addListener(map, 'mousemove', function(evt) {
+  google.maps.event.addListener(this.map, 'mousemove', function(evt) {
     var options = { format: 'teaser' };
-    var found = find(map, evt);
+    var found = find(this.map, evt);
     if (!found) return;
     gm.getGrid($(found.tile).attr('src'), function(g) {
         if (!g) return;
         var feature = g.getFeature(
-          evt.pixel.x + $(map.d).offset().left,
-          evt.pixel.y + $(map.d).offset().top,
+          evt.pixel.x + $(that.map.d).offset().left,
+          evt.pixel.y + $(that.map.d).offset().top,
           found.tile,
           options
         );
         if (feature !== f) {
-          wax.tooltip.unselect(feature, $(map.d), 0);
-          wax.tooltip.select(feature, $(map.d), 0);
+          wax.tooltip.unselect(feature, $(that.map.d), 0);
+          wax.tooltip.select(feature, $(that.map.d), 0);
           f = feature;
         }
     });
   });
-  google.maps.event.addListener(map, 'click', function(evt) {
+  google.maps.event.addListener(this.map, 'click', function(evt) {
     var options = { format: 'full' };
-    var found = find(map, evt);
+    var found = find(this.map, evt);
     if (!found) return;
     gm.getGrid($(found.tile).attr('src'), function(g) {
         if (!g) return;
         var feature = g.getFeature(
-          evt.pixel.x + $(map.d).offset().left,
-          evt.pixel.y + $(map.d).offset().top,
+          evt.pixel.x + $(that.map.d).offset().left,
+          evt.pixel.y + $(that.map.d).offset().top,
           found.tile,
           options
         );
-        feature && wax.tooltip.click(feature, $(map.d), 0);
+        feature && wax.tooltip.click(feature, $(that.map.d), 0);
     });
   });
+  return this;
 };
 
+wax.g.Controls.prototype.Legend = function() {
+    var that = this,
+        legend = new wax.Legend($(this.map.d)),
+        url = null;
+
+    // Ideally we would use the 'tilesloaded' event here. This doesn't seem to
+    // work so we use the much less appropriate 'idle' event.
+    google.maps.event.addListener(this.map, 'idle', function() {
+        if (url) return;
+        var img = $('.interactive-div-' + that.map.getZoom() + ' img:first', that.map.d);
+        img && (url = img.attr('src')) && legend.render([url]);
+    });
+    return this;
+};

example/google_interaction.js

@@ -1,20 +1,21 @@
-// Google Maps Interaction Example
-var map;
-$(window).load(function() {
-    map = new google.maps.Map(
-        document.getElementById("google-canvas"), {
-            center: new google.maps.LatLng(0, 0),
-            zoom: 2,
-            mapTypeControlOptions: {
-                mapTypeIds: [google.maps.MapTypeId.ROADMAP]
-            }
-        }
-    );
-
-    // Create an assign the new maptype
-    map.mapTypes.set('mapbox', new wax.g.MapType());
-    map.setMapTypeId('mapbox');
-
-    wax.g.Interaction(map);
-    wax.g.Legend(map);
+$(function() {
+    var map = ['@group',
+        ['@new wax.g.Controls',
+            ['@group',
+                ['@new google.maps.Map',
+                    ['@call document.getElementById', 'google-canvas'],
+                    {
+                        center: ['@new google.maps.LatLng', 0, 0],
+                        zoom: 2,
+                        mapTypeId: [ '@literal google.maps.MapTypeId.ROADMAP' ]
+                    }
+                ],
+                ['@inject mapTypes.set', 'mb', ['@new wax.g.MapType']],
+                ['@inject setMapTypeId', 'mb']
+            ]
+        ],
+        ['@chain Interaction'],
+        ['@chain Legend']
+    ];
+    wax.Wax.reify(map);
 });

lib/record.js

@@ -74,7 +74,10 @@ wax.Wax = {
     runFunction: function(fn_name, args, cur) {
         var fn_obj = this.getFunction(fn_name, cur);
         var fn_args = args.length ? wax.Wax.reify(args) : [];
-        if (cur) {
+        // @TODO: This is currently a stopgap measure that calls methods like
+        // `foo.bar()` in the context of `foo`. It will probably be necessary
+        // in the future to be able to call `foo.bar()` from other contexts.
+        if (cur && fn_name.indexOf('.') === -1) {
             return fn_obj[1].apply(cur, fn_args);
         } else {
             return fn_obj[1].apply(fn_obj[0], fn_args);