<?xml version="1.0" encoding="utf-8"?>
<?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>Open Street Map</title>

	<style type="text/css">
	  body { font-family: sans-serif; margin-left: 5em; margin-top: 5em; width: 50em;}
          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}
	</style> 

	<model xmlns="http://www.w3.org/2002/xforms">
	    <instance>
		<data xmlns="">
		    <zoom>10</zoom>
		    <x>511</x>
		    <y>340</y>
		    <url/>
		    <posy>22307840</posy><posx>33530624</posx>
		    <tilesize>256</tilesize>
		    <x/><y/>
		    <scale/>
		    <maxpos/>
		    <offx/><offy/>
		</data>
	    </instance>
	    <bind nodeset="url"
		  calculate="concat('http://a.tile.openstreetmap.org/', ../zoom, '/' , ../x, '/', ../y, '.png')"/>
	    <bind nodeset="scale" calculate="power(2, 26 - ../zoom)"/>
	    <bind nodeset="maxpos" calculate="power(2, 26)-1"/>
<!--	    <bind nodeset="x" calculate="floor(../posx div ../scale)"/>
	    <bind nodeset="y" calculate="floor(../posy div ../scale)"/>
 -->
	    <bind nodeset="offx" calculate="floor(((../posx - ../x * ../scale) div ../scale)*../tilesize)" />
	    <bind nodeset="offy" calculate="floor(((../posy - ../y * ../scale) div ../scale)*../tilesize)" />

	</model>
</head>
<body>
<p><a href="osm4.xml">NEXT</a> | <a href="osm2.xml">PREV</a></p>
<p>Add some nudge buttons:</p>
<pre>	&lt;trigger>
		&lt;label>→&lt;/label>
		&lt;setvalue ev:event="DOMActivate" ref="x" value=". + 1"/>
	&lt;/trigger>
</pre>
<p>Note that although the x and y nudge buttons work as expected, something unexpected happens when you change the zoom.</p>
    <group xmlns="http://www.w3.org/2002/xforms">
        <group>
	    <trigger>
		<label>&#x2212;</label> <!-- minus -->
		<setvalue ev:event="DOMActivate" ref="zoom" value="if(. = 0, 0, . - 1)"/>
      	    </trigger>
      	    <input ref="zoom"><label>zoom</label></input>
	    <trigger>
		<label>+</label>
		<setvalue ev:event="DOMActivate" ref="zoom" value="if(. = 18, ., . + 1)"/>
	    </trigger>
	</group>
	<group>
   	    <trigger>
		<label>←</label>
		<setvalue ev:event="DOMActivate" ref="x" value=". - 1"/>
	    </trigger>
      	    <input ref="x"><label>x</label></input>
	    <trigger>
		<label>→</label>
		<setvalue ev:event="DOMActivate" ref="x" value=". + 1"/>
	    </trigger>
	</group>
	<group>
	    <trigger>
		<label>↓</label>
		<setvalue ev:event="DOMActivate" ref="y" value=". + 1"/>
	    </trigger>
      	    <input ref="y"><label>y</label></input>
	    <trigger>
		<label>↑</label>
		<setvalue ev:event="DOMActivate" ref="y" value=". - 1"/>
	    </trigger>
	</group>

        <output ref="url"/><h:br/>
    
      <h:div class="map">
	<output ref="url" mediatype="image/*" />
      </h:div>
    </group>
</body>
</html>
