map.jsp 10 KB
Newer Older
1 2 3 4 5 6
<!DOCTYPE html>

<%@include file="/WEB-INF/jsp/init.jsp"%>

<html>
<head>
Matija Obreza's avatar
Matija Obreza committed
7
<title><spring:message code="maps.accession-map" /></title>
8 9 10
</head>
<body>
	<h1>
Matija Obreza's avatar
Matija Obreza committed
11
		<spring:message code="maps.accession-map" />
12 13
	</h1>

Matija Obreza's avatar
Matija Obreza committed
14 15
	<div class="main-col-header clearfix">
	<div class="nav-header">
16 17
		<div class="pull-right">
			<a class="btn btn-default" href="<c:url value="/explore" />" id="selectArea"><spring:message code="view.accessions" /></a>
18
			<form style="display: inline-block" method="post" action="/explore/kml">
19 20 21 22 23
				<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
				<input type="hidden" name="filter" value="<c:out value="${jsonFilter}" />" />
				<button class="btn btn-default" type="submit"><spring:message code="download.kml" /></button>
			</form>
		</div>
Matija Obreza's avatar
Matija Obreza committed
24 25 26 27
		<div class="results">
			<a href="javascript: window.history.go(-1);"><spring:message code="navigate.back" /></a>
		</div>
	</div>
28
	</div>
igoshin's avatar
igoshin committed
29 30 31 32 33

    <div class="applied-filters">
        <ul class="nav nav-pills ">


igoshin's avatar
igoshin committed
34
            <li class="active dropdown form-horizontal pull-right" >
igoshin's avatar
igoshin committed
35

igoshin's avatar
igoshin committed
36
                <a id="get-filters" href="#"><spring:message code="filters.saved"/></a>
igoshin's avatar
igoshin committed
37

igoshin's avatar
igoshin committed
38
                <ul id="enabled-filters" class="dropdown-menu"></ul>
igoshin's avatar
igoshin committed
39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

            </li>

            <li style="margin-right: 5px" class="active form-horizontal pull-right" data-toggle="modal" data-target="#modal-dialog">
                <a href="#"><spring:message code="filters.save"/></a>
            </li>
        </ul>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="modal-dialog" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="modal-label"><spring:message code="filters.save"/></h4>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control" placeholder="<spring:message code="filter.enter.title"/>" id="filter-title">
igoshin's avatar
igoshin committed
58
                    <div href="#" id="color" ></div>
igoshin's avatar
igoshin committed
59 60 61 62 63 64 65 66 67 68 69
                </div>
                <div class="modal-footer">
                    <button type="button"  class="btn btn-default" data-dismiss="modal"><spring:message code="cancel"/></button>
                    <button id="save-filter" type="button"  class="btn btn-primary" data-dismiss="modal"><spring:message code="save"/></button>
                </div>
            </div>
        </div>
    </div>
    <%--End modal--%>

    <div class="row">
70 71 72 73 74 75 76 77
		<div class="col-sm-12">
			<div id="map" class="gis-map gis-map-square"></div>
		</div>
	</div>


<content tag="javascript">
		<script type="text/javascript">
igoshin's avatar
igoshin committed
78
		jQuery(document).ready(function() {
igoshin's avatar
igoshin committed
79 80 81 82 83 84 85 86 87

            var color=null;
            $('#color').colorPicker({
                click: function(data){
                    $('#output').html(data);
                    color=data;
                }
            });

igoshin's avatar
igoshin committed
88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121
            $("#save-filter").on("click",  function(event) {
                event.preventDefault();

                var title = $("#filter-title").val();
                var filter=${jsonFilter};

                $.ajax({
                    url : "/filter/save",
                    type : "post",
                    dataType : "json",
                    contentType: 'application/json; charset=utf-8',
                    data : JSON.stringify({
                        title : title,
                        filter : JSON.stringify(filter),
                        color:color
                    }),
                    success : function(data) {
                    },
                    error : function(error) {
                        console.log(error)
                    }
                });
            });

            $("#get-filters").on("click",  function(event) {
                event.preventDefault();
                $.ajax({
                    url: "/filter/get",
                    type: "get",
                    dataType: "json",
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        $.each(data, function (idx, filter) {

igoshin's avatar
igoshin committed
122 123
//                            var li = "<li><a href='#' class='saved-filter' fil='"+filter.filter+"'>" + filter.title + "</a></li>";
                            var li = "<li><label  class='saved-filter' fil='"+filter.filter+"'><input style='margin-right: 10px;margin-left: 5px' type='checkbox'>" + filter.title + "</label></li>";
igoshin's avatar
igoshin committed
124

igoshin's avatar
igoshin committed
125 126
                            if ($("#enabled-filters").is(":visible")) {
                                $("#enabled-filters").append(li);
igoshin's avatar
igoshin committed
127
                            } else {
igoshin's avatar
igoshin committed
128
                                $("#enabled-filters").empty();
igoshin's avatar
igoshin committed
129 130 131 132 133 134 135
                            }
                        });
                    },
                    error : function(error) {
                        console.log(error)
                    }
                });
igoshin's avatar
igoshin committed
136
                $("#enabled-filters").toggle();
igoshin's avatar
igoshin committed
137 138
            });

igoshin's avatar
igoshin committed
139
            var globalTitle="";
140 141 142 143 144 145 146
			var map = L.map('map').setView([20,0], 2);
			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);
igoshin's avatar
igoshin committed
147
			L.tileLayer("{s}/explore/tile/{z}/{x}/{y}?filter=" + '${jsonFilter}'+"&title="+globalTitle, {
Matija Obreza's avatar
Matija Obreza committed
148
			    attribution: "<a href='${props.baseUrl}'>Genesys</a>",
149
			    styleId: 22677,
Matija Obreza's avatar
Matija Obreza committed
150
			    subdomains: [${props.tileserverCdn}]
151
			}).addTo(map);
