Added individual layer transparency control

app/static/app/js/components/Map.jsx

@@ -114,7 +114,15 @@ class Map extends React.Component {
               return this.options.bounds.getCenter();
             };
 
-            layer.bindPopup(`<div class="title">${info.name}</div>
+            var popup = L.DomUtil.create('div', 'infoWindow');
+
+            popup.innerHTML = `<div class="title">
+                                    ${info.name}
+                                    <div className="opacity-slider">
+                                        Opacity: <input id="layerOpacity" type="range" step="1" />
+                                    </div>
+                                </div>
+
                                 <div>Bounds: [${layer.options.bounds.toBBoxString().split(",").join(", ")}]</div>
                                     <ul class="asset-links">
                                     ${assets.map(asset => {
@@ -127,8 +135,13 @@ class Map extends React.Component {
                                     type="button"
                                     class="switchModeButton btn btn-sm btn-default btn-white">
                                     <i class="fa fa-cube"></i> 3D
-              </button>
-            `);
+                                </button>`;
+
+            layer.bindPopup(popup);
+
+            $('#layerOpacity', popup).on('change', function() {
+                layer.setOpacity($('#layerOpacity').val() / 100);
+            });
             
             this.imageryLayers.push(layer);