BiG-CZ Map Popups

src/mmw/js/src/core/views.js

@@ -681,13 +681,22 @@ var MapView = Marionette.ItemView.extend({
     },
 
     createDataCatalogShape: function(geom) {
+        var geomId = geom && geom.properties.id,
+            style = dataCatalogPolygonStyle,
+            pointToLayer = null;
+
         if (geom.type === 'Point') {
-            var lng = geom.coordinates[0],
-                lat = geom.coordinates[1];
-            return new L.CircleMarker([lat, lng], dataCatalogPointStyle);
-        } else {
-            return new L.GeoJSON(geom, { style: dataCatalogPolygonStyle });
+            style = dataCatalogPointStyle;
+            pointToLayer = function (feature, latlng) {
+                return L.circleMarker(latlng);
+            };
         }
+
+        return new L.GeoJSON(geom, {
+            style: style,
+            id: geomId,
+            pointToLayer: pointToLayer
+        });
     },
 
     renderDataCatalogResults: function() {
@@ -722,6 +731,15 @@ var MapView = Marionette.ItemView.extend({
         }
     },
 
+    bindDataCatalogPopovers: function(PopoverView, catalogId, resultModels) {
+        this._dataCatalogResultsLayer.eachLayer(function(layer) {
+                layer.bindPopup(new PopoverView({
+                    model: resultModels.findWhere({ id: layer.options.id }),
+                    catalog: catalogId
+                }).render().el, { className: 'data-catalog-popover' });
+        });
+    },
+
     renderSelectedGeocoderArea: function() {
         var geom = this.model.get('selectedGeocoderArea');
 

src/mmw/js/src/data_catalog/models.js

@@ -27,6 +27,14 @@ var Catalog = Backbone.Model.extend({
         is_pageable: true,
         page: 1,
         error: '',
+        detail_result: null
+    },
+
+    initialize: function() {
+        var self = this;
+        this.get('results').on('change:show_detail', function() {
+            self.set('detail_result', self.get('results').getDetail());
+        });
     },
 
     searchIfNeeded: function(query, fromDate, toDate, bbox) {
@@ -153,7 +161,8 @@ var Result = Backbone.Model.extend({
         geom: null, // GeoJSON
         links: null, // Array
         created: '',
-        updated: ''
+        updated: '',
+        show_detail: false // Show this result as the detail view?
     },
 
     getSummary: function() {
@@ -190,13 +199,53 @@ var Results = Backbone.Collection.extend({
 
     parse: function(response) {
         var aoi = App.map.get('areaOfInterest'),
-            data = _.findWhere(response, { catalog: this.catalog });
-
-        // Filter results to only include those without geometries (Hydroshare)
-        // and those that intersect the area of interest (CINERGI and CUAHSI).
-        return _.filter(data.results, function(r) {
-            return r.geom === null || turfIntersect(aoi, r.geom) !== undefined;
+            data = _.findWhere(response, { catalog: this.catalog }),
+            // Filter results to only include those without geometries (Hydroshare)
+            // and those that intersect the area of interest (CINERGI and CUAHSI).
+            filteredResults = _.filter(data.results, function(r) {
+                return r.geom === null || turfIntersect(aoi, r.geom) !== undefined;
+            });
+
+        // Add the result's id onto the geojson's geom so the map can keep
+        // track of which shape came from where
+        return _.map(filteredResults, function(r) {
+            if (r.geom) {
+                r.geom.properties = {
+                    id: r.id
+                };
+            }
+            return r;
         });
+    },
+
+    getDetail: function() {
+        return this.findWhere({ show_detail: true});
+    },
+
+    showDetail: function(result) {
+        var currentDetail = this.getDetail();
+
+        if (currentDetail) {
+            // Do nothing if the selected result is already the detail shown
+            if (currentDetail.get('id') === result.get('id')) {
+                return;
+            }
+            // Turn off the actively shown detail. There should only be
+            // one with `show_detail` true at a time
+            currentDetail.set('show_detail', false);
+        }
+
+        result.set('show_detail', true);
+    },
+
+    closeDetail: function() {
+        var currentDetail = this.getDetail();
+
+        if (!currentDetail) {
+            return;
+        }
+
+        currentDetail.set('show_detail', false);
     }
 });
 

src/mmw/js/src/data_catalog/templates/resultMapPopover.html

@@ -0,0 +1,2 @@
+<div class="data-catalog-popover-result-region"></div>
+<button class="btn btn-sm data-catalog-popover-details-btn">Details</button>

src/mmw/js/src/data_catalog/views.js

@@ -18,7 +18,8 @@ var $ = require('jquery'),
     headerTmpl = require('./templates/header.html'),
     windowTmpl = require('./templates/window.html'),
     resultDetailsTmpl = require('./templates/resultDetails.html'),
-    resultsWindowTmpl = require('./templates/resultsWindow.html');
+    resultsWindowTmpl = require('./templates/resultsWindow.html'),
+    resultMapPopoverTmpl = require('./templates/resultMapPopover.html');
 
 var ENTER_KEYCODE = 13,
     PAGE_SIZE = settings.get('data_catalog_page_size'),
@@ -85,12 +86,11 @@ var DataCatalogWindow = Marionette.LayoutView.extend({
     childEvents: {
         'search': 'doSearch',
         'selectCatalog': 'onSelectCatalog',
-        'selectResult': 'onSelectResult',
-        'closeDetails': 'onCloseDetails'
     },
 
     collectionEvents: {
-        'change:active change:loading': 'updateMap'
+        'change:active change:loading': 'updateMap',
+        'change:detail_result': 'onDetailResultChange'
     },
 
     onShow: function() {
@@ -123,16 +123,21 @@ var DataCatalogWindow = Marionette.LayoutView.extend({
         this.doSearch();
     },
 
-    onSelectResult: function(childView, result) {
-        var activeCatalog = this.getActiveCatalog();
+    onDetailResultChange: function() {
+        var activeCatalog = this.getActiveCatalog(),
+            detailResult = activeCatalog.get('detail_result');
 
-        this.detailsRegion.show(new ResultDetailsView({
-            model: result,
-            activeCatalog: activeCatalog.id
-        }));
+        if (!detailResult) {
+            this.closeDetails();
+        } else {
+            this.detailsRegion.show(new ResultDetailsView({
+                model: detailResult,
+                activeCatalog: activeCatalog.id
+            }));
+        }
     },
 
-    onCloseDetails: function() {
+    closeDetails: function() {
         this.detailsRegion.empty();
     },
 
@@ -155,6 +160,9 @@ var DataCatalogWindow = Marionette.LayoutView.extend({
         var catalog = this.getActiveCatalog(),
             geoms = catalog && catalog.get('results').pluck('geom');
         App.map.set('dataCatalogResults', geoms);
+        if (catalog) {
+            App.getMapView().bindDataCatalogPopovers(ResultMapPopoverView, catalog.id, catalog.get('results'));
+        }
     }
 });
 
@@ -320,14 +328,6 @@ var TabContentView = Marionette.LayoutView.extend({
         'change:active': 'toggleActiveClass',
     },
 
-    childEvents: {
-        'selectResult': 'handleChildSelectResult'
-    },
-
-    handleChildSelectResult: function(view, result) {
-        this.triggerMethod('selectResult', result);
-    },
-
     onShow: function() {
         this.toggleActiveClass();
 
@@ -392,7 +392,7 @@ var ResultView = Marionette.ItemView.extend({
     },
 
     selectResult: function() {
-        this.triggerMethod('selectResult', this.model);
+        this.model.collection.showDetail(this.model);
     },
 
     highlightResult: function() {
@@ -413,14 +413,6 @@ var ResultsView = Marionette.CollectionView.extend({
         };
     },
 
-    childEvents: {
-        'selectResult': 'handleChildSelectResult'
-    },
-
-    handleChildSelectResult: function(view, result) {
-        this.triggerMethod('selectResult', result);
-    },
-
     modelEvents: {
         'sync error': 'render'
     }
@@ -448,7 +440,36 @@ var ResultDetailsView = Marionette.ItemView.extend({
     },
 
     closeDetails: function() {
-        this.triggerMethod('closeDetails');
+        this.model.collection.closeDetail();
+    }
+});
+
+var ResultMapPopoverView = Marionette.LayoutView.extend({
+    template: resultMapPopoverTmpl,
+
+    regions: {
+        'resultRegion': '.data-catalog-popover-result-region'
+    },
+
+    className: 'data-catalog-resource-popover',
+
+    ui: {
+        'detailsButton': '.data-catalog-popover-details-btn'
+    },
+
+    events: {
+        'click @ui.detailsButton': 'selectResult'
+    },
+
+    onRender: function() {
+        this.resultRegion.show(new ResultView({
+            model: this.model,
+            catalog: this.options.catalog,
+        }));
+    },
+
+    selectResult: function() {
+        this.model.collection.showDetail(this.model);
     }
 });
 

src/mmw/sass/base/_map.scss

@@ -253,3 +253,13 @@
     padding: 0;
   }
 }
+
+
+div.leaflet-popup.data-catalog-popover.leaflet-zoom-animated
+div.leaflet-popup-content-wrapper {
+    border-radius: 0px;
+    div.leaflet-popup-content {
+        margin-left: 10px;
+        margin-bottom: 10px;
+    }
+}

src/mmw/sass/pages/_data-catalog.scss

@@ -219,3 +219,16 @@
         }
     }
 }
+
+.data-catalog-resource-popover {
+    .resource .resource-description {
+        color: #787878;
+        font-size: 13px;
+        padding-bottom: 3px;
+    }
+
+    .data-catalog-popover-details-btn {
+        border-radius: 0px;
+        margin-top: 10px;
+    }
+}