diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts
index cf4ea6f7b..c94a2bbc6 100644
--- a/src/client/graphics/GameRenderer.ts
+++ b/src/client/graphics/GameRenderer.ts
@@ -265,11 +265,8 @@ export class GameRenderer {
     window.addEventListener("resize", () => this.resizeCanvas());
     this.resizeCanvas();
 
-    this.transformHandler = new TransformHandler(
-      this.game,
-      this.eventBus,
-      this.canvas,
-    );
+    //show whole map on startup
+    this.transformHandler.centerAll(0.9);
 
     requestAnimationFrame(() => this.renderGame());
   }
diff --git a/src/client/graphics/TransformHandler.ts b/src/client/graphics/TransformHandler.ts
index 475d65eef..7f111a280 100644
--- a/src/client/graphics/TransformHandler.ts
+++ b/src/client/graphics/TransformHandler.ts
@@ -257,4 +257,31 @@ export class TransformHandler {
     }
     this.target = null;
   }
+
+  override(x: number = 0, y: number = 0, s: number = 1) {
+    //hardset view position
+    this.clearTarget();
+    this.offsetX = x;
+    this.offsetY = y;
+    this.scale = s;
+    this.changed = true;
+  }
+
+  centerAll(fit: number = 1) {
+    //position entire map centered on the screen
+
+    const vpWidth = this.boundingRect().width;
+    const vpHeight = this.boundingRect().height;
+    const mapWidth = this.game.width();
+    const mapHeight = this.game.height();
+
+    const scHor = (vpWidth / mapWidth) * fit;
+    const scVer = (vpHeight / mapHeight) * fit;
+    const tScale = Math.min(scHor, scVer);
+
+    const oHor = (mapWidth - vpWidth) / 2 / tScale;
+    const oVer = (mapHeight - vpHeight) / 2 / tScale;
+
+    this.override(oHor, oVer, tScale);
+  }
 }