GIS-Cloud-Examples/multiselectfeature.html at master · giscloud/GIS-Cloud-Examples · GitHub

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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html>

    <title>feature info 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">
        var viewer,
            $ = giscloud.exposeJQuery(),
            selection = [];

        function inSelection (feature) {
            var i, l;

            for (var i = 0, l = selection.length; i < l; i++) {
                if (selection[i].featureId === feature.featureId &&
                    selection[i].layerId === feature.layerId) {
                    // return the index of the element
                    return i;
                }
            }

            // item not found in selection, return -1
            return -1;
        }

        function removeSelection(feature) {
            var i = inSelection(feature);

            if (i > -1) {
                // remove from array
                selection.splice(i, 1);

                // update the map selection
                viewer.selection.selected(selection);

                // update the list
                showFeaturesInList();
            }
        }

        function showFeaturesInList() {
            // create a list with a list item for each
            // of the selected features
            var list = $("<ul/>").append(
                // create an item for each selected feature
                $.map(selection, function (feature) {
                    return $("<li/>", { text: feature.featureId })
                        // add a delete link with every feature
                        .append(
                            $("<a/>", { text: " (X)" })
                            .click(function () {
                                removeSelection(feature);
                            })
                        );
                })
            )
            // empty the old features list and add the new one
            $("#selectedFeatures")
            .empty()
            .append(list);
        }

        function onFeatureClick(feature) {
            // see if the clicked feature is already a part of the selection
            var i = inSelection(feature);

            // if it is, i is the index, -1 otherwise
            if (i === -1) {
                // add to selection
                selection.push({
                    featureId: feature.featureId,
                    layerId: feature.layerId
                });
            } else {
                // remove from selection
                selection.splice(i, 1);
            }

            // apply selection
            viewer.selection.selected(selection);

            // show a list of selected features
            showFeaturesInList();
        }

        // wait for the global ready event...
        giscloud.ready(function () {

            // create a viewer
            viewer = new giscloud.Viewer("mapViewer", mapId);

            // once the viewer has finished loading
            viewer.loading.done(function () {
                // enable selection
                viewer.select(true);

                // bind a handler to the feature click event
                viewer.featureClick(onFeatureClick);
            });

        });

    </script>

    <style type="text/css">
        #selectedFeatures ul {
            list-style-type: none;
            max-width: 400px;
        }

        #selectedFeatures ul li {
            float: left;
            display: block;
            margin: 0.1em;
            padding: 0.5em;
            background-color: #ffe;
            border-radius: 4px;
            border: solid thin #ccc;
        }

        #selectedFeatures ul li a {
            color: #33f;
            cursor: pointer;
        }

    </style>

    <body>
        <h1>Multiple feature selection</h1>
        <p>
            If you want to enable multiple selection without using the keyboard and the ctrl button, you can do it like this.
        </p>
        <p>
            After the viewer has finished loading, bind an event handler to the <i>featureClick</i> event which will add or remove
            clicked features to an array. Pass that array as a parameter to the <i>viewer.selection.selected()</i> method to set
            the selected features.
        </p>
        <div id="mapViewer"></div>
        <p>Selected features:
            <br/>
            <div id="selectedFeatures"></div>
            <br/>
        </p>
        <p style="clear: both">
            <br/>
            The code:
        </p>
<pre>
var selection = [];

function onFeatureClick(feature) {
    // see if the clicked feature is already a part of the selection
    var i = inSelection(feature);

    // if it is, i is the index, -1 otherwise
    if (i === -1) {
        // add to selection
        selection.push({
            featureId: feature.featureId,
            layerId: feature.layerId
        });
    } else {
        // remove from selection
        selection.splice(i, 1);
    }

    // apply selection
    viewer.selection.selected(selection);

    // show a list of selected features
    showFeaturesInList();
}
</pre>
    </body>
</html>