diff --git a/src/assets/icons/layers.svg b/src/assets/icons/layers.svg
new file mode 100644
index 0000000..ee70a94
--- /dev/null
+++ b/src/assets/icons/layers.svg
@@ -0,0 +1,71 @@
+
+
diff --git a/src/assets/images/layers.png b/src/assets/images/layers.png
deleted file mode 100644
index b7b3c59..0000000
Binary files a/src/assets/images/layers.png and /dev/null differ
diff --git a/src/leaflet/control/DynmapLayerControl.ts b/src/leaflet/control/DynmapLayerControl.ts
new file mode 100644
index 0000000..6d8e328
--- /dev/null
+++ b/src/leaflet/control/DynmapLayerControl.ts
@@ -0,0 +1,25 @@
+import L, {Control, ControlOptions} from 'leaflet';
+import {useStore} from "@/store";
+import layers from '@/assets/icons/layers.svg';
+import LayersObject = Control.LayersObject;
+import LayersOptions = Control.LayersOptions;
+
+export class DynmapLayerControl extends L.Control.Layers {
+ private _layersLink?: HTMLElement;
+
+ constructor(baseLayers?: LayersObject, overlays?: LayersObject, options?: LayersOptions) {
+ super(baseLayers, overlays, options);
+ }
+
+ onAdd(map: L.Map) {
+ // @ts-ignore
+ const element = super.onAdd(map);
+
+ this._layersLink!.innerHTML = `
+ `;
+
+ return element;
+ }
+}
diff --git a/src/leaflet/layer/LayerManager.ts b/src/leaflet/layer/LayerManager.ts
index 8892278..d20ec9c 100644
--- a/src/leaflet/layer/LayerManager.ts
+++ b/src/leaflet/layer/LayerManager.ts
@@ -1,14 +1,15 @@
import L from 'leaflet';
+import {DynmapLayerControl} from "@/leaflet/control/DynmapLayerControl";
export default class LayerManager {
private showControl: boolean = false;
- private readonly layerControl: L.Control.Layers;
+ private readonly layerControl: DynmapLayerControl;
private readonly map: L.Map;
constructor(map: L.Map, showControl?: boolean) {
this.showControl = showControl || this.showControl;
this.map = map;
- this.layerControl = new L.Control.Layers({}, {},{
+ this.layerControl = new DynmapLayerControl({}, {},{
position: 'topleft',
});
diff --git a/src/scss/_placeholders.scss b/src/scss/_placeholders.scss
index 2eee5db..71a3927 100644
--- a/src/scss/_placeholders.scss
+++ b/src/scss/_placeholders.scss
@@ -7,6 +7,9 @@
border-radius: $global-border-radius;
cursor: pointer;
display: block;
+ text-align: center;
+ position: relative;
+ transition: color 0.2s ease-in, background-color 0.2s ease-in;
&:hover, &.active {
background-color: #cccccc;
diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss
index 28b1e0a..85769b5 100644
--- a/src/scss/leaflet/_controls.scss
+++ b/src/scss/leaflet/_controls.scss
@@ -28,10 +28,9 @@
}
.leaflet-control-layers-toggle {
+ background-image: none;
width: 5rem;
height: 5rem;
- background-image: url(../assets/images/layers.png);
- background-size: 3.2rem;
}
.leaflet-top {