Overhaul refactor. Still things in progress

ui-old/src/components/Metars/MetarMap.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { MapContainer } from 'react-leaflet';
+import MapTiles from './MapTiles';
+import './metars.css';
+import { coordinatesState, zoomState } from '@/state/map';
+import { useRecoilValue } from 'recoil';
+
+export default function Map() {
+  const coordinates = useRecoilValue(coordinatesState);
+  const zoom = useRecoilValue(zoomState);
+
+  return (
+    <>
+      <MapContainer
+        center={[coordinates.lat, coordinates.lon]}
+        zoom={zoom}
+        maxZoom={14} // Zoomed in
+        minZoom={3} // Zoomed out
+        id='map-container'
+        className={`map-container`}
+        attributionControl={false}
+      >
+        <MapTiles />
+      </MapContainer>
+    </>
+  );
+}