-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathgetcoordinates.html
143 lines (109 loc) · 3.69 KB
/
getcoordinates.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
<title>Get coordinates tool</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, tool, $ = giscloud.exposeJQuery();
giscloud.ready(function () {
// create a viewer
viewer = new giscloud.Viewer("mapViewer", mapId, { slider: true });
// create the tool
tool = new giscloud.ui.Toolbar.Tool("pointTool", {
instant: true,
styles: {
caption: "Get coordinates",
showCaption: true,
cssClass: "mytool",
active: "mytool-active",
hover: "mytool-hover"
},
actions: {
activation: function (viewer) {
// clear previously added graphic features
viewer.graphic.clear();
// start drawing
viewer.graphic.draw("point",
function (point) {
// when done, show coordinates
showCoordinates(point.geometry());
}
);
}
}
}
);
// create the toolbar and add the tool
new giscloud.ui.Toolbar({
viewer: viewer,
container: "toolbar"
}).add(tool);
});
function showCoordinates(geom) {
$("#coords").html(geom.x + ", " + geom.y);
}
</script>
<style type="text/css">
#coords {
border: thin solid #ccc;
height: 1em;
padding: 0.3em;
margin-top: 0.5em;
}
.mytool {
margin: 0.1em 0.2em;
padding: 0em 0.8em;
background-color: #ccc;
color: #444;
cursor: pointer;
}
.mytool-active {
background-color: #999;
color: #eee;
}
.mytool-hover {
text-decoration: underline;
}
</style>
<body>
<h1>Get coordinates tool</h1>
<p>
In this example, we create an instant tool which will draw a point feature on a desired location
and display the location's coordinates.
</p>
<div id ="toolbar"></div>
<div id="mapViewer"></div>
<div id="coords"></div>
<p>
The code:
</p>
<pre>// create the tool
tool = new giscloud.ui.Toolbar.Tool("pointTool", {
// instant tools don' stay activated
instant: true,
styles: {
caption: "Get coordinates",
showCaption: true,
cssClass: "mytool",
active: "mytool-active",
hover: "mytool-hover"
},
actions: {
// since this is a instant tool, only the activation action is needed
activation: function (viewer) {
// clear previously added graphic features
viewer.graphic.clear();
// start drawing
viewer.graphic.draw("point",
function (point) {
// when done, show coordinates
showCoordinates(point.geometry());
}
);
}
}
}
);</pre>
</body>
</html>