feat: Add test page (spatial) with mapserver layer in openlayers map

GRIDV-6

VIPSWeb/settings.py

@@ -148,6 +148,7 @@ INSTALLED_APPS = (
     'applefruitmoth',
     'fusarium',
     'security',
+    'spatial',
     'mock',
     'VIPSWeb'
 )

VIPSWeb/urls.py

@@ -49,7 +49,8 @@ else:
     
         # Uncomment the admin/doc line below to enable admin documentation:
         # url(r'^admin/doc/', include('django.contrib.admindocs.urls')),
-    
+
+        re_path(r'^spatial/', include('spatial.urls')),
 	    re_path(r'^cydiapomonella/', include('cydiapomonella.urls')),
         re_path(r'^forecasts/', include('forecasts.urls', namespace = "forecasts")),
         re_path(r'^messages/', include('vips_messages.urls', namespace = "vips_messages")),

spatial/admin.py

+from django.contrib import admin
+
+# Register your models here.

spatial/apps.py

+from django.apps import AppConfig
+
+
+class SpatialConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'spatial'

spatial/models.py

+from django.db import models
+
+# Create your models here.

spatial/static/spatial/js/spatialMap.js

+/*
+ * Copyright (c) 2018 NIBIO <http://www.nibio.no/>. 
+ * 
+ * This file is part of VIPSWeb.
+ * VIPSWeb is free software: you can redistribute it and/or modify
+ * it under the terms of the NIBIO Open Source License as published by 
+ * NIBIO, either version 1 of the License, or (at your option) any
+ * later version.
+ * 
+ * VIPSWeb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * NIBIO Open Source License for more details.
+ * 
+ * You should have received a copy of the NIBIO Open Source License
+ * along with VIPSWeb.  If not, see <http://www.nibio.no/licenses/>.
+ * 
+ */
+
+/**
+ * @copyright 2018 <a href="http://www.nibio.no/">NIBIO</a>
+ * @author Tor-Einar Skog <tor-einar.skog@nibio.no>
+ */
+
+
+/* ----------------------- Global elements ------------------- */
+var map;
+var maxMapZoom = 10;
+var carrotLayer;
+
+/**
+ * Initializes the spatial map
+ * @param {ol.Coordinate} lonLat - coordinates for the map's center (WGS84)
+ * @param {int} zoom - the zoom level (1-15, 1 is world wide view, 15 is greatest zoom)
+ * @param {string} mapAttribution - The text in the corner of the map giving credits where it's due
+ */
+function initSpatialMap(lonLat, zoomLevel, mapAttribution) {
+
+	// ---------- Background layer is OpenStreetMap --------------
+	var backgroundLayer = new ol.layer.Tile({
+		source: new ol.source.OSM({
+			attributions: [
+				new ol.Attribution({
+					html: mapAttribution
+				})
+			]
+		})
+	});
+
+	// Create projection for carrot layer
+	proj4.defs(
+		'EPSG:25833',
+		'+proj=utm +zone=33 +ellps=GRS80 +units=m +no_defs'
+	  );
+
+	// Create wms source
+	var carrotLayerSource = new ol.source.ImageWMS({
+		url: 'https://testvips.nibio.no/cgi-bin/PSILAROSAE',
+		params: { 'LAYERS': 'PSILAROSAE', 'TRANSPARENT': 'TRUE' },
+		serverType: 'mapserver',
+		ratio: 1,
+		projection: ol.proj.get('EPSG:25833')
+	})
+
+	carrotLayer = new ol.layer.Image({
+		source: carrotLayerSource,
+		visible: true,
+	})
+
+	// Creating the map
+	map = new ol.Map({
+		target: 'map',
+		layers: [backgroundLayer, carrotLayer],
+		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: zoomLevel,
+		maxMapZoom: maxMapZoom,
+	});
+	map.setView(view);
+
+
+	// Attempting to adjust map to small screen
+	if (map.getSize()[0] < 500) {
+		var zoom = map.getView().getZoom();
+		map.getView().setZoom(zoom - 1);
+	}
+}
\ No newline at end of file

spatial/templates/spatial/index.html

+{% extends "base.html" %}
+{% comment %}
+/*
+ * Copyright (c)2018 NIBIO <http://www.nibio.no/>. 
+ * 
+ * This file is part of VIPSWeb.
+ * VIPSWeb is free software: you can redistribute it and/or modify
+ * it under the terms of the NIBIO Open Source License as published by 
+ * NIBIO, either version 1 of the License, or (at your option) any
+ * later version.
+ * 
+ * VIPSWeb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * NIBIO Open Source License for more details.
+ * 
+ * You should have received a copy of the NIBIO Open Source License
+ * along with VIPSWeb.  If not, see <http://www.nibio.no/licenses/>.
+ * 
+ */
+ 
+{% endcomment %}
+{% 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/spatialMap.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}};
+		initSpatialMap([longitude,latitude],zoomLevel,"{{settings.MAP_ATTRIBUTION|safe}}");
+	});
+</script>
+{% endblock %}
+{% block content %}
+	<div class="row" id="mapAndForecastRow">
+		<!-- Start map container -->
+		<div class="col-md-8" id="mapContainer">
+			<div id="map" class="map" style="height: {{settings.MAP_HEIGHT}}px;">
+			</div>			
+		</div><!-- End map container -->
+	</div><!-- End row with sidebar and contents container -->
+{% endblock %}
\ No newline at end of file

spatial/tests.py

+from django.test import TestCase
+
+# Create your tests here.

spatial/urls.py

+from django.urls import re_path
+
+from spatial import views
+
+app_name='spatial'
+
+urlpatterns = [
+    re_path(r'^$', views.index, name='index'),
+]

spatial/views.py

+from django.shortcuts import render
+
+
+def index(request):
+    context = {}
+    return render(request, 'spatial/index.html', context)