Layer control styling

src/leaflet/control/DynmapLayerControl.ts

@@ -1,10 +1,17 @@
-import {Control, Map} from 'leaflet';
+import {Util, Control, DomEvent, LeafletEvent, Map} from 'leaflet';
 import layers from '@/assets/icons/layers.svg';
 import LayersObject = Control.LayersObject;
 import LayersOptions = Control.LayersOptions;
+import Layers = Control.Layers;
+
+import checkbox from '@/assets/icons/checkbox.svg';
 
 export class DynmapLayerControl extends Control.Layers {
 	private _layersLink?: HTMLElement;
+	private _map ?: Map;
+	private _overlaysList?: HTMLElement;
+	private _baseLayersList?: HTMLElement;
+	private _layerControlInputs?: HTMLElement[];
 
 	constructor(baseLayers?: LayersObject, overlays?: LayersObject, options?: LayersOptions) {
 		super(baseLayers, overlays, options);
@@ -21,4 +28,45 @@ export class DynmapLayerControl extends Control.Layers {
 
 		return element;
 	}
+
+	_addItem(obj: any) {
+		const container = obj.overlay ? this._overlaysList : this._baseLayersList,
+			item = document.createElement('label'),
+			label = document.createElement('span'),
+			checked = this._map!.hasLayer(obj.layer);
+
+		let input;
+
+		item.className = 'layer checkbox';
+
+		if (obj.overlay) {
+			input = document.createElement('input');
+			input.type = 'checkbox';
+			input.className = 'leaflet-control-layers-selector';
+			input.defaultChecked = checked;
+		} else {
+			// @ts-ignore
+			input = Layers.prototype._createRadioElement.call(this, 'leaflet-base-layers_' + Util.stamp(this), checked);
+		}
+
+		input.layerId = Util.stamp(obj.layer);
+		this._layerControlInputs!.push(input);
+		label.textContent = obj.name;
+
+		// @ts-ignore
+		DomEvent.on(input, 'click', (e: LeafletEvent) => Layers.prototype._onInputClick.call(this, e), this);
+
+		item.appendChild(input);
+		item.insertAdjacentHTML('beforeend',  `
+		<svg class="svg-icon" viewBox="${checkbox.viewBox}" aria-hidden="true">
+	  		<use xlink:href="${checkbox.url}" />
+		</svg>`);
+		item.appendChild(label);
+
+		container!.appendChild(item);
+
+		// @ts-ignore
+		Layers.prototype._checkDisabledLayers.call(this);
+		return label;
+	}
 }

src/scss/leaflet/_controls.scss

@@ -87,8 +87,22 @@
 }
 
 .leaflet-control-layers {
-	width: 5rem;
+	width: auto;
 	border: none;
+	color: $global-text-color;
+
+	&.leaflet-control-layers-expanded {
+		padding: 0;
+	}
+
+	.leaflet-control-layers-list {
+		padding: 0.7rem 1.5rem;
+
+		.layer {
+			cursor: pointer;
+			padding: 0.8rem 0 0.7rem;
+		}
+	}
 }
 
 .leaflet-control-logo {
@@ -171,11 +185,6 @@
 	}
 }
 
-.leaflet-control-layers-toggle {
-	width: 5rem;
-	height: 5rem;
-}
-
 .leaflet-control-loading {
 	cursor: wait;
 	animation: fade 0.3s linear;

src/scss/style.scss

@@ -100,6 +100,61 @@ button {
 	@extend %button;
 }
 
+.checkbox {
+	display: flex;
+	position: relative;
+	align-items: center;
+
+	&:before,
+	svg,
+	input[type=checkbox] {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		margin: auto 1rem auto 0;
+	}
+
+	&:before {
+		content: '';
+		width: 2.2rem;
+		height: 2.2rem;
+		border: 0.2rem solid #cccccc;
+		border-radius: 0.3rem;
+		background-color: transparent;
+		box-sizing: border-box;
+		z-index: 0;
+	}
+
+	input[type=checkbox] {
+		width: 2.4rem;
+		height: 2.4rem;
+		opacity: 0;
+		z-index: 2;
+
+		&:checked {
+			& ~ span {
+				color: #cccccc;
+			}
+
+			& + svg {
+				opacity: 1;
+			}
+		}
+	}
+
+	svg {
+		opacity: 0;
+		transition: opacity 0.2s ease-in;
+		z-index: 1;
+	}
+
+	span {
+		color: #aaaaaa;
+		padding-left: 3rem;
+	}
+}
+
 .dynmap {
     height: 100%;
 }