First working slider prototype

spatial/static/spatial/js/slidingMap.js

+proj4.defs(
+    'EPSG:25833',
+    '+proj=utm +zone=33 +ellps=GRS80 +units=m +no_defs'
+);
+
+let layers = [];
+
+function switchLayer(visibleLayerIndex)
+{
+    console.info(layers.length + " layers available. Index=" + visibleLayerIndex);
+    for(let i=0;i<layers.length;i++)
+    {
+        layers[i].setVisible(i==visibleLayerIndex);
+    }
+}
+
+function initSlidingMap(lonLat, zoomLevel, mapAttribution) {
+	var map;
+
+    var backgroundLayer = new ol.layer.Tile({
+		source: new ol.source.OSM({
+			attributions: [
+				new ol.Attribution({
+					html: mapAttribution
+				})
+			]
+		})
+	});
+
+    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",
+		layers: [backgroundLayer].concat(layers),
+		renderer: 'canvas'
+	});
+
+
+	// Setting zoom and center for the map (need to do this after creating map. so that we can transform our
+	// center to correct map projection)
+	var view = new ol.View({
+		center: ol.proj.transform(lonLat, 'EPSG:4326', map.getView().getProjection().getCode()),
+		zoom: 5,
+		maxMapZoom: 10,
+	});
+	map.setView(view);
+
+}
\ No newline at end of file

spatial/templates/spatial/slidingMap.html

+{% extends "base.html" %}
+
+{% load i18n l10n static forecast_extras template_helper %}
+{% block title%}{% trans "Welcome" %}{%endblock%}
+{% block customCSS %}
+<link rel="stylesheet" href="{% static "css/3rdparty/ol.css" %}" type="text/css">
+{% endblock %}
+{% block customJS %}
+<script type="text/javascript" src="{% url "javascript-catalog" %}"></script>
+<script type="text/javascript" src="{% static "js/3rdparty/ol.js" %}"></script>
+<script type="text/javascript" src="{% static "js/3rdparty/proj4.js" %}"></script>
+<script type="text/javascript" src="{% static "js/3rdparty/moment.min.js" %}"></script>
+<script type="text/javascript" src="{% static "js/util.js" %}"></script>
+<script type="text/javascript" src="{% url "views.settings_js" %}"></script>
+<script type="text/javascript" src="{% static "spatial/js/slidingMap.js" %}"></script>
+<script type="text/javascript">
+	$(document).ready(function() {
+		var longitude = {{settings.MAP_CENTER_LONGITUDE|unlocalize}};
+		var latitude = {{settings.MAP_CENTER_LATITUDE|unlocalize}};
+		var zoomLevel = {{settings.MAP_ZOOMLEVEL}};
+		initSlidingMap([longitude,latitude],zoomLevel,"{{settings.MAP_ATTRIBUTION|safe}}");
+	});
+</script>
+{% endblock %}
+
+{% block content %}
+		<!-- Start map container -->
+		<div class="col-md-12" id="mapContainer" />
+        <div class="slidecontainer">
+            <input type="range" min="0" max="4" value="0" id="myRange" onchange="switchLayer(parseInt(this.value));">
+          </div>
+{% endblock %}
\ No newline at end of file

spatial/urls.py

@@ -6,4 +6,5 @@ app_name='spatial'
 
 urlpatterns = [
     re_path(r'^$', views.index, name='index'),
+    re_path(r'slidingmap/', views.slidingmap, name='slidingmap'),
 ]

spatial/views.py

@@ -4,3 +4,7 @@ from django.shortcuts import render
 def index(request):
     context = {}
     return render(request, 'spatial/index.html', context)
+
+def slidingmap(request):
+    context = {}
+    return render(request, 'spatial/slidingMap.html', context)