diff --git a/package-lock.json b/package-lock.json
index 854739cc30e8f00a5e3cb24c97e1823248a09866..bd98230295bfccd1473196109f5065eb0b3eadcd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -567,6 +567,13 @@
         "long": "^3.2.0"
       }
     },
+    "Leaflet.Control.Opacity": {
+      "version": "git+https://github.com/SemanticComputing/Leaflet.Control.Opacity.git#348af24ad78fca331a435161cc803ecbaf9c1570",
+      "from": "git+https://github.com/SemanticComputing/Leaflet.Control.Opacity.git",
+      "requires": {
+        "leaflet": "^1.3.3"
+      }
+    },
     "abab": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz",
diff --git a/package.json b/package.json
index f16e7534970dd4489c8ec06c8b4621d49e2280c2..2a75daffe62dc53c34cd46af10eefab1d63b0358 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "@material-ui/core": "^1.4.2",
     "@material-ui/icons": "^1.1.0",
     "@material-ui/lab": "^1.0.0-alpha.8",
+    "Leaflet.Control.Opacity": "git+https://github.com/SemanticComputing/Leaflet.Control.Opacity.git",
     "autosuggest-highlight": "^3.1.1",
     "babel-preset-stage-2": "^6.24.1",
     "bootstrap": "^4.1.3",
diff --git a/src/client/components/map/LeafletMap.js b/src/client/components/map/LeafletMap.js
index 62276d19373c60a264d3208ac9e4fc6c11347719..bc6f032b1e5c3a17b10c89d257210f2c951402b7 100644
--- a/src/client/components/map/LeafletMap.js
+++ b/src/client/components/map/LeafletMap.js
@@ -7,6 +7,8 @@ import 'leaflet-fullscreen/dist/Leaflet.fullscreen.min.js';
 import 'leaflet.markercluster/dist/MarkerCluster.css';
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
 import 'leaflet.markercluster/dist/leaflet.markercluster.js';
+import 'Leaflet.Control.Opacity/dist/L.Control.Opacity.css';
+import 'Leaflet.Control.Opacity/dist/L.Control.Opacity.js';
 
 const style = {
   width: '100%',
@@ -121,9 +123,28 @@ class LeafletMap extends React.Component {
       'Senate atlas (MapWarper)': senateAtlas,
       'Western Front July 1917 (MapWarper)': westernFront
     };
-    this.layerControl = L.control.layers(baseMaps, overlayMaps).addTo(this.map);
 
-    this.createOpacitySlider();
+    this.layerControl = L.control.layers(
+      baseMaps,
+      overlayMaps,
+    ).addTo(this.map);
+
+    L.control.opacity(
+      overlayMaps, {
+        collapsed: true,
+        position: 'bottomleft'
+      }).addTo(this.map);
+
+  //     map.on('fullscreenchange', function () {
+  //     if (map.isFullscreen()) {
+  //         console.log('entered fullscreen');
+  //     } else {
+  //         console.log('exited fullscreen');
+  //     }
+  // });
+
+
+    //this.createOpacitySlider();
 
   }