diff --git a/crates/client/dist/index.html b/crates/client/dist/index.html
index 2797ac3..565d0f5 100644
--- a/crates/client/dist/index.html
+++ b/crates/client/dist/index.html
@@ -94,7 +94,7 @@
             }
         }
     </style>
-<link rel="modulepreload" href="/wxbox-client-2aa7e8d0a7ce87a0.js" crossorigin="anonymous" integrity="sha384-wkhAe67T8C73+DmlG8JEq34RPAIiO8Jf+d3BH/nrBQ1b1NjMqo8csITaVtpbPBwV"><link rel="preload" href="/wxbox-client-2aa7e8d0a7ce87a0_bg.wasm" crossorigin="anonymous" integrity="sha384-ktNNMM2Y7MpHin8ahouTcp3Hi86z/aHl3k0MF4B0UPIib8zY3d+HWLstQnSOh8yT" as="fetch" type="application/wasm"></head>
+<link rel="modulepreload" href="/wxbox-client-263c84fc1942c2bc.js" crossorigin="anonymous" integrity="sha384-KUIh+urSU4nqO6N7Q5y59ClO7Q1fHdV7qTTYeGc7hENeGUzLNg/BG6IhFceGJrcf"><link rel="preload" href="/wxbox-client-263c84fc1942c2bc_bg.wasm" crossorigin="anonymous" integrity="sha384-/6swccxrEymN9GDB22cvwwHby2GEnLq9hVjqFlX9ePRhAyAHNy6OtFZMAuQui2Oz" as="fetch" type="application/wasm"></head>
 
 <body>
 <!-- The WASM code will resize the canvas dynamically -->
@@ -111,8 +111,8 @@
 
 
 <script type="module">
-import init, * as bindings from '/wxbox-client-2aa7e8d0a7ce87a0.js';
-const wasm = await init({ module_or_path: '/wxbox-client-2aa7e8d0a7ce87a0_bg.wasm' });
+import init, * as bindings from '/wxbox-client-263c84fc1942c2bc.js';
+const wasm = await init({ module_or_path: '/wxbox-client-263c84fc1942c2bc_bg.wasm' });
 
 
 window.wasmBindings = bindings;
