Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Genesys PGR
Genesys Backend
Commits
a4571148
Commit
a4571148
authored
Nov 19, 2015
by
Alexander Basov
Browse files
Feature #26140
Changing map base layer
parent
ddc67f0c
Changes
2
Hide whitespace changes
Inline
Side-by-side
src/main/resources/content/language.properties
View file @
a4571148
...
...
@@ -388,6 +388,8 @@ savedmaps.list=Map list
savedmaps.save
=
Remember map
taxonomy.subtaxa
=
Subtaxa
mapproviders.list
=
Providers list
filter.enter.title
=
Enter filter title
filters.page.title
=
Data filters
filters.view
=
Current filters
...
...
src/main/webapp/WEB-INF/jsp/accession/map.jsp
View file @
a4571148
<!DOCTYPE html>
<%@include
file=
"/WEB-INF/jsp/init.jsp"
%>
<%@include
file=
"/WEB-INF/jsp/init.jsp"
%>
<html>
<head>
<title><spring:message
code=
"maps.accession-map"
/></title>
<title><spring:message
code=
"maps.accession-map"
/></title>
</head>
<body>
<cms:informative
-h1 title="maps.accession-map" fancy="true" info="maps.accession-map.intro"
/>
<cms:informative
-h1 title="maps.accession-map" fancy="true" info="maps.accession-map.intro"
/>
<div
class=
"main-col-header clearfix"
>
<div
class=
"nav-header"
>
<div
class=
"pull-right"
>
<a
class=
"btn btn-default"
href=
"
<c:url
value=
"/explore"
/>
"
id=
"selectArea"
><spring:message
code=
"view.accessions"
/></a>
<form
style=
"display: inline-block"
method=
"post"
action=
"
<c:url
value=
"/explore/kml"
/>
"
>
<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>
<div
class=
"results"
>
<a
class=
"btn btn-default"
href=
"javascript: window.history.go(-1);"
><spring:message
code=
"navigate.back"
/></a>
</div>
</div>
</div>
<div
class=
"main-col-header clearfix"
>
<div
class=
"nav-header"
>
<div
class=
"pull-right"
>
<a
class=
"btn btn-default"
href=
"
<c:url
value=
"/explore"
/>
"
id=
"selectArea"
><spring:message
code=
"view.accessions"
/></a>
<form
style=
"display: inline-block"
method=
"post"
action=
"
<c:url
value=
"/explore/kml"
/>
"
>
<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>
<div
class=
"results"
>
<a
class=
"btn btn-default"
href=
"javascript: window.history.go(-1);"
><spring:message
code=
"navigate.back"
/></a>
</div>
</div>
</div>
<div
class=
"applied-filters"
>
<ul
class=
"nav nav-pills "
>
<li
style=
"margin-left: 5px"
class=
"active dropdown form-horizontal pull-right"
>
<div
class=
"applied-filters"
>
<ul
class=
"nav nav-pills "
>
<a
id=
"get-providers"
href=
"#"
><spring:message
code=
"mapproviders.list"
/></a>
<ul
id=
"enabled-providers"
class=
"dropdown-menu"
></ul>
<li
class=
"active dropdown form-horizontal pull-right"
>
</li
>
<
a
id=
"get-filters"
href=
"#"
><spring:message
code=
"savedmaps.list"
/></a
>
<
li
class=
"active dropdown form-horizontal pull-right"
>
<ul
id=
"enabled-filters"
class=
"dropdown-menu"
></
ul
>
<a
id=
"get-filters"
href=
"#"
><spring:message
code=
"savedmaps.list"
/
></
a
>
<
/li
>
<
ul
id=
"enabled-filters"
class=
"dropdown-menu"
></ul
>
<li
style=
"margin-right: 5px"
class=
"active form-horizontal pull-right"
data-toggle=
"modal"
data-target=
"#modal-dialog"
>
<a
href=
"#"
><spring:message
code=
"savedmaps.save"
/></a>
</li>
</ul>
</div>
</li>
<!-- 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"
>
×
</span><span
class=
"sr-only"
>
Close
</span></button>
<h4
class=
"modal-title"
id=
"modal-label"
><spring:message
code=
"savedmaps.save"
/></h4>
</div>
<div
class=
"modal-body"
>
<input
type=
"text"
class=
"form-control"
placeholder=
"
<spring:message
code=
"filter.enter.title"
/>
"
id=
"filter-title"
>
<div
id=
"color"
>
<select
name=
"colorpicker"
>
<li
style=
"margin-right: 5px"
class=
"active form-horizontal pull-right"
data-toggle=
"modal"
data-target=
"#modal-dialog"
>
<a
href=
"#"
><spring:message
code=
"savedmaps.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"
>
×
</span><span
class=
"sr-only"
>
Close
</span></button>
<h4
class=
"modal-title"
id=
"modal-label"
><spring:message
code=
"savedmaps.save"
/></h4>
</div>
<div
class=
"modal-body"
>
<input
type=
"text"
class=
"form-control"
placeholder=
"
<spring:message
code=
"filter.enter.title"
/>
"
id=
"filter-title"
>
<div
id=
"color"
>
<select
name=
"colorpicker"
>
<option
value=
"#7bd148"
>
#7bd148
</option>
<option
value=
"#5484ed"
>
#5484ed
</option>
<option
value=
"#a4bdfc"
>
#a4bdfc
</option>
...
...
@@ -67,56 +80,181 @@
<option
value=
"#dc2127"
>
#dc2127
</option>
<option
value=
"#dbadff"
>
#dbadff
</option>
<option
value=
"#e1e1e1"
>
#e1e1e1
</option>
</select>
</div>
</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>
</select>
</div>
</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>
<%--End modal--%>
</div>
<%--End modal--%>
<div
class=
"row"
>
<div
class=
"col-sm-12"
>
<div
id=
"map"
class=
"gis-map gis-map-square"
></div>
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-sm-12"
>
<div
id=
"map"
class=
"gis-map gis-map-square"
></div>
</div>
</div>
<content
tag=
"javascript"
>
<script
type=
"text/javascript"
>
jQuery
(
document
).
ready
(
function
()
{
<script
type=
"text/javascript"
>
jQuery
(
document
).
ready
(
function
()
{
var
map
=
L
.
map
(
'
map
'
).
setView
([
20
,
0
],
2
);
var
mapProviders
=
{
Openstreetmap
:
L
.
tileLayer
(
'
https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
'
,
{
attribution
:
'
© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>
'
}),
OpenMapSurfer_Grayscale
:
L
.
tileLayer
(
'
http://openmapsurfer.uni-hd.de/tiles/roadsg/x={x}&y={y}&z={z}
'
,
{
maxZoom
:
19
,
attribution
:
'
Imagery from <a target="_blank" href="http://giscience.uni-hd.de/">GIScience Research Group, University of Heidelberg</a>, Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>
'
}),
MapQuest
:
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
}),
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> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>
'
,
subdomains
:
'
abcd
'
,
opacity
:
0.3
,
minZoom
:
0
,
maxZoom
:
20
,
ext
:
'
png
'
}),
Acetate_labels
:
L
.
tileLayer
(
'
http://a{s}.acetate.geoiq.com/tiles/acetate-labels/{z}/{x}/{y}.png
'
,
{
attribution
:
'
©2012 Esri & Stamen, Data from OSM and Natural Earth
'
,
subdomains
:
'
0123
'
,
opacity
:
0.6
,
minZoom
:
2
,
maxZoom
:
18
})
};
for
(
var
key
in
mapProviders
){
var
li
=
"
<li><label class='map-provider'><input style='margin-right: 10px;margin-left: 5px' type='checkbox'>
"
+
key
+
"
</label></li>
"
;
$
(
'
#enabled-providers
'
).
append
(
li
);
}
$
(
'
#get-providers
'
).
on
(
'
click
'
,
function
(){
$
(
'
#enabled-providers
'
).
toggle
();
});
var
cookieUtils
=
{
getCookie
:
function
(
name
)
{
var
matches
=
document
.
cookie
.
match
(
new
RegExp
(
"
(?:^|; )
"
+
name
.
replace
(
/
([\.
$?*|{}
\(\)\[\]\\\/\+
^
])
/g
,
'
\\
$1
'
)
+
"
=([^;]*)
"
));
return
matches
?
decodeURIComponent
(
matches
[
1
])
:
undefined
;
},
setCookie
:
function
(
name
,
value
,
options
)
{
options
=
options
||
{};
var
expires
=
options
.
expires
;
if
(
typeof
expires
==
"
number
"
&&
expires
)
{
var
d
=
new
Date
();
d
.
setTime
(
d
.
getTime
()
+
expires
*
1000
);
expires
=
options
.
expires
=
d
;
}
if
(
expires
&&
expires
.
toUTCString
)
{
options
.
expires
=
expires
.
toUTCString
();
}
value
=
encodeURIComponent
(
value
);
var
updatedCookie
=
name
+
"
=
"
+
value
;
for
(
var
propName
in
options
)
{
updatedCookie
+=
"
;
"
+
propName
;
var
propValue
=
options
[
propName
];
if
(
propValue
!==
true
)
{
updatedCookie
+=
"
=
"
+
propValue
;
}
}
document
.
cookie
=
updatedCookie
;
},
deleteCookie
:
function
(
name
)
{
this
.
setCookie
(
name
,
""
,
{
expires
:
-
1
})
}
};
// cookieUtils.deleteCookie('mapProviders');
if
(
cookieUtils
.
getCookie
(
'
mapProviders
'
)
&&
cookieUtils
.
getCookie
(
'
mapProviders
'
)
!=
''
){
cookieUtils
.
getCookie
(
'
mapProviders
'
).
split
(
'
,
'
).
forEach
(
function
(
provider
){
[].
forEach
.
call
(
$
(
'
.map-provider
'
),
function
(
li
){
if
(
$
(
li
).
text
()
==
provider
){
$
(
li
).
find
(
'
input:checkbox
'
).
prop
(
'
checked
'
,
true
);
}
else
{
$
(
li
).
find
(
'
input:checkbox
'
).
prop
(
'
checked
'
,
false
);
}
});
mapProviders
[
provider
].
addTo
(
map
);
});
}
else
{
mapProviders
.
MapQuest
.
addTo
(
map
);
}
$
(
document
).
on
(
'
cookieUpdate
'
,
function
(){
for
(
var
key
in
mapProviders
){
map
.
removeLayer
(
mapProviders
[
key
]);
}
if
(
cookieUtils
.
getCookie
(
'
mapProviders
'
)){
cookieUtils
.
getCookie
(
'
mapProviders
'
).
split
(
'
,
'
).
forEach
(
function
(
provider
){
mapProviders
[
provider
].
addTo
(
map
);
});
}
else
{
mapProviders
.
MapQuest
.
addTo
(
map
);
}
});
$
(
"
body
"
).
on
(
"
click
"
,
"
.map-provider
"
,
function
(
e
)
{
var
title
=
$
(
this
).
text
();
var
providers
=
cookieUtils
.
getCookie
(
'
mapProviders
'
)
&&
cookieUtils
.
getCookie
(
'
mapProviders
'
)
!=
''
?
cookieUtils
.
getCookie
(
'
mapProviders
'
).
split
(
'
,
'
):[];
if
(
$
(
this
).
find
(
"
input:checkbox
"
).
is
(
"
:checked
"
))
{
providers
.
push
(
title
);
cookieUtils
.
setCookie
(
'
mapProviders
'
,
providers
,
0
);
$
(
document
).
trigger
(
'
cookieUpdate
'
);
}
else
{
providers
.
splice
(
providers
.
indexOf
(
title
),
1
);
cookieUtils
.
setCookie
(
'
mapProviders
'
,
providers
,
0
);
$
(
document
).
trigger
(
'
cookieUpdate
'
);
}
$
(
'
#color select
'
).
simplecolorpicker
();
});
$
(
'
#color select
'
).
simplecolorpicker
();
$
(
"
#save-filter
"
).
on
(
"
click
"
,
function
(
event
)
{
$
(
"
#save-filter
"
).
on
(
"
click
"
,
function
(
event
)
{
event
.
preventDefault
();
var
title
=
$
(
"
#filter-title
"
).
val
();
var
filter
=
$
{
jsonFilter
};
var
filter
=
$
{
jsonFilter
};
$
.
ajax
({
url
:
"
/savedmaps/save
"
,
type
:
"
post
"
,
dataType
:
"
json
"
,
url
:
"
/savedmaps/save
"
,
type
:
"
post
"
,
dataType
:
"
json
"
,
contentType
:
'
application/json; charset=utf-8
'
,
data
:
JSON
.
stringify
({
title
:
title
,
filter
:
JSON
.
stringify
(
filter
),
data
:
JSON
.
stringify
({
title
:
title
,
filter
:
JSON
.
stringify
(
filter
),
color
:
$
(
'
#color select
'
).
val
()
}),
success
:
function
(
data
)
{
success
:
function
(
data
)
{
},
error
:
function
(
error
)
{
error
:
function
(
error
)
{
console
.
log
(
error
)
}
});
});
$
(
"
#get-filters
"
).
on
(
"
click
"
,
function
(
event
)
{
$
(
"
#get-filters
"
).
on
(
"
click
"
,
function
(
event
)
{
event
.
preventDefault
();
$
.
ajax
({
url
:
"
/savedmaps/get
"
,
...
...
@@ -126,7 +264,7 @@
success
:
function
(
data
)
{
$
.
each
(
data
,
function
(
idx
,
filter
)
{
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>
"
;
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>
"
;
if
(
$
(
"
#enabled-filters
"
).
is
(
"
:visible
"
))
{
$
(
"
#enabled-filters
"
).
append
(
li
);
...
...
@@ -135,54 +273,20 @@
}
});
},
error
:
function
(
error
)
{
error
:
function
(
error
)
{
console
.
log
(
error
)
}
});
$
(
"
#enabled-filters
"
).
toggle
();
});
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
);
/* L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
*/
/* var OpenMapSurfer_Grayscale = L.tileLayer('http://openmapsurfer.uni-hd.de/tiles/roadsg/x={x}&y={y}&z={z}', {
maxZoom: 19,
attribution: 'Imagery from <a target="_blank" href="http://giscience.uni-hd.de/">GIScience Research Group, University of Heidelberg</a>, Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
*/
L
.
tileLayer
(
"
{s}/explore/tile/{z}/{x}/{y}?filter=
"
+
'
${jsonFilter}
'
,
{
attribution
:
"
Accession localities from <a href='${props.baseUrl}'>Genesys PGR</a>
"
,
styleId
:
22677
,
subdomains
:
[
$
{
props
.
tileserverCdn
}]
}).
addTo
(
map
);
/* 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> — Map data © <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: '©2012 Esri & Stamen, Data from OSM and Natural Earth',
subdomains: '0123',
opacity: 0.6,
minZoom: 2,
maxZoom: 18
}).addTo(map); */
$
(
"
#selectArea
"
).
hide
();
L
.
tileLayer
(
"
{s}/explore/tile/{z}/{x}/{y}?filter=
"
+
'
${jsonFilter}
'
,
{
attribution
:
"
Accession localities from <a href='${props.baseUrl}'>Genesys PGR</a>
"
,
styleId
:
22677
,
subdomains
:
[
$
{
props
.
tileserverCdn
}]
}).
addTo
(
map
);
$
(
"
#selectArea
"
).
hide
();
var
filterJson
=
$
{
jsonFilter
};
var
filterJsonObj
=
{};
if
(
typeof
filterJson
!==
'
undefined
'
)
{
...
...
@@ -191,121 +295,126 @@
}
var
layers
=
{};
var
layers
=
{};
$
(
"
body
"
).
on
(
"
click
"
,
"
.saved-filter
"
,
function
(
e
)
{
var
title
=
$
(
this
).
text
();
var
filter
=
$
(
this
).
attr
(
"
x-fil
"
);
var
tilesColor
=
$
(
this
).
attr
(
"
x-color
"
).
substring
(
1
);
var
savedFilterObj
=
JSON
.
parse
(
filter
);
var
savedFilterObj
=
JSON
.
parse
(
filter
);
if
(
$
(
this
).
find
(
"
input:checkbox
"
).
is
(
"
:checked
"
))
{
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
);
}
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
);
}
}
else
{
if
(
layers
[
title
]
!=
null
)
{
map
.
removeLayer
(
layers
[
title
]);
layers
[
title
]
=
null
;
}
if
(
layers
[
title
]
!=
null
)
{
map
.
removeLayer
(
layers
[
title
]);
layers
[
title
]
=
null
;
}
}
});
var
locationFilter
=
new
L
.
LocationFilter
({
adjustButton
:
false
,
bounds
:
map
.
getBounds
().
pad
(
-
0.1
)
}).
addTo
(
map
);
locationFilter
.
on
(
"
change
"
,
function
(
e
)
{
// Do something when the bounds change.
// Bounds are available in `e.bounds`.
var
bounds
=
locationFilter
.
getBounds
();
filterJson
[
'
geo.latitude
'
]
=
[{
range
:[
bounds
.
getSouth
(),
bounds
.
getNorth
()]}];
filterJson
[
'
geo.longitude
'
]
=
[{
range
:[
bounds
.
getWest
(),
bounds
.
getEast
()]}];
});
map
.
on
(
"
viewreset
"
,
function
()
{
if
(
locationFilter
.
isEnabled
())
return
;
var
mapBounds
=
map
.
getBounds
().
pad
(
-
0.1
);
locationFilter
.
setBounds
(
mapBounds
);
});
locationFilter
.
on
(
"
enabled
"
,
function
()
{
// Do something when enabled.
var
bounds
=
locationFilter
.
getBounds
();
filterJson
[
'
geo.latitude
'
]
=
[{
range
:[
bounds
.
getSouth
(),
bounds
.
getNorth
()]}];
filterJson
[
'
geo.longitude
'
]
=
[{
range
:[
bounds
.
getWest
(),
bounds
.
getEast
()]}];
$
(
"
#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
);
});
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
()
{
var
filterBounds
=
filterJsonObj
;
var
locationFilter
=
new
L
.
LocationFilter
({
adjustButton
:
false
,
bounds
:
map
.
getBounds
().
pad
(
-
0.1
)
}).
addTo
(
map
);
locationFilter
.
on
(
"
change
"
,
function
(
e
)
{
// Do something when the bounds change.
// Bounds are available in `e.bounds`.
var
bounds
=
locationFilter
.
getBounds
();
filterJson
[
'
geo.latitude
'
]
=
[{
range
:
[
bounds
.
getSouth
(),
bounds
.
getNorth
()]}];
filterJson
[
'
geo.longitude
'
]
=
[{
range
:
[
bounds
.
getWest
(),
bounds
.
getEast
()]}];
});
map
.
on
(
"
viewreset
"
,
function
()
{
if
(
locationFilter
.
isEnabled
())
return
;
var
mapBounds
=
map
.
getBounds
().
pad
(
-
0.1
);
locationFilter
.
setBounds
(
mapBounds
);
});
locationFilter
.
on
(
"
enabled
"
,
function
()
{
// Do something when enabled.
var
bounds
=
locationFilter
.
getBounds
();
filterJson
[
'
geo.latitude
'
]
=
[{
range
:
[
bounds
.
getSouth
(),
bounds
.
getNorth
()]}];
filterJson
[
'
geo.longitude
'
]
=
[{
range
:
[
bounds
.
getWest
(),
bounds
.
getEast
()]}];
$
(
"
#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
);
});
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
()
{
var
filterBounds
=
filterJsonObj
;
console
.
log
(
filterBounds
)
filterBounds
[
'
geo.latitude
'
]
=
[{
range
:[
sw
.
lat
,
ne
.
lat
]}];
filterBounds
[
'
geo.longitude
'
]
=
[{
range
:[
sw
.
lng
,
ne
.
lng
]}];
//console.log(JSON.stringify(filterBounds));
$
.
ajax
(
"
<c:url
value=
"/explore/geoJson"
><c:param
name=
"limit"
value=
"11"
/></c:url>
&filter=
"
+
JSON
.
stringify
(
filterBounds
),
{
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
);