adds map card component

arches/app/media/css/arches.css

@@ -1199,6 +1199,7 @@ ul.tabbed-report-tab-list {
     background: white;
     border-left: 1px solid rgb(216, 216, 216);
     padding: 16px;
+    overflow-y: scroll;
 }
 
 .map-card-sidepanel-header {
@@ -13119,10 +13120,14 @@ a.filter-tools:hover {
     padding: 6px 12px;
     white-space: nowrap;
 }
-.chosen-container-single .chosen-single div b, .chosen-container-single .chosen-single .search-choice-close {
+.chosen-container-single .chosen-single div b {
     background-image: none !important;
 }
 
+.chosen-container-single .chosen-single .search-choice-close {
+    top: 10px;
+}
+
 .chosen-container-single .chosen-single div b:before {
     border-bottom: 0 solid transparent;
     border-left: 5px solid transparent;

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

@@ -1,13 +1,145 @@
 define([
+    'underscore',
     'knockout',
+    'knockout-mapping',
+    'uuid',
+    'mapbox-gl-draw',
     'viewmodels/card-component',
     'views/components/map'
-], function(ko, CardComponentViewModel) {
+], function(_, ko, koMapping, uuid, MapboxDraw, CardComponentViewModel, MapComponentViewModel) {
     return ko.components.register('map-card', {
         viewModel: function(params) {
-            this.map = ko.observable();
+            var self = this;
 
             CardComponentViewModel.apply(this, [params]);
+            MapComponentViewModel.apply(this, [params]);
+
+            this.activeTab('editor');
+            this.featureLookup = {};
+            var getDrawFeatures = function() {
+                var drawFeatures = [];
+                self.card.widgets().forEach(function(widget) {
+                    var nodeId = widget.node_id();
+                    if (self.form && self.form.nodeLookup[nodeId].datatype() === 'geojson-feature-collection' && self.tile) {
+                        var featureCollection = koMapping.toJS(self.tile.data[nodeId]);
+                        if (featureCollection) {
+                            featureCollection.features.forEach(function(feature) {
+                                if (!feature.id) {
+                                    feature.id = uuid.generate();
+                                }
+                                feature.properties.nodeId = nodeId;
+                            });
+                            drawFeatures = drawFeatures.concat(featureCollection.features);
+                        }
+                    }
+                });
+                return drawFeatures;
+            };
+            var drawFeatures = getDrawFeatures();
+            var newNodeId;
+            this.card.widgets().forEach(function(widget) {
+                var nodeId = widget.node_id();
+                if (self.form && self.form.nodeLookup[nodeId].datatype() === 'geojson-feature-collection') {
+                    self.featureLookup[nodeId] = {
+                        features: ko.computed(function() {
+                            var features = [];
+                            if (self.tile) {
+                                var featureCollection = koMapping.toJS(self.tile.data[nodeId]);
+                                if (featureCollection) {
+                                    features = featureCollection.features;
+                                }
+                            }
+                            return features;
+                        }),
+                        selectedTool: ko.observable()
+                    };
+                    self.featureLookup[nodeId].selectedTool.subscribe(function(selectedTool) {
+                        if (self.draw) {
+                            if (selectedTool === '') {
+                                self.draw.changeMode('simple_select');
+                            } else if (selectedTool) {
+                                _.each(self.featureLookup, function(value, key) {
+                                    if (key !== nodeId) {
+                                        value.selectedTool(null);
+                                    }
+                                });
+                                newNodeId = nodeId;
+                                self.draw.changeMode(selectedTool);
+                            }
+                        }
+                    });
+                }
+            });
+
+            var updateFeatures = function() {
+                var featureCollection = self.draw.getAll();
+                _.each(self.featureLookup, function(value) {
+                    value.selectedTool(null);
+                });
+                self.card.widgets().forEach(function(widget) {
+                    var nodeId = widget.node_id();
+                    if (self.form && self.form.nodeLookup[nodeId].datatype() === 'geojson-feature-collection') {
+                        var nodeFeatures = [];
+                        featureCollection.features.forEach(function(feature){
+                            if (feature.properties.nodeId === nodeId) nodeFeatures.push(feature);
+                        });
+                        if (ko.isObservable(self.tile.data[nodeId])) {
+                            self.tile.data[nodeId]({
+                                type: 'FeatureCollection',
+                                features: nodeFeatures
+                            });
+                        } else {
+                            self.tile.data[nodeId].features(nodeFeatures);
+                        }
+                    }
+                });
+            };
+
+            this.deleteFeature = function(feature) {
+                if (self.draw) {
+                    self.draw.delete(feature.id);
+                    updateFeatures();
+                }
+            };
+
+            this.editFeature = function(feature) {
+                if (self.draw) {
+                    self.draw.changeMode('simple_select', {
+                        featureIds: [feature.id]
+                    });
+                    _.each(self.featureLookup, function(value) {
+                        value.selectedTool(null);
+                    });
+                }
+            };
+
+            this.draw = null;
+            this.map.subscribe(function(map) {
+                self.draw = new MapboxDraw({
+                    displayControlsDefault: false
+                });
+                map.addControl(self.draw);
+                self.draw.set({
+                    type: 'FeatureCollection',
+                    features: drawFeatures
+                });
+                map.on('draw.create', function(e) {
+                    e.features.forEach(function(feature) {
+                        self.draw.setFeatureProperty(feature.id, 'nodeId', newNodeId);
+                    });
+                    updateFeatures();
+                });
+                map.on('draw.update', updateFeatures);
+                map.on('draw.delete', updateFeatures);
+                map.on('draw.modechange', updateFeatures);
+
+                self.form.on('tile-reset', function() {
+                    self.draw.set({
+                        type: 'FeatureCollection',
+                        features: getDrawFeatures()
+                    });
+                });
+            });
         },
         template: {
             require: 'text!templates/views/components/cards/map.htm'

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

@@ -32,6 +32,7 @@ define([
         }, arches.mapSources, params.sources);
         var mapLayers = params.mapLayers || arches.mapLayers;
 
+        this.map = ko.isObservable(params.map) ? params.map : ko.observable();
         this.basemaps = [];
         this.overlays = ko.observableArray();
         this.activeBasemap = ko.observable();
@@ -154,8 +155,6 @@ define([
         };
 
         this.setupMap = function(map) {
-            if (ko.isObservable(params.map)) params.map(map);
-
             map.addControl(new mapboxgl.NavigationControl(), 'top-left');
             map.addControl(new MapboxGeocoder({
                 accessToken: mapboxgl.accessToken,
@@ -169,6 +168,8 @@ define([
                 style.layers = layers;
                 map.setStyle(style);
             });
+
+            self.map(map);
         };
     };
     ko.components.register('arches-map', {

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

@@ -0,0 +1,22 @@
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('models', '4670_maplayer_legend'),
+    ]
+
+    operations = [
+        migrations.RunSQL(
+            sql="""
+            INSERT INTO card_components(componentid, name, description, component, componentname, defaultconfig)
+                VALUES ('3c103484-22d1-4ca9-a9f3-eb3902d567ac', 'Map Card', 'Map card UI', 'views/components/cards/map', 'map-card', '{}');
+            """,
+            reverse_sql="""
+            DELETE FROM card_components WHERE componentid = '3c103484-22d1-4ca9-a9f3-eb3902d567ac';
+            """,
+        ),
+    ]

arches/app/templates/views/components/cards/map.htm

@@ -2,10 +2,5 @@
 {% load i18n %}
 
 {% block form %}
-<!-- ko component: {
-    name: 'arches-map',
-    params: {
-        map: map
-    }
-} --> <!-- /ko -->
+{% include 'views/components/map-editor.htm' %}
 {% endblock form %}