adds legend HTML to map layers and map layer manager

arches/app/datatypes/datatypes.py

@@ -643,6 +643,8 @@ def get_map_layer(self, node=None, preview=False):
         if not preview and node.config["layerIcon"] != "":
             layer_icon = node.config["layerIcon"]
 
+        layer_legend = node.config["layerLegend"]
+
         if not preview and node.config["advancedStyling"]:
             try:
                 style = json.loads(node.config["advancedStyle"])
@@ -1007,6 +1009,7 @@ def get_map_layer(self, node=None, preview=False):
             "name": layer_name,
             "layer_definitions": layer_def,
             "icon": layer_icon,
+            "legend": layer_legend,
             "addtomap": node.config['addToMap'],
         }
 

arches/app/media/js/views/components/cards/map.js

@@ -33,8 +33,13 @@ define([
                     if (layer.addtomap) self.activeBasemap(layer);
                 }
                 else {
-                    layer.onMap = ko.observable(layer.addtomap);
-                    layer.opacity = ko.observable(100);
+                    layer.opacity = ko.observable(layer.addtomap ? 100 : 0);
+                    layer.onMap = ko.pureComputed({
+                        read: function() { return layer.opacity() > 0; },
+                        write: function(value) {
+                            layer.opacity(value ? 100 : 0);
+                        }
+                    });
                     self.overlays.push(layer);
                 }
             });

arches/app/media/js/views/components/datatypes/geojson-feature-collection.js

