2 files changed, 41 insertions, 0 deletions
diff --git a/src/components/TileLayerControl/TileLayerControl.module.css b/src/components/TileLayerControl/TileLayerControl.module.css
new file mode 100644
index 0000000..ffff063
--- /dev/null
+++ b/src/components/TileLayerControl/TileLayerControl.module.css
@@ -0,0 +1,20 @@
+.tileLayerControl {
+    width: 64px;
+    height: 64px;
+}
+
+.map {
+    background-image: url('/public/icons/map.png');
+}
+
+.satellite {
+    background-image: url('/public/icons/satellite.png');
+}
+
+.tileLayerControl button {
+    width: 100%;
+    height: 100%;
+    border: none;
+    cursor: pointer;
+}
+
diff --git a/src/components/TileLayerControl/TileLayerControl.tsx b/src/components/TileLayerControl/TileLayerControl.tsx
new file mode 100644
index 0000000..026ade1
--- /dev/null
+++ b/src/components/TileLayerControl/TileLayerControl.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import styles from './TileLayerControl.module.css';
+
+export enum TileLayerType {
+  map,
+  satellite,
+}
+
+interface Props {
+  tileType: TileLayerType;
+  onClick: () => void;
+}
+
+export default function TileLayerControl({ tileType, onClick }: Props): JSX.Element {
+  const bgClass = tileType === TileLayerType.map ? styles.satellite : styles.map;
+  return (
+    <div className={`${styles.tileLayerControl} leaflet-bar`}>
+      <button type="button" className={bgClass} onClick={onClick}></button>
+    </div>
+  );
+}