diff --git a/Cargo.lock b/Cargo.lock
index dea5b89..8872930 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1333,6 +1333,20 @@ dependencies = [
  "winit",
 ]
 
+[[package]]
+name = "ehttp"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "59a81c221a1e4dad06cb9c9deb19aea1193a5eea084e8cd42d869068132bf876"
+dependencies = [
+ "document-features",
+ "js-sys",
+ "ureq",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
 [[package]]
 name = "either"
 version = "1.13.0"
@@ -3047,6 +3061,16 @@ dependencies = [
  "miniz_oxide",
 ]
 
+[[package]]
+name = "poll-promise"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5f6a58fecbf9da8965bcdb20ce4fd29788d1acee68ddbb64f0ba1b81bccdb7df"
+dependencies = [
+ "document-features",
+ "static_assertions",
+]
+
 [[package]]
 name = "polling"
 version = "3.7.4"
@@ -3426,7 +3450,9 @@ version = "0.23.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "415d9944693cb90382053259f89fbb077ea730ad7273047ec63b19bc9b160ba8"
 dependencies = [
+ "log",
  "once_cell",
+ "ring",
  "rustls-pki-types",
  "rustls-webpki",
  "subtle",
@@ -4276,6 +4302,22 @@ version = "0.9.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8ecb6da28b8a351d773b68d5825ac39017e680750f980f3a1a85cd8dd28a47c1"
 
+[[package]]
+name = "ureq"
+version = "2.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b74fc6b57825be3373f7054754755f03ac3a8f5d70015ccad699ba2029956f4a"
+dependencies = [
+ "base64",
+ "flate2",
+ "log",
+ "once_cell",
+ "rustls",
+ "rustls-pki-types",
+ "url",
+ "webpki-roots",
+]
+
 [[package]]
 name = "url"
 version = "2.5.2"
@@ -4561,6 +4603,15 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "webpki-roots"
+version = "0.26.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2210b291f7ea53617fbafcc4939f10914214ec15aace5ba62293a668f322c5c9"
+dependencies = [
+ "rustls-pki-types",
+]
+
 [[package]]
 name = "weezl"
 version = "0.1.8"
@@ -5059,6 +5110,9 @@ dependencies = [
  "eframe",
  "egui",
  "egui_glow",
+ "ehttp",
+ "image",
+ "poll-promise",
  "serde",
  "tracing",
  "tracing-subscriber",
diff --git a/crates/client/Cargo.toml b/crates/client/Cargo.toml
index de1f9b4..47a9ad7 100644
--- a/crates/client/Cargo.toml
+++ b/crates/client/Cargo.toml
@@ -10,6 +10,9 @@ eframe = { version = "0.31" }
 egui = "0.31"
 egui_glow = "0.31"
 serde = { version = "1", features = ["derive"] }
+poll-promise = "0.3"
+ehttp = "0.5"
+image = "0.25"
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 tracing-web = "0.1"
diff --git a/crates/client/dist/index.html b/crates/client/dist/index.html
index 1af9e2b..f93b29b 100644
--- a/crates/client/dist/index.html
+++ b/crates/client/dist/index.html
@@ -94,7 +94,7 @@
             }
         }
     </style>
-<link rel="modulepreload" href="/wxbox-client-cc3fc7938f2d1250.js" crossorigin="anonymous" integrity="sha384-D0+8/tuiAAACeiCFKoYCfiO4eY1qBcspDBAYo2/wlucgHDDd6q+iQbSI/oBAyjqc"><link rel="preload" href="/wxbox-client-cc3fc7938f2d1250_bg.wasm" crossorigin="anonymous" integrity="sha384-4sU1kmiOjDfWRKUTgecXG3cX++TTeotG02GlXDRHqwxFVxdy/hcCV7wm92ijUzmr" as="fetch" type="application/wasm"></head>
+<link rel="modulepreload" href="/wxbox-client-5dd7964ac85d800f.js" crossorigin="anonymous" integrity="sha384-THKbMzgvXjd63RE7bglp3RwijS0ny12ZwnqzI9Pidk1fDApKpehVPRwasSPwF4GV"><link rel="preload" href="/wxbox-client-5dd7964ac85d800f_bg.wasm" crossorigin="anonymous" integrity="sha384-ULmySDdbjrxZ77rmXQ2ZPFV0NVjvw9RhIuKxBP9ftAQbL4eIL9qoaW6phgsM9lMR" 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-cc3fc7938f2d1250.js';
-const wasm = await init({ module_or_path: '/wxbox-client-cc3fc7938f2d1250_bg.wasm' });
+import init, * as bindings from '/wxbox-client-5dd7964ac85d800f.js';
+const wasm = await init({ module_or_path: '/wxbox-client-5dd7964ac85d800f_bg.wasm' });
 
 
 window.wasmBindings = bindings;
diff --git a/crates/client/dist/wxbox-client-cc3fc7938f2d1250.js b/crates/client/dist/wxbox-client-5dd7964ac85d800f.js
similarity index 92%
rename from crates/client/dist/wxbox-client-cc3fc7938f2d1250.js
rename to crates/client/dist/wxbox-client-5dd7964ac85d800f.js
index 71dcbac..0aaa3f7 100644
--- a/crates/client/dist/wxbox-client-cc3fc7938f2d1250.js
+++ b/crates/client/dist/wxbox-client-5dd7964ac85d800f.js
@@ -203,21 +203,46 @@ function takeFromExternrefTable0(idx) {
     wasm.__externref_table_dealloc(idx);
     return value;
 }
-function __wbg_adapter_30(arg0, arg1) {
-    const ret = wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h071c709f79650b21_multivalue_shim(arg0, arg1);
+function __wbg_adapter_32(arg0, arg1) {
+    const ret = wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h3a79313ab83803af_multivalue_shim(arg0, arg1);
     if (ret[1]) {
         throw takeFromExternrefTable0(ret[0]);
     }
 }
 
-function __wbg_adapter_33(arg0, arg1, arg2) {
-    wasm.closure292_externref_shim(arg0, arg1, arg2);
+function __wbg_adapter_35(arg0, arg1, arg2) {
+    wasm.closure786_externref_shim(arg0, arg1, arg2);
 }
 
-function __wbg_adapter_38(arg0, arg1, arg2) {
-    wasm.closure379_externref_shim(arg0, arg1, arg2);
+function __wbg_adapter_40(arg0, arg1, arg2) {
+    wasm.closure1466_externref_shim(arg0, arg1, arg2);
 }
 
+/**
+ * Chroma subsampling format
+ * @enum {0 | 1 | 2 | 3}
+ */
+export const ChromaSampling = Object.freeze({
+    /**
+     * Both vertically and horizontally subsampled.
+     */
+    Cs420: 0, "0": "Cs420",
+    /**
+     * Horizontally subsampled.
+     */
+    Cs422: 1, "1": "Cs422",
+    /**
+     * Not subsampled.
+     */
+    Cs444: 2, "2": "Cs444",
+    /**
+     * Monochrome.
+     */
+    Cs400: 3, "3": "Cs400",
+});
+
+const __wbindgen_enum_RequestMode = ["same-origin", "no-cors", "cors", "navigate"];
+
 const __wbindgen_enum_ResizeObserverBoxOptions = ["border-box", "content-box", "device-pixel-content-box"];
 
 async function __wbg_load(module, imports) {
@@ -283,6 +308,10 @@ function __wbg_get_imports() {
         const ret = arg0.arrayBuffer();
         return ret;
     };
+    imports.wbg.__wbg_arrayBuffer_d0ca2ad8bda0039b = function() { return handleError(function (arg0) {
+        const ret = arg0.arrayBuffer();
+        return ret;
+    }, arguments) };
     imports.wbg.__wbg_at_479807bfddde3a33 = function(arg0, arg1) {
         const ret = arg0.at(arg1);
         return ret;
@@ -573,6 +602,10 @@ function __wbg_get_imports() {
         const ret = arg0.document;
         return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
     };
+    imports.wbg.__wbg_done_f22c1561fa919baa = function(arg0) {
+        const ret = arg0.done;
+        return ret;
+    };
     imports.wbg.__wbg_drawArrays_01e26acf05821932 = function(arg0, arg1, arg2, arg3) {
         arg0.drawArrays(arg1 >>> 0, arg2, arg3);
     };
@@ -629,6 +662,10 @@ function __wbg_get_imports() {
     imports.wbg.__wbg_error_fab41a42d22bf2bc = function(arg0) {
         console.error(arg0);
     };
+    imports.wbg.__wbg_fetch_e26fdd92ea39f634 = function(arg0, arg1) {
+        const ret = arg0.fetch(arg1);
+        return ret;
+    };
     imports.wbg.__wbg_files_95d9491da88a54b5 = function(arg0) {
         const ret = arg0.files;
         return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
@@ -787,6 +824,10 @@ function __wbg_get_imports() {
         const ret = arg0[arg1 >>> 0];
         return ret;
     };
+    imports.wbg.__wbg_get_bbccf8970793c087 = function() { return handleError(function (arg0, arg1) {
+        const ret = Reflect.get(arg0, arg1);
+        return ret;
+    }, arguments) };
     imports.wbg.__wbg_get_dfac72a5ffb577cc = function(arg0, arg1) {
         const ret = arg0[arg1 >>> 0];
         return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
@@ -798,6 +839,14 @@ function __wbg_get_imports() {
         getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
         getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
     }, arguments) };
+    imports.wbg.__wbg_headers_24e3e19fe3f187c0 = function(arg0) {
+        const ret = arg0.headers;
+        return ret;
+    };
+    imports.wbg.__wbg_headers_786276f5fbbdb28a = function(arg0) {
+        const ret = arg0.headers;
+        return ret;
+    };
     imports.wbg.__wbg_height_08fd44318e18021d = function(arg0) {
         const ret = arg0.height;
         return ret;
@@ -912,6 +961,26 @@ function __wbg_get_imports() {
         const ret = result;
         return ret;
     };
+    imports.wbg.__wbg_instanceof_Response_d3453657e10c4300 = function(arg0) {
+        let result;
+        try {
+            result = arg0 instanceof Response;
+        } catch (_) {
+            result = false;
+        }
+        const ret = result;
+        return ret;
+    };
+    imports.wbg.__wbg_instanceof_TypeError_cbba6ac46ad5e2bb = function(arg0) {
+        let result;
+        try {
+            result = arg0 instanceof TypeError;
+        } catch (_) {
+            result = false;
+        }
+        const ret = result;
+        return ret;
+    };
     imports.wbg.__wbg_instanceof_WebGl2RenderingContext_ed03a40cd6d9a6c5 = function(arg0) {
         let result;
         try {
@@ -966,6 +1035,10 @@ function __wbg_get_imports() {
         const ret = arg0.items;
         return ret;
     };
+    imports.wbg.__wbg_iterator_23604bb983791576 = function() {
+        const ret = Symbol.iterator;
+        return ret;
+    };
     imports.wbg.__wbg_keyCode_e673401ed53dfc2c = function(arg0) {
         const ret = arg0.keyCode;
         return ret;
@@ -1122,6 +1195,10 @@ function __wbg_get_imports() {
         const ret = new ClipboardItem(arg0);
         return ret;
     }, arguments) };
+    imports.wbg.__wbg_newwithstrandinit_a1f6583f20e4faff = function() { return handleError(function (arg0, arg1, arg2) {
+        const ret = new Request(getStringFromWasm0(arg0, arg1), arg2);
+        return ret;
+    }, arguments) };
     imports.wbg.__wbg_newwithtext_f2ebd2622e9d451b = function() { return handleError(function (arg0, arg1) {
         const ret = new SpeechSynthesisUtterance(getStringFromWasm0(arg0, arg1));
         return ret;
@@ -1130,6 +1207,14 @@ function __wbg_get_imports() {
         const ret = new Blob(arg0, arg1);
         return ret;
     }, arguments) };
+    imports.wbg.__wbg_next_01dd9234a5bf6d05 = function() { return handleError(function (arg0) {
+        const ret = arg0.next();
+        return ret;
+    }, arguments) };
+    imports.wbg.__wbg_next_137428deb98342b0 = function(arg0) {
+        const ret = arg0.next;
+        return ret;
+    };
     imports.wbg.__wbg_now_2c95c9de01293173 = function(arg0) {
         const ret = arg0.now();
         return ret;
@@ -1149,6 +1234,10 @@ function __wbg_get_imports() {
         const ret = arg0.offsetTop;
         return ret;
     };
+    imports.wbg.__wbg_ok_4cacdb33ce54895f = function(arg0) {
+        const ret = arg0.ok;
+        return ret;
+    };
     imports.wbg.__wbg_open_94e1e54493f5c069 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
         const ret = arg0.open(getStringFromWasm0(arg1, arg2), getStringFromWasm0(arg3, arg4));
         return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
@@ -1262,9 +1351,15 @@ function __wbg_get_imports() {
         const ret = Reflect.set(arg0, arg1, arg2);
         return ret;
     }, arguments) };
+    imports.wbg.__wbg_set_aa8f7a765a0a2e5f = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
+        arg0.set(getStringFromWasm0(arg1, arg2), getStringFromWasm0(arg3, arg4));
+    }, arguments) };
     imports.wbg.__wbg_setautofocus_6ebfa477d4cba31b = function() { return handleError(function (arg0, arg1) {
         arg0.autofocus = arg1 !== 0;
     }, arguments) };
+    imports.wbg.__wbg_setbody_64920df008e48adc = function(arg0, arg1) {
+        arg0.body = arg1;
+    };
     imports.wbg.__wbg_setbox_2c55cd020a2888a8 = function(arg0, arg1) {
         arg0.box = __wbindgen_enum_ResizeObserverBoxOptions[arg1];
     };
@@ -1274,6 +1369,12 @@ function __wbg_get_imports() {
     imports.wbg.__wbg_setinnerHTML_2d75307ba8832258 = function(arg0, arg1, arg2) {
         arg0.innerHTML = getStringFromWasm0(arg1, arg2);
     };
+    imports.wbg.__wbg_setmethod_cfc7f688ba46a6be = function(arg0, arg1, arg2) {
+        arg0.method = getStringFromWasm0(arg1, arg2);
+    };
+    imports.wbg.__wbg_setmode_cd03637eb7da01e0 = function(arg0, arg1) {
+        arg0.mode = __wbindgen_enum_RequestMode[arg1];
+    };
     imports.wbg.__wbg_setonce_87cf501e67ee47f7 = function(arg0, arg1) {
         arg0.once = arg1 !== 0;
     };
@@ -1356,6 +1457,17 @@ function __wbg_get_imports() {
         const ret = typeof window === 'undefined' ? null : window;
         return isLikeNone(ret) ? 0 : addToExternrefTable0(ret);
     };
+    imports.wbg.__wbg_statusText_613aac5c001080c1 = function(arg0, arg1) {
+        const ret = arg1.statusText;
+        const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len1 = WASM_VECTOR_LEN;
+        getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+        getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+    };
+    imports.wbg.__wbg_status_317f53bc4c7638df = function(arg0) {
+        const ret = arg0.status;
+        return ret;
+    };
     imports.wbg.__wbg_stopPropagation_da43a41fec77962c = function(arg0) {
         arg0.stopPropagation();
     };
@@ -1435,6 +1547,13 @@ function __wbg_get_imports() {
     imports.wbg.__wbg_uniform2f_8174f619e86c3ba2 = function(arg0, arg1, arg2, arg3) {
         arg0.uniform2f(arg1, arg2, arg3);
     };
+    imports.wbg.__wbg_url_5327bc0a41a9b085 = function(arg0, arg1) {
+        const ret = arg1.url;
+        const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len1 = WASM_VECTOR_LEN;
+        getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+        getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+    };
     imports.wbg.__wbg_useProgram_1a5a4be134db012a = function(arg0, arg1) {
         arg0.useProgram(arg1);
     };
@@ -1455,6 +1574,10 @@ function __wbg_get_imports() {
         getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
         getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
     };
+    imports.wbg.__wbg_value_4c32fd138a88eee2 = function(arg0) {
+        const ret = arg0.value;
+        return ret;
+    };
     imports.wbg.__wbg_vertexAttribPointer_1f280ac2d8994592 = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6) {
         arg0.vertexAttribPointer(arg1 >>> 0, arg2, arg3 >>> 0, arg4 !== 0, arg5, arg6);
     };
@@ -1503,20 +1626,20 @@ function __wbg_get_imports() {
         const ret = false;
         return ret;
     };
-    imports.wbg.__wbindgen_closure_wrapper1119 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 380, __wbg_adapter_38);
+    imports.wbg.__wbindgen_closure_wrapper3066 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 783, __wbg_adapter_32);
         return ret;
     };
-    imports.wbg.__wbindgen_closure_wrapper827 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 289, __wbg_adapter_30);
+    imports.wbg.__wbindgen_closure_wrapper3068 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 783, __wbg_adapter_35);
         return ret;
     };
-    imports.wbg.__wbindgen_closure_wrapper829 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 289, __wbg_adapter_33);
+    imports.wbg.__wbindgen_closure_wrapper3070 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 783, __wbg_adapter_35);
         return ret;
     };
