From f034e7dfbc27af30e6ac9c95a22c30b7ef518f2b Mon Sep 17 00:00:00 2001
From: Tor-Einar Skog <tor-einar.skog@nibio.no>
Date: Tue, 24 Oct 2023 08:39:05 +0200
Subject: [PATCH] Style the date slider
---
spatial/static/spatial/js/slidingMap.js | 28 -----------------------
spatial/templates/spatial/slidingMap.html | 14 +++++++-----
2 files changed, 8 insertions(+), 34 deletions(-)
diff --git a/spatial/static/spatial/js/slidingMap.js b/spatial/static/spatial/js/slidingMap.js
index ee24b48e..7168acbc 100644
--- a/spatial/static/spatial/js/slidingMap.js
+++ b/spatial/static/spatial/js/slidingMap.js
@@ -96,36 +96,8 @@ async function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
range.value = todayLayerIndex;
setCurrentDate(todayLayerIndex);
- //range.oninput();
- /*
- console.info("WWW" + todayLayerIndex.valueOf());
- document.getElementById("layerDateRange").value = todayLayerIndex; // TODO: Today
- //document.getElementById("layerDateRange").value = "8";
- console.info(document.getElementById("layerDateRange").value);
- document.getElementById("layerDateRange").max = timestamps.length -1;
-*/
- //console.info(timestamps);
- /*
- for(let i=2;i<=6;i++)
- {
- layers.push(
- new ol.layer.Image({
- source: new ol.source.ImageWMS({
- url: 'https://testvips.nibio.no/cgi-bin/SEPTREFHUM',
- params: { 'LAYERS': 'SEPTREFHUM.WARNING_STATUS 2023-10-0' + i, 'TRANSPARENT': 'TRUE' },
- serverType: 'mapserver',
- ratio: 1,
- projection: ol.proj.get('EPSG:25833')
- }),
- visible: (i==2),
- opacity: 0.5
- })
- );
- }*/
-
-
// Creating the map
map = new ol.Map({
target: "mapContainer",
diff --git a/spatial/templates/spatial/slidingMap.html b/spatial/templates/spatial/slidingMap.html
index 66a54c5b..b4d74405 100644
--- a/spatial/templates/spatial/slidingMap.html
+++ b/spatial/templates/spatial/slidingMap.html
@@ -25,10 +25,12 @@
{% block content %}
<!-- Start map container -->
- <div class="col-md-12" id="mapContainer" />
- <div class="slidecontainer">
- Current date: <span id="currentDate"></span> <br/>
- <input type="range" min="0" max="0" value="3" step="1" id="layerDateRange" onchange="switchLayer(parseInt(this.value));"><br/>
-
- </div>
+ <div class="col-md-12" id="mapContainer" style="position: relative; height: 800px;">
+ <div class="slidecontainer" style="position: absolute; left: 20px; bottom: 20px; background-color: white; z-index: 1000;padding: 15px; border-radius: 15px;">
+ Current date: <span id="currentDate"></span> <br/>
+ <input type="range" min="0" max="0" value="0" step="1" id="layerDateRange" onchange="switchLayer(parseInt(this.value));"><br/>
+
+ </div>
+ </div>
+
{% endblock %}
\ No newline at end of file
--
GitLab