diff --git a/arches/app/media/css/arches.css b/arches/app/media/css/arches.css
index 51b5c57e984..0ad06069a4b 100644
--- a/arches/app/media/css/arches.css
+++ b/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 {
diff --git a/arches/app/media/js/views/components/cards/map.js b/arches/app/media/js/views/components/cards/map.js
index 1b954a8f293..4ab3710cb3e 100644
--- a/arches/app/media/js/views/components/cards/map.js
+++ b/arches/app/media/js/views/components/cards/map.js
@@ -2,12 +2,11 @@ define([
     'knockout',
     'viewmodels/card-component',
     'views/components/map'
-], function(ko, CardComponentViewModel) {
+], function(ko, CardComponentViewModel, MapComponentViewModel) {
     return ko.components.register('map-card', {
         viewModel: function(params) {
-            this.map = ko.observable();
-
             CardComponentViewModel.apply(this, [params]);
+            MapComponentViewModel.apply(this, [params]);
         },
         template: {
             require: 'text!templates/views/components/cards/map.htm'
diff --git a/arches/app/media/js/views/components/map.js b/arches/app/media/js/views/components/map.js
index a602194550a..d2e5ed4f4bc 100644
--- a/arches/app/media/js/views/components/map.js
+++ b/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', {
diff --git a/arches/app/templates/views/components/cards/map.htm b/arches/app/templates/views/components/cards/map.htm
index 53f99a8d8df..89b0eefe599 100644
--- a/arches/app/templates/views/components/cards/map.htm
+++ b/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 %}
diff --git a/arches/app/templates/views/components/map-editor.htm b/arches/app/templates/views/components/map-editor.htm
new file mode 100644
index 00000000000..67cdf1d459f
--- /dev/null
+++ b/arches/app/templates/views/components/map-editor.htm
@@ -0,0 +1,10 @@
+{% extends "views/components/map.htm" %}
+{% load i18n %}
+
+{% block tabs %}
+{{ block.super }}
+{% endblock tabs %}
+
+{% block sidepanel %}
+{{ block.super }}
+{% endblock sidepanel %}
diff --git a/arches/app/templates/views/components/map.htm b/arches/app/templates/views/components/map.htm
index 10f4c5282e2..0e48467880d 100644
--- a/arches/app/templates/views/components/map.htm
+++ b/arches/app/templates/views/components/map.htm
@@ -2,6 +2,7 @@
 
 <div class="map-card-wrapper">
     <div class="map-card-sidebar">
+        {% block tabs %}
         <div class="map-card-sidebar-tab" data-bind="click: function() {
             toggleTab('basemap');
         }, css: {
@@ -26,9 +27,11 @@
             <i class="fa fa-list-alt"></i>
             {% trans "Legend" %}
         </div>
+        {% endblock tabs %}
     </div>
     <!--ko if: activeTab() -->
         <div class="map-card-sidepanel">
+            {% block sidepanel %}
             <!--ko if: activeTab() === 'basemap' -->
                 <h4 class="map-card-sidepanel-header" data-bind="click: hideSidePanel">
                     {% trans "Basemaps" %}
@@ -88,6 +91,7 @@ <h4 class="map-card-sidepanel-header" data-bind="click: hideSidePanel">
                     </div>
                 </div>
             <!--/ko -->
+            {% endblock sidepanel %}
         </div>
     <!--/ko -->
     <div class="map-card-container" data-bind="mapboxgl: {
diff --git a/arches/install/package.json b/arches/install/package.json
index f05be8dfc9f..f7669d0bb1e 100644
--- a/arches/install/package.json
+++ b/arches/install/package.json
@@ -6,7 +6,7 @@
     },
     "dependencies": {
         "@mapbox/geojson-extent": "0.3.2",
-        "@mapbox/mapbox-gl-draw": "1.0.8",
+        "@mapbox/mapbox-gl-draw": "1.1.2",
         "@mapbox/mapbox-gl-geocoder": "^4.4.0",
         "@turf/turf": "4.4.0",
         "backbone": "1.3.3",
diff --git a/arches/install/yarn.lock b/arches/install/yarn.lock
index f836ce5e30d..d7b77214e92 100644
--- a/arches/install/yarn.lock
+++ b/arches/install/yarn.lock
@@ -76,10 +76,10 @@
   resolved "https://registry.yarnpkg.com/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz#ce56e539f83552b58d10d672ea4d6fc9adc7b234"
   integrity sha1-zlblOfg1UrWNENZy6k1vya3HsjQ=
 
-"@mapbox/mapbox-gl-draw@1.0.8":
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-draw/-/mapbox-gl-draw-1.0.8.tgz#26115cea1fa07cfd6f1220a6231ea7c2dc13bbd2"
-  integrity sha1-JhFc6h+gfP1vEiCmIx6nwtwTu9I=
+"@mapbox/mapbox-gl-draw@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-draw/-/mapbox-gl-draw-1.1.2.tgz#247b3f0727db34c2641ab718df5eebeee69a2585"
+  integrity sha512-DWtATUAnJaGZYoH/y2O+QTRybxrp5y3w3eV5FXHFNVcKsCAojKEMB8ALKUG2IsiCKqV/JCAguK9AlPWR7Bjafw==
   dependencies:
     "@mapbox/geojson-area" "^0.2.1"
     "@mapbox/geojson-extent" "^0.3.2"