152

igoshin's avatar
igoshin committed
153 154
            $("#selectArea").hide();
            var filterJson =${jsonFilter};
igoshin's avatar
igoshin committed
155 156 157
            var filterJsonObj = {};
            if (typeof filterJson !== 'undefined') {
                filterJsonObj = JSON.parse(JSON.stringify(filterJson));
igoshin's avatar
igoshin committed
158

igoshin's avatar
igoshin committed
159 160 161 162
            }


            var layers={};
igoshin's avatar
igoshin committed
163 164 165 166
            $("body").on("click", ".saved-filter", function () {
                var title = $(this).text();
                var filter = $(this).attr("fil");
                globalTitle = title;
igoshin's avatar
igoshin committed
167 168 169 170 171 172 173 174 175
                var savedFilterObj=JSON.parse(filter);

                $.each(savedFilterObj.crop,function(idx,cropName){
                    if (typeof filterJsonObj.crop == 'undefined') {
                        filterJsonObj.crop=[];
                    }
                    filterJsonObj.crop.push(cropName);
                });

igoshin's avatar
igoshin committed
176 177

                if ($(this).find("input:checkbox").is(":checked")) {
igoshin's avatar
igoshin committed
178
                    layers[title] = L.tileLayer("{s}/explore/tile/{z}/{x}/{y}?filter=" + filter + "&title=" + title, {
igoshin's avatar
igoshin committed
179 180 181 182 183
                        attribution: "<a href='${props.baseUrl}'>Genesys</a>",
                        styleId: 22677,
                        subdomains: [${props.tileserverCdn}]
                    }).addTo(map);
                } else {
igoshin's avatar
igoshin committed
184
                    map.removeLayer(layers[title]);
igoshin's avatar
igoshin committed
185 186
                }

igoshin's avatar
igoshin committed
187 188 189
            });

            var locationFilter = new L.LocationFilter({adjustButton: false, bounds: map.getBounds().pad(-0.1) }).addTo(map);
190 191 192
			locationFilter.on("change", function (e) {
			    // Do something when the bounds change.
			    // Bounds are available in `e.bounds`.
igoshin's avatar
igoshin committed
193
				var bounds=locationFilter.getBounds();
194 195 196
				filterJson.latitude=[{range:[bounds.getSouth(),bounds.getNorth()]}];
				filterJson.longitude=[{range:[bounds.getWest(),bounds.getEast()]}];
			});
igoshin's avatar
igoshin committed
197

198 199 200 201 202 203
			map.on("viewreset", function() {
				if (locationFilter.isEnabled())
					return;
				var mapBounds=map.getBounds().pad(-0.1);
				locationFilter.setBounds(mapBounds);
			});
204 205
			locationFilter.on("enabled", function () {
			    // Do something when enabled.
igoshin's avatar
igoshin committed
206
				var bounds=locationFilter.getBounds();
Matija Obreza's avatar
Matija Obreza committed
207 208
				filterJson.latitude=[{range:[bounds.getSouth(),bounds.getNorth()]}];
				filterJson.longitude=[{range:[bounds.getWest(),bounds.getEast()]}];
209 210 211 212 213 214 215 216 217 218 219
			    $("#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);
			});
220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238
			
			var loadDetailsTimeout = null;
			var clickMarker=null;
			map.on("click", function(e) {
				if (clickMarker!=null) {
					map.removeLayer(clickMarker);
					clickMarker=null;
				}
				if (map.getZoom()>4) {
					if (loadDetailsTimeout!=null) {
						clearTimeout(loadDetailsTimeout);
					}
					
					var point=this.latLngToLayerPoint(e.latlng);
					point.x-=5; point.y+=5;
					var sw=this.layerPointToLatLng(point);
					point.x+=10; point.y-=10;
					var ne=this.layerPointToLatLng(point);
					loadDetailsTimeout=setTimeout(function() {
igoshin's avatar
igoshin committed
239 240 241

						var filterBounds=filterJsonObj;
                        console.log(filterBounds)
242 243 244
						filterBounds.latitude=[{range:[sw.lat, ne.lat]}];
						filterBounds.longitude=[{range:[sw.lng, ne.lng]}];
						//console.log(JSON.stringify(filterBounds));
Matija Obreza's avatar
Matija Obreza committed
245
						$.ajax("<c:url value="/explore/geoJson"><c:param name="limit" value="11" /></c:url>&filter="+JSON.stringify(filterBounds), {
246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277
							type : "GET",
							dataType : 'json',
							success : function(respObject) {
								if (respObject.features == null || respObject.features.length == 0)
									return;
								
								var c="";
								respObject.features.forEach(function(a, b) {
									if (b<10)
										c+="<a href='<c:url value="/acn/id/" />" + a.id + "'>" + a.properties.acceNumb + " " + a.properties.instCode + "</a><br />";
									else
										c+="...";
								});
								clickMarker=L.rectangle([sw, ne], {stroke: false, fill: true}).addTo(map);
								clickMarker.bindPopup(c).openPopup();
							},
							error: function(jqXHR, textStatus, errorThrown) {
								console.log(textStatus);
								console.log(errorThrown);
							}
						});
						
					}, 200);
				}
			});
			map.on("dblclick", function(e) {
				if (loadDetailsTimeout!=null) {
					//console.log("cleared" + loadDetailsTimeout);
					clearTimeout(loadDetailsTimeout);
					loadDetailsTimeout=null;
				}
			});
278 279 280 281 282
		});
		</script>
</content>
</body>
</html>