openlayers/examples/xml.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   2         "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml">
   4     <head>
   5         <title>XML Parsing Example</title>
   6         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   7         <link rel="stylesheet" href="style.css" type="text/css" />
   8         <style type="text/css">
   9             #output {
  10                 font-family: monospace;
  11                 background-color: #efefef;
  12                 font-size: 0.9em;
  13                 padding: 1em;
  14             }
  15             span.code {
  16                 font-family: monospace;
  17                 background-color: #efefef;
  18                 font-size: 0.9em;
  19                 padding: 0.25em;
  20                 line-height: 1.5em;
  21             }
  22             ul {
  23                 margin: 0;
  24                 padding: 0 0 1em 1.5em;
  25             }
  26             ul li {
  27                 padding-left: 0;
  28             }
  29
  30         </style>
  31         <script src="../lib/Firebug/firebug.js" type="text/javascript"></script>
  32         <script src="../lib/OpenLayers.js" type="text/javascript"></script>
  33         <script type="text/javascript">
  34         //<![CDATA[
  35
  36         var format = new OpenLayers.Format.XML();
  37         var doc = null;
  38
  39         function init() {
  40             var url = "xml/features.xml";
  41             OpenLayers.loadURL(url, null, null, loadSuccess, loadFailure);
  42         }
  43
  44         function loadSuccess(request) {
  45             updateStatus("loaded");
  46             if(!request.responseXML.documentElement) {
  47                 doc = format.read(request.responseText);
  48             } else {
  49                 doc = request.responseXML;
  50             }
  51         }
  52
  53         function loadFailure(request) {
  54             updateStatus("failed to load");
  55         }
  56
  57         function updateStatus(msg) {
  58             document.getElementById("loadStatus").firstChild.nodeValue = msg;
  59         }
  60
  61         function updateOutput(text) {
  62             document.getElementById("output").firstChild.nodeValue = text;
  63         }
  64
  65         function write() {
  66             var text = format.write(doc);
  67             updateOutput(text);
  68         }
  69
  70         function getElementsByTagNameNS(node, uri, name) {
  71             var nodes = format.getElementsByTagNameNS(node, uri, name);
  72             var pieces = [];
  73             for(var i=0; i<nodes.length; ++i) {
  74                 pieces.push(format.write(nodes[i]));
  75             }
  76             updateOutput(pieces.join(' '));
  77         }
  78
  79         function hasAttributeNS(node, uri, name) {
  80             updateOutput(format.hasAttributeNS(node, uri, name))
  81         }
  82
  83         function getAttributeNodeNS(node, uri, name) {
  84             var attributeNode = format.getAttributeNodeNS(node, uri, name);
  85             updateOutput(attributeNode.nodeName + ' = "' +
  86                          attributeNode.nodeValue + '"');
  87         }
  88
  89         function getAttributeNS(node, uri, name) {
  90             var attributeValue = format.getAttributeNS(node, uri, name);
  91             updateOutput('"' + attributeValue + '"')
  92         }
  93
  94         function createElementNS(uri, name) {
  95             var node = format.createElementNS(uri, name);
  96             doc.documentElement.appendChild(node);
  97             write();
  98         }
  99
 100         function createTextNode(text) {
 101             var node = format.createTextNode(text);
 102             doc.documentElement.appendChild(node);
 103             write();
 104         }
 105
 106         window.onload = init;
 107
 108         //]]>
 109         </script>
 110     </head>
 111     <body>
 112             <h1 id="title">XML Format Example</h1>
 113
 114             <div id="tags">
 115             </div>
 116
 117             <p id="shortdesc">
 118                 Shows the use of the OpenLayers XML format class
 119             </p>
 120
 121             <div id="docs">
 122                 <p>OpenLayers has a very simple XML format class (OpenLayers.Format.XML)
 123                         that can be used to read/write XML docs.  The methods available on the
 124                         XML format (or parser if you like) allow for reading and writing of the
 125                         various XML flavors used by the library - in particular the vector data
 126                         formats.  It is by no means intended to be a full-fledged XML toolset.
 127                         Additional methods will be added only as needed elsewhere in the
 128                         library.</p>
 129                         <p>This page loads an XML document and demonstrates a few of the methods
 130                         available in the parser.</p>
 131                         <p>Status: <b>XML document <span id="loadStatus">loading..</span>.</b></p>
 132                         <p>After the XML document loads, see the result of a few of the methods
 133                         below.  Assume that you start with the following code:
 134                         <br />
 135                         <span class="code">
 136                             var format = new OpenLayers.Format.XML();
 137                         </span>
 138                         </p>
 139                         Sample methods
 140                         <ul>
 141                             <li><a href="javascript:void write();">format.write()</a> - write the XML doc as text</li>
 142                             <li><a href="javascript:void getElementsByTagNameNS(doc, 'http://www.opengis.net/gml', 'MultiPolygon');">format.getElementsByTagNameNS()</a> - get all gml:MultiPolygon</li>
 143                             <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>
 144                             <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>
 145                             <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>
 146                             <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>
 147                             <li><a href="javascript:void createTextNode('test text ');">format.createTextNode()</a> - create a text node (and append it to the doc)</li>
 148                         </ul>
 149                         Output:
 150                 <div id="output">&nbsp;</div>
 151             </div>
 152     </body>
 153 </html>
 154
 155