diff --git a/src/app/menupanel/activelayers/activelayerspanel.component.html b/src/app/menupanel/activelayers/activelayerspanel.component.html
index f31197e2..164b1142 100644
--- a/src/app/menupanel/activelayers/activelayerspanel.component.html
+++ b/src/app/menupanel/activelayers/activelayerspanel.component.html
@@ -12,7 +12,7 @@
             </u>
             <i *ngIf="getUILayerModel(layer.id).statusMap.getRenderStarted()" class="fa fa-trash float-right red layerLoadClickable" (click)="removeLayer(layer.id);$event.stopPropagation()"></i>
         </div>
-        <div *ngIf="getUILayerModel(layer.id).statusMap.getRenderStarted()" class="opacity-slider-panel d-flex" (click)="$event.stopPropagation()">
+        <div *ngIf="showOpacitySlider(layer) && getUILayerModel(layer.id).statusMap.getRenderStarted()" class="opacity-slider-panel d-flex" (click)="$event.stopPropagation()">
             <div class="opacity-label">Opacity {{ getUILayerModel(layer.id).opacity }}%&nbsp;</div>
             <mat-slider [min]="0" [max]="100" class="opacity-slider flex-grow-1" [(ngModel)]="getUILayerModel(layer.id).opacity" (input)="layerOpacityChange($event, layer)"></mat-slider>
             <div *ngIf="hasLegend(layer)">
diff --git a/src/app/menupanel/activelayers/activelayerspanel.component.ts b/src/app/menupanel/activelayers/activelayerspanel.component.ts
index 429e74b4..845976b2 100644
--- a/src/app/menupanel/activelayers/activelayerspanel.component.ts
+++ b/src/app/menupanel/activelayers/activelayerspanel.component.ts
@@ -65,6 +65,15 @@ export class ActiveLayersPanelComponent {
     */
   }
 
+  /**
+   * Determine if a layer hsould have an opacity slider
+   * @param layer the layer
+   * @returns true if a layer should have an opacity slider, false otherwise
+   */
+  showOpacitySlider(layer: LayerModel): boolean {
+    return this.csMapService.layerHasOpacity(layer);
+  }
+
   /**
    * Layer opacity slider change event
    */
diff --git a/src/app/menupanel/layerpanel/layerpanel.component.html b/src/app/menupanel/layerpanel/layerpanel.component.html
index da68bc64..66e67930 100644
--- a/src/app/menupanel/layerpanel/layerpanel.component.html
+++ b/src/app/menupanel/layerpanel/layerpanel.component.html
@@ -35,7 +35,7 @@
 							<div class="progress-bar bg-gradient-blue-purple" [style.width]="getUILayerModel(layer.id).statusMap.getCompletePercentage()" role="progressbar"></div>
 						</div>
 						-->
-						<div *ngIf="getUILayerModel(layer.id) && (getUILayerModel(layer.id).statusMap.getRenderStarted() || getUILayerModel(layer.id).statusMap.getRenderComplete())" class="opacity-slider-panel d-flex" (click)="$event.stopPropagation()">
+						<div *ngIf="showOpacitySlider(layer) && getUILayerModel(layer.id) && (getUILayerModel(layer.id).statusMap.getRenderStarted() || getUILayerModel(layer.id).statusMap.getRenderComplete())" class="opacity-slider-panel d-flex" (click)="$event.stopPropagation()">
 							<div class="opacity-label">Opacity {{ getUILayerModel(layer.id).opacity }}%&nbsp;</div>
 							<mat-slider [min]="0" [max]="100" class="opacity-slider flex-grow-1" [(ngModel)]="getUILayerModel(layer.id).opacity" (input)="layerOpacityChange($event, layer)"></mat-slider>
 						</div>
diff --git a/src/app/menupanel/layerpanel/layerpanel.component.ts b/src/app/menupanel/layerpanel/layerpanel.component.ts
index 1bfae2ae..a021f8dd 100644
--- a/src/app/menupanel/layerpanel/layerpanel.component.ts
+++ b/src/app/menupanel/layerpanel/layerpanel.component.ts
@@ -221,6 +221,15 @@ export class LayerPanelComponent implements OnInit {
     this.legendUiService.removeLegend(layer.id);
   }
 
+  /**
+   * Determine if a layer hsould have an opacity slider
+   * @param layer the layer
+   * @returns true if a layer should have an opacity slider, false otherwise
+   */
+  showOpacitySlider(layer: LayerModel): boolean {
+    return this.csMapService.layerHasOpacity(layer);
+  }
+
   /**
    * Layer opacity slider change event
    */