summaryrefslogtreecommitdiff
path: root/misc/openlayers/examples/xml.html
blob: 696229bde7db1ddd500d28006da5ef7ea8f65eb5 (plain)
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
<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
        <title>XML Parsing Example</title>
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">
        <style type="text/css">
            #output {
                font-family: monospace;
                background-color: #efefef;
                font-size: 0.9em;
                padding: 1em;
            }
            span.code {
                font-family: monospace;
                background-color: #efefef;
                font-size: 0.9em;
                padding: 0.25em;
                line-height: 1.5em;
            }
            ul {
                margin: 0;
                padding: 0 0 1em 1.5em;
            }
            ul li {
                padding-left: 0;
            }

        </style>
        <script src="../lib/Firebug/firebug.js" type="text/javascript"></script>
        <script src="../lib/OpenLayers.js" type="text/javascript"></script>
        <script type="text/javascript">
        //<![CDATA[

        var format = new OpenLayers.Format.XML();
        var doc = null;

        function init() {
            OpenLayers.Request.GET({
                url: "xml/features.xml",
                success: loadSuccess,
                failure: loadFailure
            });
        }

        function loadSuccess(request) {
            updateStatus("loaded");
            if(!request.responseXML.documentElement) {
                doc = format.read(request.responseText);
            } else {
                doc = request.responseXML;
            }
        }

        function loadFailure(request) {
            updateStatus("failed to load");
        }

        function updateStatus(msg) {
            document.getElementById("loadStatus").firstChild.nodeValue = msg;
        }

        function updateOutput(text) {
            document.getElementById("output").firstChild.nodeValue = text;
        }

        function write() {
            var text = format.write(doc);
            updateOutput(text);
        }

        function getElementsByTagNameNS(node, uri, name) {
            var nodes = format.getElementsByTagNameNS(node, uri, name);
            var pieces = [];
            for(var i=0; i<nodes.length; ++i) {
                pieces.push(format.write(nodes[i]));
            }
            updateOutput(pieces.join(' '));
        }

        function hasAttributeNS(node, uri, name) {
            updateOutput(format.hasAttributeNS(node, uri, name))
        }

        function getAttributeNodeNS(node, uri, name) {
            var attributeNode = format.getAttributeNodeNS(node, uri, name);
            updateOutput(attributeNode.nodeName + ' = "' +
                         attributeNode.nodeValue + '"');
        }

        function getAttributeNS(node, uri, name) {
            var attributeValue = format.getAttributeNS(node, uri, name);
            updateOutput('"' + attributeValue + '"')
        }

        function createElementNS(uri, name) {
            var node = format.createElementNS(uri, name);
            doc.documentElement.appendChild(node);
            write();
        }

        function createTextNode(text) {
            var node = format.createTextNode(text);
            doc.documentElement.appendChild(node);
            write();
        }

        window.onload = init;

        //]]>
        </script>
    </head>
    <body>
            <h1 id="title">XML Format Example</h1>

            <div id="tags">
                xml
            </div>

            <p id="shortdesc">
                Shows the use of the OpenLayers XML format class
            </p>

            <div id="docs">
                <p>OpenLayers has a very simple XML format class (OpenLayers.Format.XML)
                        that can be used to read/write XML docs.  The methods available on the
                        XML format (or parser if you like) allow for reading and writing of the
                        various XML flavors used by the library - in particular the vector data
                        formats.  It is by no means intended to be a full-fledged XML toolset.
                        Additional methods will be added only as needed elsewhere in the
                        library.</p>
                        <p>This page loads an XML document and demonstrates a few of the methods
                        available in the parser.</p>
                        <p>Status: <b>XML document <span id="loadStatus">loading..</span>.</b></p>
                        <p>After the XML document loads, see the result of a few of the methods
                        below.  Assume that you start with the following code:
                        <br>
                        <span class="code">
                            var format = new OpenLayers.Format.XML();
                        </span>
                        </p>
                        Sample methods
                        <ul>
                            <li><a href="javascript:void write();">format.write()</a> - write the XML doc as text</li>
                            <li><a href="javascript:void getElementsByTagNameNS(doc, 'http://www.opengis.net/gml', 'MultiPolygon');">format.getElementsByTagNameNS()</a> - get all gml:MultiPolygon</li>
                            <li><a href="javascript:void hasAttributeNS(doc.documentElement, 'http://www.w3.org/2001/XMLSchema-instance', 'schemaLocation');">format.hasAttributeNS()</a> - test to see schemaLocation attribute exists in the http://www.w3.org/2001/XMLSchema-instance namespace</li>
                            <li><a href="javascript:void getAttributeNodeNS(doc.documentElement, 'http://www.w3.org/2001/XMLSchema-instance', 'schemaLocation');">format.getAttributeNodeNS()</a> - get schemaLocation attribute in the http://www.w3.org/2001/XMLSchema-instance namespace</li>
                            <li><a href="javascript:void getAttributeNS(doc.documentElement, 'http://www.w3.org/2001/XMLSchema-instance', 'schemaLocation');">format.getAttributeNS()</a> - get schemaLocation attribute value in the http://www.w3.org/2001/XMLSchema-instance namespace</li>
                            <li><a href="javascript:void createElementNS('http://bar.com/foo', 'foo:TestNode');">format.createElementNS()</a> - create a foo:TestNode element (and append it to the doc)</li>
                            <li><a href="javascript:void createTextNode('test text ');">format.createTextNode()</a> - create a text node (and append it to the doc)</li>
                        </ul>
                        Output:
                <div id="output">&nbsp;</div>
            </div>
    </body>
</html>