-
Notifications
You must be signed in to change notification settings - Fork 0
/
kml.html
91 lines (86 loc) · 2.7 KB
/
kml.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
<html>
<head>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script>
var service = "featureserver.cgi/scribble/";
$ = function(string) { return document.getElementById(string); };
function fetch() {
$("data").value = "Loading remote data, please wait.";
var s = document.createElement("script");
var string = service + $('id').value + ".kml";
new OpenLayers.Ajax.Request(string,
{ method: 'get',
requestHeaders: ['Accept', 'application/vnd.google-earth.kml+xml'],
onComplete: kml_complete
}
);
}
function load(data) {
$('data').value = data;
}
function kml_complete (xmlreq) {
$("data").value = xmlreq.responseText;
}
function update() {
var string = service + $('id').value + ".kml";
new OpenLayers.Ajax.Request(string,
{ method: 'post',
postBody: $('data').value,
onComplete: kml_complete
}
);
}
function del() {
var string = service + $('id').value + ".kml";
new OpenLayers.Ajax.Request(string,
{ method: 'delete',
onComplete: clear
}
);
}
function clear() {
$("id").value = "";
$("data").value = "";
}
function success() {
$("data").value = "";
}
function init() {
var args = OpenLayers.Util.getArgs();
if (args['id']) {
$("id").value = args['id'];
fetch();
} else {
$("data").value = "Loading remote data, please wait.";
var s = document.createElement("script");
var string = service + "all.json?maxfeatures=20&callback=load_list";
s.src = string;
document.body.appendChild(s)
}
}
function set_id(id) {
$('id').value = id;
fetch();
}
function load_list(data) {
var html = "";
for(var i=0; i < data.features.length; i++) {
feat = data.features[i];
html += "<span style='padding: 5px'><a href='#' onclick='set_id("+feat.id+");return false'>"+(feat.properties.title ? feat.properties.title : feat.id)+"</a></span>";
}
$("list").innerHTML = html;
$("data").value = "";
}
</script>
</head>
<body onload="init()">
ID: <input type="text" id="id" /> <input type="submit" value="Fetch" onclick="fetch()" />
<br />
<div id="list"></div>
<textarea id="data" style="width:100%; height:80%;"></textarea>
<br />
<input type="submit" value="create new" onclick="$('id').value=''; update()"/>
<input type="submit" value="update" onclick="update()"/>
<input type="submit" value="delete" onclick="del()"/>
</body>
</html>