From fa93cf6bb158533f9c4d8a26436425039240bc84 Mon Sep 17 00:00:00 2001
From: Tor-Einar Skog <tor-einar.skog@nibio.no>
Date: Mon, 23 Oct 2023 12:31:30 +0200
Subject: [PATCH] First working slider prototype
---
spatial/static/spatial/js/slidingMap.js | 67 +++++++++++++++++++++++
spatial/templates/spatial/slidingMap.html | 32 +++++++++++
spatial/urls.py | 1 +
spatial/views.py | 4 ++
4 files changed, 104 insertions(+)
create mode 100644 spatial/static/spatial/js/slidingMap.js
create mode 100644 spatial/templates/spatial/slidingMap.html
diff --git a/spatial/static/spatial/js/slidingMap.js b/spatial/static/spatial/js/slidingMap.js
new file mode 100644
index 00000000..0d8e39eb
--- /dev/null
+++ b/spatial/static/spatial/js/slidingMap.js
@@ -0,0 +1,67 @@
+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
diff --git a/spatial/templates/spatial/slidingMap.html b/spatial/templates/spatial/slidingMap.html
new file mode 100644
index 00000000..03dd72a3
--- /dev/null
+++ b/spatial/templates/spatial/slidingMap.html
@@ -0,0 +1,32 @@
+{% 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
diff --git a/spatial/urls.py b/spatial/urls.py
index face25c4..8b214f93 100644
--- a/spatial/urls.py
+++ b/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'),
]
diff --git a/spatial/views.py b/spatial/views.py
index ab1cdacc..d5fac614 100644
--- a/spatial/views.py
+++ b/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)
--
GitLab