From be929dd8d9ebe0054d49c8397963119027eafb4a Mon Sep 17 00:00:00 2001
From: Richard Fairhurst <richard@systemeD.net>
Date: Wed, 11 Jul 2012 15:03:21 +0100
Subject: [PATCH] Full-size map

---
 index.html            | 16 ++++++++++++----
 js/iD/renderer/Map.js | 23 ++++++++++++-----------
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 2ad3c0cb1..885f456ba 100755
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
 
 	<script>
 
-require(["dojo/_base/lang","dojo/dom-geometry","dojo/dom-class","dojo/on",
+require(["dojo/_base/lang","dojo/dom-geometry","dojo/dom-class","dojo/on","dojo/dom",
          "dijit/form/Button","dijit/form/ToggleButton",
          "dojox/layout/FloatingPane",
          "iD/actions/UndoStack","iD/actions/CreatePOIAction",
@@ -29,17 +29,25 @@ require(["dojo/_base/lang","dojo/dom-geometry","dojo/dom-class","dojo/on",
          "iD/controller/edit/NoSelection","iD/controller/shape/NoSelection",
          "iD/renderer/Map","iD/styleparser/RuleSet",
          "iD/ui/DragAndDrop","iD/ui/StepPane",
-         "dojo/domReady!"], function(lang,domGeom,domClass,on){
+         "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?");
-
+	
 	// Load styles
 	ruleset.registerCallback(styleLoaded);
 	ruleset.loadFromCSS("potlatch.css",styleLoaded);
 
 	// Initialise map
-	var map = new iD.renderer.Map(51.87,-1.49,17,"map",conn);
+	var map = new iD.renderer.Map({
+		lat: 51.87,
+		lon: -1.49,
+		scale: 17,
+		div: "map",
+		connection: conn,
+		width: dom.byId('appLayout').offsetWidth,
+		height: dom.byId('appLayout').offsetHeight
+	});
 	conn.registerMap(map);
 	map.ruleset=ruleset;
 
diff --git a/js/iD/renderer/Map.js b/js/iD/renderer/Map.js
index e5694e64d..932d3654c 100755
--- a/js/iD/renderer/Map.js
+++ b/js/iD/renderer/Map.js
@@ -63,25 +63,26 @@ declare("iD.renderer.Map", null, {
 	ruleset: null,			// map style
 	
 	// Constructor
+	// takes object with lat, lon, scale, div, connection, width, height properties
 	
-	constructor:function(_lat,_lon,_scale,_divname,_conn) {
-		// Bounds ** FIXME: shouldn't be hardcoded!
-		this.mapwidth=800;
-		this.mapheight=400;
+	constructor:function(obj) {
+		// Bounds
+		this.mapwidth=obj.width ? obj.width : 800;
+		this.mapheight=obj.height ? obj.height : 400;
 
 		// Initialise variables
 		this.nodeuis={},
 		this.wayuis={},
-		this.div=document.getElementById(_divname);
-		this.surface=Gfx.createSurface(_divname, this.mapwidth, this.mapheight);
+		this.div=document.getElementById(obj.div);
+		this.surface=Gfx.createSurface(obj.div, this.mapwidth, this.mapheight);
 		this.backdrop=this.surface.createRect( { x:0, y:0, width: this.mapwidth, height: this.mapheight }).setFill(new dojo.Color([255,255,245,1]));
 		this.tilegroup=this.surface.createGroup();
 		this.container=this.surface.createGroup();
-		this.conn=_conn;
-		this.scale=_scale;
-		this.baselon=_lon;
-		this.baselat=_lat;
-		this.baselatp=this.lat2latp(_lat);
+		this.conn=obj.connection;
+		this.scale=obj.scale ? obj.scale : 17;
+		this.baselon=obj.lon;
+		this.baselat=obj.lat;
+		this.baselatp=this.lat2latp(obj.lat);
 		this.setScaleFactor();
 		this.updateCoordsFromViewportPosition();