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

Making the GIS map self contained, ready to insert into any form

parent 139ccc0b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 146 additions and 55 deletions
src/main/java/no/nibio/vips/logic/i18n/ResourceBundleJSServlet.java
+ 33
− 1
View file @ 03181f41
......@@ -58,7 +58,39 @@ public class ResourceBundleJSServlet extends HttpServlet {
else output.append(",");
output.append("\n\"").append(key).append("\":\"").append(StringEscapeUtils.escapeJavaScript(i18nTexts.getString(key))).append("\"");
}
output.append("\n};");
output.append("\n};\n\n");
// Adding the methods needed to utilize the i18Texts dictionary
output.append(
"/**\n" +
"* Gets a message by key. The message should be translated\n" +
"* Depends on /js/resourcebundle.js for the dictionary i18Texts\n" +
"* @param {String} msgKey\n" +
"* @param {Array} positionalArguments - for string substitution in message\n" +
"* @returns {String} the message\n" +
"*/\n" +
"function getI18nMsg(msgKey,positionalArguments)\n" +
"{\n" +
" if(i18Texts[msgKey] === undefined)\n" +
" {\n" +
" return getI18nMsg(\"unknownTranslationKey\",[msgKey]);\n" +
" }\n" +
" return replaceParams(i18Texts[msgKey], positionalArguments);\n" +
"}\n" +
" \n" +
"/**\n" +
" * Mimic of the MessageFormat.format method in Java.\n" +
" * Very nicely explained here: http://stackoverflow.com/questions/1353408/messageformat-in-javascript-parameters-in-localized-ui-strings\n" +
" * @param {String} string\n" +
" * @param {Array} replacements\n" +
" * @returns {String}\n" +
" */\n" +
"function replaceParams(string, replacements) {\n" +
" return string.replace(/\\{(\\d+)\\}/g, function() {\n" +
" return replacements[arguments[1]];\n" +
" });\n" +
"}\n");
out.print(output.toString());
}
......
src/main/resources/no/nibio/vips/logic/i18n/vipslogictexts.properties
+ 7
− 0
View file @ 03181f41
......@@ -287,3 +287,10 @@ rememberLogin=Remember login
task_DeleteAllExpiredUserUuidsTask_name=Delete all expired user UUIDs
task_DeleteAllExpiredUserUuidsTask_description=Cleaning up the database of UUIDs, which is used for remembering client logins
mapDataIsRequired=Map data is required
showMeWhereIAm=Show me where I am
unknownTranslationKey=Unknown translation key: {0}
mapDrawTypeLabel=What do you want to draw
point=Point
polygon=Polygon
clearAll=Clear all
clearOne=Clear one
src/main/resources/no/nibio/vips/logic/i18n/vipslogictexts_bs.properties
+ 7
− 0
View file @ 03181f41
......@@ -287,3 +287,10 @@ rememberLogin=Remember login
task_DeleteAllExpiredUserUuidsTask_name=Delete all expired user UUIDs
task_DeleteAllExpiredUserUuidsTask_description=Cleaning up the database of UUIDs, which is used for remembering client logins
mapDataIsRequired=Map data is required
showMeWhereIAm=Show me where I Am
unknownTranslationKey=Unknown translation key: {0}
mapDrawTypeLabel=What do you want to draw
point=point
polygon=Polygon
clearAll=Clear all
clearOne=Clear one
src/main/resources/no/nibio/vips/logic/i18n/vipslogictexts_hr.properties
+ 7
− 0
View file @ 03181f41
......@@ -286,3 +286,10 @@ rememberLogin=Remember login
task_DeleteAllExpiredUserUuidsTask_name=Delete all expired user UUIDs
task_DeleteAllExpiredUserUuidsTask_description=Cleaning up the database of UUIDs, which is used for remembering client logins
mapDataIsRequired=Map data is required
showMeWhereIAm=Show me where I Am
unknownTranslationKey=Unknown translation key: {0}
mapDrawTypeLabel=What do you want to draw
point=point
polygon=Polygon
clearAll=Clear all
clearOne=Clear one
src/main/resources/no/nibio/vips/logic/i18n/vipslogictexts_nb.properties
+ 7
− 0
View file @ 03181f41
......@@ -287,3 +287,10 @@ rememberLogin=Husk innlogging
task_DeleteAllExpiredUserUuidsTask_name=Slett alle utdaterte brukerUUIDer
task_DeleteAllExpiredUserUuidsTask_description=Rydder opp i tabellen over brukerUUIDer, som brukes til \u00e5 huske klientinnlogginger
mapDataIsRequired=Kartdata m\u00e5 registreres
showMeWhereIAm=Vis meg hvor jeg er
unknownTranslationKey=Ukjent oversettelsesn\u00f8kkel: {0}
mapDrawTypeLabel=Jeg vil tegne
point=Punkt
polygon=Omr\u00e5de
clearAll=Slett alt
clearOne=Slett ett element
src/main/resources/no/nibio/vips/logic/i18n/vipslogictexts_sr.properties
+ 7
− 0
View file @ 03181f41
......@@ -287,3 +287,10 @@ rememberLogin=Remember login
task_DeleteAllExpiredUserUuidsTask_name=Delete all expired user UUIDs
task_DeleteAllExpiredUserUuidsTask_description=Cleaning up the database of UUIDs, which is used for remembering client logins
mapDataIsRequired=Map data is required
showMeWhereIAm=Show me where I Am
unknownTranslationKey=Unknown translation key: {0}
mapDrawTypeLabel=What do you want to draw
point=point
polygon=Polygon
clearAll=Clear all
clearOne=Clear one
src/main/webapp/css/map.css
+ 4
− 5
View file @ 03181f41
/*
* Copyright (c) 2014 NIBIO <http://www.nibio.no/>.
* Copyright (c) 2016 NIBIO <http://www.nibio.no/>.
*
* This file is part of VIPSLogic.
* VIPSLogic is free software: you can redistribute it and/or modify
......@@ -18,10 +18,9 @@
*/
/*
Document : stylesheet
Created on : Aug 28, 2013, 10:55:15 AM
Author : Viggo Lunde <viggo.lunde@nibio.no>
Author : Viggo Lunde <viggo.lunde@nibio.no>, Tor-Einar Skog <tor-einar.skog@nibio.no>
Description:
Main stylesheet of the VIPSLogic web app. Cusomizes the bootstrap.css
Stylesheet for the objectGISInfoMap. Cusomizes the bootstrap.css
*/
#toolbox {
......@@ -66,7 +65,7 @@
float: right;
width: 22px;
height: 22px;
background-image: url('../images/geoloc3.png');
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY3RkRGRkNGQTU2MDExRTU5NzkwREJDNkE0NDk4ODlEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY3RkRGRkQwQTU2MDExRTU5NzkwREJDNkE0NDk4ODlEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjdGREZGQ0RBNTYwMTFFNTk3OTBEQkM2QTQ0OTg4OUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjdGREZGQ0VBNTYwMTFFNTk3OTBEQkM2QTQ0OTg4OUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7kZLS4AAAABlBMVEX9/fwAAABwf477AAAAAnRSTlP/AOW3MEoAAAHzSURBVHja7NvBcsJADANQ+f9/misHsmvZkhNgfWwhes10htheEOXCe9Wvosm/H4ADOIADOIBZAD7WEADLcgOQKB8A6bIAQJUcALqkAJRKB0C1NAA0SgFAr7oAtKsHANwC2PM3BAzkLwWYyF8JMJK/EGAm/1qAofxLAabySQAwJUAx/8NDaU1QAlw+FRcEoPPXj+W0AGT+vi/wAlKNCSUAk5/tjHqA7LsJ3EpAAKjeMC1AlN9J/boPoLvj7I2s5gf7gh6gNB/I/S+XO3/2FTkA9Tm2/6DxAjSTFDjzRYAIsWASsL8ivPn3A+KRADCAGAQ4bsD2r3o8IH4T8P5wzXRhnqGqY/p5AAdwAAdwAAdAXlO/jiTS//SB5KnPhPGTgHZj8u2tGdec3t6eDw0oWACcNyA1pBqcEYlvAVSA4qCyMid86qi2BKgNq/MC07heti8oLyzy7zStbDQ7o87SSrC2623NsntH3+Kyubold7f08noHUCyvc1v4zA+r6/ttY3EB0B1g8HR3Nx9ioc6Q3H+KRi8IFhAz+VNnyaICiIn8mfOEUQWICNEAhDt/f6zXPdcyH2xOHFu2jv0yF3dOHkMGCFc88QUH01A1HONPbqiq6Lc77Tzd+0vTo/ZFJ1l4FfBRUb6Oav5zAAdwAH8PiK8FvAQYAObrJPi2gfjAAAAAAElFTkSuQmCC);
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: 1px;
......
src/main/webapp/css/vipslogic.css
+ 1
− 1
View file @ 03181f41
......@@ -70,7 +70,7 @@ legend {
display: block;
}
#observationFormMap, #weatherStationListMap, #weatherStationFormMap, #weatherStationViewMap{
#objectGISInfoMap, #weatherStationListMap, #weatherStationFormMap, #weatherStationViewMap {
height: 400px;
width: 100%;
}
......
src/main/webapp/js/observationFormMap.js → src/main/webapp/js/objectGISInfoMap.js
+ 68
− 8
View file @ 03181f41
/*
* Copyright (c) 2014 NIBIO <http://www.nibio.no/>.
* Copyright (c) 2015-2016 NIBIO <http://www.nibio.no/>.
*
* This file is part of VIPSLogic.
* VIPSLogic is free software: you can redistribute it and/or modify
......@@ -18,22 +18,76 @@
*/
/**
* Logic for registering location of an observation using an OpenLayers v3 map
* Logic for GIS information about an object
*
* To get the current registered GIS as GEOJson, call getFeatures();
*
* @author Viggo Lunde <viggo.lunde@nibio.no>
* @author Tor-Einar Skog <tor-einar.skog@nibio.no>
*/
var featureOverlay, map;
var olMapDivId = "objectGISInfoMap";
/**
*
* @param {string} containerId - DOM id of the div where we can intialize the map
* @param {ol.Coordinate} center - coordinates for the map's center (WGS84)
* @param {int} zoomLevel - the zoom level (1-15, 1 is world wide view, 15 is greatest zoom)
* @param {boolean} displayMarker - show observation marker in center location
* @param {string} drawnObjs - GeoJSON with geometries to display
* @param {string} chooseLayersObj Which polygon layers to choose from. Sample:
* <pre>
* {
* "chooseFromMapLayers":[
* {
* "mapLayerId":1,
* "mapLayerTitle":"Kommunegrenser",
* "description":"Norske kommunegrenser",
* "mapLayerType":"overlay",
* "defaultVisible":false,
* "hoverAttribute":"navn",
* "url":"http://kart13.skogoglandskap.no/geoserver/ows?srsname=EPSG:3857&format_options=decimals:0&service=WFS&version=1.0.0&outputFormat=json&request=GetFeature&typeName=sl:n2000_komm_flate&"
* },
* {
* "mapLayerId":2,
* "mapLayerTitle":"Fylkesgrenser",
* "description":"Norske fylkesgrenser",
* "mapLayerType":"overlay",
* "defaultVisible":false,
* "hoverAttribute":null,
* "url":"http://kart13.skogoglandskap.no/geoserver/ows?srsname=EPSG:3857&format_options=decimals:0&service=WFS&version=1.0.0&outputFormat=json&request=GetFeature&typeName=sl:n5_forv_fylke_mv&"
* }
* ]
* }
* </pre>
*
* @returns {void}
*/
function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
function initMap(containerId, center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
// Create the DOM structure
var theContainer = el(containerId);
theContainer.innerHTML = [
"<div>",
" <label>",getI18nMsg("mapDrawTypeLabel"),"</label>",
" <select id='type'>",
" <option value='Point'>",getI18nMsg("point"),"</option>",
" <option value='Polygon'>",getI18nMsg("polygon"),"</option>",
" </select>",
" <button id='delete' type='button'>",getI18nMsg("clearAll"),"</button>",
" <button id='deleteOne' type='button'>",getI18nMsg("clearOne"),"</button>",
"</div>",
"<div id='", olMapDivId ,"' class='map'></div>",
"<div id='alert_placeholder'></div>"
].join("");
// Adding standard base layers
//
// TODO: Make this configurable per organization (input base layers as function parameter)
// OpenStreetMap
var osm = new ol.layer.Tile({
'title': 'OSM',
type: 'base',
......@@ -47,6 +101,7 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
})
});
// Satellite photo map from Microsoft/Bing
var bingArial = new ol.layer.Tile({
title: 'Bing Arial',
type: 'base',
......@@ -57,7 +112,7 @@ function initMap(center, zoomLevel, displayMarker, drawnObjs, chooseLayersObj) {
})
});
// Detailed map of Norway in shades of grey
var topo2graatone = new ol.layer.Tile({
title: "Gråtone",
type: 'base',
......@@ -130,7 +185,7 @@ app.geoLocationControl = function(opt_options) {
var button = document.createElement('button');
//button.innerHTML = 'O';
button.title = 'Show me where I am'
button.title = getI18nMsg("showMeWhereIAm");
var this_ = this;
......@@ -166,7 +221,7 @@ ol.inherits(app.geoLocationControl, ol.control.Control);
// Creating the map
map = new ol.Map({
target: 'observationFormMap',
target: olMapDivId, // Defined at the top of this file
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: true
......@@ -545,7 +600,9 @@ ol.inherits(app.geoLocationControl, ol.control.Control);
}
/**
* Listen for changes in the user's location
*/
geolocation.on('change:position', function() {
removeFeature('geoLoc');
......@@ -618,6 +675,9 @@ ol.inherits(app.geoLocationControl, ol.control.Control);
}*/
}
/**
* @return {GEOJson} returns all features currently on the map in GEOJson format
*/
function getFeatures() {
var features = featureOverlay.getSource().getFeatures();
var format = new ol.format.GeoJSON();
......
src/main/webapp/js/validateForm.js
+ 1
− 25
View file @ 03181f41
......@@ -20,6 +20,7 @@
* This validator has its Java counterpart in no.nibio.web.forms.FormValidator.java
* (for server side validation). They use the same JSON file for form validation.
* Changes in logic client side should be reflected server side
* Depends on /js/resourcebundle.js for the dictionary i18Texts
*/
// Constant defs for field types. Also found in no.nibio.web.forms.FormField
......@@ -559,28 +560,3 @@ function styleValid(inputEl)
{
$(inputEl.parentNode).removeClass("has-error");
}
/**
* Gets a message by key. The message should be translated
* Depends on /js/resourcebundle.js for the dictionary i18Texts
* @param {String} msgKey
* @param {Array} positionalArguments - for string substitution in message
* @returns {String} the message
*/
function getI18nMsg(msgKey,positionalArguments)
{
return replaceParams(i18Texts[msgKey], positionalArguments);
}
/**
* Mimic of the MessageFormat.format method in Java.
* Very nicely explained here: http://stackoverflow.com/questions/1353408/messageformat-in-javascript-parameters-in-localized-ui-strings
* @param {String} string
* @param {Array} replacements
* @returns {String}
*/
function replaceParams(string, replacements) {
return string.replace(/\{(\d+)\}/g, function() {
return replacements[arguments[1]];
});
}
\ No newline at end of file
src/main/webapp/templates/observationForm.ftl
+ 4
− 15
View file @ 03181f41
......@@ -33,7 +33,7 @@
<script type="text/javascript" src="/js/constants.js"></script>
<script type="text/javascript" src="/js/resourcebundle.js"></script>
<script type="text/javascript" src="/js/validateForm.js"></script>
<script type="text/javascript" src="/js/observationFormMap.js"></script>
<script type="text/javascript" src="/js/objectGISInfoMap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Make sure that there is a datetime picker present for HTML5
......@@ -57,7 +57,7 @@
<#else>
var geoInfo = <#if observation.geoinfo?has_content>${observation.geoinfo}<#else>{}</#if>;
var chooseFromMapLayers = {"chooseFromMapLayers":<#if mapLayers?has_content>${mapLayers}<#else>[]</#if>};
initMap([${defaultMapCenter.x?c},${defaultMapCenter.y?c}],${defaultMapZoom},false, geoInfo, chooseFromMapLayers);
initMap("observationFormMap",[${defaultMapCenter.x?c},${defaultMapCenter.y?c}],${defaultMapZoom},false, geoInfo, chooseFromMapLayers);
</#if>
});
</script>
......@@ -128,20 +128,9 @@
</form>
</div>
<div class="col-md-6">
<div>
<label>What do you want to draw</label>
<select id="type">
<option value="Point">Point</option>
<option value="Polygon">Polygon</option>
</select>
<button id="delete" type="button">Clear all</button>
<button id="deleteOne" type="button">Clear one</button>
</div>
<div id="observationFormMap" class="map">
</div>
<div id="alert_placeholder"></div>
<div id="observationFormMap"></div> <!-- Contents is added dynamically by objectGISInfoMap -->
</div>
</div>
<div style="display: none;"><div id="marker" title="Marker"><img src="/images/bug_medium.png"/></div></div>
<!--div style="display: none;"><div id="marker" title="Marker"><img src="/images/bug_medium.png"/></div></div-->
</#macro>
<@page_html/>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment