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

First working version of crop type select for map

parent d4afffef
Branches
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
VIPSWeb/static/css/3rdparty/ol.css
+ 1
− 1
View file @ a622b4ad
.ol-attribution{position:absolute;text-align:right;bottom:0;right:0;font-family:'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;padding:6px}.ol-attribution a{text-decoration:none}.ol-attribution{color:#000}.ol-attribution:not([ie8andbelow]){color:#eee;background:rgba(0,60,136,0.3)}.ol-attribution a{color:#7b98bc}.ol-attribution a:not([ie8andbelow]){color:white}.ol-attribution ul{margin:0;padding:0;font-size:10px;line-height:12px}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:"\002003"}.ol-attribution-bing-tos{float:right;padding-top:2px;white-space:nowrap}.ol-full-screen{background:#eee;border-radius:4px;padding:2px;position:absolute;right:8px;top:8px}.ol-full-screen:not([ie8andbelow]){background:rgba(255,255,255,0.4)}@media print{.ol-full-screen{display:none}}.ol-full-screen a{background:#7b98bc;color:white;display:block;font-family:'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;font-size:18px;font-weight:bold;height:22px;line-height:19px;margin:1px;padding:0;text-align:center;text-decoration:none;width:22px}.ol-full-screen a:not([ie8andbelow]){background:rgba(0,60,136,0.5)}a.ol-full-screen-false:after{content:"\002194"}a.ol-full-screen-true:after{content:"\0000d7"}.ol-full-screen div{border-radius:2px}.ol-full-screen div a{border-radius:2px}.ol-full-screen a:hover{background:#4c6079}.ol-full-screen a:hover:not([ie8andbelow]){background:rgba(0,60,136,0.7)}.ol-logo{bottom:0;left:0;padding:2px;position:absolute}.ol-logo ul{margin:0;padding:0}.ol-logo ul li{display:inline;list-style:none}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:#95b9e6;border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line:not([ie8andbelow]){background:rgba(0,60,136,0.3)}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;font-family:'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;text-align:center;margin:1px;padding:0 2px}.ol-unsupported{display:none}.ol-viewport .ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.ol-zoom{position:absolute;top:8px;left:8px;background-color:#eee;border-radius:4px;padding:2px}.ol-zoom:not([ie8andbelow]){background-color:rgba(255,255,255,0.4)}@media print{.ol-zoom{display:none}}.ol-zoom a{display:block;margin:1px;padding:0;color:white;font-size:18px;font-family:'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;font-weight:bold;text-decoration:none;text-align:center;height:22px;width:22px;line-height:19px;background-color:#7b98bc}.ol-zoom a:not([ie8andbelow]){background-color:rgba(0,60,136,0.5)}.ol-touch .ol-zoom a{font-size:20px;height:30px;width:30px;line-height:26px}.ol-zoom a:hover{color:#fff;text-decoration:none;background-color:#4c6079}.ol-zoom a:hover:not([ie8andbelow]){background-color:rgba(0,60,136,0.7)}.ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom-out{border-radius:0 0 2px 2px}.ol-zoomslider{position:absolute;top:67px;left:8px;background:#eee;border-radius:4px;width:28px;height:200px;outline:none;overflow:hidden;padding:0;margin:0}.ol-zoomslider:not([ie8andbelow]){background:rgba(255,255,255,0.4)}.ol-zoomslider-thumb{position:absolute;display:block;padding:0;margin:2px;background:#7b98bc;border-radius:2px;outline:none;overflow:hidden;height:20px;width:24px}.ol-zoomslider-thumb:not([ie8andbelow]){background:rgba(0,60,136,0.5)}.ol-zoom-extent{position:absolute;background:#eee;border-radius:4px;left:8px;padding:2px;top:65px}.ol-zoom-extent:not([ie8andbelow]){background:rgba(255,255,255,0.4)}@media print{.ol-zoom-extent{display:none}}.ol-zoom-extent a{display:block;margin:1px;padding:0;color:white;font-size:16px;font-family:'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;font-weight:bold;text-decoration:none;text-align:center;height:22px;width:22px;background-color:#7b98bc;border-radius:2px}.ol-zoom-extent a:not([ie8andbelow]){background-color:rgba(0,60,136,0.5)}.ol-touch .ol-zoom-extent a{font-size:20px;height:30px;width:30px;line-height:26px}.ol-zoom-extent a:hover{background-color:#4c6079}.ol-zoom-extent a:hover:not([ie8andbelow]){background-color:rgba(0,60,136,0.7)}.ol-zoom-extent a:after{content:"E"}
\ No newline at end of file
.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:#95b9e6;background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;padding:0 2px}.ol-unsupported{display:none}.ol-viewport .ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-control{position:absolute;background-color:#eee;background-color:rgba(255,255,255,.4);border-radius:4px;padding:2px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:#7b98bc;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-family:Arial;font-weight:400;font-size:1.2em}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:#4c6079;background-color:rgba(0,60,136,.7)}.ol-zoom-extent button:after{content:"E"}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}button.ol-full-screen-false:after{content:"\2194"}button.ol-full-screen-true:after{content:"\00d7"}.ol-has-tooltip [role=tooltip]{position:absolute;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;font-weight:400;font-size:14px;text-shadow:0 0 2px #fff}.ol-has-tooltip:focus [role=tooltip],.ol-has-tooltip:hover [role=tooltip]{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;clip:auto;padding:0 .4em;font-size:.8em;height:1.2em;width:auto;line-height:1.2em;z-index:1100;max-height:100px;white-space:nowrap;display:inline-block;background:#FFF;background:rgba(255,255,255,.6);color:#000;border:3px solid rgba(255,255,255,0);border-left-width:0;border-radius:0 4px 4px 0;bottom:.3em;left:2.2em}.ol-touch .ol-has-tooltip:focus [role=tooltip],.ol-touch .ol-has-tooltip:hover [role=tooltip]{display:none}.ol-zoom .ol-has-tooltip:focus [role=tooltip],.ol-zoom .ol-has-tooltip:hover [role=tooltip]{top:1.1em}.ol-attribution .ol-has-tooltip:focus [role=tooltip],.ol-attribution .ol-has-tooltip:hover [role=tooltip],.ol-full-screen .ol-has-tooltip:focus [role=tooltip],.ol-full-screen .ol-has-tooltip:hover [role=tooltip],.ol-rotate .ol-has-tooltip:focus [role=tooltip],.ol-rotate .ol-has-tooltip:hover [role=tooltip]{right:2.2em;left:auto;border-radius:4px 0 0 4px;border-left-width:3px;border-right-width:0}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff;max-width:calc(100% - 3.6em)}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul,.ol-attribution:not(.ol-collapsed) button:hover [role=tooltip]{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{position:absolute;top:4.5em;left:.5em;background:#eee;background:rgba(255,255,255,.4);border-radius:4px;outline:0;overflow:hidden;width:1.5675em;height:200px;padding:3px;margin:0}.ol-zoomslider-thumb{position:absolute;display:block;background:#7b98bc;background:rgba(0,60,136,.5);border-radius:2px;outline:0;overflow:hidden;cursor:pointer;font-size:1.14em;height:1em;width:1.375em;margin:3px;padding:0}.ol-touch .ol-zoomslider{top:5.5em;width:2.052em}.ol-touch .ol-zoomslider-thumb{width:1.8em}.ol-attribution,.ol-control button,.ol-has-tooltip [role=tooltip],.ol-scale-line-inner{font-family:'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif}
\ No newline at end of file
VIPSWeb/static/js/3rdparty/ol-debug.js 0 → 100644
+ 109720
− 0
View file @ a622b4ad
This diff is collapsed.
VIPSWeb/static/js/3rdparty/ol.js
+ 741
− 521
View file @ a622b4ad
This diff is collapsed.
VIPSWeb/static/js/forecastmap.js
+ 63
− 6
View file @ a622b4ad
......@@ -22,6 +22,10 @@
* @author Tor-Einar Skog <tor-einar.skog@bioforsk.no>
*/
// Couple of global elements
var map;
var forecastLayer;
/**
* Initalizes the forecast map.
* @param {ol.Coordinate} lonLat - coordinates for the map's center (WGS84)
......@@ -50,10 +54,12 @@ function initForecastMap(lonLat, zoomLevel, organizationId, sourceHostname, mapA
});
// Fetching KML from VIPSLogic
var forecastLayer = new ol.layer.Vector({
// Filtering with crop ids
forecastLayer = new ol.layer.Vector({
source: new ol.source.KML({
url: "http://" + sourceHostname + "/rest/forecastresults/aggregate/" + organizationId,
projection: "EPSG:3857"
url: "http://" + sourceHostname + "/rest/forecastresults/aggregate/" + organizationId + "?" + buildPathParamString("cropOrganismId", getSelectedCropIds()),
projection: ol.proj.get('EPSG:3857')
})
});
......@@ -63,16 +69,16 @@ function initForecastMap(lonLat, zoomLevel, organizationId, sourceHostname, mapA
});
// Creating the map
var map = new ol.Map({
map = new ol.Map({
target: 'map',
layers: [backgroundLayer, forecastLayer],
overlays: [popOverlay],
renderer: 'canvas'
});
// Setting zoom and center for the map (need to do this after creating map. so that we kan transform our
// 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.View2D({
var view = new ol.View({
center: ol.proj.transform(lonLat, 'EPSG:4326', map.getView().getProjection().getCode()),
zoom:zoomLevel
});
......@@ -230,4 +236,55 @@ function initForecastMap(lonLat, zoomLevel, organizationId, sourceHostname, mapA
map.addControl(mousePositionControl);
*/
}
/**
* Which crops have been selected? Checks the form
* @returns
*/
function getSelectedCropIds()
{
selectedCropIds = [];
formFields = document.getElementsByName("cropIds");
for(i in formFields)
{
if(formFields[i].checked)
{
selectedCropIds = selectedCropIds.concat(eval(formFields[i].value));
}
}
return selectedCropIds;
}
/**
* Builds a parameter string from an array of values
* @param paramName
* @param values
* @returns {String}
*/
function buildPathParamString(paramName, values)
{
var pathParamString = "";
for(i in values)
{
pathParamString += "&" + paramName + "=" + values[i];
}
return pathParamString;
}
/**
* Loads new KML info from VIPSLogic
* @param organizationId
* @param sourceHostname
*/
function refreshForecasts(organizationId, sourceHostname)
{
map.removeLayer(forecastLayer);
forecastLayer = new ol.layer.Vector({
source: new ol.source.KML({
url: "http://" + sourceHostname + "/rest/forecastresults/aggregate/" + organizationId + "?" + buildPathParamString("cropOrganismId", getSelectedCropIds()),
projection: "EPSG:3857"
})
});
map.addLayer(forecastLayer);
}
\ No newline at end of file
VIPSWeb/templates/index.html
+ 13
− 0
View file @ a622b4ad
......@@ -48,6 +48,19 @@
</div>
</div><!-- End map container -->
<div class="col-md-4">
<h1>{% trans "Crops" %}</h1>
<div class="row">
<div class="col-md-6">
<ul class="list-group">
{% for crop_group in crop_groups %}
<li class="list-group-item"><input type="checkbox" name="cropIds" value="{{crop_group.crop_ids}}" checked="checked" onchange="refreshForecasts({{settings.VIPS_ORGANIZATION_ID}},'{{settings.VIPSLOGIC_SERVER_NAME}}')"/>{{ crop_group.name }}</li>
{% endfor %}
</ul>
</div>
<div class="col-md-6">
</div>
</div>
<h1>{% trans "Messages" %}</h1>
<table class="table table-hover table-condensed table-striped">
{% for message_tag in message_tags %}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment