/
index.html
160 lines (152 loc) · 7.21 KB
/
index.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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FeatureServer</title>
<style type="text/css">
#attributes {
float:right;
top: 70px;
width: 35%;
}
#attr_list input {
width:45%;
}
#map {
width: 60%;
height: 80%;
border: 1px solid gray;
}
</style>
<script src="http://openlayers.org/api/2.6/OpenLayers.js"></script>
<script type="text/javascript">
<!--
var map, drawControls, geojson, lastFeature, wfs, vectors, featureid;
var fs_path = '../';
var params = OpenLayers.Util.getParameters();
if (params.path) {
fs_path = params.path;
}
// (You'll need to edit the HTML bits at the bottom if you change this.)
function init(){
map = new OpenLayers.Map('map', {maxResolution: 360/512, controls: []});
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms-c/Basic.py", {'layers':'basic'});
var wms2 = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms-c/Basic.py", {'layers':'satellite'});
wfs = new OpenLayers.Layer.WFS("WFS", fs_path+"scribble?format=WFS", {maxfeatures: "100"}, {extractAttributes: true, displayInLayerSwitcher: false});
vectors = new OpenLayers.Layer.Vector("Vector Layer", {displayInLayerSwitcher: false});
map.addLayers([wfs, wms, wms2, vectors]);
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.Permalink());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
var sf = new OpenLayers.Control.SelectFeature(wfs, {callbacks: {'over':feature_info}})
map.addControl(sf);
sf.activate();
geojson = new OpenLayers.Format.GeoJSON();
map.zoomToMaxExtent();
vectors.onFeatureInsert = function(feature) {
lastFeature = feature;
updateFeature();
var json = geojson.write(feature.layer.features);
json = json.replace(/,/g, ', ');
document.getElementById('info').innerHTML = json;
}
wfs.preFeatureInsert = function(feature) {
for(var i in feature.style) {
if (feature.attributes['fs:'+i]) {
feature.style[i] = feature.attributes['fs:'+i];
}
}
}
featureid = 1;
}
function updateFeature() {
if (!lastFeature) {
alert("Sorry, no feature to modify.");
return;
}
if ($("title").value) {
lastFeature.attributes['title'] = $("title").value;
featureid++;
$("title").value = "Feature " + featureid;
}
for(i=1; i<=5; i++) {
if ($("key"+i).value && $("value"+i).value) {
lastFeature.attributes[$("key"+i).value] = $("value"+i).value;
}
}
var json = geojson.write(lastFeature.layer.features);
// not a good idea in general, just for this demo
json = json.replace(/,/g, ', ');
document.getElementById('info').innerHTML = json;
}
function success() {
$('info').innerHTML = "Features uploaded to server.";
vectors.destroyFeatures();
wfs.refresh();
}
function upload() {
url = fs_path + "scribble";
var json = geojson.write(vectors.features);
new OpenLayers.Ajax.Request(url,
{ method: 'post',
postBody: json,
requestHeaders: ['Accept', 'application/json'],
onSuccess: success,
onFailure: function(xhr) {
$('info').innerHTML = "Failed upload (status code "+xhr.status+"). Check your URL."
}
}
);
}
function feature_info(feature) {
var html = "<ul>";
if (feature.fid) {
html += "<li><a href='"+fs_path+"scribble/" + feature.fid +
".kml'>KML</a>, <a href='"+fs_path+"scribble/" + feature.fid +
".html'>HTML</a> <a href='"+fs_path+"scribble/" + feature.fid +
"'>JSON</a>, <a href='"+fs_path+"scribble/" + feature.fid +
".atom'>GeoRSS</a>, <a href='"+fs_path+"scribble/" + feature.fid +
".gml'>GML</a>, <a href='json.html?id=" + feature.fid +
"'>Edit JSON</a> </li>";
}
for(var i in feature.attributes) {
html += "<li><b>" + i + "</b>: "+ feature.attributes[i] + "</li>";
}
html += "</ul>";
$('feature_info').innerHTML = html;
}
OpenLayers.Tile.WFS.prototype.loadFeaturesForRegion = function(success, failure) { OpenLayers.loadURL(this.url+"&random="+Math.random(), null, this, success); }
OpenLayers.Feature.Vector.style['default'].strokeWidth=3;
// -->
</script>
</head>
<body onload="init()">
<h1>FeatureServer Demo</h1>
<p>Other Demos: <a href="json.html">Edit JSON</a>, <a href="kml.html">Edit KML</a></p>
<div id="attributes">
<a href="featureserver.cgi/scribble?format=KML">KML</a>
| <a href="featureserver.cgi/scribble?format=GeoRSS">GeoRSS</a>
| <a href="featureserver.cgi/scribble?format=GML">GML</a>
<form action="javascript:updateFeature()">
Title: <input type="text" id="title" value="Feature 1" /> <br />
Key: Value<br />
<div id="attr_list">
<input type="text" id="key1" value="strokeColor" />: <input type="text" id="value1" value="red"/> <br />
<input type="text" id="key2" value="author" />: <input type="text" id="value2" value="Your Name Here" /> <br />
<input type="text" id="key3" />: <input type="text" id="value3" /> <br />
<input type="text" id="key4" />: <input type="text" id="value4" /> <br />
<input type="text" id="key5" />: <input type="text" id="value5" /> <br />
<p>Note that you can set any style attribute that OpenLayers handles, and when the feature is reloaded, the style attribute will be applied to the feature -- so setting the strokeColor, strokeWidth, and fillColor will allow you to style the feature.</p>
</div>
<input type="submit" value="Save" />
</form>
<input type="submit" value="Upload to Server" onclick="upload()"/>
<div id="feature_info"></div>
<div id="info" style="font-size:.8em; margin-top:10px;"></div>
</div>
<div id="map"></div>
</body>
</html>