diff --git a/code/game/machinery/computer/camera.dm b/code/game/machinery/computer/camera.dm
index 3f8fc080bf8..cfe82db29e8 100644
--- a/code/game/machinery/computer/camera.dm
+++ b/code/game/machinery/computer/camera.dm
@@ -130,6 +130,10 @@
// adding a template with the key "mapHeader" replaces the map header content
ui.add_template("mapHeader", "sec_camera_map_header.tmpl")
+ // Send nanomaps
+ var/datum/asset/nanomaps = get_asset_datum(/datum/asset/simple/nanomaps)
+ nanomaps.send(user)
+
ui.open()
/obj/machinery/computer/security/ui_data(mob/user, ui_key = "main", datum/topic_state/state = GLOB.default_state)
diff --git a/code/modules/client/asset_cache.dm b/code/modules/client/asset_cache.dm
index 8ca8bf0fbb1..e226a3009b8 100644
--- a/code/modules/client/asset_cache.dm
+++ b/code/modules/client/asset_cache.dm
@@ -262,7 +262,6 @@ GLOBAL_LIST_EMPTY(asset_datums)
var/list/common_dirs = list(
"nano/assets/",
"nano/codemirror/",
- "nano/images/",
"nano/layouts/"
)
var/list/uncommon_dirs = list(
@@ -362,3 +361,14 @@ GLOBAL_LIST_EMPTY(asset_datums)
"font-awesome.css" = 'html/font-awesome/css/all.min.css',
"v4shim.css" = 'html/font-awesome/css/v4-shims.min.css'
)
+
+// Nanomaps
+/datum/asset/simple/nanomaps
+ // It REALLY doesnt matter too much if these arent up to date
+ // They are friggin huge
+ verify = FALSE
+ assets = list(
+ "Cyberiad_nanomap_z1.png" = 'icons/_nanomaps/Cyberiad_nanomap_z1.png',
+ "Delta_nanomap_z1.png" = 'icons/_nanomaps/Delta_nanomap_z1.png',
+ "MetaStation_nanomap_z1.png" = 'icons/_nanomaps/MetaStation_nanomap_z1.png',
+ )
diff --git a/code/modules/nano/modules/atmos_control.dm b/code/modules/nano/modules/atmos_control.dm
index 2c74a1ce844..273b0bfc137 100644
--- a/code/modules/nano/modules/atmos_control.dm
+++ b/code/modules/nano/modules/atmos_control.dm
@@ -34,6 +34,11 @@
ui = new(user, src, ui_key, "atmos_control.tmpl", src.name, 900, 800, state = state)
ui.add_template("mapContent", "atmos_control_map_content.tmpl")
ui.add_template("mapHeader", "atmos_control_map_header.tmpl")
+
+ // Send nanomaps
+ var/datum/asset/nanomaps = get_asset_datum(/datum/asset/simple/nanomaps)
+ nanomaps.send(user)
+
ui.set_show_map(1)
ui.open()
ui.set_auto_update(1)
diff --git a/code/modules/tgui/modules/crew_monitor.dm b/code/modules/tgui/modules/crew_monitor.dm
index f1da4ed89ba..a33a1d141f9 100644
--- a/code/modules/tgui/modules/crew_monitor.dm
+++ b/code/modules/tgui/modules/crew_monitor.dm
@@ -23,9 +23,12 @@
/datum/tgui_module/crew_monitor/tgui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = FALSE, datum/tgui/master_ui = null, datum/tgui_state/state = GLOB.tgui_default_state)
ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
if(!ui)
- // The 557 may seem random, but its the perfectsize for margins on the nanomap
- ui = new(user, src, ui_key, "CrewMonitor", name, 1400, 557, master_ui, state)
- ui.autoupdate = TRUE
+ ui = new(user, src, ui_key, "CrewMonitor", name, 800, 600, master_ui, state)
+
+ // Send nanomaps
+ var/datum/asset/nanomaps = get_asset_datum(/datum/asset/simple/nanomaps)
+ nanomaps.send(user)
+
ui.open()
diff --git a/nano/images/Cyberiad_nanomap_z1.png b/icons/_nanomaps/Cyberiad_nanomap_z1.png
similarity index 100%
rename from nano/images/Cyberiad_nanomap_z1.png
rename to icons/_nanomaps/Cyberiad_nanomap_z1.png
diff --git a/nano/images/Delta_nanomap_z1.png b/icons/_nanomaps/Delta_nanomap_z1.png
similarity index 100%
rename from nano/images/Delta_nanomap_z1.png
rename to icons/_nanomaps/Delta_nanomap_z1.png
diff --git a/nano/images/MetaStation_nanomap_z1.png b/icons/_nanomaps/MetaStation_nanomap_z1.png
similarity index 100%
rename from nano/images/MetaStation_nanomap_z1.png
rename to icons/_nanomaps/MetaStation_nanomap_z1.png
diff --git a/tgui/packages/tgui/components/NanoMap.js b/tgui/packages/tgui/components/NanoMap.js
index cca06ea4e9d..48442e8212c 100644
--- a/tgui/packages/tgui/components/NanoMap.js
+++ b/tgui/packages/tgui/components/NanoMap.js
@@ -1,44 +1,134 @@
import { Box, Icon, Tooltip } from '.';
+import { Component } from 'inferno';
import { useBackend } from "../backend";
-export const NanoMap = (props, context) => {
- const { config } = useBackend(context);
- const { onClick } = props;
- return (
-