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
...@@ -580,6 +580,8 @@ ...@@ -580,6 +580,8 @@
<include>jquery-ui.min.js</include> <include>jquery-ui.min.js</include>
<include>bootstrap.min.js</include> <include>bootstrap.min.js</include>
<include>tab.min.js</include> <include>tab.min.js</include>
<include>leaflet.min.js</include>
<include>leaflet.locationfilter.min.js</include>
<include>crophub.min.js</include> <include>crophub.min.js</include>
</includes> </includes>
</aggregation> </aggregation>
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</ul> </ul>
</div> </div>
<div class="pull-left" id="copyright"> <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> <p class="pull-left"><spring:message code="footer.copyright-statement" /></p>
</div> </div>
<div class="pull-right"> <div class="pull-right">
...@@ -38,65 +38,36 @@ ...@@ -38,65 +38,36 @@
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<c:choose> <c:choose>
<c:when test="${requestContext.theme.name eq 'one'}"> <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>
<c:when test="${requestContext.theme.name eq 'all-min'}"> <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="<c:url value="/html/js/jquery.min.js" />"></script>
<script type="text/javascript" src="/html/js/jquery-ui.min.js"></script> <script type="text/javascript" src="<c:url value="/html/js/jquery-ui.min.js" />"></script>
<script type="text/javascript" src="/html/js/bootstrap.min.js"></script> <script type="text/javascript" src="<c:url value="/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/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>
<c:when test="${requestContext.theme.name eq 'all'}"> <c:when test="${requestContext.theme.name eq 'all'}">
<script type="text/javascript" src="/html/js/jquery.js"></script> <script type="text/javascript" src="<c:url value="/html/js/jquery.js" />"></script>
<script type="text/javascript" src="/html/js/jquery-ui.js"></script> <script type="text/javascript" src="<c:url value="/html/js/jquery-ui.js" />"></script>
<script type="text/javascript" src="/html/js/bootstrap.js"></script> <script type="text/javascript" src="<c:url value="/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/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:when>
<c:otherwise> <c:otherwise>
<script type="text/javascript" src="/html/js/jquery.js"></script> <script type="text/javascript" src="<c:url value="/html/js/jquery.js" />"></script>
<script type="text/javascript" src="/html/js/jquery-ui.js"></script> <script type="text/javascript" src="<c:url value="/html/js/jquery-ui.js" />"></script>
<script type="text/javascript" src="/html/js/bootstrap.js"></script> <script type="text/javascript" src="<c:url value="/html/js/bootstrap.js" />"></script>
<script type="text/javascript" src="/html/js/tab.js"></script> <script type="text/javascript" src="<c:url value="/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/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:otherwise>
</c:choose> </c:choose>
<script type="text/javascript"> <script type="text/javascript">
$( document ).ready(function() { L.Icon.Default.imagePath='<c:url value="/html/css/leaflet" />';
$('#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);
});
});
</script> </script>
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
</c:if> </c:if>
<div class="pseudo-right-col col-md-3"> <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"> <div class="crop-location">
<h3><spring:message code="accession.collecting.site" /></h3> <h3><spring:message code="accession.collecting.site" /></h3>
<div id="map" class="map-container"></div> <div id="map" class="map-container"></div>
...@@ -360,9 +360,7 @@ ...@@ -360,9 +360,7 @@
<content tag="javascript"> <content tag="javascript">
<c:if test="${accessionGeo ne null and accessionGeo.latitude ne null}"> <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"> <script type="text/javascript">
L.Icon.Default.imagePath='<c:url value="/html/css/leaflet" />';
jQuery(document).ready(function() { jQuery(document).ready(function() {
var map = L.map('map').setView([${accessionGeo.latitude}, ${accessionGeo.longitude}], 2); 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', { L.tileLayer('https://otile{s}-s.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', {
......
...@@ -22,8 +22,6 @@ ...@@ -22,8 +22,6 @@
</div> </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"> <content tag="javascript">
<script type="text/javascript"> <script type="text/javascript">
jQuery(document).ready(function() { jQuery(document).ready(function() {
......
...@@ -55,13 +55,28 @@ ...@@ -55,13 +55,28 @@
</div> </div>
</c:if> </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> <%-- <h3>
<spring:message code="country.statistics" /> <spring:message code="country.statistics" />
</h3> </h3>
--%> --%>
<h3> <h3>
<spring:message code="country.stat.countByLocation" arguments="${countByLocation}" /> <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> </h3>
<ul class="funny-list"> <ul class="funny-list">
<c:forEach items="${genesysInstitutes}" var="faoInstitute" varStatus="status"> <c:forEach items="${genesysInstitutes}" var="faoInstitute" varStatus="status">
...@@ -82,5 +97,30 @@ ...@@ -82,5 +97,30 @@
</c:forEach> </c:forEach>
</ul> </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> </body>
</html> </html>
\ No newline at end of file
...@@ -19,38 +19,24 @@ ...@@ -19,38 +19,24 @@
<c:if test="${jsonInstitutes ne null}"> <c:if test="${jsonInstitutes ne null}">
<div class="row" style=""> <div class="row" style="">
<div class="col-sm-12"> <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>
</div> </div>
<content tag="javascript"> <content tag="javascript">
<script type="text/javascript"> <script type="text/javascript">
jQuery(document).ready(function() { jQuery(document).ready(function() {
GoogleMaps.map("${pageContext.response.locale.language}", $("#map"), { GenesysMaps.map("${pageContext.response.locale.language}", $("#map"), {
maxZoom: 8, maxZoom: 8,
center: new GoogleMaps.LatLng(0, 0) center: new GenesysMaps.LatLng(0, 0)
}, function(el, map) { }, function(el, map) {
// info window
var infowindow = new google.maps.InfoWindow({
content: "",
maxWidth: 500
});
// markers // markers
var jsonInstitutes=${jsonInstitutes}; var jsonInstitutes=${jsonInstitutes};
jsonInstitutes.forEach(function(inst) { jsonInstitutes.forEach(function(inst) {
var m=new google.maps.Marker({ var marker = L.marker([inst.lat, inst.lng]).addTo(map);
position: new google.maps.LatLng(inst.lat, inst.lng), marker.bindPopup("<a href='<c:url value="/wiews/" />" + inst.code.toLowerCase() +"'>"+inst.title+"</a>");
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);
});
}); });
map.fitBounds(GoogleMaps.boundingBox(jsonInstitutes)); map.fitBounds(GenesysMaps.boundingBox(jsonInstitutes));
}); });
}); });
</script> </script>
......
...@@ -21,38 +21,25 @@ ...@@ -21,38 +21,25 @@
<c:if test="${jsonInstitutes ne null}"> <c:if test="${jsonInstitutes ne null}">
<div class="row" style=""> <div class="row" style="">
<div class="col-sm-12"> <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>
</div> </div>
<content tag="javascript"> <content tag="javascript">
<script type="text/javascript"> <script type="text/javascript">
jQuery(document).ready(function() { jQuery(document).ready(function() {
GoogleMaps.map("${pageContext.response.locale.language}", $("#map"), { GenesysMaps.map("${pageContext.response.locale.language}", $("#map"), {
maxZoom: 8, maxZoom: 8,
center: new GoogleMaps.LatLng(0, 0) zoom: 2,
center: new GenesysMaps.LatLng(0,0)
}, function(el, map) { }, function(el, map) {
// info window
var infowindow = new google.maps.InfoWindow({
content: "",
maxWidth: 500
});
// markers // markers
var jsonInstitutes=${jsonInstitutes}; var jsonInstitutes=${jsonInstitutes};
jsonInstitutes.forEach(function(inst) { jsonInstitutes.forEach(function(inst) {
var m=new google.maps.Marker({ var marker = L.marker([inst.lat, inst.lng]).addTo(map);
position: new google.maps.LatLng(inst.lat, inst.lng), marker.bindPopup(inst.title);
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);
});
}); });
map.fitBounds(GoogleMaps.boundingBox(jsonInstitutes)); map.fitBounds(GenesysMaps.boundingBox(jsonInstitutes));
}); });
}); });
</script> </script>
......
...@@ -13,33 +13,28 @@ ...@@ -13,33 +13,28 @@
<div class="row" style=""> <div class="row" style="">
<div class="col-sm-12"> <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>
</div> </div>
<content tag="javascript"> <content tag="javascript">
<script type="text/javascript"> <script type="text/javascript">
jQuery(document).ready(function() { jQuery(document).ready(function() {
var map = GoogleMaps.map("${pageContext.response.locale.language}", $("#map"), { var map = GenesysMaps.map("${pageContext.response.locale.language}", $("#map"), {
center: new GoogleMaps.LatLng(0, 0)
}, function(el, map) { }, function(el, map) {
var infowindow = new google.maps.InfoWindow({
content: "",
maxWidth: 500
});
$.ajax('<c:url value="/sel/json/geo" />', { $.ajax('<c:url value="/sel/json/geo" />', {
type : 'get', type : 'get',
dataType : 'json', dataType : 'json',
success : function(respObject) { success : function(respObject) {
var bounds=new GenesysMaps.BoundingBox();
respObject.forEach(function(acn) { respObject.forEach(function(acn) {
var m=new google.maps.Marker({ if (acn.lat!=null && acn.lng!=null) {
position: new google.maps.LatLng(acn.lat, acn.lng), var marker = L.marker([acn.lat, acn.lng]).addTo(map);
title: acn.accessionName, marker.bindPopup("<a href='<c:url value="/acn/id/" />" + acn.id +"'>"+acn.accessionName+"</a>");
map: map bounds.add([acn.lat, acn.lng]);
}); }
}); });
map.fitBounds(GoogleMaps.boundingBox(respObject)); map.fitBounds(bounds.getBounds());
}, },
error: function(jqXHR, textStatus, errorThrown) { error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus); console.log(textStatus);
......
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
<c:if test="${faoInstitute.latitude ne null}"> <c:if test="${faoInstitute.latitude ne null}">
<div class="row" style=""> <div class="row" style="">
<div class="col-sm-12"> <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>
</div> </div>
</c:if> </c:if>
...@@ -141,9 +141,9 @@ ...@@ -141,9 +141,9 @@
<c:if test="${faoInstitute.latitude ne null}"> <c:if test="${faoInstitute.latitude ne null}">
<script type="text/javascript"> <script type="text/javascript">
jQuery(document).ready(function() { 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 */ 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>" markerTitle: "<spring:escapeBody javaScriptEscape="true">${faoInstitute.fullName}</spring:escapeBody>"
}); });
}); });
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<c:if test="${jsonInstitutes ne null}"> <c:if test="${jsonInstitutes ne null}">
<div class="row" style=""> <div class="row" style="">
<div class="col-sm-12"> <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>
</div> </div>
...@@ -26,9 +26,9 @@ ...@@ -26,9 +26,9 @@
<content tag="javascript"> <content tag="javascript">
<script type="text/javascript"> <script type="text/javascript">
jQuery(document).ready(function() { jQuery(document).ready(function() {
GoogleMaps.map("${pageContext.response.locale.language}", $("#map"), { GenesysMaps.map("${pageContext.response.locale.language}", $("#map"), {
maxZoom: 4, maxZoom: 4,
center: new GoogleMaps.LatLng(0, 0) center: new GenesysMaps.LatLng(0, 0)
}, function(el, map) { }, function(el, map) {
var jsonInstitutes=${jsonInstitutes}; var jsonInstitutes=${jsonInstitutes};
var heatmapData=[]; var heatmapData=[];
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
//radius: 3 //radius: 3
}); });
heatmap.setMap(map); heatmap.setMap(map);
map.fitBounds(GoogleMaps.boundingBox(jsonInstitutes)); map.fitBounds(GenesysMaps.boundingBox(jsonInstitutes));
}); });
}); });
</script> </script>
......
...@@ -13,9 +13,8 @@ ...@@ -13,9 +13,8 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
**/ **/
GenesysMaps = {
GoogleMaps = {
LatLng: function(lat, lng) { LatLng: function(lat, lng) {
this.lat=lat; this.lat=lat;
this.lng=lng; this.lng=lng;
...@@ -23,77 +22,50 @@ GoogleMaps = { ...@@ -23,77 +22,50 @@ GoogleMaps = {
} }
}; };
GoogleMaps = { GenesysMaps = {
LatLng: GoogleMaps.LatLng, LatLng: GenesysMaps.LatLng,
loaded: false, loaded: false,
queue: [], queue: [],
loadedMaps: [], loadedMaps: [],
googleMaps: [],
defaultOptions: { defaultOptions: {
zoom: 5, zoom: 5,
center: new GoogleMaps.LatLng(0, 0), center: [0,0]
mapTypeId: "terrain",
streetViewControl: false
}, },
map: function(language, doms, mapOptions, callback) { map: function(language, doms, mapOptions, callback) {
var mapOpt = $.extend({}, this.defaultOptions, mapOptions); 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) { doms.each(function(idx,el) {
if ($.inArray(el, this.loadedMaps) < 0) { if ($.inArray(el, this.loadedMaps) < 0) {
// el.googleMapsOptions = mapOpt; GenesysMaps.queue.push({element: el, mapOptions: $.extend({}, mapOpt), callback: callback});
GoogleMaps.queue.push({element: el, mapOptions: $.extend({}, mapOpt), callback: callback});
} }
}); });
this.onLoad();
this.loadGoogleMaps(language);
}, },
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() { onLoad: function() {
var config=this.queue.shift(); var config=this.queue.shift();