opacity, slide css and 10m name

reports/static/reports/css/crossrange.css

+.cross-range {
+  -webkit-appearance: none;
+  width: 100%;
+  margin: 4.05px 0;
+}
+.cross-range:focus {
+  outline: none;
+}
+.cross-range::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 7.9px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: #dc7828;
+  border-radius: 25px;
+  border: 1px solid #dc7828;
+}
+.cross-range::-webkit-slider-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 16px;
+  width: 16px;
+  border-radius: 50px;
+  background: #ffffff;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -5.05px;
+}
+.cross-range:focus::-webkit-slider-runnable-track {
+  background: #e0863e;
+}
+.cross-range::-moz-range-track {
+  width: 100%;
+  height: 7.9px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: #dc7828;
+  border-radius: 25px;
+  border: 1px solid #dc7828;
+}
+.cross-range::-moz-range-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 16px;
+  width: 16px;
+  border-radius: 50px;
+  background: #ffffff;
+  cursor: pointer;
+}
+.cross-range::-ms-track {
+  width: 100%;
+  height: 7.9px;
+  cursor: pointer;
+  background: transparent;
+  border-color: transparent;
+  color: transparent;
+}
+.cross-range::-ms-fill-lower {
+  background: #ca6c21;
+  border: 1px solid #dc7828;
+  border-radius: 50px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+.cross-range::-ms-fill-upper {
+  background: #dc7828;
+  border: 1px solid #dc7828;
+  border-radius: 50px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+.cross-range::-ms-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 16px;
+  width: 16px;
+  border-radius: 50px;
+  background: #ffffff;
+  cursor: pointer;
+  height: 7.9px;
+}
+.cross-range:focus::-ms-fill-lower {
+  background: #dc7828;
+}
+.cross-range:focus::-ms-fill-upper {
+  background: #e0863e;
+}
+
+#opacitySlide {
+  background: transparent;
+  padding-left: 10px;
+  padding-right: 10px;
+}

reports/static/reports/css/scldata.css

@@ -133,7 +133,7 @@ body {
     position: relative;
 }
 
-input[type=range] {
+/* input[type=range] {
     display: block;
     width: 100%;
     margin: 0;
@@ -161,4 +161,4 @@ input[type=range]::-webkit-slider-thumb {
     box-shadow: inset 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
     border-radius: 100%;
     cursor: pointer;
-}
+} */

reports/static/reports/js/minimap.js

@@ -87,6 +87,16 @@ function removeImageLayers() {
   })
 }
 
+function setOpacity(value) {
+  var imageLayers = map.getLayers().getArray().slice();
+  imageLayers.forEach(layer => {
+    if(layer.get('name') != 'mapbox' && layer.get('name') != 'polygon' && layer.get('name') != 'TCI') {
+      console.log(layer.get('name'), layer);
+      layer.setOpacity(value)
+    }
+  })
+}
+
 function getSelectedCheckbox() {
   const inputs = $("input[name=layer_type]:checked");
   let values = []

reports/templates/aside.html

@@ -235,6 +235,10 @@
                       SCL Snow
                     </label>
                   </div>
+                  <div class="treeview" style="padding-top: 10px;padding-bottom: 5px;">
+                    <span>SCL Opacity</span>
+                    <input class="cross-range" type="range" min="0" max="1" step="0.1" value="1" oninput="setOpacity(this.value)" id="opacitySlide">
+                  </div>
                 </span>
             </ul>
         </li>

reports/templates/sclData.html

@@ -4,6 +4,7 @@
 {% block headMedia %}
     <link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'reports/css/scldata.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'reports/css/crossrange.css' %}" type="text/css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"
           type="text/css">
@@ -119,16 +120,16 @@
     <div class="container floating-panel" style="position:absolute; bottom: 40px; left: 12%; width: 500px; z-index: 1000">
         <div class="range-control" id="rangecontrol">
             <span id="tooltiptext">No Data</span>
-            <input id="inputRange" type="range" min="0" max="{{ labels|length }}" step="1" value="0" data-thumbwidth="20">
-    
-    
+            <input class="cross-range" id="inputRange" type="range" min="0" max="{{ labels|length }}" step="1" value="0" data-thumbwidth="20" style="background: transparent;">
+
+
             <datalist class="range__list" id="number">
                 <option>No Data</option>
                 {% for label in labels %}
                 <option class="range__opt" value="{{ label }}">{{ label|slice:"6:8" }}/{{ label|slice:"4:6" }}/{{label|slice:"0:4" }}</option>
                 {% endfor %}
             </datalist>
-    
+
         </div>
     </div>
 
@@ -276,7 +277,7 @@
 {% endblock %}
 {% block scripts %}
     <script id="rendered-js">
-        $('input[type="range"]').on('input', function () {
+        $('input[id="inputRange"]').on('input', function () {
 
             var control = $(this),
                 controlMin = control.attr('min'),

reports/views.py

@@ -266,9 +266,11 @@ def wsProcessProgress(request):
 def tiles(request, purchase_id, report, layer_type, date, z, x, y):
     split = '/split' if layer_type[:3] == "SCL" else ''
     layer_class = layer_type[3:] if layer_type[:3] == "SCL" else ''
-    image_path = "{}{}/{}/out/{}/{}{}/tiles/{}_{}_60m{}/{}/{}/{}.png".format(
+    m_number = '60' if layer_type[:3] == "SCL" else '10'
+
+    image_path = "{}{}/{}/out/{}/{}{}/tiles/{}_{}_{}m{}/{}/{}/{}.png".format(
         USERS_PATH, request.user.email, purchase_id, report, layer_type[:3], split,
-        date, layer_type[:3], layer_class, z, x, y
+        date, layer_type[:3], m_number, layer_class, z, x, y
     )
 
     if not os.path.exists(image_path):
@@ -285,7 +287,7 @@ def tileinfo(request):
     if request.is_ajax():
         req = dict(request.POST)
 
-        resource_path = "{}{}/{}/out/{}/TCI/tiles/{}_TCI_60m/tilemapresource.xml".format(
+        resource_path = "{}{}/{}/out/{}/TCI/tiles/{}_TCI_10m/tilemapresource.xml".format(
             USERS_PATH, request.user.email, req['purchase_id'][0], req['report'][0],
             req['date'][0]
         )