Added OSM edit UI

Gruntfile.js

@@ -41,6 +41,7 @@ module.exports = function(grunt) {
 					'src/client/debug/RendererInfo.js',
 					'src/client/ui/Loading.js',
 					'src/client/ui/Attribution.js',
+					'src/client/ui/OSMEdit.js',
 					'src/client/Geo.js',
 					'src/client/City.js',
 					'src/client/Loop.js',

css/vizicities.css

@@ -1,9 +1,9 @@
-/* Extending defaults from Attribution.js */
-.ui-attribution a {
+/* Extending defaults from Attribution.js and OSMEdit.js */
+.ui-attribution a, .ui-osm-edit a {
   color: #222;
   text-decoration: none;
 }
 
-  .ui-attribution a:hover {
+  .ui-attribution a:hover, .ui-osm-edit a:hover {
     text-decoration: underline;
   }

src/client/City.js

@@ -18,6 +18,8 @@
 		// UI
 		this.ui = {};
 		this.ui.loading = undefined;
+		this.ui.attribution = undefined;
+		this.ui.osmEdit = undefined;
 
 		// Geo methods
 		this.geo = undefined;
@@ -101,15 +103,23 @@
 			// Initialise debug tools
 			return self.initDebug();
 		}).then(function() {
-			self.publish("loadingProgress", 0.2);
+			self.publish("loadingProgress", 0.15);
 
-			// Initialise WebGL
-			return self.initWebGL(options);
+			// Initialise attribution and OSM edit UI
+			var promises = [];
+
+			// Initialise DOM events
+			promises.push(self.initAttributionUI());
+
+			// Initialise controls
+			promises.push(self.initOSMEditUI());
+
+			return Q.allSettled(promises);
 		}).then(function() {
 			self.publish("loadingProgress", 0.25);
 
-			// Initialise attribution UI
-			return self.initAttributionUI();
+			// Initialise WebGL
+			return self.initWebGL(options);
 		}).then(function() {
 			self.publish("loadingProgress", 0.3);
 
@@ -180,6 +190,22 @@
 		return deferred.promise;
 	};
 
+	VIZI.City.prototype.initOSMEditUI = function() {
+		var startTime = Date.now();
+
+		var deferred = Q.defer();
+
+		this.ui.osmEdit = new VIZI.OSMEdit();
+
+		this.ui.osmEdit.init().then(function(result) {
+			VIZI.Log("Finished intialising OSM edit UI in " + (Date.now() - startTime) + "ms");
+
+			deferred.resolve();
+		});
+
+		return deferred.promise;
+	};
+
 	VIZI.City.prototype.initLoadingUI = function() {
 		var startTime = Date.now();
 

src/client/ui/OSMEdit.js

@@ -0,0 +1,64 @@
+/* globals window, _, VIZI, Q */
+(function() {
+  "use strict";
+
+  VIZI.OSMEdit = function() {
+    VIZI.Log("Initialising OSM edit UI");
+
+    _.extend(this, VIZI.Mediator);
+
+    this.domContainer = undefined;
+    this.domOSMEdit = undefined;
+
+    this.subscribe("centerPositionChanged", function(centerPixels, center) {
+      this.updatePosition(center);
+    });
+  };
+
+  VIZI.OSMEdit.prototype.init = function() {
+    this.domContainer = this.createDOMContainer();
+    this.domOSMEdit = this.createDOMOSMEdit();
+
+    return Q.fcall(function() {});
+  };
+
+  // TODO: Decide if CSS should be here or all in the CSS file
+  VIZI.OSMEdit.prototype.createDOMContainer = function() {
+    VIZI.Log("Creating OSM edit UI DOM container");
+
+    var container = document.createElement("div");
+    container.id = "ui-osm-edit-container";
+
+    container.style.bottom = "0";
+    container.style.fontFamily = "Arial, Verdana, sans-serif";
+    container.style.fontSize = "10px";
+    container.style.position = "absolute";
+    container.style.left = "0";
+    container.style.zIndex = "9998";
+
+    document.body.appendChild(container);
+
+    return container;
+  };
+
+  VIZI.OSMEdit.prototype.createDOMOSMEdit = function() {
+    VIZI.Log("Creating OSM edit UI ViziCities DOM");
+
+    var osmEditDOM = document.createElement("p");
+    osmEditDOM.classList.add("ui-osm-edit");
+
+    osmEditDOM.innerHTML = "<a href='http://www.openstreetmap.org/edit'>Does this area look wrong? Edit it in OpenStreetMap</a>";
+
+    osmEditDOM.style.background = "rgba(255, 255, 255, 0.6)";
+    osmEditDOM.style.borderRadius = "0 3px 0 0";
+    osmEditDOM.style.padding = "3px 5px";
+
+    this.domContainer.appendChild(osmEditDOM);
+
+    return osmEditDOM;
+  };
+
+  VIZI.OSMEdit.prototype.updatePosition = function(center) {
+    this.domOSMEdit.firstChild.href = "http://www.openstreetmap.org/edit#map=16/" + center[1] + "/" + center[0];
+  };
+}());