-    imports.wbg.__wbindgen_closure_wrapper831 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 289, __wbg_adapter_33);
+    imports.wbg.__wbindgen_closure_wrapper5606 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 1467, __wbg_adapter_40);
         return ret;
     };
     imports.wbg.__wbindgen_debug_string = function(arg0, arg1) {
@@ -1544,6 +1667,11 @@ function __wbg_get_imports() {
         const ret = typeof(arg0) === 'function';
         return ret;
     };
+    imports.wbg.__wbindgen_is_object = function(arg0) {
+        const val = arg0;
+        const ret = typeof(val) === 'object' && val !== null;
+        return ret;
+    };
     imports.wbg.__wbindgen_is_undefined = function(arg0) {
         const ret = arg0 === undefined;
         return ret;
diff --git a/crates/client/dist/wxbox-client-5dd7964ac85d800f_bg.wasm b/crates/client/dist/wxbox-client-5dd7964ac85d800f_bg.wasm
new file mode 100644
index 0000000..fd62502
Binary files /dev/null and b/crates/client/dist/wxbox-client-5dd7964ac85d800f_bg.wasm differ
diff --git a/crates/client/dist/wxbox-client-cc3fc7938f2d1250_bg.wasm b/crates/client/dist/wxbox-client-cc3fc7938f2d1250_bg.wasm
deleted file mode 100644
index 13d6028..0000000
Binary files a/crates/client/dist/wxbox-client-cc3fc7938f2d1250_bg.wasm and /dev/null differ
diff --git a/crates/client/src/app.rs b/crates/client/src/app.rs
index 2074891..4ce9dc3 100644
--- a/crates/client/src/app.rs
+++ b/crates/client/src/app.rs
@@ -1,7 +1,10 @@
 use std::sync::{Arc, Mutex};
 use eframe::{Frame, Storage};
-use egui::{Context, Sense, Vec2};
+use egui::{Context, Event, MouseWheelUnit, Sense, Vec2};
+use tracing::debug;
 use crate::map::Map;
+use crate::map::osm::OSMBaselayer;
+use crate::map::tiles::{LayerManager, LayerSource};
 
 pub struct App {
     map: Arc<Mutex<Map>>,
@@ -10,9 +13,12 @@ pub struct App {
 
 impl App {
     pub fn new(cc: &eframe::CreationContext<'_>) -> Self {
+        let mut layer_manager = LayerManager::default();
+        layer_manager.layers.insert(0, OSMBaselayer::SOURCE_ID);
+
         let gl = cc.gl.as_ref().unwrap();
         Self {
-            map: Arc::new(Mutex::new(Map::new(gl).unwrap())),
+            map: Arc::new(Mutex::new(Map::new(layer_manager, gl).unwrap())),
             angle: 0.0
         }
     }
@@ -32,11 +38,39 @@ impl eframe::App for App {
                     ui.available_size(),
                     Sense::all()
                 );
+
+                let mut deltas = [0.0, 0.0, 0.0];
+
+                deltas[0] = response.drag_motion().x;
+                deltas[1] = response.drag_motion().y;
+                if ui.rect_contains_pointer(rect) {
+                    ctx.input(|i| {
+                        for event in &i.events {
+                            match event {
+                                Event::MouseWheel { unit, delta, .. } => {
+                                    deltas[2] = match unit {
+                                        // TODO: scaling of this
+                                        MouseWheelUnit::Point => { delta.y },
+                                        MouseWheelUnit::Line => { delta.y },
+                                        MouseWheelUnit::Page => { delta.y },
+                                    }
+                                },
+                                _ => {}
+                            }
+                        }
+                    })
+                }
+
+                debug!("{:?}", deltas);
                 self.angle += response.drag_motion().x * 0.01;
 
                 let angle = self.angle;
                 let map = self.map.clone();
 
+                {
+                    map.lock().unwrap().update_view_data(&ctx);
+                }
+
                 let cb = egui_glow::CallbackFn::new(move |_info, painter| {
                     map.lock().unwrap().paint(painter.gl(), angle);
                 });
diff --git a/crates/client/src/map.rs b/crates/client/src/map.rs
index c71b940..3d10e2e 100644
--- a/crates/client/src/map.rs
+++ b/crates/client/src/map.rs
@@ -1,14 +1,23 @@
+pub mod tiles;
+pub mod osm;
+
+use std::io::Cursor;
 use eframe::glow;
+use image::{DynamicImage, ImageReader};
+use poll_promise::Promise;
 use tracing::warn;
+use crate::map::osm::OSMBaselayer;
+use crate::map::tiles::{LayerManager, LayerSource, Tile};
 
 pub struct Map {
+    pub layer_manager: LayerManager,
     program: glow::Program,
     vertex_array: glow::VertexArray
 }
 
 #[allow(unsafe_code)] // we need unsafe code to use glow
 impl Map {
-    pub fn new(gl: &glow::Context) -> Option<Self> {
+    pub fn new(layer_manager: LayerManager, gl: &glow::Context) -> Option<Self> {
         use glow::HasContext as _;
 
         let shader_version = egui_glow::ShaderVersion::get(gl);
@@ -26,22 +35,28 @@ impl Map {
 
             let (vertex_shader_source, fragment_shader_source) = (
                 r#"
-                    const vec2 verts[3] = vec2[3](
-                        vec2(0.0, 1.0),
+                    const vec2 verts[6] = vec2[6](
+                        vec2(-1.0, 1.0),
+                        vec2(1.0, 1.0),
                         vec2(-1.0, -1.0),
+
+                        vec2(-1.0, -1.0),
+                        vec2(1.0, 1.0),
                         vec2(1.0, -1.0)
                     );
-                    const vec4 colors[3] = vec4[3](
+                    const vec4 colors[6] = vec4[6](
                         vec4(1.0, 0.0, 0.0, 1.0),
                         vec4(0.0, 1.0, 0.0, 1.0),
-                        vec4(0.0, 0.0, 1.0, 1.0)
+                        vec4(0.0, 0.0, 1.0, 1.0),
+                        vec4(1.0, 0.0, 1.0, 1.0),
+                        vec4(1.0, 0.0, 0.0, 1.0),
+                        vec4(0.0, 1.0, 0.0, 1.0)
                     );
                     out vec4 v_color;
                     uniform float u_angle;
                     void main() {
                         v_color = colors[gl_VertexID];
                         gl_Position = vec4(verts[gl_VertexID], 0.0, 1.0);
-                        gl_Position.x *= cos(u_angle);
                     }
                 "#,
                 r#"
@@ -104,6 +119,7 @@ impl Map {
             Some(Self {
                 program,
                 vertex_array,
+                layer_manager
             })
         }
     }
@@ -116,6 +132,35 @@ impl Map {
         }
     }
 
+    pub fn update_view_data(&mut self, ctx: &egui::Context) {
+        // test: download 0/0/0 if not already there
+
+        let tile = self.layer_manager.tiles.entry((0, 0, 0, OSMBaselayer::SOURCE_ID))
+            .or_insert_with(|| {
+                let (sender, promise) = Promise::new();
+                let request = ehttp::Request::get("https://tile.openstreetmap.org/0/0/0.png");
+                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
+                }
+            });
+    }
+
     pub fn paint(&self, gl: &glow::Context, angle: f32) {
         use glow::HasContext as _;
         unsafe {
@@ -125,7 +170,7 @@ impl Map {
                 angle,
             );
             gl.bind_vertex_array(Some(self.vertex_array));
-            gl.draw_arrays(glow::TRIANGLES, 0, 3);
+            gl.draw_arrays(glow::TRIANGLES, 0, 6);
         }
     }
 }
\ No newline at end of file
diff --git a/crates/client/src/map/osm.rs b/crates/client/src/map/osm.rs
new file mode 100644
index 0000000..8619a25
--- /dev/null
+++ b/crates/client/src/map/osm.rs
@@ -0,0 +1,6 @@
+use crate::map::tiles::LayerSource;
+
+pub struct OSMBaselayer;
+impl LayerSource for OSMBaselayer {
+    const SOURCE_ID: u64 = 0x572dd260332d5f7f;
+}
\ No newline at end of file
diff --git a/crates/client/src/map/tiles.rs b/crates/client/src/map/tiles.rs
new file mode 100644
index 0000000..433aec8
--- /dev/null
+++ b/crates/client/src/map/tiles.rs
@@ -0,0 +1,23 @@
+use std::collections::{BTreeMap, HashMap};
+use image::DynamicImage;
+use poll_promise::Promise;
+
+// type aliases to make the tile map less hellish
+pub type ZoomLevel = usize;
+pub type XCoord = usize;
+pub type YCoord = usize;
+pub type LayerId = u64;
+
+#[derive(Default)]
+pub struct LayerManager {
+    pub layers: Vec<LayerId>,
+    pub tiles: HashMap<(ZoomLevel, XCoord, YCoord, LayerId), Tile>,
+}
+
+pub trait LayerSource {
+    const SOURCE_ID: u64;
+}
+
+pub struct Tile {
+    pub promise: Promise<Result<DynamicImage, String>>
+}
\ No newline at end of file
