Fixed access token stuff

.gitignore

@@ -4,3 +4,5 @@
 .DS_Store
 
 .vscode
+
+yarn-error.log

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);
 			}
 		}
 	}

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;
+	}
+}

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);
+	}
+}

tsconfig.json

@@ -4,6 +4,8 @@
   "include": ["src/**/*"],
   "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
   "compilerOptions": {
+    "jsx": "react",
+    "jsxFactory": "DOMCreateElement",
     "sourceMap": true
   }
 }