map.jsp 9.86 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>
Matija Obreza's avatar
Matija Obreza committed
18
			<form style="display: inline-block" method="post" action="<c:url value="/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
		<div class="results">
25
			<a class="btn btn-default" href="javascript: window.history.go(-1);"><spring:message code="navigate.back" /></a>
Matija Obreza's avatar
Matija Obreza committed
26
27
		</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

36
                <a id="get-filters" href="#"><spring:message code="savedmaps.list"/></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

            </li>

            <li style="margin-right: 5px" class="active form-horizontal pull-right" data-toggle="modal" data-target="#modal-dialog">
43
                <a href="#"><spring:message code="savedmaps.save"/></a>
igoshin's avatar
igoshin committed
44
45
46
47
48
49
50
51
52
53
            </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>
54
                    <h4 class="modal-title" id="modal-label"><spring:message code="savedmaps.save"/></h4>
igoshin's avatar
igoshin committed
55
56
57
                </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
            $("#save-filter").on("click",  function(event) {
                event.preventDefault();

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

                $.ajax({
95
                    url : "/savedmaps/save",
igoshin's avatar
igoshin committed
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
                    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({
115
                    url: "/savedmaps/get",
igoshin's avatar
igoshin committed
116
117
118
119
120
121
                    type: "get",
                    dataType: "json",
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        $.each(data, function (idx, filter) {

122
                            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
123

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

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

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

igoshin's avatar
igoshin committed
157
158
159
160
            }


            var layers={};
161
            $("body").on("click", ".saved-filter", function (e) {
igoshin's avatar
igoshin committed
162
                var title = $(this).text();
163
164
165
                var filter = $(this).attr("x-fil");
                var tilesColor = $(this).attr("x-color").substring(1);
				var savedFilterObj=JSON.parse(filter);
igoshin's avatar
igoshin committed
166
167

                if ($(this).find("input:checkbox").is(":checked")) {
168
169
170
171
172
173
174
                	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
175
                } else {
176
177
178
179
                	if (layers[title] != null) {
	                    map.removeLayer(layers[title]);
	                    layers[title]=null;
					}
igoshin's avatar
igoshin committed
180
181
                }

igoshin's avatar
igoshin committed
182
183
184
            });

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

193
194
195
196
197
198
			map.on("viewreset", function() {
				if (locationFilter.isEnabled())
					return;
				var mapBounds=map.getBounds().pad(-0.1);
				locationFilter.setBounds(mapBounds);
			});
199
200
			locationFilter.on("enabled", function () {
			    // Do something when enabled.
igoshin's avatar
igoshin committed
201
				var bounds=locationFilter.getBounds();
202
203
				filterJson['geo.latitude']=[{range:[bounds.getSouth(),bounds.getNorth()]}];
				filterJson['geo.longitude']=[{range:[bounds.getWest(),bounds.getEast()]}];
204
205
206
207
208
209
210
211
212
213
214
			    $("#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);
			});
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
			
			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
234
235
236

						var filterBounds=filterJsonObj;
                        console.log(filterBounds)
237
238
						filterBounds['geo.latitude']=[{range:[sw.lat, ne.lat]}];
						filterBounds['geo.longitude']=[{range:[sw.lng, ne.lng]}];
239
						//console.log(JSON.stringify(filterBounds));
Matija Obreza's avatar
Matija Obreza committed
240
						$.ajax("<c:url value="/explore/geoJson"><c:param name="limit" value="11" /></c:url>&filter="+JSON.stringify(filterBounds), {
241
242
243
244
245
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
							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;
				}
			});
273
274
275
276
277
		});
		</script>
</content>
</body>
</html>