Respect dynmap showlayercontrol setting

src/api.ts

@@ -51,11 +51,11 @@ function buildServerConfig(response: any): DynmapServerConfig {
 		followMap: response.followmap || undefined,
 		followZoom: response.followzoom || 0,
 		updateInterval: response.updaterate || 3000,
-		showLayerControl: response.showlayercontrol || true,
+		showLayerControl: response.showlayercontrol && response.showlayercontrol !== 'false', //Sent as a string for some reason
 		title: response.title.replace(titleColours, '') || 'Dynmap',
 		loginEnabled: response['login-enabled'] || false,
 		maxPlayers: response.maxcount || 0,
-		expandUI: response.sidebaropened && response.sidebaropened !== 'false',
+		expandUI: response.sidebaropened && response.sidebaropened !== 'false', //Sent as a string for some reason
 		hash: response.confighash || 0,
 	};
 }

src/components/Map.vue

@@ -187,7 +187,6 @@ export default defineComponent({
 			fadeAnimation: false,
 			zoomAnimation: true,
 			zoomControl: true,
-			layerControl: true,
 			preferCanvas: true,
 			attributionControl: false,
 			crs: CRS.Simple,

src/leaflet/DynmapMap.ts

@@ -17,20 +17,16 @@
 import {Map, DomUtil, MapOptions} from 'leaflet';
 import LayerManager from "@/leaflet/layer/LayerManager";
 
-interface DynmapMapOptions extends MapOptions {
-	layerControl: boolean;
-}
-
 export default class DynmapMap extends Map {
 	private readonly _layerManager: LayerManager;
 	private _controlCorners: any;
 	private	_controlContainer?: HTMLElement;
 	private	_container?: HTMLElement;
 
-	constructor(element: string | HTMLElement, options?: DynmapMapOptions) {
+	constructor(element: string | HTMLElement, options?: MapOptions) {
 		super(element, options);
 
-		this._layerManager = Object.seal(new LayerManager(this, options?.layerControl));
+		this._layerManager = Object.seal(new LayerManager(this));
 	}
 
 	getLayerManager(): LayerManager {

src/leaflet/layer/LayerManager.ts

@@ -16,22 +16,35 @@
 
 import {Map, Layer} from 'leaflet';
 import {DynmapLayerControl} from "@/leaflet/control/DynmapLayerControl";
+import {watch} from "vue";
+import {useStore} from "@/store";
+import {computed} from "@vue/runtime-core";
 
 export default class LayerManager {
-	private showControl: boolean = false;
 	private readonly layerControl: DynmapLayerControl;
 	private readonly map: Map;
 
-	constructor(map: Map, showControl?: boolean) {
+	constructor(map: Map) {
-		this.showControl = showControl || this.showControl;
+		const showControl = computed(() => useStore().state.configuration.showLayerControl);
 		this.map = map;
 		this.layerControl = new DynmapLayerControl({}, {},{
 			position: 'topleft',
 		});
 
-		if(this.showControl) {
+		if(showControl.value) {
+			console.log('adding');
 			this.map.addControl(this.layerControl);
 		}
+
+		watch(showControl, (show) => {
+			if(show) {
+				console.log('adding 2');
+				this.map.addControl(this.layerControl);
+			} else {
+				console.log('removing');
+				this.map.removeControl(this.layerControl);
+			}
+		})
 	}
 
 	addLayer(layer: Layer, showInControl: boolean, name: string, position: number) {

src/scss/leaflet/_controls.scss

@@ -208,6 +208,11 @@
 		}
 	}
 
+	/* Always show below other controls */
+	.leaflet-control-loading {
+		order: 3;
+	}
+
 	.leaflet-bar {
 		flex-direction: column;
 

src/store/state.ts

@@ -83,7 +83,7 @@ export const state: State = {
 		followMap: '',
 		followZoom: 0,
 		updateInterval: 3000,
-		showLayerControl: true,
+		showLayerControl: false,
 		title: '',
 		loginEnabled: false,
 		maxPlayers: 0,