From 6c9bcbb995c2b676e2fe6bccfae7f4afbc1a6ba7 Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Wed, 17 Oct 2012 11:24:12 -0400
Subject: [PATCH] Use HTML and CSS buttons instead of dojo widgets

---
 css/app.css | 30 ++++++++++++++++++++++++++++++
 index.html  | 26 +++++++++++---------------
 2 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/css/app.css b/css/app.css
index b5a0dcc3d..fe8e1538b 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1,3 +1,33 @@
 /* Additional CSS rules will go here */
 
 .currentMode { font-weight: bold; }
+
+#zoombuttons {
+    position:absolute;
+    right:20px;
+    top:20px;
+}
+
+#zoombuttons button {
+    width:30px;
+    height:30px;
+    text-align:center;
+    margin:0;
+    background:#fff;
+    color:#555;
+    font:bold 20px/20px 'Helvetica';
+    border:1px solid #888;
+}
+
+#zoombuttons button:active {
+    background:#eee;
+}
+
+#zoombuttons #zoomIn {
+    border-radius: 4px 0 0 4px;
+}
+
+#zoombuttons #zoomOut {
+    border-left:0;
+    border-radius: 0 4px 4px 0;
+}
diff --git a/index.html b/index.html
index 08f735c7a..73f16e828 100755
--- a/index.html
+++ b/index.html
@@ -38,7 +38,7 @@ require(["dojo/_base/lang","dojo/dom-geometry","dojo/dom-class","dojo/on","dojo/
          "iD/controller/shape/NoSelection",
          "iD/renderer/Map","iD/styleparser/RuleSet",
          "iD/ui/DragAndDrop","iD/ui/StepPane",
-         "dojo/domReady!"], function(lang,domGeom,domClass,on,dom){
+         "dojo/domReady!"], function(lang,domGeom,domClass,on,dom) {
 
 	var ruleset=new iD.styleparser.RuleSet();
 	var conn=new iD.Connection("http://www.overpass-api.de/api/xapi?");
@@ -49,10 +49,8 @@ require(["dojo/_base/lang","dojo/dom-geometry","dojo/dom-class","dojo/on","dojo/
 
 	// Initialise map
 	var map = new iD.renderer.Map({
-		lat: 38.89,
-		lon: -77,
-		// lat: 51.87,
-		// lon: -1.49,
+		lat: 51.87,
+		lon: -1.49,
 		scale: 17,
 		div: "map",
 		connection: conn,
@@ -119,8 +117,13 @@ require(["dojo/_base/lang","dojo/dom-geometry","dojo/dom-class","dojo/on","dojo/
 	// ----------------------------------------------------
 	// Map control handlers
 
-	zoomInClicked =function() { map.zoomIn();  };
-	zoomOutClicked=function() { map.zoomOut(); };
+    $('#zoomIn').click(function() {
+        map.zoomIn();
+    });
+
+    $('#zoomOut').click(function() {
+        map.zoomOut();
+    });
 
 });
 	</script>
@@ -148,14 +151,7 @@ require(["dojo/_base/lang","dojo/dom-geometry","dojo/dom-class","dojo/on","dojo/
 </div>
 
 <div id="zoombuttons">
-	<button style="position: absolute; left: 10px; top: 40px;"
-	        id="zoomIn" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:zoomInClicked">
-		+
-	</button>
-	<button style="position: absolute; left: 10px; top: 70px;"
-	        id="zoomOut" data-dojo-type="dijit.form.Button" data-dojo-props="onClick:zoomOutClicked">
-		&ndash;
-	</button>
+	<button id="zoomIn">+</button><button id="zoomOut">&ndash;</button>
 </div>
 
 <!-- Map div -->