mad/test-poi.html

## test-poi.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="js-libs/jquery-1.7.js"></script>
<script type="text/javascript" src="js-libs/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js-libs/underscore.js"></script>
</head>
<body>

<script type="text/javascript">

$(function() {
	var $query = $.template('<query type="node">' +
			 	'<bbox-query n="${n}" s="${s}" w="${w}" e="${e}"></bbox-query>' +
			 	// '<has-kv k="amenity" v="bar"/>' +
			 	'</query>' +
			 	'<print />');
	var bad_xml = $.tmpl($query, { n:59.929, s:59.925, w:30.3125, e:30.321 });
	$("#query").val(bad_xml[0].outerHTML + bad_xml[1].outerHTML);

	$('#send').live('click', function() {

//		var xml = $.tmpl($query, { n:59.929, s:59.925, w:30.3125, e:30.321 });
// 		var data = xml[0].outerHTML + xml[1].outerHTML;
		var data = $("#query").val();

		$.ajax({
			 url: "http://192.168.1.49/api/interpreter",
			// url: "http://nominatim.openstreetmap.org/reverse",
			//url: "http://www.overpass-api.de/api/interpreter",
			type: 'POST',
			dataType: 'text',
			contentType: "application/x-www-form-urlencoded",
			data: { data: data },
			success: function(data) {
				window.data = data;
				$($.parseXML(data)).find('node').each(function() {
					var $node = $(this);

					var lat = $node.attr('lat');
					var lon = $node.attr('lon');

					console.log('lat', lat, 'lon', lon);

					$node.find('tag').each(function() {
						var $tag = $(this);

						console.log($tag.attr('k'), $tag.attr('v'))
					});
				});
				$('#result').val(data);
			},
			error: function(error) {
				console.log("error", error);
			}
		})
	});
})
</script>

<ol id="history" style="float:left;"></ol>

<div class="content" style="margin:auto;width: 60%">
	<textarea id="query" rows="15" cols="50" style="width: 100%; height: 45%;"></textarea>

	<br />

	<button id="send">Send data</button>

	<hr />

	<textarea id="result" rows="15" cols="50" style="width: 100%; height: 45%;"></textarea>
</div>

</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>

	<script type="text/javascript" src="js-libs/jquery-1.7.js"></script>
	<script type="text/javascript" src="js-libs/jquery.tmpl.min.js"></script>
	<script type="text/javascript" src="js-libs/underscore.js"></script>
	</head>
	<body>

	<script type="text/javascript">

	$(function() {
	var $query = $.template('<query type="node">' +
	'<bbox-query n="${n}" s="${s}" w="${w}" e="${e}"></bbox-query>' +
	// '<has-kv k="amenity" v="bar"/>' +
	'</query>' +
	'<print />');
	var bad_xml = $.tmpl($query, { n:59.929, s:59.925, w:30.3125, e:30.321 });
	$("#query").val(bad_xml[0].outerHTML + bad_xml[1].outerHTML);

	$('#send').live('click', function() {

	// var xml = $.tmpl($query, { n:59.929, s:59.925, w:30.3125, e:30.321 });
	// var data = xml[0].outerHTML + xml[1].outerHTML;
	var data = $("#query").val();

	$.ajax({
	url: "http://192.168.1.49/api/interpreter",
	// url: "http://nominatim.openstreetmap.org/reverse",
	//url: "http://www.overpass-api.de/api/interpreter",
	type: 'POST',
	dataType: 'text',
	contentType: "application/x-www-form-urlencoded",
	data: { data: data },
	success: function(data) {
	window.data = data;
	$($.parseXML(data)).find('node').each(function() {
	var $node = $(this);

	var lat = $node.attr('lat');
	var lon = $node.attr('lon');

	console.log('lat', lat, 'lon', lon);

	$node.find('tag').each(function() {
	var $tag = $(this);

	console.log($tag.attr('k'), $tag.attr('v'))
	});
	});
	$('#result').val(data);
	},
	error: function(error) {
	console.log("error", error);
	}
	})
	});
	})
	</script>

	<ol id="history" style="float:left;"></ol>

	<div class="content" style="margin:auto;width: 60%">
	<textarea id="query" rows="15" cols="50" style="width: 100%; height: 45%;"></textarea>

	<br />

	<button id="send">Send data</button>

	<hr />

	<textarea id="result" rows="15" cols="50" style="width: 100%; height: 45%;"></textarea>
	</div>

	</body>
	</html>