<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet href="../xsltforms/xsltforms.xsl" type="text/xsl"?>
<?xsltforms-options debug="no"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://www.w3.org/1999/xhtml"
      xmlns:xf="http://www.w3.org/2002/xforms"
      xmlns:ev="http://www.w3.org/2001/xml-events"
      xmlns:xsd="http://www.w3.org/2001/XMLSchema"
>
<head>
	<title>Maps with XForms</title>

	<style type="text/css">
	  body { font-family: sans-serif; margin-left: 5em; margin-top: 5em; width: 40em}
          pre { margin-left: 3em; background-color: #ddddFF; border: thin black solid }
	  label { display: inline-block; width: 3em; margin: 0 1em }
          .xforms-repeat-item-selected { background: yellow}
	  div.map { line-height: 0}
	  .small .value img {height: 1cm; width: 1cm}
	  .out {margin-left: 3em; color: red}
	</style> 

	<model xmlns="http://www.w3.org/2002/xforms">
	    <instance>
		<data xmlns="">
		    <zoom>10</zoom>
		    <x>511</x>
		    <y>340</y>
		    <url/>
		</data>
	    </instance>
	    <bind nodeset="url"
		  calculate="concat('http://a.tile.openstreetmap.org/', ../zoom, '/' , ../x, '/', ../y, '.png')"/>
	</model>
</head>
<body>
<h1>Maps with XForms</h1>
<p><a href="osm2.xml">NEXT</a></p>
In XForms you can put the URL of an image in your data:
<pre>     &lt;instance>
        &lt;data xmlns="">
           <strong>&lt;url>http://a.tile.openstreetmap.org/10/511/340.png&lt;/url></strong>
        &lt;/data>
     &lt;/instance>
</pre>
and output it with
<pre>     &lt;output <strong>ref="url"</strong>/>
</pre>
like this:
    <group xmlns="http://www.w3.org/2002/xforms">
      <output class="out" ref="url"/>
    </group>
and display the image with
<pre>	&lt;output ref="url" <strong>mediatype="image/*"</strong> />
</pre>
like this:
    <group xmlns="http://www.w3.org/2002/xforms">
      <h:div class="map">
	<output ref="url" mediatype="image/*" />
      </h:div>
    </group>
</body>
</html>
