Commit f694d462 authored by Matija Obreza's avatar Matija Obreza

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

parent 38ada287
......@@ -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>
......
......@@ -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>
......@@ -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', {
......
......@@ -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() {
......
......@@ -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
......@@ -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>
......
......@@ -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>
......
......@@ -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);
......
......@@ -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>"
});
});
......
......@@ -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>
......
......@@ -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