diff --git a/crates/client/dist/wxbox-client-2aa7e8d0a7ce87a0.js b/crates/client/dist/wxbox-client-263c84fc1942c2bc.js
similarity index 99%
rename from crates/client/dist/wxbox-client-2aa7e8d0a7ce87a0.js
rename to crates/client/dist/wxbox-client-263c84fc1942c2bc.js
index 6f3f701..787fdf8 100644
--- a/crates/client/dist/wxbox-client-2aa7e8d0a7ce87a0.js
+++ b/crates/client/dist/wxbox-client-263c84fc1942c2bc.js
@@ -212,7 +212,7 @@ function debugString(val) {
     return className;
 }
 function __wbg_adapter_32(arg0, arg1, arg2) {
-    wasm.closure1007_externref_shim(arg0, arg1, arg2);
+    wasm.closure1011_externref_shim(arg0, arg1, arg2);
 }
 
 function takeFromExternrefTable0(idx) {
@@ -228,7 +228,7 @@ function __wbg_adapter_35(arg0, arg1) {
 }
 
 function __wbg_adapter_40(arg0, arg1, arg2) {
-    wasm.closure1693_externref_shim(arg0, arg1, arg2);
+    wasm.closure1697_externref_shim(arg0, arg1, arg2);
 }
 
 /**
@@ -1633,20 +1633,20 @@ function __wbg_get_imports() {
         const ret = false;
         return ret;
     };
-    imports.wbg.__wbindgen_closure_wrapper3642 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 1008, __wbg_adapter_32);
+    imports.wbg.__wbindgen_closure_wrapper3648 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 1012, __wbg_adapter_32);
         return ret;
     };
-    imports.wbg.__wbindgen_closure_wrapper3644 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 1008, __wbg_adapter_35);
+    imports.wbg.__wbindgen_closure_wrapper3650 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 1012, __wbg_adapter_35);
         return ret;
     };
-    imports.wbg.__wbindgen_closure_wrapper3646 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 1008, __wbg_adapter_32);
+    imports.wbg.__wbindgen_closure_wrapper3652 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 1012, __wbg_adapter_32);
         return ret;
     };
-    imports.wbg.__wbindgen_closure_wrapper6223 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 1694, __wbg_adapter_40);
+    imports.wbg.__wbindgen_closure_wrapper6229 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 1698, __wbg_adapter_40);
         return ret;
     };
     imports.wbg.__wbindgen_debug_string = function(arg0, arg1) {
diff --git a/crates/client/dist/wxbox-client-2aa7e8d0a7ce87a0_bg.wasm b/crates/client/dist/wxbox-client-263c84fc1942c2bc_bg.wasm
similarity index 70%
rename from crates/client/dist/wxbox-client-2aa7e8d0a7ce87a0_bg.wasm
rename to crates/client/dist/wxbox-client-263c84fc1942c2bc_bg.wasm
index 82a6303..0ee2d39 100644
Binary files a/crates/client/dist/wxbox-client-2aa7e8d0a7ce87a0_bg.wasm and b/crates/client/dist/wxbox-client-263c84fc1942c2bc_bg.wasm differ
diff --git a/crates/client/src/map.rs b/crates/client/src/map.rs
index f6d5376..c013c75 100644
--- a/crates/client/src/map.rs
+++ b/crates/client/src/map.rs
@@ -70,12 +70,40 @@ impl Map {
         if self.lat > 85.051129 { self.lat = 85.051129 };
     }
 
+    fn load_tile(&mut self, ctx: &egui::Context, z: ZoomLevel, x: XCoord, y: YCoord, layer_id: LayerId) -> &mut Tile {
+        // download the tile
+        self.layer_manager.tiles.entry((z, x, y, layer_id))
+            .or_insert_with(|| {
+                let (sender, promise) = Promise::new();
+                let request = ehttp::Request::get(format!("https://tile.openstreetmap.org/{}/{x}/{y}.png", z));
+                let ctx = ctx.clone();
+                ehttp::fetch(request, move | response | {
+                    sender.send(match response {
+                        Ok(r) => match ImageReader::new(Cursor::new(r.bytes)).with_guessed_format() {
+                            Ok(img) => match img.decode() {
+                                Ok(img) => {
+                                    ctx.request_repaint(); // wake up the ui
+                                    Ok(img)
+                                },
+                                Err(e) => Err(e.to_string()),
+                            },
+                            Err(e) => Err(e.to_string()),
+                        },
+                        Err(e) => Err(e.to_string()),
+                    });
+                });
+                Tile {
+                    promise
+                }
+            })
+    }
+
     fn load_tiles(&mut self, ctx: &egui::Context, viewport_width: usize, viewport_height: usize) -> Tileset {
         // lat, long is top left
         // tiles are rendered at 256x256. how many can we fit?
         debug!("viewport is {}px, we can render {}", viewport_width, viewport_width / 256);
-        let tiles_x = viewport_width / 256;
-        let tiles_y = viewport_height / 256;
+        let tiles_x = viewport_width as isize / 256;
+        let tiles_y = viewport_height as isize / 256;
 
         let mut tiles = vec![];
 
@@ -83,67 +111,47 @@ impl Map {
         // determine start/end tiles
         let x = self.long.to_radians();
         let y = self.lat.to_radians().tan().asinh();
-
         let x = (1.0 + x/std::f64::consts::PI) / 2.0;
         let y= (1.0 - y/std::f64::consts::PI) / 2.0;
-
         let z_clamped = self.zoom.floor();
         let tiles_across = 2usize.pow(z_clamped as u32);
-
         let x_coordinate = x * tiles_across as f64;
         let y_coordinate = y * tiles_across as f64;
-
         let x_tile_frac = x_coordinate.fract() * 256.0;
         let y_tile_frac = y_coordinate.fract() * 256.0;
-
-
         let tilex = x_coordinate.floor() as usize;
         let tiley = y_coordinate.floor() as usize;
 
-        let xrange = tilex..(tilex + tiles_x);
-        let yrange = tiley..(tiley + tiles_y);
+        let tile = self.load_tile(ctx, z_clamped as ZoomLevel, tilex, tiley, OSMBaselayer::SOURCE_ID);
+        tiles.push(TilesetTile {
+            tileid: (z_clamped as usize, tilex, tiley, OSMBaselayer::SOURCE_ID),
+            x: (0.0 - x_tile_frac) as f32,
+            y: (0.0 + y_tile_frac) as f32,
+            tile: match tile.promise.ready() {
+                None => None,
+                Some(r) => match r {
+                    Ok(i) => Some(i.clone()),
+                    Err(_) => None
+                }
+            },
+        });
 
+        for ox in -tiles_x..tiles_x {
+            for oy in -tiles_y..tiles_y {
 
-        // for each tile, determine pixel coordinates, then offset by the tile fractionals
-        for x in 1..tiles_x {
-            let tile_x = tilex + x;
-            for y in 1..tiles_y+1 {
-                let tile_y = tiley + y;
+                let tx = tilex as isize + ox;
+                let ty = tiley as isize + oy;
 
-                let pixel_x = 256_f32 * x as f32 - x_tile_frac as f32;
-                let pixel_y = -256_f32 * y as f32 + y_tile_frac as f32;
+                if (tx < 0 || ty < 0 || tx > tiles_across as isize || ty > tiles_across as isize) { continue };
 
+                let tx = tx as usize;
+                let ty = ty as usize;
 
-                // download the tile
-                let tile = self.layer_manager.tiles.entry((z_clamped as usize, tile_x, tile_y, OSMBaselayer::SOURCE_ID))
-                    .or_insert_with(|| {
-                        let (sender, promise) = Promise::new();
-                        let request = ehttp::Request::get(format!("https://tile.openstreetmap.org/{}/{tile_x}/{tile_y}.png", z_clamped as usize));
-                        let ctx = ctx.clone();
-                        ehttp::fetch(request, move | response | {
-                            sender.send(match response {
-                                Ok(r) => match ImageReader::new(Cursor::new(r.bytes)).with_guessed_format() {
-                                    Ok(img) => match img.decode() {
-                                        Ok(img) => {
-                                            ctx.request_repaint(); // wake up the ui
-                                            Ok(img)
-                                        },
-                                        Err(e) => Err(e.to_string()),
-                                    },
-                                    Err(e) => Err(e.to_string()),
-                                },
-                                Err(e) => Err(e.to_string()),
-                            });
-                        });
-                        Tile {
-                            promise
-                        }
-                    });
-
+                let tile = self.load_tile(ctx, z_clamped as ZoomLevel, tx, ty, OSMBaselayer::SOURCE_ID);
                 tiles.push(TilesetTile {
-                    tileid: (z_clamped as usize, tile_x, tile_y, OSMBaselayer::SOURCE_ID),
-                    x: pixel_x,
-                    y: pixel_y,
+                    tileid: (z_clamped as usize, tx, ty, OSMBaselayer::SOURCE_ID),
+                    x: (256.0*ox as f32 - x_tile_frac as f32) as f32,
+                    y: (-256.0*oy as f32 + y_tile_frac as f32) as f32,
                     tile: match tile.promise.ready() {
                         None => None,
                         Some(r) => match r {
@@ -155,6 +163,9 @@ impl Map {
             }
         }
 
+
+        debug!("{:?}", tiles.iter().map(|u| (u.x, u.y, u.tileid)).collect::<Vec<_>>());
+
         Tileset {
             tiles: Arc::new(Mutex::new(tiles)),
         }
@@ -186,7 +197,7 @@ impl Map {
 struct Tileset {
     tiles: Arc<Mutex<Vec<TilesetTile>>>
 }
-#[derive(Clone)]
+#[derive(Clone, Debug)]
 struct TilesetTile {
     tileid: (ZoomLevel, XCoord, YCoord, LayerId),
     x: f32,
diff --git a/crates/client/src/map/render.rs b/crates/client/src/map/render.rs
index a1ff8b2..02921ee 100644
--- a/crates/client/src/map/render.rs
+++ b/crates/client/src/map/render.rs
@@ -119,14 +119,14 @@ impl MapRender {
     pub fn paint(&mut self, gl: &glow::Context, width: f32, height: f32, tileset: Tileset, options: ExtraRenderOptions) {
         use glow::HasContext as _;
 
-        let verticies: &[f32] = &[
+        let vertices: &[f32] = &[
             // X     Y     Z     S     T
                1.0,  1.0,  0.0,  1.0,  1.0, // top right
-               1.0,  0.0,  0.0,  1.0,  0.0, // bottom right
-               0.0,  0.0,  0.0,  0.0,  0.0, // bottom left
-               0.0,  1.0,  0.0,  0.0,  1.0, // top left
+               1.0, -1.0,  0.0,  1.0,  0.0, // bottom right
+              -1.0, -1.0,  0.0,  0.0,  0.0, // bottom left
+              -1.0,  1.0,  0.0,  0.0,  1.0, // top left
         ];
-        let indicies: &[u32] = &[
+        let indices: &[u32] = &[
             0, 1, 3,
             1, 2, 3
         ];
@@ -172,10 +172,10 @@ impl MapRender {
                 gl.bind_vertex_array(Some(self.vao));
 
                 gl.bind_buffer(glow::ARRAY_BUFFER, Some(self.vbo));
-                gl.buffer_data_u8_slice(glow::ARRAY_BUFFER, bytemuck::cast_slice(verticies), glow::DYNAMIC_DRAW);
+                gl.buffer_data_u8_slice(glow::ARRAY_BUFFER, bytemuck::cast_slice(vertices), glow::DYNAMIC_DRAW);
 
                 gl.bind_buffer(glow::ELEMENT_ARRAY_BUFFER, Some(self.ebo));
-                gl.buffer_data_u8_slice(glow::ELEMENT_ARRAY_BUFFER, bytemuck::cast_slice(indicies), glow::DYNAMIC_DRAW);
+                gl.buffer_data_u8_slice(glow::ELEMENT_ARRAY_BUFFER, bytemuck::cast_slice(indices), glow::DYNAMIC_DRAW);
 
                 gl.vertex_attrib_pointer_f32(0, 3, glow::FLOAT, false, (5 * mem::size_of::<f32>()) as i32, 0);
                 gl.vertex_attrib_pointer_f32(1, 2, glow::FLOAT, false, (5 * mem::size_of::<f32>()) as i32, 3 * mem::size_of::<f32>() as i32);
@@ -188,15 +188,12 @@ impl MapRender {
 
                 let w = 256.0_f32;
                 let h = 256.0_f32;
-                let x = (tile.x) / width - 1.0;
-                let y = (tile.y) / width + 1.0;
+                let x = 2.0*tile.x / width;
+                let y = 2.0*tile.y / height;
 
                 let transform = nalgebra_glm::translate(&nalgebra_glm::Mat4::identity(), &nalgebra_glm::vec3(x, y, 0.0));
-
-                let width = w / width;
-                let height = h / height;
-
-                let transform = nalgebra_glm::scale(&transform, &nalgebra_glm::vec3(width, height, 1.0));
+                let transform = nalgebra_glm::scale(&transform, &nalgebra_glm::vec3(w, h, 1.0));
+                let transform = nalgebra_glm::scale(&transform, &nalgebra_glm::vec3(1.0/width, 1.0/height, 1.0));
 
                 // screenspace-ify:
                 // map to 0 to 1 space
