GIS-Cloud-Examples/selectfeature.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
<!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, toolbar, $ = giscloud.exposeJQuery();
        giscloud.ready(function () {

            // create a viewer
            viewer = new giscloud.Viewer("mapViewer", mapId, { slider: true });

			// create a toolbar
			toolbar = new giscloud.ui.Toolbar({
				viewer: viewer,
				container: "toolbar",
				defaultTools: ["pan", "select"]
			});

			// bind a handler for the selectionChange event
			viewer.selectionChange(function (evt) {
				if (evt.action === "add") {
					// get feature data
					giscloud.features.byId(evt.feature.layerId, evt.feature.featureId)
					   .done(displayFeatureData);
				}
			});

			viewer.ready(function () {
			    toolbar.tools.select.activate();
			});

        });

		function displayFeatureData(feature) {
			var d, v, p, t;
			d = feature.data;
			if (d) {
			    t = $("#data tbody");
				t.html("");
				for (p in d) {
					v = d[p];
					if (v.length > 30) {
						v = v.substr(0, 30) + "...";
					}
				    $("<tr/>").append(
					   "<td>" + p + "</td>",
					   "<td>" + v + "</td>"
					).appendTo(t);
				}
			}
		}


    </script>

    <style type="text/css">

        #data {
            font-size: inherit;
			border: solid thin #ccc;
			background-color: #fafafa;
			margin-top: 1em;
		}

		#data td {
			padding: 0.3em;
            border: solid thin #ccc;
		}


    </style>

    <body>
        <h1>Feature info on selection</h1>
        <p>
            The most common thing somebody expects when clicking on a feature on a map is to find out stuff about it.
			Here's a short example of how you can get that with the GIS Cloud JS API.
        </p>
        <p>
            We'll use the default <i>select</i> tool combined with the viewer's <i>selectionChange</i> event to get
			the feature id. Then, through the <i>giscloud.features</i> object, we'll get the data and display it in
			a table.
        </p>

        <div id ="toolbar"></div>
        <div id="mapViewer"></div>
        <table id="data">
        	<thead>
        		<tr>
        			<th>Property</th>
					<th>Value</th>
        		</tr>
        	</thead>
			<tbody>
				<tr>
					<td></td><td></td>
				</tr>
			</tbody>
        </table>
        <p>
            The code:
        </p>
<pre>
// bind a handler for the selectionChange event
viewer.selectionChange(function (evt) {
    if (evt.action === "add") {
        // get feature data
        giscloud.features.byId(evt.feature.layerId, evt.feature.featureId)
           .done(displayFeatureData);
    }
});
</pre>

    </body>
</html>