new map in the selector maps from the reports section

reports/static/reports/css/control-map.css

 .mapControl{
-  width: 33%;
+  width: 36%;
   height: auto;
   position: absolute;
   right: 15px;

reports/static/reports/js/minimap.js

@@ -31,6 +31,13 @@ const night = new ol.layer.Tile({
     })
 });
 
+const cycle = new ol.layer.Tile({
+    name: 'mapbox',
+    source: new ol.source.XYZ({
+		url: 'https://api.tiles.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token=' + MAPBOX_ACCESS_TOKEN
+	}),
+});
+
 
 const polygonLayer = new ol.layer.Vector({
     name: 'polygon',
@@ -299,6 +306,10 @@ function changeMap(selectedMap) {
             map.getLayers().insertAt(0, night);
             currentMap = night;
             break;
+        case 'cycle':
+            map.getLayers().insertAt(0, cycle);
+            currentMap = cycle;
+            break;
     }
 }
 

reports/templates/sclData.html

@@ -168,7 +168,7 @@
         <div class="mapControl" style="">
             <div id="controlMap" class="controlContainer">
                 <div class="row">
-                    <div class="col-lg-4">
+                    <div class="col-lg-3">
                         <div class="baseMap" onclick="changeMap('light')">
                             <img src="../../static/images/light.png" width="100%" height="100%">
                             <span class="mapSelector">
@@ -177,7 +177,7 @@
                             </span>
                         </div>
                     </div>
-                    <div class="col-lg-4">
+                    <div class="col-lg-3">
                         <div class="baseMap" onclick="changeMap('streets')">
                             <img src="../../static/images/Streets.png" width="100%" height="100%">
                             <span class="mapSelector">
@@ -186,7 +186,7 @@
                             </span>
                         </div>
                     </div>
-                    <div class="col-lg-4">
+                    <div class="col-lg-3">
                         <div class="baseMap" onclick="changeMap('night')">
                             <img src="../../static/images/night.png" width="100%" height="100%">
                             <span class="mapSelector">
@@ -195,6 +195,15 @@
                             </span>
                         </div>
                     </div>
+                    <div class="col-lg-3">
+                        <div class="baseMap" onclick="changeMap('cycle')">
+                            <img src="../../static/images/cycle.png" width="100%" height="100%">
+                            <span class="mapSelector">
+                                <input id="cycle" type="radio" name="layerOption">
+                                <span>Cycle</span>
+                            </span>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>