-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathfeaturefilter.html
123 lines (107 loc) · 3.33 KB
/
featurefilter.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
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
122
123
<!DOCTYPE html>
<html>
<title>feature filtering app example</title>
<link rel="stylesheet" type="text/css" href="examples.css"/>
<script type="text/javascript" src="https://api.giscloud.com/1/api.js"></script>
<script type="text/javascript" src="examples.js"></script>
<script type="text/javascript">
$ = giscloud.exposeJQuery();
var mapId = 1245864,
layerId = 3284350,
viewer;
giscloud.ready().done(function () {
// create a viewer
viewer = new giscloud.Viewer("mapViewer", mapId);
// setup filters checkboxes
$("form input").on("change", setFilter);
});
var filters = {
nameA: {
attributes: "name",
filter: function (obj) {
return obj.name[0] === "A";
}
},
tropicals: {
attributes: "lat",
filter: function (obj) {
return Math.abs(obj.lat) < 23;
}
},
highPopulation: {
attributes: "pop2005",
filter: function (obj) {
return obj.pop2005 > 10000000;
}
}
};
function setFilter() {
var filter = filters[$("form input:checked").val()];
viewer.filterFeatures(layerId, filter);
}
</script>
<body>
<h1>Simple mapping app</h1>
<p>
This example shows the filterFeatures method of the Viewer.
</p>
<p>
Select a filter:
<form>
<ul>
<li>
<label for="nameA">
<input name="filter" type="radio" value="nameA">
Show only those countries with the first letter A
</label>
</li>
<li>
<label for="tropicals">
<input name="filter" type="radio" value="tropicals">
Show only tropical countries
</label>
</li>
<li>
<label for="highPopulation">
<input name="filter" type="radio" value="highPopulation">
Show only countries with population over 100m
</label>
</li>
</ul>
</form>
</p>
<div id ="toolbar"></div>
<div id="mapViewer"></div>
<p>
The code:
</p>
<pre>
// these are the three filter definitions
var filters = {
nameA: {
attributes: "name",
filter: function (obj) {
return obj.name[0] === "A";
}
},
tropicals: {
attributes: "lat",
filter: function (obj) {
return Math.abs(obj.lat) < 23;
}
},
highPopulation: {
attributes: "pop2005",
filter: function (obj) {
return obj.pop2005 > 10000000;
}
}
};
// one of these is chosen when a radio button is selected
function setFilter() {
var filter = filters[$("form input:checked").val()];
viewer.filterFeatures(layerId, filter);
}
</pre>
</body>
</html>