aaronlidman/index.html

## index.html
<html>
<head>
    <title>OSM & GeoJSON by Aaron Lidman</title>
    <script type="text/javascript" src="http://rawgithub.com/aaronlidman/osm-and-geojson/gh-pages/osm_geojson.js"></script>
    <script type="text/javascript" src="http://rawgithub.com/tyrasd/osmtogeojson/master/osmtogeojson.js"></script>
    <script type="text/javascript">
        function toGeo() {
            var xml = document.getElementById('osmxml').value;
            var start = new Date().getTime(),
                geojson = osm_geojson.osm2geojson(xml),
                end = new Date().getTime();

            document.getElementById('results1').textContent = 'osm-and-geojson: ' + (end-start).toString() + ' ms';

            document.getElementById('geojson').value = JSON.stringify(geojson);

            var start2 = new Date().getTime(),
                geojson = osmtogeojson.toGeojson(xml),
                end2 = new Date().getTime();

            document.getElementById('results2').textContent = 'osmtogeojson: ' + (end2-start2).toString() + ' ms';
        }

        function toXML() {
            var json = document.getElementById('geojson').value,
                xml = osm_geojson.geojson2osm(json);
            document.getElementById('osmxml').value = xml;
            console.log(xml);
        }
    </script>

    <style type="text/css">
        body {
            font-size: 18px;
            background: white;
            font-family: "Helvetica Neue", Helvetica, sans-serif;
            width: 960px;
            margin: 50px auto;
            color: #222;
            line-height: 1.7em
        }

        a { color: black; }

        li {
            line-height: 1.7em;
            text-align: left;
            list-style: none;
        }

        textarea, input { outline: none; }

        #left {
            width: 49%;
            float: left;
            text-align: center;
        }

        #osmxml, #geojson {
            width: 100%;
            background: white;
            border: 1px solid #ccc;
            height: 320px;
            overflow: auto;
            margin-bottom: 20px;
        }

        #right {
            width: 49%;
            float: right;
            text-align: center;
        }

        .button {
            text-shadow: 0px 0px 1px black;
            border-radius: 3px;
            color: white;
            background: #569834;
            padding: 10px 15px;
            font-weight: bold;
        }

        .button:hover {
            background: #3A6623;
        }

        .button:active {
            box-shadow: inset 0 0 10px rgba(0,0,0,0.75);
        }

        textarea {
            font-size: 13px;
            line-height: 1.5em;
            padding: 7px 10px;
        }

        #top {
            font-size: 22px;
            text-align: center;
            margin-bottom: 25px;
        }

        #name {
            font-size: 44px;
            letter-spacing: -1px;
            font-weight: bold;
            margin-right: 5px;
        }

        #example {
            clear: both;
            width: 100%;
            height: 500px;
        }

        #about {
            width: 720px;
            margin: 0 auto;
        }

        #download {
            margin: 50px auto 0 auto;
            text-align: center;
        }

        #dl {
            background: #569834;
            padding: 7px 10px;
            border-radius: 3px;
            color: white;
            font-weight: bold;
            font-size: 32px;
        }
        .disc { list-style: disc; }
    </style>
</head>
<body>
    <div id="top">
        <span id="name">OSM & GeoJSON</span> converts between OSM XML and GeoJSON.
    </div>
    <div id="example">
        <div id="left">
            <h3>OSM XML</h3>
            <textarea id="osmxml" contenteditable="true"></textarea>
            <span class="button" onclick="toGeo()">convert to GeoJSON &rarr;</span>
        </div>
        <div id="right">
            <h3>GeoJSON</h3>
            <textarea id="geojson" contenteditable="true"></textarea>
            <span class="button" onclick="toXML()">&larr; convert to OSM XML</span>
        </div>
    </div>
    <div id="results1"></div>
    <div id="results2"></div>
</body>
</html>
	<html>
	<head>
	<title>OSM & GeoJSON by Aaron Lidman</title>
	<script type="text/javascript" src="http://rawgithub.com/aaronlidman/osm-and-geojson/gh-pages/osm_geojson.js"></script>
	<script type="text/javascript" src="http://rawgithub.com/tyrasd/osmtogeojson/master/osmtogeojson.js"></script>
	<script type="text/javascript">
	function toGeo() {
	var xml = document.getElementById('osmxml').value;
	var start = new Date().getTime(),
	geojson = osm_geojson.osm2geojson(xml),
	end = new Date().getTime();

	document.getElementById('results1').textContent = 'osm-and-geojson: ' + (end-start).toString() + ' ms';

	document.getElementById('geojson').value = JSON.stringify(geojson);

	var start2 = new Date().getTime(),
	geojson = osmtogeojson.toGeojson(xml),
	end2 = new Date().getTime();

	document.getElementById('results2').textContent = 'osmtogeojson: ' + (end2-start2).toString() + ' ms';
	}

	function toXML() {
	var json = document.getElementById('geojson').value,
	xml = osm_geojson.geojson2osm(json);
	document.getElementById('osmxml').value = xml;
	console.log(xml);
	}
	</script>

	<style type="text/css">
	body {
	font-size: 18px;
	background: white;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	width: 960px;
	margin: 50px auto;
	color: #222;
	line-height: 1.7em
	}

	a { color: black; }

	li {
	line-height: 1.7em;
	text-align: left;
	list-style: none;
	}

	textarea, input { outline: none; }

	#left {
	width: 49%;
	float: left;
	text-align: center;
	}

	#osmxml, #geojson {
	width: 100%;
	background: white;
	border: 1px solid #ccc;
	height: 320px;
	overflow: auto;
	margin-bottom: 20px;
	}

	#right {
	width: 49%;
	float: right;
	text-align: center;
	}

	.button {
	text-shadow: 0px 0px 1px black;
	border-radius: 3px;
	color: white;
	background: #569834;
	padding: 10px 15px;
	font-weight: bold;
	}

	.button:hover {
	background: #3A6623;
	}

	.button:active {
	box-shadow: inset 0 0 10px rgba(0,0,0,0.75);
	}

	textarea {
	font-size: 13px;
	line-height: 1.5em;
	padding: 7px 10px;
	}

	#top {
	font-size: 22px;
	text-align: center;
	margin-bottom: 25px;
	}

	#name {
	font-size: 44px;
	letter-spacing: -1px;
	font-weight: bold;
	margin-right: 5px;
	}

	#example {
	clear: both;
	width: 100%;
	height: 500px;
	}

	#about {
	width: 720px;
	margin: 0 auto;
	}

	#download {
	margin: 50px auto 0 auto;
	text-align: center;
	}

	#dl {
	background: #569834;
	padding: 7px 10px;
	border-radius: 3px;
	color: white;
	font-weight: bold;
	font-size: 32px;
	}
	.disc { list-style: disc; }
	</style>
	</head>
	<body>
	<div id="top">
	<span id="name">OSM & GeoJSON</span> converts between OSM XML and GeoJSON.
	</div>
	<div id="example">
	<div id="left">
	<h3>OSM XML</h3>
	<textarea id="osmxml" contenteditable="true"></textarea>
	<span class="button" onclick="toGeo()">convert to GeoJSON →</span>
	</div>
	<div id="right">
	<h3>GeoJSON</h3>
	<textarea id="geojson" contenteditable="true"></textarea>
	<span class="button" onclick="toXML()">← convert to OSM XML</span>
	</div>
	</div>
	<div id="results1"></div>
	<div id="results2"></div>
	</body>
	</html>