@@ -6,7 +6,8 @@ define([
     'bindings/color-picker',
     'bindings/mapbox-gl',
     'bindings/codemirror',
-    'codemirror/mode/javascript/javascript'
+    'codemirror/mode/javascript/javascript',
+    'bindings/ckeditor'
 ], function($, arches, ko, _) {
     var name = 'geojson-feature-collection-datatype-config';
     ko.components.register(name, {

arches/app/media/js/views/map-layer-manager.js

@@ -27,23 +27,24 @@ define([
         selectedList: ko.observable()
     };
 
-    vm.icons = ko.computed(function () {
-        return _.filter(data.icons, function (icon) {
+    vm.icons = ko.computed(function() {
+        return _.filter(data.icons, function(icon) {
             return icon.name.indexOf(vm.iconFilter()) >= 0;
         });
     });
     var mapLayers = ko.observableArray($.extend(true, [], arches.mapLayers));
     _.each(mapLayers(), function(layer) {
         layer._layer = ko.observable(JSON.stringify(layer));
-        layer.layerJSON = ko.observable(JSON.stringify(layer.layer_definitions, null, '\t'))
+        layer.layerJSON = ko.observable(JSON.stringify(layer.layer_definitions, null, '\t'));
         layer.activated = ko.observable(layer.activated);
         layer.addtomap = ko.observable(layer.addtomap);
         layer.name = ko.observable(layer.name);
         layer.icon = ko.observable(layer.icon);
+        layer.legend = ko.observable(layer.legend);
         layer.centerX = ko.observable(layer.centerx);
         layer.centerY = ko.observable(layer.centery);
         layer.zoom = ko.observable(layer.zoom);
-        layer.toJSON = ko.computed(function () {
+        layer.toJSON = ko.computed(function() {
             var layers;
             try {
                 layers = JSON.parse(layer.layerJSON());
@@ -57,18 +58,19 @@ define([
                 "layer_definitions": layers,
                 "isoverlay": layer.isoverlay,
                 "icon": layer.icon(),
+                "legend": layer.legend(),
                 "activated": layer.activated(),
                 "addtomap": layer.addtomap(),
                 "is_resource_layer": false,
                 "centerx": layer.centerX(),
                 "centery": layer.centerY(),
                 "zoom": layer.zoom()
-            })
+            });
         });
         layer.dirty = ko.computed(function() {
             return layer.toJSON() !== layer._layer();
-        })
-        layer.save = function () {
+        });
+        layer.save = function() {
             vm.loading(true);
             $.ajax({
                 type: "POST",
@@ -78,16 +80,16 @@ define([
                     layer._layer(layer.toJSON());
                     pageView.viewModel.loading(false);
                     var mapLayer = _.find(arches.mapLayers, function(mapLayer) {
-                        return mapLayer.maplayerid === layer.maplayerid
+                        return mapLayer.maplayerid === layer.maplayerid;
                     });
                     _.extend(mapLayer, JSON.parse(layer._layer()));
                     if (!mapLayer.isoverlay && mapLayer.addtomap) {
-                        _.each(vm.basemaps(), function (basemap) {
+                        _.each(vm.basemaps(), function(basemap) {
                             if (basemap.maplayerid !== layer.maplayerid) {
                                 basemap.addtomap(false);
                             }
                         });
-                        _.each(arches.mapLayers, function (mapLayer) {
+                        _.each(arches.mapLayers, function(mapLayer) {
                             if (!mapLayer.isoverlay && mapLayer.maplayerid !== layer.maplayerid) {
                                 mapLayer.addtomap = false;
                             }
@@ -99,18 +101,19 @@ define([
                 }
             });
         };
-        layer.reset = function () {
+        layer.reset = function() {
             var _layer = JSON.parse(layer._layer());
-            layer.layerJSON(JSON.stringify(_layer.layer_definitions, null, '\t'))
+            layer.layerJSON(JSON.stringify(_layer.layer_definitions, null, '\t'));
             layer.activated(_layer.activated);
             layer.addtomap(_layer.addtomap),
             layer.name(_layer.name);
             layer.icon(_layer.icon);
             layer.centerX(_layer.centerx);
             layer.centerY(_layer.centery);
             layer.zoom(_layer.zoom);
+            layer.legend(_layer.legend);
         };
-        layer.delete = function () {
+        layer.delete = function() {
             pageView.viewModel.alert(new AlertViewModel('ep-alert-red', arches.confirmMaplayerDelete.title, arches.confirmMaplayerDelete.text, function() {
                 return;
             }, function(){
@@ -143,14 +146,14 @@ define([
     vm.basemaps = ko.computed(function() {
         return _.filter(mapLayers(), function(layer) {
             return !layer.isoverlay;
-        })
+        });
     });
-    vm.basemaps().forEach(function (basemap) {
-        basemap.select = function () {
+    vm.basemaps().forEach(function(basemap) {
+        basemap.select = function() {
             vm.selectedBasemapName(basemap.name());
-        }
+        };
     });
-    var defaultBasemap = _.find(vm.basemaps(), function (basemap) {
+    var defaultBasemap = _.find(vm.basemaps(), function(basemap) {
         return basemap.addtomap();
     });
     if (!defaultBasemap) {
@@ -162,10 +165,10 @@ define([
     vm.overlays = ko.computed(function() {
         return _.filter(mapLayers(), function(layer) {
             return layer.isoverlay && !layer.is_resource_layer;
-        })
+        });
     });
 
-    var getBasemapLayers = function () {
+    var getBasemapLayers = function() {
         return _.filter(vm.basemaps(), function(layer) {
             return layer.name() === vm.selectedBasemapName();
         }).reduce(function(layers, layer) {
@@ -236,25 +239,25 @@ define([
     });
     var selectedList;
     switch (window.location.hash) {
-        case "#basemaps":
-            selectedList = vm.basemaps;
-            break;
-        case "#overlays":
-            selectedList = vm.overlays;
-            break;
-        default:
-            selectedList = vm.geomNodes;
+    case "#basemaps":
+        selectedList = vm.basemaps;
+        break;
+    case "#overlays":
+        selectedList = vm.overlays;
+        break;
+    default:
+        selectedList = vm.geomNodes;
     }
     vm.selectedList(selectedList);
     vm.selection = ko.observable(ko.unwrap(selectedList)[0] || null);
     vm.selectedLayerJSON = ko.computed({
-        read: function () {
+        read: function() {
             if (!vm.selection() || !vm.selection().maplayerid) {
                 return '[]';
             }
             return vm.selection().layerJSON();
         },
-        write: function (value) {
+        write: function(value) {
             if (vm.selection() && vm.selection().maplayerid) {
                 vm.selection().layerJSON(value);
             }
@@ -310,9 +313,9 @@ define([
             points: pointsFC,
             agg: aggregated
         };
-    }
+    };
     var updateSearchPointsGeoJSON = function() {
-        var pointSource = vm.map.getSource('search-results-points')
+        var pointSource = vm.map.getSource('search-results-points');
         if (vm.map && pointSource) {
             var aggResults = ko.unwrap(searchResults);
             if (!aggResults || !aggResults.results) {
@@ -334,9 +337,9 @@ define([
             });
 
             var pointsFC = turf.featureCollection(features);
-            pointSource.setData(pointsFC)
+            pointSource.setData(pointsFC);
         }
-    }
+    };
 
     var updateSearchResultsLayer = function() {
         if (vm.map && searchAggregations()) {
@@ -349,17 +352,17 @@ define([
             }
             updateSearchPointsGeoJSON();
         }
-    }
+    };
 
     vm.setupMap = function(map) {
         vm.map = map;
-        map.on('moveend', function (e) {
+        map.on('moveend', function(e) {
             if (e.originalEvent) {
-                var center = map.getCenter()
-                var zoom = map.getZoom()
+                var center = map.getCenter();
+                var zoom = map.getZoom();
                 if (vm.zoom() !== zoom) {
                     vm.zoom(zoom);
-                };
+                }
                 vm.centerX(center.lng);
                 vm.centerY(center.lat);
             }
@@ -370,22 +373,22 @@ define([
         	bins.subscribe(updateSearchResultsLayer);
         }
         updateSearchResultsLayer();
-    }
+    };
 
     $.ajax({
         dataType: "json",
         url: arches.urls.search_results,
         data: {
             'paging-filter': 1
         },
-        success: function (results) {
-            results.results.aggregations.geo_aggs = results.results.aggregations.geo_aggs.inner.buckets[0]
+        success: function(results) {
+            results.results.aggregations.geo_aggs = results.results.aggregations.geo_aggs.inner.buckets[0];
             searchAggregations(results.results.aggregations);
             searchResults(results);
         }
     });
 
-    var updateMapStyle = function () {
+    var updateMapStyle = function() {
         var displayLayers;
         try {
             displayLayers = JSON.parse(vm.selectedLayerJSON());
@@ -408,7 +411,7 @@ define([
     vm.selectedBasemapName.subscribe(updateMapStyle);
     vm.selection.subscribe(updateMapStyle);
     vm.selectedLayerJSON.subscribe(updateMapStyle);
-    vm.selectedList.subscribe(function (selectedList) {
+    vm.selectedList.subscribe(function(selectedList) {
         var selection = null;
         var layerList = ko.unwrap(vm.selectedList());
         if (layerList && layerList.length > 0) {
@@ -417,36 +420,36 @@ define([
         vm.selection(selection);
     });
     vm.listFilter = ko.observable('');
-    vm.listItems = ko.computed(function () {
+    vm.listItems = ko.computed(function() {
         var listFilter = vm.listFilter().toLowerCase();
         var layerList = ko.unwrap(vm.selectedList());
         return _.filter(layerList, function(item) {
             var name = item.nodeid ?
                 (item.config.layerName() ? item.config.layerName() : item.layer.name) :
                 item.name();
-            name = name.toLowerCase()
+            name = name.toLowerCase();
             return name.indexOf(listFilter) > -1;
-        })
+        });
     });
-    var addMapConfig = function (key, defaultValue) {
+    var addMapConfig = function(key, defaultValue) {
         vm[key] = ko.computed({
-            read: function () {
+            read: function() {
                 var val;
                 var selection = vm.selection();
                 if (selection && selection[key]) {
                     val = selection[key]();
                 }
                 return val || defaultValue;
             },
-            write: function (val) {
+            write: function(val) {
                 var selection = vm.selection();
                 val = val===defaultValue ? null : val;
                 if (selection && selection[key]) {
                     selection[key](val);
                 }
             }
         });
-    }
+    };
     addMapConfig('centerX', arches.mapDefaultX);
     addMapConfig('centerY', arches.mapDefaultY);
     addMapConfig('zoom', arches.mapDefaultZoom);

arches/app/models/migrations/4670_maplayer_legend.py

@@ -0,0 +1,40 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.11.15 on 2019-06-17 12:36
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('models', '4771_searchcomponent'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='maplayer',
+            name='legend',
+            field=models.TextField(blank=True, null=True),
+        ),
+        migrations.RunSQL(
+            sql="""
+            UPDATE d_data_types
+            SET defaultconfig = jsonb_build_object('layerLegend', '') || COALESCE(defaultconfig, '{}'::jsonb)
+            WHERE datatype = 'geojson-feature-collection';
+
+            UPDATE nodes
+            SET config = COALESCE(config, '{}'::jsonb) || jsonb_build_object('layerLegend', '')
+            WHERE datatype = 'geojson-feature-collection';
+            """,
+            reverse_sql="""
+            UPDATE d_data_types
+            SET defaultconfig = defaultconfig - 'layerLegend'
+            WHERE datatype = 'geojson-feature-collection';
+
+            UPDATE nodes
+            SET config = config - 'layerLegend'
+            WHERE datatype = 'geojson-feature-collection';
+            """,
+        ),
+    ]

arches/app/models/models.py

@@ -894,6 +894,7 @@ class MapLayer(models.Model):
     centerx = models.FloatField(blank=True, null=True)
     centery = models.FloatField(blank=True, null=True)
     zoom = models.FloatField(blank=True, null=True)
+    legend = models.TextField(blank=True, null=True)
 
     @property
     def layer_json(self):

arches/app/templates/javascript.htm

@@ -299,6 +299,7 @@
                 'layer_definitions': {{ map_layer.layer_json }},
                 'isoverlay': {{ map_layer.isoverlay|lower }},
                 'icon': '{{ map_layer.icon }}',
+                'legend': '{{ map_layer.legend | default_if_none:"" | escapejs  }}',
                 'activated': {{ map_layer.activated|lower }},
                 'addtomap': {{ map_layer.addtomap|lower }},
                 'is_resource_layer': false,
@@ -311,6 +312,7 @@
                 'layer_definitions': {{ resource_map_layer.layer_definitions }},
                 'isoverlay': true,
                 'icon': '{{ resource_map_layer.icon }}',
+                'legend': '{{ resource_map_layer.legend | escapejs  }}',
                 'activated': true,
                 'addtomap': {{ resource_map_layer.addtomap|lower }},
                 'is_resource_layer': true