Skip to content

GitLab

Commit f694d462 authored by Matija Obreza's avatar Matija Obreza
Browse files

Country inst map in details, selection map with leaflet, GenesysMaps with Leaflet

parent 38ada287
Hide whitespace changes
Inline Side-by-side
Showing with 171 additions and 166 deletions
pom.xml
View file @ f694d462
......@@ -580,6 +580,8 @@
<include>jquery-ui.min.js</include>
<include>bootstrap.min.js</include>
<include>tab.min.js</include>
<include>leaflet.min.js</include>
<include>leaflet.locationfilter.min.js</include>
<include>crophub.min.js</include>
</includes>
</aggregation>
......
src/main/webapp/WEB-INF/decorator/footer.jsp
View file @ f694d462
......@@ -22,7 +22,7 @@
</ul>
</div>
<div class="pull-left" id="copyright">
<a href="<c:url value="/" />" class="pull-left"><img src="/html/images/logo_genesys_footer.png" alt="Genesys - Gateway to Genetic Resources" /></a>
<a href="<c:url value="/" />" class="pull-left"><img src="<c:url value="/html/images/logo_genesys_footer.png" />" alt="Genesys - Gateway to Genetic Resources" /></a>
<p class="pull-left"><spring:message code="footer.copyright-statement" /></p>
</div>
<div class="pull-right">
......@@ -38,65 +38,36 @@
<!-- Placed at the end of the document so the pages load faster -->
<c:choose>
<c:when test="${requestContext.theme.name eq 'one'}">
<script type="text/javascript" src="/html/js/all.min.js"></script>
<script type="text/javascript" src="<c:url value="/html/js/all.min.js" />"></script>
</c:when>
<c:when test="${requestContext.theme.name eq 'all-min'}">
<script type="text/javascript" src="/html/js/jquery.min.js"></script>
<script type="text/javascript" src="/html/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/html/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/html/js/genesys.min.js"></script>
<script type="text/javascript" src="<c:url value="/html/js/jquery.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/html/js/jquery-ui.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/html/js/bootstrap.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/html/js/leaflet.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/html/js/leaflet.locationfilter.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/html/js/genesys.min.js" />"></script>
</c:when>
<c:when test="${requestContext.theme.name eq 'all'}">
<script type="text/javascript" src="/html/js/jquery.js"></script>
<script type="text/javascript" src="/html/js/jquery-ui.js"></script>
<script type="text/javascript" src="/html/js/bootstrap.js"></script>
<script type="text/javascript" src="/html/js/genesys.js"></script>
<script type="text/javascript" src="<c:url value="/html/js/jquery.js" />"></script>
<script type="text/javascript" src="<c:url value="/html/js/jquery-ui.js" />"></script>
<script type="text/javascript" src="<c:url value="/html/js/bootstrap.js" />"></script>
<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>
<script type="text/javascript" src="<c:url value="/html/js/genesys.js" />"></script>
</c:when>
<c:otherwise>
<script type="text/javascript" src="/html/js/jquery.js"></script>
<script type="text/javascript" src="/html/js/jquery-ui.js"></script>
<script type="text/javascript" src="/html/js/bootstrap.js"></script>
<script type="text/javascript" src="/html/js/tab.js"></script>
<script type="text/javascript" src="/html/js/crophub.js"></script>
<script type="text/javascript" src="<c:url value="/html/js/jquery.js" />"></script>
<script type="text/javascript" src="<c:url value="/html/js/jquery-ui.js" />"></script>
<script type="text/javascript" src="<c:url value="/html/js/bootstrap.js" />"></script>
<script type="text/javascript" src="<c:url value="/html/js/tab.js" />"></script>
<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>
<script type="text/javascript" src="<c:url value="/html/js/crophub.js" />"></script>
</c:otherwise>
</c:choose>
<script type="text/javascript">
$( document ).ready(function() {
$('#news a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});
// show mobile menu
$('.mobile-menu-show').click(function(){
$('.mobile-header .header-top .mobile-menu-show').css('display', 'none');
$('.mobile-header .header-top .mobile-menu-hide').css('display', 'inline-block');
$('.logo-container').css('display', 'none');
$('.mobile-header #search').show('slow');
$('#left-col').show('slow');
$('#nav-main').show('slow');
});
$('.mobile-menu-hide').click(function(){
$('.mobile-header .header-top .mobile-menu-show').css('display', 'inline-block');
$('.mobile-header .header-top .mobile-menu-hide').css('display', 'none');
$('.logo-container').css('display', 'block');
$('.mobile-header #search').hide('slow');
$('#left-col').hide('slow');
$('#nav-main').hide('slow');
});
//CSRF protection
$(function () {
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
$(document).ajaxSend(function(e, xhr, options) {
xhr.setRequestHeader(header, token);
});
});
L.Icon.Default.imagePath='<c:url value="/html/css/leaflet" />';
</script>
src/main/webapp/WEB-INF/jsp/accession/details.jsp
View file @ f694d462
......@@ -50,7 +50,7 @@
</c:if>
<div class="pseudo-right-col col-md-3">
<c:if test="${accessionGeo.latitude ne null}">
<c:if test="${accessionGeo.latitude ne null and accessionGeo.longitude ne null}">
<div class="crop-location">
<h3><spring:message code="accession.collecting.site" /></h3>
<div id="map" class="map-container"></div>
......@@ -360,9 +360,7 @@
<content tag="javascript">
<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}], 2);
L.tileLayer('https://otile{s}-s.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', {
......
src/main/webapp/WEB-INF/jsp/accession/map.jsp
View file @ f694d462
......@@ -22,8 +22,6 @@
</div>
<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() {
......
src/main/webapp/WEB-INF/jsp/country/details.jsp
View file @ f694d462
......@@ -55,13 +55,28 @@
</div>
</c:if>
<%-- Show map? --%>
<c:forEach items="${genesysInstitutes}" var="faoInstitute" varStatus="status">
<c:if test="${faoInstitute.latitude ne null and faoInstitute.longitude ne null}">
<c:set value="true" var="showMap" />
</c:if>
</c:forEach>
<c:if test="${showMap}">
<div class="row" style="">
<div class="col-sm-12">
<div id="map" class="gis-map"></div>
</div>
</div>
</c:if>
<%-- <h3>
<spring:message code="country.statistics" />
</h3>
--%>
<h3>
<spring:message code="country.stat.countByLocation" arguments="${countByLocation}" />
<small><a href="<c:url value="/geo/${country.code3.toLowerCase()}/map" />"><spring:message code="maps.view-map" /></a></small>
</h3>
<ul class="funny-list">
<c:forEach items="${genesysInstitutes}" var="faoInstitute" varStatus="status">
......@@ -82,5 +97,30 @@
</c:forEach>
</ul>
<c:if test="${showMap}">
<content tag="javascript">
<script type="text/javascript">
jQuery(document).ready(function() {
var map=GenesysMaps.map("${pageContext.response.locale.language}", $("#map"), {
maxZoom: 6, /* WIEWS does not provide enough detail */
zoom: 6
}, function (opts, map) {
var bounds=new GenesysMaps.BoundingBox();
var marker;
<c:forEach items="${genesysInstitutes}" var="faoInstitute" varStatus="status">
<c:if test="${faoInstitute.latitude ne null and faoInstitute.longitude ne null}">
marker = L.marker([${faoInstitute.latitude}, ${faoInstitute.longitude}]).addTo(map);
marker.bindPopup("<a href='<c:url value="/wiews/${faoInstitute.code.toLowerCase()}" />'>${faoInstitute.fullName}</a>");
bounds.add([${faoInstitute.latitude}, ${faoInstitute.longitude}]);
</c:if>
</c:forEach>
map.fitBounds(bounds.getBounds());
});
});
</script>
</content>
</c:if>
</body>
</html>
\ No newline at end of file
src/main/webapp/WEB-INF/jsp/country/map.jsp
View file @ f694d462
......@@ -19,38 +19,24 @@
<c:if test="${jsonInstitutes ne null}">
<div class="row" style="">
<div class="col-sm-12">
<div id="map" class="gis-map gis-map-square"><spring:message code="maps.loading-map" /></div>
<div id="map" class="gis-map gis-map-square"></div>
</div>
</div>
<content tag="javascript">
<script type="text/javascript">
jQuery(document).ready(function() {
GoogleMaps.map("${pageContext.response.locale.language}", $("#map"), {
GenesysMaps.map("${pageContext.response.locale.language}", $("#map"), {
maxZoom: 8,
center: new GoogleMaps.LatLng(0, 0)
center: new GenesysMaps.LatLng(0, 0)
}, function(el, map) {
// info window
var infowindow = new google.maps.InfoWindow({
content: "",
maxWidth: 500
});
// markers
var jsonInstitutes=${jsonInstitutes};
jsonInstitutes.forEach(function(inst) {
var m=new google.maps.Marker({
position: new google.maps.LatLng(inst.lat, inst.lng),
title: inst.title,
map: map
});
google.maps.event.addListener(m, "click", function() {
infowindow.close();
infowindow.setContent("<a href='<c:url value="/wiews/" />" + inst.code.toLowerCase() + "'>"+inst.title+"</a>");
infowindow.open(map, m);
});
var marker = L.marker([inst.lat, inst.lng]).addTo(map);
marker.bindPopup("<a href='<c:url value="/wiews/" />" + inst.code.toLowerCase() +"'>"+inst.title+"</a>");
});
map.fitBounds(GoogleMaps.boundingBox(jsonInstitutes));
map.fitBounds(GenesysMaps.boundingBox(jsonInstitutes));
});
});
</script>
......
src/main/webapp/WEB-INF/jsp/organization/map.jsp
View file @ f694d462
......@@ -21,38 +21,25 @@
<c:if test="${jsonInstitutes ne null}">
<div class="row" style="">
<div class="col-sm-12">
<div id="map" class="gis-map gis-map-square"><spring:message code="maps.loading-map" /></div>
<div id="map" class="gis-map gis-map-square"></div>
</div>
</div>
<content tag="javascript">
<script type="text/javascript">
jQuery(document).ready(function() {
GoogleMaps.map("${pageContext.response.locale.language}", $("#map"), {
GenesysMaps.map("${pageContext.response.locale.language}", $("#map"), {
maxZoom: 8,
center: new GoogleMaps.LatLng(0, 0)
zoom: 2,
center: new GenesysMaps.LatLng(0,0)
}, function(el, map) {
// info window
var infowindow = new google.maps.InfoWindow({
content: "",
maxWidth: 500
});
// markers
var jsonInstitutes=${jsonInstitutes};
jsonInstitutes.forEach(function(inst) {
var m=new google.maps.Marker({
position: new google.maps.LatLng(inst.lat, inst.lng),
title: inst.title,
map: map
});
google.maps.event.addListener(m, "click", function() {
infowindow.close();
infowindow.setContent("<a href='<c:url value="/wiews/" />" + inst.code.toLowerCase() + "'>"+inst.title+"</a>");
infowindow.open(map, m);
});
var marker = L.marker([inst.lat, inst.lng]).addTo(map);
marker.bindPopup(inst.title);
});
map.fitBounds(GoogleMaps.boundingBox(jsonInstitutes));
map.fitBounds(GenesysMaps.boundingBox(jsonInstitutes));
});
});
</script>
......
src/main/webapp/WEB-INF/jsp/selection/map.jsp
View file @ f694d462
......@@ -13,33 +13,28 @@
<div class="row" style="">
<div class="col-sm-12">
<div id="map" class="gis-map gis-map-square"><spring:message code="maps.loading-map" /></div>
<div id="map" class="gis-map gis-map-square"></div>
</div>
</div>
<content tag="javascript">
<script type="text/javascript">
jQuery(document).ready(function() {
var map = GoogleMaps.map("${pageContext.response.locale.language}", $("#map"), {
center: new GoogleMaps.LatLng(0, 0)
var map = GenesysMaps.map("${pageContext.response.locale.language}", $("#map"), {
}, function(el, map) {
var infowindow = new google.maps.InfoWindow({
content: "",
maxWidth: 500
});
$.ajax('<c:url value="/sel/json/geo" />', {
type : 'get',
dataType : 'json',
success : function(respObject) {
var bounds=new GenesysMaps.BoundingBox();
respObject.forEach(function(acn) {
var m=new google.maps.Marker({
position: new google.maps.LatLng(acn.lat, acn.lng),
title: acn.accessionName,
map: map
});
if (acn.lat!=null && acn.lng!=null) {
var marker = L.marker([acn.lat, acn.lng]).addTo(map);
marker.bindPopup("<a href='<c:url value="/acn/id/" />" + acn.id +"'>"+acn.accessionName+"</a>");
bounds.add([acn.lat, acn.lng]);
}
});
map.fitBounds(GoogleMaps.boundingBox(respObject));
map.fitBounds(bounds.getBounds());
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
......
src/main/webapp/WEB-INF/jsp/wiews/details.jsp
View file @ f694d462
......@@ -87,7 +87,7 @@
<c:if test="${faoInstitute.latitude ne null}">
<div class="row" style="">
<div class="col-sm-12">
<div id="map" class="gis-map"><spring:message code="maps.loading-map" /></div>
<div id="map" class="gis-map"></div>
</div>
</div>
</c:if>
......@@ -141,9 +141,9 @@
<c:if test="${faoInstitute.latitude ne null}">
<script type="text/javascript">
jQuery(document).ready(function() {
var map=GoogleMaps.map("${pageContext.response.locale.language}", $("#map"), {
var map=GenesysMaps.map("${pageContext.response.locale.language}", $("#map"), {
maxZoom: 6, /* WIEWS does not provide enough detail */
center: new GoogleMaps.LatLng(${faoInstitute.latitude}, ${faoInstitute.longitude}),
center: new GenesysMaps.LatLng(${faoInstitute.latitude}, ${faoInstitute.longitude}),
markerTitle: "<spring:escapeBody javaScriptEscape="true">${faoInstitute.fullName}</spring:escapeBody>"
});
});
......
src/main/webapp/WEB-INF/jsp/wiews/map.jsp
View file @ f694d462
......@@ -18,7 +18,7 @@
<c:if test="${jsonInstitutes ne null}">
<div class="row" style="">
<div class="col-sm-12">
<div id="map" class="gis-map gis-map-square"><spring:message code="maps.loading-map" /></div>
<div id="map" class="gis-map gis-map-square"></div>
</div>
</div>
......@@ -26,9 +26,9 @@
<content tag="javascript">
<script type="text/javascript">
jQuery(document).ready(function() {
GoogleMaps.map("${pageContext.response.locale.language}", $("#map"), {
GenesysMaps.map("${pageContext.response.locale.language}", $("#map"), {
maxZoom: 4,
center: new GoogleMaps.LatLng(0, 0)
center: new GenesysMaps.LatLng(0, 0)
}, function(el, map) {
var jsonInstitutes=${jsonInstitutes};
var heatmapData=[];
......@@ -43,7 +43,7 @@
//radius: 3
});
heatmap.setMap(map);
map.fitBounds(GoogleMaps.boundingBox(jsonInstitutes));
map.fitBounds(GenesysMaps.boundingBox(jsonInstitutes));
});
});
</script>
......
src/main/webapp/html/js/crophub.js
View file @ f694d462
......@@ -13,9 +13,8 @@
* See the License for the specific language governing permissions and
* limitations under the License.
**/
GoogleMaps = {
GenesysMaps = {
LatLng: function(lat, lng) {
this.lat=lat;
this.lng=lng;
......@@ -23,77 +22,50 @@ GoogleMaps = {
}
};
GoogleMaps = {
LatLng: GoogleMaps.LatLng,
GenesysMaps = {
LatLng: GenesysMaps.LatLng,
loaded: false,
queue: [],
loadedMaps: [],
googleMaps: [],
defaultOptions: {
zoom: 5,
center: new GoogleMaps.LatLng(0, 0),
mapTypeId: "terrain",
streetViewControl: false
center: [0,0]
},
map: function(language, doms, mapOptions, callback) {
var mapOpt = $.extend({}, this.defaultOptions, mapOptions);
// var mapOpt = {
// zoom: mapOptions.zoom || this.defaultOptions.zoom,
// maxZoom: mapOptions.maxZoom,
// center: mapOptions.center || this.defaultOptions.center,
// mapTypeId: mapOptions.mapTypeId || this.defaultOptions.mapTypeId,
// markerTitle: mapOptions.markerTitle || null,
// streetViewControl: mapOptions.streetViewControl || this.defaultOptions.streetViewControl
// };
doms.each(function(idx,el) {
if ($.inArray(el, this.loadedMaps) < 0) {
// el.googleMapsOptions = mapOpt;
GoogleMaps.queue.push({element: el, mapOptions: $.extend({}, mapOpt), callback: callback});
GenesysMaps.queue.push({element: el, mapOptions: $.extend({}, mapOpt), callback: callback});
}
});
this.loadGoogleMaps(language);
this.onLoad();
},
loadGoogleMaps: function(language) {
if (! this.loaded) {
this.loaded = true;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?language=' + language + '&v=3&sensor=false&libraries=visualization&callback=GoogleMaps.onLoad';
document.body.appendChild(script);
} else {
this.onLoad();
}
},
onLoad: function() {
var config=this.queue.shift();
while (config != null) {
var mapOptions=config.mapOptions;
var pos=mapOptions.center;
mapOptions.center=new google.maps.LatLng(pos.lat, pos.lng, pos.noWrap);
var map = new google.maps.Map(config.element, mapOptions);
// this.googleMaps.push(map);
// debugger;
var map = L.map(config.element, mapOptions).setView(mapOptions.center, 4);
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);
if (mapOptions.markerTitle != null) {
var marker = new google.maps.Marker({
position: mapOptions.center,
map: map,
title: mapOptions.markerTitle
});
var marker = L.marker(mapOptions.center).addTo(map);
marker.bindPopup(mapOptions.markerTitle).openPopup();
}
if (config.callback != null) {
config.callback(config.element, map);
}
this.loadedMaps.push(config.element);
config=this.queue.shift();
}
},
boundingBox: function(latLngArray) {
var sw=new GoogleMaps.LatLng(180, 180);
var ne=new GoogleMaps.LatLng(-180, -180);
var sw=new GenesysMaps.LatLng(180, 180);
var ne=new GenesysMaps.LatLng(-180, -180);
latLngArray.forEach(function(latLng) {
sw.lat=Math.min(sw.lat, latLng.lat);
......@@ -102,10 +74,28 @@ GoogleMaps = {
ne.lng=Math.max(ne.lng, latLng.lng);
});
return new google.maps.LatLngBounds(new google.maps.LatLng(sw.lat, sw.lng), new google.maps.LatLng(ne.lat, ne.lng));
return [[sw.lat, sw.lng], [ne.lat, ne.lng]];
}
};
GenesysMaps.BoundingBox = function() {
this.south=90;
this.north=-90;
this.east=-180;
this.west=180;
};
GenesysMaps.BoundingBox.prototype.add = function(pos) {
this.east=Math.max(this.east, pos[0]);
this.west=Math.min(this.west, pos[0]);
this.north=Math.max(this.north, pos[1]);
this.south=Math.min(this.south, pos[1]);
};
GenesysMaps.BoundingBox.prototype.getBounds = function() {
return [[this.west, this.south],[this.east, this.north]];
};
jQuery(document).ready(function() {
var sc=$("#selcounter");
......@@ -168,4 +158,42 @@ jQuery(document).ready(function() {
});
});
});
\ No newline at end of file
});
$( document ).ready(function() {
$('#news a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});
// show mobile menu
$('.mobile-menu-show').click(function(){
$('.mobile-header .header-top .mobile-menu-show').css('display', 'none');
$('.mobile-header .header-top .mobile-menu-hide').css('display', 'inline-block');
$('.logo-container').css('display', 'none');
$('.mobile-header #search').show('slow');
$('#left-col').show('slow');
$('#nav-main').show('slow');
});
$('.mobile-menu-hide').click(function(){
$('.mobile-header .header-top .mobile-menu-show').css('display', 'inline-block');
$('.mobile-header .header-top .mobile-menu-hide').css('display', 'none');
$('.logo-container').css('display', 'block');
$('.mobile-header #search').hide('slow');
$('#left-col').hide('slow');
$('#nav-main').hide('slow');
});
//CSRF protection
$(function () {
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
$(document).ajaxSend(function(e, xhr, options) {
xhr.setRequestHeader(header, token);
});
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment