Skip to content
GitLab
Commit ba5b1b3c authored by Matija Obreza's avatar Matija Obreza
Browse files

Included location filter, i18n corrections 

css.jsp
parent b25083b9
Hide whitespace changes
Inline Side-by-side
pom.xml
View file @ ba5b1b3c
......@@ -609,6 +609,7 @@
<include>bootstrap.min.css</include>
<include>jquery-ui.min.css</include>
<include>leaflet.min.css</include>
<include>leaflet.locationfilter.min.css</include>
<include>custom.min.css</include>
<include>responsive.min.css</include>
<include>forza.min.css</include>
......
src/main/webapp/WEB-INF/decorator/css.jsp 0 → 100644
View file @ ba5b1b3c
<%@include file="/WEB-INF/jsp/init.jsp"%>
<c:choose>
<c:when test="${requestContext.theme.name eq 'one'}">
<link href="<c:url value="/html/css/all.min.css" />" rel="stylesheet" />
</c:when>
<c:when test="${requestContext.theme.name eq 'all-min'}">
<link href="<c:url value="/html/css/bootstrap.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.locationfilter.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/genesys.min.css" />" rel="stylesheet" />
</c:when>
<c:when test="${requestContext.theme.name eq 'all'}">
<link href="<c:url value="/html/css/bootstrap.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.locationfilter.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/genesys.css" />" rel="stylesheet" />
</c:when>
<c:otherwise>
<link href="<c:url value="/html/css/bootstrap.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.locationfilter.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/custom.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/responsive.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/forza.css" />" rel="stylesheet" />
</c:otherwise>
</c:choose>
src/main/webapp/WEB-INF/decorator/entry.jsp
View file @ ba5b1b3c
......@@ -18,31 +18,7 @@
<title><sitemesh:write property="title" /></title>
<!-- Custom styles for this template -->
<c:choose>
<c:when test="${requestContext.theme.name eq 'one'}">
<link href="<c:url value="/html/css/all.min.css" />" rel="stylesheet" />
</c:when>
<c:when test="${requestContext.theme.name eq 'all-min'}">
<link href="<c:url value="/html/css/bootstrap.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/genesys.min.css" />" rel="stylesheet" />
</c:when>
<c:when test="${requestContext.theme.name eq 'all'}">
<link href="<c:url value="/html/css/bootstrap.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/genesys.css" />" rel="stylesheet" />
</c:when>
<c:otherwise>
<link href="<c:url value="/html/css/bootstrap.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/custom.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/responsive.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/forza.css" />" rel="stylesheet" />
</c:otherwise>
</c:choose>
<%@include file="css.jsp" %>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
......
src/main/webapp/WEB-INF/decorator/main.jsp
View file @ ba5b1b3c
......@@ -22,29 +22,7 @@
<title><sitemesh:write property="title" /></title>
<!-- Custom styles for this template -->
<c:choose>
<c:when test="${requestContext.theme.name eq 'one'}">
<link href="<c:url value="/html/css/all.min.css" />" rel="stylesheet" />
</c:when>
<c:when test="${requestContext.theme.name eq 'all-min'}">
<link href="<c:url value="/html/css/bootstrap.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.min.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/genesys.min.css" />" rel="stylesheet" />
</c:when>
<c:when test="${requestContext.theme.name eq 'all'}">
<link href="<c:url value="/html/css/bootstrap.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/genesys.css" />" rel="stylesheet" />
</c:when>
<c:otherwise>
<link href="<c:url value="/html/css/bootstrap.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/jquery-ui.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/custom.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/responsive.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/forza.css" />" rel="stylesheet" />
<link href="<c:url value="/html/css/leaflet.css" />" rel="stylesheet" />
</c:otherwise>
</c:choose>
<%@include file="css.jsp" %>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
......
src/main/webapp/WEB-INF/jsp/accession/details.jsp
View file @ ba5b1b3c
......@@ -53,16 +53,14 @@
<c:if test="${accessionGeo.latitude ne null}">
<div class="crop-location">
<h3><spring:message code="accession.collecting.site" /></h3>
<div id="map" class="map-container">
<spring:message code="maps.loading-map" />
</div>
<div id="map" class="map-container"></div>
<table class="map-data">
<tr>
<td><spring:message code="filter.lat" />:</td>
<td><spring:message code="filter.latitude" />:</td>
<td><c:out value="${accessionGeo.latitude}" /></td>
</tr><tr>
<td><spring:message code="filter.lon" />:</td>
<td><spring:message code="filter.longitude" />:</td>
<td><c:out value="${accessionGeo.longitude}" /></td>
</tr><tr>
<td><spring:message code="accession.elevation" />:</td>
......@@ -361,13 +359,24 @@
</div>
<content tag="javascript">
<script type="text/javascript">
<c:if test="${accessionGeo ne null and accessionGeo.latitude ne null}">
jQuery(document).ready(function() {
var accessionMap=GoogleMaps.map("${pageContext.response.locale.language}", $("#map"), { center: new GoogleMaps.LatLng(${accessionGeo.latitude}, ${accessionGeo.longitude}), markerTitle: "<spring:escapeBody javaScriptEscape="true">${accession.accessionName}, ${accession.instituteCode}</spring:escapeBody>" });
});
</c:if>
<c:if test="${accessionGeo ne null and accessionGeo.latitude ne null}">
<script type="text/javascript" src="<c:url value="/html/js/leaflet.js" />"></script>
<script type="text/javascript">
L.Icon.Default.imagePath='<c:url value="/html/css/leaflet" />';
jQuery(document).ready(function() {
var map = L.map('map').setView([${accessionGeo.latitude}, ${accessionGeo.longitude}], 5);
L.tileLayer('https://otile{s}-s.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', {
attribution: "MapQuest",
styleId: 22677,
subdomains: ['1','2','3','4'],
opacity: 0.6
}).addTo(map);
var marker = L.marker([${accessionGeo.latitude}, ${accessionGeo.longitude}]).addTo(map);
});
</script>
</c:if>
<script type="text/javascript">
<%@include file="/WEB-INF/jsp/wiews/ga.jsp"%>
_pageDim = { institute: '${accession.instituteCode}', genus: '${accession.taxonomy.genus}' };
</script>
......
src/main/webapp/WEB-INF/jsp/accession/map.jsp
View file @ ba5b1b3c
......@@ -14,8 +14,10 @@
<div class="main-col-header">
<a href="javascript: window.history.go(-1);"><spring:message code="navigate.back" /></a>
</div>
<div class="row" style="">
<div class="row">
<a class="" href="<c:url value="/explore" />" id="selectArea">View accessions</a>
</div>
<div class="row">
<div class="col-sm-12">
<div id="map" class="gis-map gis-map-square"></div>
</div>
......@@ -23,6 +25,7 @@
<script type="text/javascript" src="<c:url value="/html/js/leaflet.js" />"></script>
<script type="text/javascript" src="<c:url value="/html/js/leaflet.locationfilter.js" />"></script>
<content tag="javascript">
<script type="text/javascript">
jQuery(document).ready(function() {
......@@ -39,6 +42,32 @@
subdomains: ['1','2','3','4']
}).addTo(map);
//.add(po.image().url("http://a.tile.openstreetmap.org/{Z}/{X}/{Y}.png"))
$("#selectArea").hide();
var filterJson=${jsonFilter};
var locationFilter = new L.LocationFilter().addTo(map);
locationFilter.on("change", function (e) {
// Do something when the bounds change.
// Bounds are available in `e.bounds`.
var bounds=locationFilter.getBounds();
filterJson.latitude=[{range:[bounds.getSouth(),bounds.getNorth()]}];
filterJson.longitude=[{range:[bounds.getWest(),bounds.getEast()]}];
});
locationFilter.on("enabled", function () {
// Do something when enabled.
$("#selectArea").show();
});
locationFilter.on("disabled", function () {
// Do something when disabled.
$("#selectArea").hide();
});
$("#selectArea").on("click", function(e) {
this.href=this.href+'?filter='+JSON.stringify(filterJson);
});
});
</script>
</content>
......
src/main/webapp/html/css/leaflet.css
View file @ ba5b1b3c
......@@ -278,12 +278,12 @@
border-radius: 5px;
}
.leaflet-control-layers-toggle {
background-image: url(images/layers.png);
background-image: url(leaflet/layers.png);
width: 36px;
height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
background-image: url(images/layers-2x.png);
background-image: url(leaflet/layers-2x.png);
background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
......
src/main/webapp/html/css/leaflet.locationfilter.css 0 → 100644
View file @ ba5b1b3c
div.leaflet-marker-icon.location-filter.resize-marker {
background: url( leaflet/resize-handle.png ) no-repeat;
cursor: move;
}
div.leaflet-marker-icon.location-filter.move-marker {
background: url( leaflet/move-handle.png ) no-repeat;
cursor: move;
}
div.location-filter.button-container {
background: #bfbfbf;
background: rgba(0, 0, 0, 0.25);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
padding: 5px;
}
.leaflet-container div.location-filter.button-container a {
display: inline-block;
color: #0F2416;
font-size: 11px;
font-weight: normal;
text-shadow: #A1BB9C 0 1px;
padding: 6px 7px;
border: 1px solid #9CC5A4;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset rgba(255,255,255,0.75) 0 1px 1px;
-moz-box-shadow: inset rgba(255,255,255,0.75) 0 1px 1px;
box-shadow: inset rgba(255,255,255,0.75) 0 1px 1px;
background: #c4e3b9;
background: rgba(218, 252, 205, 0.9);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(218, 252, 205, 0.9)), color-stop(100%, rgba(173, 226, 176, 0.9)));
background: -webkit-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background: -moz-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background: -ms-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background: -o-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background: linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
}
.leaflet-container div.location-filter.button-container a:hover {
color: #263F1C;
background: #dde6d8;
background: rgba(245, 255, 240, 0.9);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 255, 240, 0.9)), color-stop(100%, rgba(203, 228, 205, 0.9)));
background: -webkit-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background: -moz-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background: -ms-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background: -o-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background: linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
}
.leaflet-container div.location-filter.button-container a.enable-button {
padding: 6px 7px 6px 25px;
background-image: url( leaflet/filter-icon.png ), -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(218, 252, 205, 0.9)), color-stop(100%, rgba(173, 226, 176, 0.9)));
background-image: url( leaflet/filter-icon.png ), -webkit-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), -moz-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), -ms-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), -o-linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), linear-gradient(top, rgba(218, 252, 205, 0.9) 0%, rgba(173, 226, 176, 0.9) 100%);
background-repeat: no-repeat;
background-position: left center;
}
.leaflet-container div.location-filter.button-container a.enable-button:hover,
.leaflet-container div.location-filter.button-container.enabled a.enable-button {
background-image: url( leaflet/filter-icon.png ), -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 255, 240, 0.9)), color-stop(100%, rgba(203, 228, 205, 0.9)));
background-image: url( leaflet/filter-icon.png ), -webkit-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), -moz-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), -ms-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), -o-linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background-image: url( leaflet/filter-icon.png ), linear-gradient(top, rgba(245, 255, 240, 0.9) 0%, rgba(203, 228, 205, 0.9) 100%);
background-repeat: no-repeat;
background-position: left center;
}
.leaflet-container div.location-filter.button-container a.adjust-button {
margin-left: 2px;
}
src/main/webapp/html/js/leaflet.locationfilter.js 0 → 100644
View file @ ba5b1b3c
/*
* Leaflet.locationfilter - leaflet location filter plugin
* Copyright (C) 2012, Tripbirds.com
* http://tripbirds.com
*
* Licensed under the MIT License.
*
* Date: 2012-09-24
* Version: 0.1
*/
L.LatLngBounds.prototype.modify = function(map, amount) {
var sw = this.getSouthWest(),
ne = this.getNorthEast(),
swPoint = map.latLngToLayerPoint(sw),
nePoint = map.latLngToLayerPoint(ne);
sw = map.layerPointToLatLng(new L.Point(swPoint.x-amount, swPoint.y+amount));
ne = map.layerPointToLatLng(new L.Point(nePoint.x+amount, nePoint.y-amount));
return new L.LatLngBounds(sw, ne);
};
L.Control.Button = L.Class.extend({
initialize: function(options) {
L.Util.setOptions(this, options);
},
addTo: function(container) {
container.addButton(this);
return this;
},
onAdd: function (buttonContainer) {
this._buttonContainer = buttonContainer;
this._button = L.DomUtil.create('a', this.options.className, this._buttonContainer.getContainer());
this._button.href = '#';
this.setText(this.options.text);
var that = this;
this._onClick = function(event) {
that.options.onClick.call(that, event);
};
L.DomEvent
.on(this._button, 'click', L.DomEvent.stopPropagation)
.on(this._button, 'mousedown', L.DomEvent.stopPropagation)
.on(this._button, 'dblclick', L.DomEvent.stopPropagation)
.on(this._button, 'click', L.DomEvent.preventDefault)
.on(this._button, 'click', this._onClick, this);
},
remove: function() {
L.DomEvent.off(this._button, "click", this._onClick);
this._buttonContainer.getContainer().removeChild(this._button);
},
setText: function(text) {
this._button.title = text;
this._button.innerHTML = text;
}
});
L.Control.ButtonContainer = L.Control.extend({
options: {
position: 'topleft'
},
getContainer: function() {
if (!this._container) {
this._container = L.DomUtil.create('div', this.options.className);
}
return this._container;
},
onAdd: function (map) {
this._map = map;
return this.getContainer();
},
addButton: function(button) {
button.onAdd(this);
},
addClass: function(className) {
L.DomUtil.addClass(this.getContainer(), className);
},
removeClass: function(className) {
L.DomUtil.removeClass(this.getContainer(), className);
}
});
L.LocationFilter = L.Class.extend({
includes: L.Mixin.Events,
options: {
enableButton: {
enableText: "Select area",
disableText: "Remove selection"
},
adjustButton: {
text: "Select area within current zoom"
}
},
initialize: function(options) {
L.Util.setOptions(this, options);
},
addTo: function(map) {
map.addLayer(this);
return this;
},
onAdd: function(map) {
this._map = map;
if (this.options.enableButton || this.options.adjustButton) {
this._initializeButtonContainer();
}
if (this.options.enable) {
this.enable();
}
},
onRemove: function(map) {
this.disable();
if (this._buttonContainer) {
this._buttonContainer.removeFrom(map);
}
},
/* Get the current filter bounds */
getBounds: function() {
return new L.LatLngBounds(this._sw, this._ne);
},
setBounds: function(bounds) {
this._nw = bounds.getNorthWest();
this._ne = bounds.getNorthEast();
this._sw = bounds.getSouthWest();
this._se = bounds.getSouthEast();
if (this.isEnabled()) {
this._draw();
this.fire("change", {bounds: bounds});
}
},
isEnabled: function() {
return this._enabled;
},
/* Draw a rectangle */
_drawRectangle: function(bounds, options) {
options = options || {};
var defaultOptions = {
stroke: false,
fill: true,
fillColor: "black",
fillOpacity: 0.3,
clickable: false
};
options = L.Util.extend(defaultOptions, options);
var rect = new L.Rectangle(bounds, options);
rect.addTo(this._layer);
return rect;
},
/* Draw a draggable marker */
_drawImageMarker: function(point, options) {
var marker = new L.Marker(point, {
icon: new L.DivIcon({
iconAnchor: options.anchor,
iconSize: options.size,
className: options.className
}),
draggable: true
});
marker.addTo(this._layer);
return marker;
},
/* Draw a move marker. Sets up drag listener that updates the
filter corners and redraws the filter when the move marker is
moved */
_drawMoveMarker: function(point) {
var that = this;
this._moveMarker = this._drawImageMarker(point, {
"className": "location-filter move-marker",
"anchor": [-10, -10],
"size": [13,13]
});
this._moveMarker.on('drag', function(e) {
var markerPos = that._moveMarker.getLatLng(),
latDelta = markerPos.lat-that._nw.lat,
lngDelta = markerPos.lng-that._nw.lng;
that._nw = new L.LatLng(that._nw.lat+latDelta, that._nw.lng+lngDelta, true);
that._ne = new L.LatLng(that._ne.lat+latDelta, that._ne.lng+lngDelta, true);
that._sw = new L.LatLng(that._sw.lat+latDelta, that._sw.lng+lngDelta, true);
that._se = new L.LatLng(that._se.lat+latDelta, that._se.lng+lngDelta, true);
that._draw();
});
this._setupDragendListener(this._moveMarker);
return this._moveMarker;
},
/* Draw a resize marker */
_drawResizeMarker: function(point, latFollower, lngFollower, otherPos) {
return this._drawImageMarker(point, {
"className": "location-filter resize-marker",
"anchor": [7, 6],
"size": [13, 12]
});
},
/* Track moving of the given resize marker and update the markers
given in options.moveAlong to match the position of the moved
marker. Update filter corners and redraw the filter */
_setupResizeMarkerTracking: function(marker, options) {
var that = this;
marker.on('drag', function(e) {
var curPosition = marker.getLatLng(),
latMarker = options.moveAlong.lat,
lngMarker = options.moveAlong.lng;
// Move follower markers when this marker is moved
latMarker.setLatLng(new L.LatLng(curPosition.lat, latMarker.getLatLng().lng, true));
lngMarker.setLatLng(new L.LatLng(lngMarker.getLatLng().lat, curPosition.lng, true));
// Sort marker positions in nw, ne, sw, se order
var corners = [that._nwMarker.getLatLng(),
that._neMarker.getLatLng(),
that._swMarker.getLatLng(),
that._seMarker.getLatLng()];
corners.sort(function(a, b) {
if (a.lat != b.lat)
return b.lat-a.lat;
else
return a.lng-b.lng;
});
// Update corner points and redraw everything except the resize markers
that._nw = corners[0];
that._ne = corners[1];
that._sw = corners[2];
that._se = corners[3];
that._draw({repositionResizeMarkers: false});
});