Various event-map usability improvements, and expand clusters on zoom.

Resolves ticket #877408 (https://bugzilla.mozilla.org/show_bug.cgi?id=877408).

assets/css/events.less

@@ -6,6 +6,7 @@
 
 body#events {
     * { box-sizing: border-box; }
+    #map-canvas * { box-sizing: content-box; }
     main {
         margin-bottom: 0px;
     }

controllers/events.js

@@ -164,14 +164,27 @@ module.exports = function (init) {
                     type: match[1],
                     data: new Buffer(match[2], 'base64')
                 } : undefined
-            }
+            },
+            address: function (event) {
+                if ('latitude' in event && 'longitude' in event)
+                    return event.address;
+            },
+            latitude: function (event) {
+                if ('address' in event && 'longitude' in event)
+                    return event.latitude;
+            },
+            longitude: function (event) {
+                if ('address' in event && 'latitude' in event)
+                    return event.longitude;
+            },
         };
         // pre-process the Date/Time fields
         ['begin', 'end'].forEach(function (pfx) {
             datetime_transform('Date', function (val) {
-                return new Date(val.split(/[-\/]/));
+                return val ? new Date(val.split(/[-\/]/)) : null;
             });
             datetime_transform('Time', function (val) {
+                if (!val) return null;
                 var m = val.match(/^(\d+):(\d+)\s*([ap]m)$/);
                 return m ? new Date(0, 0, 0,
                     m[1] % 12 + (m[3] == "pm") * 12, m[2]) : null;

static/js/events/map/forms.js

@@ -5,7 +5,8 @@ function ($, EventModel, forms) { return function (mapMaker) {
         ev.preventDefault();
         $findForm.submit();
     });
-    var $when = $findForm.find('input[name="find-when"]');
+    var $when  = $findForm.find('input[name="find-when"]'),
+        $where = $findForm.find('input[name="find-where"]');
     $findForm.on("submit", function(ev) {
         ev.preventDefault();
         EventModel.all(function (models) {
@@ -30,7 +31,8 @@ function ($, EventModel, forms) { return function (mapMaker) {
             }
         });
     });
-    mapMaker.setupAutocomplete($('input[name="find-where"]')[0], true, function (place) {
+    mapMaker.setupAutocomplete($where[0], true, function (place) {
+        mapMaker.closeInfoWindow();
         if (place.geometry) {
             // If the place has a geometry, then present it on a map.
             if (place.geometry.viewport) {
@@ -39,6 +41,8 @@ function ($, EventModel, forms) { return function (mapMaker) {
                 this.google_map.setCenter(place.geometry.location);
                 this.google_map.setZoom(14);
             }
+        } else {
+            this.updateLocation();
         }
     });
 
@@ -66,7 +70,13 @@ function ($, EventModel, forms) { return function (mapMaker) {
                 console.log(data.event);
                 if (data.event) {
                     toggleCreateForm();
-                    mapMaker.addMarker(new EventModel(data.event));
+                    scroll();
+                    var evt = new EventModel(data.event);
+                    $where.val('');
+                    mapMaker.google_map.setCenter(
+                        new google.maps.LatLng(evt.latitude, evt.longitude)
+                    );
+                    mapMaker.addMarker(evt);
                 }
             }, 'json');
         },

static/js/events/map/index.js

@@ -38,13 +38,16 @@ function ($, google, MapMaker, EventForms) {
     var mcOptions = {
         gridSize: 20,
         maxZoom: 15,    // Don't cluster after this zoom level
-                        // Clicking on a cluster goes to zoom 16,
-                        //  we don't want clusters at this level.
+                        // (clicking on a cluster goes to zoom 16)
         imagePath: "/img/map/c",
         imageSizes: [43, 43, 43, 43, 43]
     };
+    var omsOptions = {
+        keepSpiderfied: true,
+        legWeight: 0.8
+    };
 
-    var mapMaker = new MapMaker($('#map-canvas')[0], mapOptions, mcOptions);
+    var mapMaker = new MapMaker($('#map-canvas')[0], mapOptions, mcOptions, omsOptions);
     mapMaker.setupInfoWindow();
     mapMaker.updateLocation() ;
 

static/js/events/map/map_maker.js

@@ -1,7 +1,7 @@
 define(['jquery', 'google', 'infobubble', 'oms', 'markerclusterer'],
 function ($, google, InfoBubble, OverlappingMarkerSpiderfier, MarkerClusterer) {
 
-    function MapMaker(map_canvas, mapOptions, mcOptions) {
+    function MapMaker(map_canvas, mapOptions, mcOptions, omsOptions) {
         this.map_canvas = map_canvas;
         this.google_map = new google.maps.Map(map_canvas, mapOptions);
         this.geocoder = new google.maps.Geocoder();
@@ -10,10 +10,31 @@ function ($, google, InfoBubble, OverlappingMarkerSpiderfier, MarkerClusterer) {
 
         var self = this;
         // this handles multiple markers at the same location
-        this.oms = new OverlappingMarkerSpiderfier(this.google_map);
+        this.oms = new OverlappingMarkerSpiderfier(this.google_map, omsOptions);
         this.oms.addListener('click', function(marker, evt) {
             self.showInfoWindow(marker);
         });
+        google.maps.event.addListener(this.google_map, 'zoom_changed', function(ev) {
+            setTimeout(function () {
+                if (self.google_map.getZoom() <= 15) return;
+                var markers = self.oms.markersNearAnyOtherMarker();
+                var seen = {};
+                var clusters = [];
+                var ID = '__gm_id';
+                self.oms.unspiderfy();
+                markers.forEach(function (m) {
+                    if (m[ID] in seen) return;
+                    self.oms.markersNearMarker(m).forEach(function (nm) {
+                        seen[nm[ID]] = true;
+                    });
+                    clusters.push(m);
+                    seen[m[ID]] = true;
+                });
+                clusters.forEach(function (m) {
+                    google.maps.event.trigger(m, 'click');
+                });
+            }, 400);
+        });
     }
     MapMaker.prototype.dropPins = function (models, animate, filter) {
         animate = (animate === undefined) ? true : animate;
@@ -61,6 +82,7 @@ function ($, google, InfoBubble, OverlappingMarkerSpiderfier, MarkerClusterer) {
     /* Delete all markers by removing references to them */
     MapMaker.prototype.clearMarkers = function () {
         this.markerManager.clearMarkers();
+        this.oms.clearMarkers();
     }
     MapMaker.prototype.getMarkers = function() {
         return this.markerManager.getMarkers();
@@ -125,7 +147,7 @@ function ($, google, InfoBubble, OverlappingMarkerSpiderfier, MarkerClusterer) {
         this.infoWindow.open(this.google_map, marker);
     };
     MapMaker.prototype.setupAutocomplete = function (input, cityLevel, cb) {
-        var options = { types: cityLevel ? ['(cities)'] : ['geocode', 'establishment'] }; // [] is all
+        var options = { types: cityLevel ? ['(regions)'] : ['geocode', 'establishment'] }; // [] is all
         var autocomplete = new google.maps.places.Autocomplete(input, options);
         autocomplete.bindTo('bounds', this.google_map);