diff --git a/.gitignore b/.gitignore
index 7828bdd..38f1f44 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,5 @@
 .DS_Store
 
 .vscode
+
+yarn-error.log
diff --git a/src/App.svelte b/src/App.svelte
index b7ec369..c036b9b 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -9,7 +9,7 @@
 
 	let darkMode = false;
 	let map: L.Map | undefined = void 0;
-	const mapLayers = {
+	const mapLayers = () => ({
 		dark: L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
 			attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
 			maxZoom: 18,
@@ -26,7 +26,7 @@
 			zoomOffset: -1,
 			accessToken: MAPBOX_ACCESS_TOKEN,
 		}),
-	};
+	});
 	const locationCircleLayerGroup = L.layerGroup();
 	$: if (map) {
 		locationCircleLayerGroup.addTo(map);
@@ -63,10 +63,10 @@
 	$: {
 		if (map) {
 			if (!darkMode) {
-				mapLayers.light.addTo(map);
+				mapLayers().light.addTo(map);
 			}
 			else {
-				mapLayers.dark.addTo(map);
+				mapLayers().dark.addTo(map);
 			}
 		}
 	}
diff --git a/src/buttonControl.tsx b/src/buttonControl.tsx
new file mode 100644
index 0000000..7802cf8
--- /dev/null
+++ b/src/buttonControl.tsx
@@ -0,0 +1,29 @@
+import L from "leaflet";
+import { DOMCreateElement } from "./jsxDomCreateElement";
+
+type ButtonControlConstructorOptions = {
+	text?: string,
+	position?: L.ControlPosition,
+	onClick?: () => void,
+}
+
+export class ButtonControl extends L.Control {
+	text = '';
+	onClick: (() => void) | undefined;
+
+	constructor({ text, position, onClick }: ButtonControlConstructorOptions = {}) {
+		super({ position: position ?? 'bottomright' });
+		this.onClick = onClick;
+		if (text) {
+			this.text = text;
+		}
+	}
+
+	getContainer(): HTMLElement {
+		const button: HTMLButtonElement = (
+			<button>{this.text}</button>
+		);
+		button.addEventListener('click', this.onClick);
+		return button;
+	}
+}
diff --git a/src/jsxDomCreateElement.ts b/src/jsxDomCreateElement.ts
new file mode 100644
index 0000000..7013ea3
--- /dev/null
+++ b/src/jsxDomCreateElement.ts
@@ -0,0 +1,30 @@
+function DOMParseElement(
+	element: string,
+	properties: { [k: string]: any } | null,
+	children: Array<Node | string>): HTMLElement {
+	const el = document.createElement(element);
+	if (properties) {
+		Object.keys(properties).forEach(k => {
+			el[k] = properties[k];
+		});
+	}
+	children.map(c => typeof c === 'string' ? document.createTextNode(c) : c).forEach(c => {
+		el.appendChild(c);
+	});
+	return el;
+}
+
+export function DOMCreateElement(
+	element: ((...args: unknown[]) => HTMLElement) | string,
+	properties: { [k: string]: any } | null,
+	...children: Array<Node | string>): HTMLElement {
+	if (typeof element === 'function') {
+		return element({
+			...(properties ? properties : {}),
+			children
+		});
+	}
+	else {
+		return DOMParseElement(element, properties, children);
+	}
+}
diff --git a/tsconfig.json b/tsconfig.json
index eeaebea..1db11d6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,6 +4,8 @@
   "include": ["src/**/*"],
   "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
   "compilerOptions": {
+    "jsx": "react",
+    "jsxFactory": "DOMCreateElement",
     "sourceMap": true
   }
 }
\ No newline at end of file