map.jsp 11.9 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
</head>
<body>
Matija Obreza's avatar
Matija Obreza committed
10
	<cms:informative-h1 title="maps.accession-map" fancy="true" info="maps.accession-map.intro" />
11

Matija Obreza's avatar
Matija Obreza committed
12
13
	<div class="main-col-header clearfix">
	<div class="nav-header">
14
15
		<div class="pull-right">
			<a class="btn btn-default" href="<c:url value="/explore" />" id="selectArea"><spring:message code="view.accessions" /></a>
Matija Obreza's avatar
Matija Obreza committed
16
			<form style="display: inline-block" method="post" action="<c:url value="/explore/kml" />">
17
18
19
20
21
				<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
22
		<div class="results">
23
			<a class="btn btn-default" href="javascript: window.history.go(-1);"><spring:message code="navigate.back" /></a>
Matija Obreza's avatar
Matija Obreza committed
24
25
		</div>
	</div>
26
	</div>
igoshin's avatar
igoshin committed
27
28
29
30
31

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


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

34
                <a id="get-filters" href="#"><spring:message code="savedmaps.list"/></a>
igoshin's avatar
igoshin committed
35

igoshin's avatar
igoshin committed
36
                <ul id="enabled-filters" class="dropdown-menu"></ul>
igoshin's avatar
igoshin committed
37
38
39
40

            </li>

            <li style="margin-right: 5px" class="active form-horizontal pull-right" data-toggle="modal" data-target="#modal-dialog">
41
                <a href="#"><spring:message code="savedmaps.save"/></a>
igoshin's avatar
igoshin committed
42
43
44
45
46
47
48
49
50
51
            </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>
52
                    <h4 class="modal-title" id="modal-label"><spring:message code="savedmaps.save"/></h4>
igoshin's avatar
igoshin committed
53
54
55
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control" placeholder="<spring:message code="filter.enter.title"/>" id="filter-title">
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
                    <div id="color" >
                      <select name="colorpicker">
                        <option value="#7bd148">#7bd148</option>
                        <option value="#5484ed">#5484ed</option>
                        <option value="#a4bdfc">#a4bdfc</option>
                        <option value="#46d6db">#46d6db</option>
                        <option value="#7ae7bf">#7ae7bf</option>
                        <option value="#51b749">#51b749</option>
                        <option value="#fbd75b">#fbd75b</option>
                        <option value="#ffb878">#ffb878</option>
                        <option value="#ff887c">#ff887c</option>
                        <option value="#dc2127">#dc2127</option>
                        <option value="#dbadff">#dbadff</option>
                        <option value="#e1e1e1">#e1e1e1</option>
                      </select>
                    </div>
igoshin's avatar
igoshin committed
72
73
74
75
76
77
78
79
80
81
82
                </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">
83
84
85
86
87
88
89
90
		<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
