Skip to content
Snippets Groups Projects
Commit fa93cf6b authored by Tor-Einar Skog's avatar Tor-Einar Skog
Browse files

First working slider prototype

parent 1aee660c
No related branches found
No related tags found
No related merge requests found
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
{% 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
...@@ -6,4 +6,5 @@ app_name='spatial' ...@@ -6,4 +6,5 @@ app_name='spatial'
urlpatterns = [ urlpatterns = [
re_path(r'^$', views.index, name='index'), re_path(r'^$', views.index, name='index'),
re_path(r'slidingmap/', views.slidingmap, name='slidingmap'),
] ]
...@@ -4,3 +4,7 @@ from django.shortcuts import render ...@@ -4,3 +4,7 @@ from django.shortcuts import render
def index(request): def index(request):
context = {} context = {}
return render(request, 'spatial/index.html', context) return render(request, 'spatial/index.html', context)
def slidingmap(request):
context = {}
return render(request, 'spatial/slidingMap.html', context)
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment