Customisable Layers button title

index.html

@@ -109,7 +109,8 @@
                 contextMenuCopyLink: 'Copy link to here',
                 contextMenuCenterHere: 'Center here',
                 toggleTitle: 'Click to toggle this section',
-                mapTitle: 'Map - Use the arrow keys to pan the map'
+                mapTitle: 'Map - Use the arrow keys to pan the map',
+                layersTitle: 'Layers',
             }
         };
     </script>

src/api.ts

@@ -97,6 +97,7 @@ function buildMessagesConfig(response: any): LiveAtlasMessageConfig {
 		contextMenuCenterHere: liveAtlasMessages.contextMenuCenterHere || '',
 		toggleTitle: liveAtlasMessages.toggleTitle || '',
 		mapTitle: liveAtlasMessages.mapTitle || '',
+		layersTitle: liveAtlasMessages.layersTitle || '',
 	}
 }
 

src/index.d.ts

@@ -58,6 +58,7 @@ interface LiveAtlasMessageConfig {
 	contextMenuCenterHere: string;
 	toggleTitle: string;
 	mapTitle: string;
+	layersTitle: string;
 }
 
 export type LiveAtlasUIElement = 'layers' | 'chat' | 'players' | 'maps' | 'settings';

src/leaflet/control/DynmapLayerControl.ts

@@ -94,7 +94,7 @@ export class DynmapLayerControl extends Control.Layers {
 
 		section.style.display = 'none';
 
-		button.title = 'Layers';
+		button.title = store.state.messages.layersTitle;
 		button.setAttribute('aria-expanded', 'false');
 		button.innerHTML = `
 			<svg class="svg-icon" aria-hidden="true">
@@ -114,6 +114,8 @@ export class DynmapLayerControl extends Control.Layers {
 			this.visible = store.state.ui.visibleElements.has('layers');
 		});
 
+		watch(store.state.messages, (newValue) => (button.title = newValue.layersTitle));//
+
 		this.visible = store.state.ui.visibleElements.has('layers');
 
 		if (this.visible) {

src/store/state.ts

@@ -132,6 +132,7 @@ export const state: State = {
 		contextMenuCenterHere: '',
 		toggleTitle: '',
 		mapTitle: '',
+		layersTitle: '',
 	},
 
 	loggedIn: false,