91
		jQuery(document).ready(function() {
igoshin's avatar
igoshin committed
92

93
			$('#color select').simplecolorpicker();
igoshin's avatar
igoshin committed
94

igoshin's avatar
igoshin committed
95
96
97
98
99
100
101
            $("#save-filter").on("click",  function(event) {
                event.preventDefault();

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

                $.ajax({
102
                    url : "/savedmaps/save",
igoshin's avatar
igoshin committed
103
104
105
106
107
108
                    type : "post",
                    dataType : "json",
                    contentType: 'application/json; charset=utf-8',
                    data : JSON.stringify({
                        title : title,
                        filter : JSON.stringify(filter),
109
                        color: $('#color select').val()
igoshin's avatar
igoshin committed
110
111
112
113
114
115
116
117
118
119
120
121
                    }),
                    success : function(data) {
                    },
                    error : function(error) {
                        console.log(error)
                    }
                });
            });

            $("#get-filters").on("click",  function(event) {
                event.preventDefault();
                $.ajax({
122
                    url: "/savedmaps/get",
igoshin's avatar
igoshin committed
123
124
125
126
127
128
                    type: "get",
                    dataType: "json",
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        $.each(data, function (idx, filter) {

129
                            var li = "<li><label  class='saved-filter' x-fil='"+filter.filter+"' x-color='" + filter.color + "'><input style='margin-right: 10px;margin-left: 5px' type='checkbox'>" + filter.title + "</label></li>";
igoshin's avatar
igoshin committed
130

igoshin's avatar
igoshin committed
131
132
                            if ($("#enabled-filters").is(":visible")) {
                                $("#enabled-filters").append(li);
igoshin's avatar
igoshin committed
133
                            } else {
igoshin's avatar
igoshin committed
134
                                $("#enabled-filters").empty();
igoshin's avatar
igoshin committed
135
136
137
138
139
140
141
                            }
                        });
                    },
                    error : function(error) {
                        console.log(error)
                    }
                });
igoshin's avatar
igoshin committed
142
                $("#enabled-filters").toggle();
igoshin's avatar
igoshin committed
143
144
            });

145
			var map = L.map('map').setView([20,0], 2);
146
 			L.tileLayer('https://otile{s}-s.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', {
147
148
149
150
151
			    attribution: "MapQuest",
			    styleId: 22677,
			    subdomains: ['1','2','3','4'],
			    opacity: 0.6
			}).addTo(map);
152

Matija Obreza's avatar
Matija Obreza committed
153
154
155
156
			/* L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
				attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
			}).addTo(map);
  */
157
		  /* var OpenMapSurfer_Grayscale = L.tileLayer('http://openmapsurfer.uni-hd.de/tiles/roadsg/x={x}&y={y}&z={z}', {
Matija Obreza's avatar
Matija Obreza committed
158
159
160
		  	maxZoom: 19,
		  	attribution: 'Imagery from <a target="_blank" href="http://giscience.uni-hd.de/">GIScience Research Group, University of Heidelberg</a>, Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
		  }).addTo(map);
161
   */
Matija Obreza's avatar
Matija Obreza committed
162
163
 			L.tileLayer("{s}/explore/tile/{z}/{x}/{y}?filter=" + '${jsonFilter}', {
			    attribution: "Accession localities from <a href='${props.baseUrl}'>Genesys PGR</a>",
164
			    styleId: 22677,
Matija Obreza's avatar
Matija Obreza committed
165
			    subdomains: [${props.tileserverCdn}]
166
			}).addTo(map);
Matija Obreza's avatar
Matija Obreza committed
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
 			
 			/* var Stamen_TonerLines = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lines/{z}/{x}/{y}.png', {
 				attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
 				subdomains: 'abcd',
 				opacity: 0.3,
 				minZoom: 0,
 				maxZoom: 20,
 				ext: 'png'
 			}).addTo(map);

 			var Acetate_labels = L.tileLayer('http://a{s}.acetate.geoiq.com/tiles/acetate-labels/{z}/{x}/{y}.png', {
 				attribution: '&copy;2012 Esri & Stamen, Data from OSM and Natural Earth',
 				subdomains: '0123',
 				opacity: 0.6,
 				minZoom: 2,
 				maxZoom: 18
 			}).addTo(map); */

 			$("#selectArea").hide();
igoshin's avatar
igoshin committed
186
            var filterJson =${jsonFilter};
igoshin's avatar
igoshin committed
187
188
189
            var filterJsonObj = {};
            if (typeof filterJson !== 'undefined') {
                filterJsonObj = JSON.parse(JSON.stringify(filterJson));
igoshin's avatar
igoshin committed
190

igoshin's avatar
igoshin committed
191
192
193
194
            }


            var layers={};
195
            $("body").on("click", ".saved-filter", function (e) {
igoshin's avatar
igoshin committed
196
                var title = $(this).text();
197
198
199
                var filter = $(this).attr("x-fil");
                var tilesColor = $(this).attr("x-color").substring(1);
				var savedFilterObj=JSON.parse(filter);
igoshin's avatar
igoshin committed
200
201

                if ($(this).find("input:checkbox").is(":checked")) {
202
203
204
205
206
207
208
                	if (layers[title] == null) {
	                    layers[title] = L.tileLayer("{s}/explore/tile/{z}/{x}/{y}?filter=" + filter + "&color=" + tilesColor, {
	                        attribution: "<a href='${props.baseUrl}'>Genesys</a>",
	                        styleId: 22677,
	                        subdomains: [${props.tileserverCdn}]
	                    }).addTo(map);
					}
igoshin's avatar
igoshin committed
209
                } else {
210
211
212
213
                	if (layers[title] != null) {
	                    map.removeLayer(layers[title]);
	                    layers[title]=null;
					}
igoshin's avatar
igoshin committed
214
215
                }

igoshin's avatar
igoshin committed
216
217
218
            });

            var locationFilter = new L.LocationFilter({adjustButton: false, bounds: map.getBounds().pad(-0.1) }).addTo(map);
219
220
221
			locationFilter.on("change", function (e) {
			    // Do something when the bounds change.
			    // Bounds are available in `e.bounds`.
igoshin's avatar
igoshin committed
222
				var bounds=locationFilter.getBounds();
223
224
				filterJson['geo.latitude']=[{range:[bounds.getSouth(),bounds.getNorth()]}];
				filterJson['geo.longitude']=[{range:[bounds.getWest(),bounds.getEast()]}];
225
			});
igoshin's avatar
igoshin committed
226

227
228
229
230
231
232
			map.on("viewreset", function() {
				if (locationFilter.isEnabled())
					return;
				var mapBounds=map.getBounds().pad(-0.1);
				locationFilter.setBounds(mapBounds);
			});
233
234
			locationFilter.on("enabled", function () {
			    // Do something when enabled.
igoshin's avatar
igoshin committed
235
				var bounds=locationFilter.getBounds();
236
237
				filterJson['geo.latitude']=[{range:[bounds.getSouth(),bounds.getNorth()]}];
				filterJson['geo.longitude']=[{range:[bounds.getWest(),bounds.getEast()]}];
238
239
240
241
242
243
244
245
246
247
248
			    $("#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);
			});
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
			
			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
268
269
270

						var filterBounds=filterJsonObj;
                        console.log(filterBounds)
271
272
						filterBounds['geo.latitude']=[{range:[sw.lat, ne.lat]}];
						filterBounds['geo.longitude']=[{range:[sw.lng, ne.lng]}];
273
						//console.log(JSON.stringify(filterBounds));
Matija Obreza's avatar
Matija Obreza committed
274
						$.ajax("<c:url value="/explore/geoJson"><c:param name="limit" value="11" /></c:url>&filter="+JSON.stringify(filterBounds), {
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
							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;
				}
			});
307
308
309
310
311
		});
		</script>
</content>
</body>
</html>