InlineXhtml

Description

The InlineXhtml Addin can be used for situations where server side generation of, possibly interactive, layer tiles using xhtml is desired. For example; server side generation of tiles using xhtml, canvas, svg, etc. InlineXhtml can be used for native svg output from compatible WMS servers.

Compatibility

Addin Version	OpenLayers Version
sandbox	trunk > r?

Note: See ticket  #2415 for history

Examples

Suitable for browsers supporting xhtml and svg;

•  example1.htm - An example using an svg layer and an xhtml layer.

Installation and Use

1. Use subversion to check out the  InlineXhtml addin.
2. Place the  Tile/InlineXhtml.js file in your Tile directory (or alternatively, place it elsewhere and add a <script> tag to your page that points to it).
3. Place the  Layer/WMS/InlineXhtml.js file in your Layer/WMS directory (or alternatively, place it elsewhere and add a <script> tag to your page that points to it).
4. Place the  Layer/InlineXhtml.js file in your Layer directory (or alternatively, place it elsewhere and add a <script> tag to your page that points to it).
5. For example, add the following headers;

         <script src="../lib/OpenLayers/Tile/InlineXhtml.js"></script>
         <script src="../lib/OpenLayers/Layer/WMS/InlineXhtml.js"></script>
         <script src="../lib/OpenLayers/Layer/InlineXhtml.js"></script>
   

6. Use the build tools to create a single file build (or link to your OpenLayers.js file to run in development mode).
7. Construct a map and add a WMS InlineXhtml layer with the following syntax:

   var layer1 = new OpenLayers.Layer.WMS.InlineXhtml(
                     name,
                     url,
                     params,
                     options);
   

8. Construct a map and add an InlineXhtml layer with the following syntax:

   var layer1 = new OpenLayers.Layer.InlineXhtml(
                     name,
                     url,
                     params,
                     options);
   

Usage Note

Because InlineXhtml makes use of XMLHttpRequest and imports the xhtml content directly into the document (as tile contents), it would probably necessitate the use of a proxy server (eg, proxy.cgi) to retrieve layers from remote servers.

Tile.InlineXhtml

This tile class issues an Ajax request to retrieve xhtml content to be imported into document tile.

Layer.WMS.InlineXhtml

This subclass to Layer.WMS can be used to add a WMS layer to the map where the output of the WMS server is xhtml (eg, svg). For example;

var layer1 = new OpenLayers.Layer.WMS.InlineXhtml(
                  "Layer 1",
                  "http://<some_wms_service>",
                  {layers: 'abc', format: 'image/svg+xml'} );

Layer.InlineXhtml

This layer class can be used to add a map layer where the tile base url request parameters will be made up of; BBOX, PROJECTION, WIDTH, HEIGHT and the server response is expected to be xhtml.

Parameters

name - A name for the layer
url - Base url for the xhtml service
params - An object with key/value pairs that will be passed to the service
options - Hashtable of extra options to tag onto the layer

Advanced Usage

Layer.WMS.InlineXhtml and Layer.InlineXhtml Options

overflow

This style option is applied to layer tiles. The default overflow setting is 'hidden'. Assuming the server doesn't clip the tile contents to the viewport, setting overflow to 'visible' may provide contiguous effects/rendering for elements that cross tile boundaries. Generally, html overflow is supported in most browsers, whereas svg overflow (outside main svg element) is supported to a lesser extent.

Example;

var layer1 = new OpenLayers.Layer.InlineXhtml(
                  "Layer 1",
                  "http://<some_xhtml_service>",
                  null,
                  {overflow: 'visible'} );

pointerEvents

This style option is applied to the layer. For example, setting to 'none', in supported browsers, will allow mouse events to be passed through to underlying layers meaning that a layer can be made transparent to mouse events.

Example;

var layer1 = new OpenLayers.Layer.InlineXhtml(
                  "Layer 1",
                  "http://<some_xhtml_service>",
                  null,
                  {pointerEvents: 'none'} );

The pointerEvents property can be set for other layer types as follows;

<layer1>.div.style.pointerEvents = 'none';

xhtmlContainerId

This string tag can be used to specify a container id for the inline xhtml. The xhtml content will be retrieved and scanned for an element where the "id" attribute matches. Then, only child nodes of such an element will be added to the tile. This allows an entire xhtml document to be sent from the server to the client but only those elements within the container added to the tile.

Example;

var layer1 = new OpenLayers.Layer.InlineXhtml(
                  "Layer 1",
                  "http://<some_xhtml_service>",
                  null,
                  {xhtmlContainerId: 'abc'} );

Assuming the following is a server response for the tile, then only the svg will be added to the tile;

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
 <body>
  Tile contents ...
  <div id="abc">
   <svg width="256" height="256">
    ...
   </svg>
  </div>
 </body>
</html>

sendIdParams

This boolean parameter can be used to append a set of OpenLayers id parameters as part of the tile url request. This may be useful for server side operations where uniqueness needs to be maintained across the entire document not just across the tile. For example; tile components such as element id's, style class names, inline scripting function names, etc, may need to be unique over the entire document not just over each tile. The parameters that will be added to a tile request are;

Parameter Name	Parameter Value
OPENLAYERS_MAP_ID	<tile>.layer.map.id
OPENLAYERS_MAP_DIV_ID	<tile>.layer.map.div.id
OPENLAYERS_LAYER_ID	<tile>.layer.id
OPENLAYERS_TILE_ID	<tile>.id

Example;

var layer1 = new OpenLayers.Layer.InlineXhtml(
                  "Layer 1",
                  "http://<some_xhtml_service>",
                  null,
                  {sendIdParams: true} );

evaluatedParams

This hashtable is similar to the layer 'params' property, however parameters specified here will be evaluated (client side) before being added to the tile request.

Example;

var layer1 = new OpenLayers.Layer.InlineXhtml(
                  "Layer 1",
                  "http://<some_xhtml_service>",
                  null,
                  {evaluatedParams: {current_date: 'Date();', this_tile_id: 'this.id'}} );

Tile.InlineXhtml Tuning Options

The tile tuning options would not normally need to be altered but they may change in subsequent releases of the InlineXhtml Addin.

useDocumentImportNodeForBrowsers

An array of browser names. Entries in this array will cause the document.importNode method to be used when there is a match on the browser name. Otherwise the retrieved xhtml content will be traversed and added to the tile using the Tile.InlineXhtml._importNode method. This option will be ignored if an xhtmlContainerId property has been specified.

executeInlineScriptForBrowsers

An array of browser names. Entries in this array will cause any inline script in the incoming xhtml content to be manually executed after it is added to the tile when there is a match on the browser name.