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

Upgraded map to use OpenLayers v3.0.0-beta2

parent 8a5282c1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
.gitignore
+ 0
− 1
View file @ 3294bb45
VIPSWeb/default.sqlite3 VIPSWeb/default.sqlite3
VIPSWeb/assets VIPSWeb/assets
VIPSWeb/local_settings.py VIPSWeb/local_settings.py
VIPSWeb/static/js/ol.js
.project .project
.pydevproject .pydevproject
*.pyc *.pyc
......
VIPSWeb/static/css/ol.css 0 → 120000
+ 1
− 0
View file @ 3294bb45
/home/treinar/prosjekter/vips/2013_ny_vips/lib/OpenLayers-v3.0.0-beta.2/build/ol.css
\ No newline at end of file
VIPSWeb/static/js/forecastmap.js
+ 94
− 102
View file @ 3294bb45
...@@ -43,11 +43,9 @@ function initForecastMap(lonLat, zoomLevel, sourceHostname) ...@@ -43,11 +43,9 @@ function initForecastMap(lonLat, zoomLevel, sourceHostname)
// Fetching KML from VIPSLogic // Fetching KML from VIPSLogic
var forecastLayer = new ol.layer.Vector({ var forecastLayer = new ol.layer.Vector({
source: new ol.source.Vector({ source: new ol.source.KML({
parser: new ol.parser.KML({ url: "http://" + sourceHostname + "/rest/forecastresults/aggregate",
maxDepth: 1, extractStyles: true, extractAttributes: true projection: "EPSG:3857"
}),
url: "http://" + sourceHostname + "/rest/forecastresults/aggregate"
}) })
}); });
...@@ -61,13 +59,13 @@ function initForecastMap(lonLat, zoomLevel, sourceHostname) ...@@ -61,13 +59,13 @@ function initForecastMap(lonLat, zoomLevel, sourceHostname)
target: 'map', target: 'map',
layers: [backgroundLayer, forecastLayer], layers: [backgroundLayer, forecastLayer],
overlays: [popOverlay], overlays: [popOverlay],
renderer: ol.RendererHint.CANVAS renderer: 'canvas'
}); });
// Setting zoom and center for the map // Setting zoom and center for the map (need to do this after creating map. so that we kan transform our
// center to correct map projection)
var view = new ol.View2D({ var view = new ol.View2D({
// bb is probably replaced with getCode() in future release center: ol.proj.transform(lonLat, 'EPSG:4326', map.getView().getProjection().getCode()),
center: ol.proj.transform(lonLat, 'EPSG:4326', map.getView().getProjection().bb),
zoom:zoomLevel zoom:zoomLevel
}); });
map.setView(view); map.setView(view);
...@@ -84,19 +82,19 @@ function initForecastMap(lonLat, zoomLevel, sourceHostname) ...@@ -84,19 +82,19 @@ function initForecastMap(lonLat, zoomLevel, sourceHostname)
// Using Bootstrap's popover plugin. See http://getbootstrap.com/javascript/#popovers // Using Bootstrap's popover plugin. See http://getbootstrap.com/javascript/#popovers
var poiDetails = $("#popover"); var poiDetails = $("#popover");
// State cariable
var currentClickedFeature = false; var currentClickedFeature = false;
// Initiated on mouseover
// Displays station name in a tooltip box
var displayFeatureName = function(pixel) { var displayFeatureName = function(pixel) {
poiTitle.css({ poiTitle.css({
left: pixel[0] + 'px', left: pixel[0] + 'px',
top: (pixel[1] - 15) + 'px' top: (pixel[1] - 15) + 'px'
}); });
map.getFeatures({ var feature = map.forEachFeatureAtPixel(pixel, function(feature,layer){
pixel: pixel, return feature;
layers: [forecastLayer], });
success: function(layerFeatures) {
var feature = layerFeatures[0][0];
var title = poiTitle.data("bs.tooltip").options.title; var title = poiTitle.data("bs.tooltip").options.title;
if (feature && feature != currentClickedFeature) { if (feature && feature != currentClickedFeature) {
poiTitle.tooltip('hide'); poiTitle.tooltip('hide');
...@@ -110,110 +108,104 @@ function initForecastMap(lonLat, zoomLevel, sourceHostname) ...@@ -110,110 +108,104 @@ function initForecastMap(lonLat, zoomLevel, sourceHostname)
} }
} }
}
});
}; };
// Error handling when collecting forecast information from server fails
var handleAjaxError = function(jqXHR,textStatus,errorThrown){ var handleAjaxError = function(jqXHR,textStatus,errorThrown){
var message = jqXHR.responseJSON !== undefined ? jqXHR.responseJSON.message : jqXHR.responseText; var message = jqXHR.responseJSON !== undefined ? jqXHR.responseJSON.message : jqXHR.responseText;
alert ("Error: " + message); alert ("Error: " + message);
}; };
// Displays popup with forecasts for a given station
// (if there is a station where the click event is fired)
var displayFeatureDetails = function(pixel, coordinate) { var displayFeatureDetails = function(pixel, coordinate) {
/*poiDetails.css({ var feature = map.forEachFeatureAtPixel(pixel, function(feature,layer){
left: pixel[0] + 'px', return feature;
top: (pixel[1] - 15) + 'px' });
});
*/ if (feature) {
popOverlay.setPosition(coordinate); // Position the popup, and hiding it
map.getFeatures({ // Resetting information from (possible) former popups
pixel: pixel, var geometry = feature.getGeometry();
layers: [forecastLayer], popOverlay.setPosition(geometry.getCoordinates());
success: function(layerFeatures) { poiTitle.tooltip('hide');
var feature = layerFeatures[0][0]; poiDetails.popover('destroy');
if (feature) { currentClickedFeature = feature;
poiTitle.tooltip('hide'); // Fetching information asynchronously from server
poiDetails.popover('destroy'); var request = $.ajax({
currentClickedFeature = feature; type:"GET",
var request = $.ajax({ url: "http://" + sourceHostname + "/rest/forecastresults/latest/poi/" + feature.getId(),
type:"GET", statusCode:{
url: "http://" + sourceHostname + "/rest/forecastresults/latest/poi/" + feature.getId(), 200: function(data,textStatus, jqXHR){
statusCode:{ // Building result HTML
200: function(data,textStatus, jqXHR){ var resultHTML = []
// Building result HTML for(index in data.results)
var resultHTML = [] {
//console.log(data.results); var forecastConfiguration = data.forecastConfigurations[data.results[index].forecastConfigurationId];
for(index in data.results) var alertClass = "";
{ switch(data.results[index].warningStatus)
var forecastConfiguration = data.forecastConfigurations[data.results[index].forecastConfigurationId];
var alertClass = "";
switch(data.results[index].warningStatus)
{
case 2:
alertClass = "alert-success";
break;
case 3:
alertClass = "alert-warning";
break;
case 4:
alertClass = "alert-danger";
break;
default:
alertClass = "alert-info";
}
//console.log(forecastConfiguration);
resultHTML.push("<div class=\"" + alertClass + "\">" + moment(data.results[index].resultValidTime).format("YYYY-MM-DD") + ": <a href=\"/forecasts/" + forecastConfiguration.forecastConfigurationId + "\" class=\"alert-link\">" + modelLocalNames[forecastConfiguration.modelId] + "</a></div>");
}
if(resultHTML.length == 0)
{ {
resultHTML.push(gettext("No forecasts found for") + " " + feature.get("name")); case 2:
alertClass = "alert-success";
break;
case 3:
alertClass = "alert-warning";
break;
case 4:
alertClass = "alert-danger";
break;
default:
alertClass = "alert-info";
} }
// Testing resultHTML.push("<div class=\"" + alertClass + "\">" + moment(data.results[index].resultValidTime).format("YYYY-MM-DD") + ": <a href=\"/forecasts/" + forecastConfiguration.forecastConfigurationId + "\" class=\"alert-link\">" + modelLocalNames[forecastConfiguration.modelId] + "</a></div>");
//resultHTML = ["Mange små ord mange små ord Få ord"]; }
poiDetails.popover({
animation: true, if(resultHTML.length == 0)
trigger: 'manual', {
html: true, resultHTML.push(gettext("No forecasts found for") + " " + feature.get("name"));
placement: "auto top", }
title: feature.get("name"),
content: resultHTML.join("") // Create the popup, showing it
}); poiDetails.popover({
animation: true,
poiDetails.popover('show'); trigger: 'manual',
//info.data("bs.tooltip").options.title = resultHTML.join("") ; html: true,
//info.tooltip('show'); placement: "auto top",
}, title: feature.get("name"),
400: handleAjaxError, content: resultHTML.join("")
401: handleAjaxError, });
404: handleAjaxError,
500: handleAjaxError poiDetails.popover('show');
}
}); },
400: handleAjaxError,
401: handleAjaxError,
} else { 404: handleAjaxError,
currentClickedFeature = null; 500: handleAjaxError
poiDetails.popover('destroy'); }
} });
}
});
}; } else {
currentClickedFeature = null;
poiDetails.popover('destroy');
}
};
// On mouseover, display name of POI // On mouseover, display name of POI in tooltip
//$(map.getViewport()).on('mousemove', function(evt) {
map.on('mousemove', function(evt) { map.on('mousemove', function(evt) {
//var pixel = map.getEventPixel(evt.originalEvent); var pixel = map.getEventPixel(evt.originalEvent);
var pixel = evt.getPixel()
displayFeatureName(pixel); displayFeatureName(pixel);
}); });
// On click, display forecasts // On click, display forecasts in popup
map.on('click', function(evt) { map.on('click', function(evt) {
displayFeatureDetails(evt.getPixel(),evt.getCoordinate()); var pixel = map.getEventPixel(evt.originalEvent);
displayFeatureDetails(pixel);
}); });
map.on('moveend', function(evt) { map.on('moveend', function(evt) {
......
VIPSWeb/static/test/mockKML.kml
+ 3
− 2
View file @ 3294bb45
...@@ -44,7 +44,8 @@ ...@@ -44,7 +44,8 @@
<IconStyle> <IconStyle>
<scale>0.55</scale> <scale>0.55</scale>
<Icon> <Icon>
<href>http://www.vips-landbruk.no/graphics/dot_green.png</href> <!--href>http://www.vips-landbruk.no/graphics/dot_green.png</href-->
<href>http://maps.google.com/mapfiles/kml/shapes/parking_lot.png</href>
</Icon> </Icon>
</IconStyle> </IconStyle>
</Style> </Style>
...@@ -75,7 +76,7 @@ ...@@ -75,7 +76,7 @@
<Placemark> <Placemark>
<name>Apelsvoll</name> <name>Apelsvoll</name>
<description><![CDATA[Mangler informasjon om varsler for Apelsvoll]]></description> <description><![CDATA[Mangler informasjon om varsler for Apelsvoll]]></description>
<styleUrl>#style_4</styleUrl> <!--styleUrl>#style_4</styleUrl-->
<Point> <Point>
<coordinates>10.86952,60.70024</coordinates> <coordinates>10.86952,60.70024</coordinates>
</Point> </Point>
......
VIPSWeb/templates/index.html
+ 3
− 3
View file @ 3294bb45
...@@ -21,11 +21,11 @@ ...@@ -21,11 +21,11 @@
{% load i18n l10n staticfiles forecast_extras %} {% load i18n l10n staticfiles forecast_extras %}
{% block title%}{% trans "Welcome" %}{%endblock%} {% block title%}{% trans "Welcome" %}{%endblock%}
{% block customCSS %} {% block customCSS %}
<link rel="stylesheet" href="http://ol3js.org/en/master/build/ol.css" type="text/css"> <link rel="stylesheet" href="{% static "css/ol.css" %}" type="text/css">
{% endblock %} {% endblock %}
{% block customJS %} {% block customJS %}
<script type="text/javascript" src="{% url 'django.views.i18n.javascript_catalog' %}"></script> <script type="text/javascript" src="{% url 'django.views.i18n.javascript_catalog' %}"></script>
<script type="text/javascript" src="{% static "js/ol.js" %}" type="text/javascript"></script> <script type="text/javascript" src="{% static "js/ol.js" %}"></script>
<script type="text/javascript" src="/forecasts/models/js/modelLocalNames.js"></script> <script type="text/javascript" src="/forecasts/models/js/modelLocalNames.js"></script>
<script type="text/javascript" src="{% static "js/moment.min.js" %}"></script> <script type="text/javascript" src="{% static "js/moment.min.js" %}"></script>
<script type="text/javascript" src="{% static "js/forecastmap.js" %}"></script> <script type="text/javascript" src="{% static "js/forecastmap.js" %}"></script>
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
{% for message_tag in message_tags %} {% for message_tag in message_tags %}
<thead> <thead>
<tr> <tr>
<th colspan="2">{{message_tag.default_tag_name}}</th> <th colspan="2">{{message_tag.local_tag_name|default_if_none:message_tag.default_tag_name}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
......
messages/models.py
+ 5
− 1
View file @ 3294bb45
...@@ -43,10 +43,14 @@ class MessageTag: ...@@ -43,10 +43,14 @@ class MessageTag:
@staticmethod @staticmethod
def get_instance_from_dict(item): def get_instance_from_dict(item):
local_tag_name = None
for tagLocale in item["messageTagLocaleSet"]:
if tagLocale["messageTagLocalePK"]["locale"] == settings.VIPSLOGIC_LANGUAGE_CODE:
local_tag_name = tagLocale["localName"]
return MessageTag( return MessageTag(
item["messageTagId"], item["messageTagId"],
item["defaultTagName"], item["defaultTagName"],
None local_tag_name
) )
class Message: class Message:
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment