Upload 118 files

.gitattributes

@@ -33,3 +33,29 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+data.json filter=lfs diff=lfs merge=lfs -text
+static/images/image-1.png filter=lfs diff=lfs merge=lfs -text
+static/images/image-2.png filter=lfs diff=lfs merge=lfs -text
+static/maps/customs-2d.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/customs-3d.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/factory-2d.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/ground-zero-2d.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/ground-zero-3d.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/interchange-2d.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/labs-2d.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/lighthouse-2d-landscape.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/lighthouse-2d.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/lighthouse-3d.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/openworld-2d.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/reserve-2d-tunnels.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/reserve-2d.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/reserve-3d.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/shoreline-2d.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/shoreline-3d.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/streets-2d.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/streets-3d-caches.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/streets-3d-lexos.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/streets-3d.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/woods-2d.jpg filter=lfs diff=lfs merge=lfs -text
+static/maps/woods-3d.jpg filter=lfs diff=lfs merge=lfs -text
+static/test.js filter=lfs diff=lfs merge=lfs -text

data.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ced7c1e4667a83ff39997575c3d7eb28dc3e8bb68fb58f28b0bf53a5f0c9702f
+size 18019170

server.py

@@ -0,0 +1,71 @@
+from fastapi import FastAPI, Request, WebSocket, WebSocketDisconnect
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+import json
+import uvicorn
+
+app = FastAPI()
+
+# Serve static files from the "static" directory
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+# Set up Jinja2 templates
+templates = Jinja2Templates(directory="templates")
+
+with open("data.json", "r", encoding="utf8") as file:
+    maps_data = json.load(file)
+
+
+@app.get("/", response_class=HTMLResponse)
+async def read_index(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request, "maps": maps_data})
+
+
+@app.get("/map/{normalized_name}", response_class=HTMLResponse)
+async def get_map_by_normalized_name(request: Request, normalized_name: str):
+    map_entry = maps_data.get(normalized_name)
+    if map_entry:
+        filtered_maps = [map_entry]
+    else:
+        filtered_maps = []
+    return templates.TemplateResponse("map.html", {"request": request, "maps": filtered_maps})
+
+
+class ConnectionManager:
+    def __init__(self):
+        self.active_connections: list[WebSocket] = []
+
+    async def connect(self, websocket: WebSocket):
+        await websocket.accept()
+        self.active_connections.append(websocket)
+
+    def disconnect(self, websocket: WebSocket):
+        self.active_connections.remove(websocket)
+
+    async def send_personal_message(self, message: str, websocket: WebSocket):
+        await websocket.send_text(message)
+
+    async def broadcast(self, message: str):
+        for connection in self.active_connections:
+            # print(f"Broadcast: {message}")
+            await connection.send_text(message)
+
+
+manager = ConnectionManager()
+
+
+@app.websocket("/{client_id}")
+async def websocket_endpoint(websocket: WebSocket, client_id: int):
+    await manager.connect(websocket)
+    try:
+        while True:
+            data = await websocket.receive_text()
+            await manager.broadcast(data)  # Direktes Broadcasten der Daten
+    except WebSocketDisconnect:
+        manager.disconnect(websocket)
+        await manager.broadcast(f"Client #{client_id} left the chat")
+
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=8000)

static/audio.html

@@ -0,0 +1,103 @@
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>A.I. Songs</title>
+		<link rel="stylesheet" href="/static/css/bulma.min.css" />
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css" />
+		<style>
+			.card {
+				/*overflow: hidden;*/
+                position: relative;
+			}
+			.card .card-image {
+                position: relative;
+				aspect-ratio: 1 / 1;
+				background-size: cover;
+				background-position: center;
+				background-size: 100%;
+				transition: background 0.4s ease-in-out;
+			}
+            .card .card-image-2 {
+                top: -40px;
+                left: -40px;
+                opacity: 0;
+                filter: blur(80px);
+                position: absolute;
+                width: calc(100% + 80px);
+                aspect-ratio: 1/1;                
+                z-Index: -10;
+				transition: background 0.4s ease-in-out, filter 0.4s ease-out, opacity 0.4s ease-out;
+            }
+
+			.card:hover .card-image {
+				background-size: 110%;
+			}
+			.card:hover .card-image-2 {
+				background-size: 110%;
+                opacity: 0.2;
+			}
+            
+		</style>
+		<script>
+			function copyURL(url) {
+				const encodedURL = encodeURI(url)
+				navigator.clipboard.writeText(encodedURL).then(() => {
+					alert("URL copied to clipboard!")
+				})
+			}
+		</script>
+	</head>
+	<body data-theme="dark">
+		<section class="section">
+			<div class="container">
+				<h1 class="title">Hier eine Quelle für (bald) alle von meinen A.I. Songs.</h1>
+				<p class="subtitle">Bisher noch alles unsortiert und nicht <strong>Schön</strong>!</p>
+
+				<div class="columns is-multiline">
+					<div class="column is-two-fifths">
+						<div class="card">
+							<div class="card-image" style="background-image: url(/static/images/image-2.png);"></div>
+                            <div class="card-image-2" style="background-image: url(/static/images/image-2.png);"></div>
+							<div class="card-content">
+								<div class="media">
+									<div class="media-content">
+										<p class="title is-4">Ein neuer Zyklus (2025) (ist nur Computer-Code)</p>
+									</div>
+								</div>
+								<div class="content">
+									<p><strong>Genre:</strong> Blues, Soul</p>
+									<p><strong>Duration:</strong> 8:49</p>
+									<a class="button is-small is-primary" href="http://sebastiankay-files.hf.space/getfile/Ein neuer Zyklus (2025) (ist nur Computer-Code)(320k).mp3">Download</a>
+									<button class="button is-small" onclick="copyURL('http://sebastiankay-files.hf.space/getfile/Ein neuer Zyklus (2025) (ist nur Computer-Code)(320k).mp3')">Copy URL</button>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="column is-two-fifths">
+						<div class="card">
+							<div class="card-image" style="background-image: url(/static/images/image-1.png);"></div>
+                            <div class="card-image-2" style="background-image: url(/static/images/image-1.png);"></div>
+							<div class="card-content">
+								<div class="media">
+									<div class="media-content">
+										<p class="title is-4">Marco, König von Hagen (Finale Master)</p>
+									</div>
+								</div>
+								<div class="content">
+									<p><strong>Genre:</strong> Gregorian Chant, Techno, Trance</p>
+									<p><strong>Duration:</strong> 5:49</p>
+									<a class="button is-small is-primary" href="http://sebastiankay-files.hf.space/getfile/Marco, König von Hagen Finale (Master Full).wav">Download</a>
+									<button class="button is-small" onclick="copyURL('http://sebastiankay-files.hf.space/getfile/Marco, König von Hagen Finale (Master Full).wav')">Copy URL</button>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					</div>
+				</div>
+			</div>
+		</section>
+	</body>
+</html>

static/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FastAPI Maps</title>
+</head>
+<body>
+    <h1>Maps Data</h1>
+    <ul>
+        {% for map in maps %}
+            <li>{{ map.normalizedName }}</li>
+        {% endfor %}
+    </ul>
+</body>
+</html>

static/js/leaflet-control-raid-info.js

@@ -0,0 +1,63 @@
+import L from 'leaflet';
+
+import { formattedTarkovTime } from '../components/Time.jsx';
+
+let updateTimeInterval = false;
+
+L.Control.RaidInfo = L.Control.extend({
+    onAdd: function(map) {
+        clearInterval(updateTimeInterval);
+        const wrapper = L.DomUtil.create('div');
+        wrapper.classList.add('time-wrapper', 'leaflet-control-raid-info');
+        if (this.options.map.normalizedName !== 'the-lab') {
+            const timeLeftDiv = L.DomUtil.create('div');
+            const timeRightDiv = L.DomUtil.create('div');
+
+            if (this.options.map.normalizedName === 'factory' || this.options.map.normalizedName === 'night-factory') {
+                timeLeftDiv.innerText = '15:28:00';
+                timeRightDiv.innerText = '03:28:00';
+            } else {
+                const updateTimes = () => {
+                    timeLeftDiv.innerText = formattedTarkovTime(true);
+                    timeRightDiv.innerText = formattedTarkovTime(false);
+                };
+                updateTimeInterval = setInterval(updateTimes, 50);
+            }
+    
+            wrapper.append(timeLeftDiv);
+            wrapper.append(timeRightDiv);
+        }
+        const duration = L.DomUtil.create('div');
+        const durLabel = this.options.durationLabel ? this.options.durationLabel : 'Duration';
+        duration.innerText = `${durLabel}: ${this.options.map.duration}`;
+        wrapper.append(duration);
+
+        const players = L.DomUtil.create('div');
+        const playersLabel = this.options.playersLabel ? this.options.playersLabel : 'Players';
+        players.innerText = `${playersLabel}: ${this.options.map.players}`;
+        wrapper.append(players);
+
+        if (this.options.map.author) {
+            const author = L.DomUtil.create('div');
+            const byLabel = this.options.byLabel ? this.options.byLabel : 'By';
+            author.innerText = `${byLabel}: `;
+            const authorLink = L.DomUtil.create('a');
+            authorLink.setAttribute('href', this.options.map.authorLink);
+            authorLink.setAttribute('target', '_blank');
+            authorLink.setAttribute('re', 'noopener noreferrer');
+            authorLink.innerText = this.options.map.author;
+            author.append(authorLink);
+            wrapper.append(author);
+        }
+
+        return wrapper;
+    },
+
+    onRemove: function(map) {
+        // Nothing to do here
+    }
+});
+
+L.control.raidInfo = function(opts) {
+    return new L.Control.RaidInfo(opts);
+}

static/js/leaflet.controlCoordinates.js

@@ -0,0 +1,356 @@
+/*
+ * L.Control.Coordinates is used for displaying current mouse coordinates on the map.
+ */
+
+// credit https://github.com/Low-power/Leaflet.Coordinates/tree/wrap-coordinate-option
+
+// import L from 'leaflet';
+
+L.Control.Coordinates = L.Control.extend({
+	options: {
+		position: 'bottomright',
+		//decimals used if not using DMS or labelFormatter functions
+		decimals: 4,
+		//decimalseperator used if not using DMS or labelFormatter functions
+		decimalSeperator: ".",
+		//label templates for usage if no labelFormatter function is defined
+		labelTemplateLat: "Lat: {y}",
+		labelTemplateLng: "Lng: {x}",
+		//label formatter functions
+		labelFormatterLat: undefined,
+		labelFormatterLng: undefined,
+		//switch on/off input fields on click
+		enableUserInput: true,
+		//use Degree-Minute-Second
+		useDMS: false,
+		//should coordinate be wrapped as on earth
+		wrapCoordinate: true,
+		//if true lat-lng instead of lng-lat label ordering is used
+		useLatLngOrder: false,
+		//if true user given coordinates are centered directly
+		centerUserCoordinates: false,
+		//leaflet marker type
+		markerType: L.marker,
+		//leaflet marker properties
+		markerProps: {}
+	},
+
+	onAdd: function(map) {
+		this._map = map;
+
+		var className = 'leaflet-control-coordinates',
+			container = this._container = L.DomUtil.create('div', className),
+			options = this.options;
+
+		//label containers
+		this._labelcontainer = L.DomUtil.create("div", "uiElement label", container);
+		this._label = L.DomUtil.create("span", "labelFirst", this._labelcontainer);
+
+
+		//input containers
+		this._inputcontainer = L.DomUtil.create("div", "uiElement input uiHidden", container);
+		var xSpan, ySpan;
+		if (options.useLatLngOrder) {
+			ySpan = L.DomUtil.create("span", "", this._inputcontainer);
+			this._inputY = this._createInput("inputY", this._inputcontainer);
+			xSpan = L.DomUtil.create("span", "", this._inputcontainer);
+			this._inputX = this._createInput("inputX", this._inputcontainer);
+		} else {
+			xSpan = L.DomUtil.create("span", "", this._inputcontainer);
+			this._inputX = this._createInput("inputX", this._inputcontainer);
+			ySpan = L.DomUtil.create("span", "", this._inputcontainer);
+			this._inputY = this._createInput("inputY", this._inputcontainer);
+		}
+		xSpan.innerHTML = options.labelTemplateLng.replace("{x}", "");
+		ySpan.innerHTML = options.labelTemplateLat.replace("{y}", "");
+
+		L.DomEvent.on(this._inputX, 'keyup', this._handleKeypress, this);
+		L.DomEvent.on(this._inputY, 'keyup', this._handleKeypress, this);
+
+		//connect to mouseevents
+		map.on("mousemove", this._update, this);
+		map.on('dragstart', this.collapse, this);
+
+		map.whenReady(this._update, this);
+
+		this._showsCoordinates = true;
+		//wether or not to show inputs on click
+		if (options.enableUserInput) {
+			L.DomEvent.addListener(this._container, "click", this._switchUI, this);
+		}
+
+		return container;
+	},
+
+	/**
+	 *	Creates an input HTML element in given container with given classname
+	 */
+	_createInput: function(classname, container) {
+		var input = L.DomUtil.create("input", classname, container);
+		input.type = "text";
+		L.DomEvent.disableClickPropagation(input);
+		return input;
+	},
+
+	_clearMarker: function() {
+		this._map.removeLayer(this._marker);
+	},
+
+	/**
+	 *	Called onkeyup of input fields
+	 */
+	_handleKeypress: function(e) {
+		switch (e.keyCode) {
+			case 27: //Esc
+				this.collapse();
+				break;
+			case 13: //Enter
+				this._handleSubmit();
+				this.collapse();
+				break;
+			default: //All keys
+				this._handleSubmit();
+				break;
+		}
+	},
+
+	/**
+	 *	Called on each keyup except ESC
+	 */
+	_handleSubmit: function() {
+		var x = L.NumberFormatter.createValidNumber(this._inputX.value, this.options.decimalSeperator);
+		var y = L.NumberFormatter.createValidNumber(this._inputY.value, this.options.decimalSeperator);
+		if (x !== undefined && y !== undefined) {
+			var marker = this._marker;
+			if (!marker) {
+				marker = this._marker = this._createNewMarker();
+				marker.on("click", this._clearMarker, this);
+			}
+			var ll = new L.LatLng(y, x);
+			marker.setLatLng(ll);
+			marker.addTo(this._map);
+			if (this.options.centerUserCoordinates) {
+				this._map.setView(ll, this._map.getZoom());
+			}
+		}
+	},
+
+	/**
+	 *	Shows inputs fields
+	 */
+	expand: function() {
+		this._showsCoordinates = false;
+
+		this._map.off("mousemove", this._update, this);
+
+		L.DomEvent.addListener(this._container, "mousemove", L.DomEvent.stop);
+		L.DomEvent.removeListener(this._container, "click", this._switchUI, this);
+
+		L.DomUtil.addClass(this._labelcontainer, "uiHidden");
+		L.DomUtil.removeClass(this._inputcontainer, "uiHidden");
+	},
+
+	/**
+	 *	Creates the label according to given options and formatters
+	 */
+	_createCoordinateLabel: function(ll) {
+		var opts = this.options,
+			x, y;
+		if (opts.customLabelFcn) {
+			return opts.customLabelFcn(ll, opts);
+		}
+		if (opts.labelFormatterLng) {
+			x = opts.labelFormatterLng(ll.lng);
+		} else {
+			x = L.Util.template(opts.labelTemplateLng, {
+				x: this._getNumber(ll.lng, opts)
+			});
+		}
+		if (opts.labelFormatterLat) {
+			y = opts.labelFormatterLat(ll.lat);
+		} else {
+			y = L.Util.template(opts.labelTemplateLat, {
+				y: this._getNumber(ll.lat, opts)
+			});
+		}
+		if (opts.useLatLngOrder) {
+			return y + " " + x;
+		}
+		return x + " " + y;
+	},
+
+	/**
+	 *	Returns a Number according to options (DMS or decimal)
+	 */
+	_getNumber: function(n, opts) {
+		var res;
+		if (opts.useDMS) {
+			res = L.NumberFormatter.toDMS(n);
+		} else {
+			res = L.NumberFormatter.round(n, opts.decimals, opts.decimalSeperator);
+		}
+		return res;
+	},
+
+	/**
+	 *	Shows coordinate labels after user input has ended. Also
+	 *	displays a marker with popup at the last input position.
+	 */
+	collapse: function() {
+		if (!this._showsCoordinates) {
+			this._map.on("mousemove", this._update, this);
+			this._showsCoordinates = true;
+			//var opts = this.options;
+			L.DomEvent.addListener(this._container, "click", this._switchUI, this);
+			L.DomEvent.removeListener(this._container, "mousemove", L.DomEvent.stop);
+
+			L.DomUtil.addClass(this._inputcontainer, "uiHidden");
+			L.DomUtil.removeClass(this._labelcontainer, "uiHidden");
+
+			if (this._marker) {
+				var m = this._createNewMarker(),
+					ll = this._marker.getLatLng();
+				m.setLatLng(ll);
+
+				var container = L.DomUtil.create("div", "");
+				var label = L.DomUtil.create("div", "", container);
+				label.innerHTML = this._ordinateLabel(ll);
+
+				var close = L.DomUtil.create("a", "", container);
+				close.innerHTML = "Remove";
+				close.href = "#";
+				var stop = L.DomEvent.stopPropagation;
+
+				L.DomEvent
+					.on(close, 'click', stop)
+					.on(close, 'mousedown', stop)
+					.on(close, 'dblclick', stop)
+					.on(close, 'click', L.DomEvent.preventDefault)
+					.on(close, 'click', function() {
+						this._map.removeLayer(m);
+					}, this);
+
+				m.bindPopup(container);
+				m.addTo(this._map);
+				this._map.removeLayer(this._marker);
+				this._marker = null;
+			}
+		}
+	},
+
+	/**
+	 *	Click callback for UI
+	 */
+	_switchUI: function(evt) {
+		L.DomEvent.stop(evt);
+		L.DomEvent.stopPropagation(evt);
+		L.DomEvent.preventDefault(evt);
+		if (this._showsCoordinates) {
+			//show textfields
+			this.expand();
+		} else {
+			//show coordinates
+			this.collapse();
+		}
+	},
+
+	onRemove: function(map) {
+		map.off("mousemove", this._update, this);
+	},
+
+	/**
+	 *	Mousemove callback function updating labels and input elements
+	 */
+	_update: function(evt) {
+		var pos = evt.latlng;
+		if (pos) {
+			var opts = this.options;
+			if(opts.wrapCoordinate || opts.useDMS) {
+				pos = pos.wrap();
+			}
+			this._currentPos = pos;
+			this._inputY.value = L.NumberFormatter.round(pos.lat, opts.decimals, opts.decimalSeperator);
+			this._inputX.value = L.NumberFormatter.round(pos.lng, opts.decimals, opts.decimalSeperator);
+			this._label.innerHTML = this._createCoordinateLabel(pos);
+		}
+	},
+
+	_createNewMarker: function() {
+		return this.options.markerType(null, this.options.markerProps);
+	}
+
+});
+
+//constructor registration
+L.control.coordinates = function(options) {
+	return new L.Control.Coordinates(options);
+};
+
+//map init hook
+L.Map.mergeOptions({
+	coordinateControl: false
+});
+
+L.Map.addInitHook(function() {
+	if (this.options.coordinateControl) {
+		this.coordinateControl = new L.Control.Coordinates();
+		this.addControl(this.coordinateControl);
+	}
+});
+L.NumberFormatter = {
+	round: function(num, dec, sep) {
+		var res = L.Util.formatNum(num, dec) + "",
+			numbers = res.split(".");
+		if (numbers[1]) {
+			var d = dec - numbers[1].length;
+			for (; d > 0; d--) {
+				numbers[1] += "0";
+			}
+			res = numbers.join(sep || ".");
+		}
+		return res;
+	},
+
+	toDMS: function(deg) {
+		var d = Math.floor(Math.abs(deg));
+		var minfloat = (Math.abs(deg) - d) * 60;
+		var m = Math.floor(minfloat);
+		var secfloat = (minfloat - m) * 60;
+		var s = Math.round(secfloat);
+		if (s === 60) {
+			m++;
+			s = "00";
+		}
+		if (m === 60) {
+			d++;
+			m = "00";
+		}
+		if (s < 10) {
+			s = "0" + s;
+		}
+		if (m < 10) {
+			m = "0" + m;
+		}
+		var dir = "";
+		if (deg < 0) {
+			dir = "-";
+		}
+		return ("" + dir + d + "&deg; " + m + "' " + s + "''");
+	},
+
+	createValidNumber: function(num, sep) {
+		if (num && num.length > 0) {
+			var numbers = num.split(sep || ".");
+			try {
+				var numRes = Number(numbers.join("."));
+				if (isNaN(numRes)) {
+					return undefined;
+				}
+				return numRes;
+			} catch (e) {
+				return undefined;
+			}
+		}
+		return undefined;
+	}
+};

static/js/leaflet.controlGroupedlayer.js

@@ -0,0 +1,572 @@
+/* global L */
+
+let controlContainer;
+
+// A layer control which provides for layer groupings.
+// Author: Ishmael Smyrnow
+L.Control.GroupedLayers = L.Control.extend({
+    options: {
+        sortLayers: true,
+        sortGroups: true,
+        sortBaseLayers: false,
+        collapsed: true,
+        position: 'topright',
+        autoZIndex: true,
+        exclusiveGroups: [],
+        exclusiveOptionalGroups: [],
+        groupCheckboxes: false,
+        groupsCollapsable: false,
+        groupsExpandedClass: "leaflet-control-layers-group-collapse-default",
+        groupsCollapsedClass: "leaflet-control-layers-group-expand-default",
+        sortFunction: function (nameA, nameB) {
+            return nameA.localeCompare(nameB);
+        }
+    },
+  
+    initialize: function (baseLayers, groupedOverlays, options) {
+        var i, j;
+        L.Util.setOptions(this, options);
+    
+        this._layers = [];
+        this._lastZIndex = 0;
+        this._handlingClick = false;
+        this._groupList = [];
+        this._domGroups = [];
+    
+        for (i in baseLayers) {
+            this._addLayer(baseLayers[i], i);
+        }
+    
+        for (i in groupedOverlays) {
+            for (j in groupedOverlays[i]) {
+                this._addLayer(groupedOverlays[i][j], j, i, true);
+            }
+        }
+    },
+  
+    onAdd: function (map) {
+      this._initLayout();
+      this._update();
+  
+      map
+          .on('layeradd', this._onLayerChange, this)
+          .on('layerremove', this._onLayerChange, this);
+  
+      return this._container;
+    },
+  
+    addTo: function (map) {
+        L.Control.prototype.addTo.call(this, map);
+        // Trigger expand after Layers Control has been inserted into DOM so that is now has an actual height.
+        return this._expandIfNotCollapsed();
+      },
+  
+    onRemove: function (map) {
+        map
+            .off('layeradd', this._onLayerChange, this)
+            .off('layerremove', this._onLayerChange, this);
+    },
+  
+    addBaseLayer: function (layer, name) {
+        this._addLayer(layer, name);
+        this._update();
+        return this;
+    },
+  
+    addOverlay: function (layer, name, options) {
+        this._addLayer(layer, name, {...options, overlay: true});
+        this._update();
+        return this;
+    },
+  
+    removeLayer: function (layer) {
+        var id = L.Util.stamp(layer);
+        var _layer = this._getLayer(id);
+        if (_layer) {
+            this._layers.splice(this._layers.indexOf(_layer), 1);
+        }
+        this._update();
+        return this;
+    },
+  
+    _getLayer: function (id) {
+        for (var layer of this._layers) {
+            if (layer && L.stamp(layer.layer) === id) {
+                return layer;
+            }
+        }
+    },
+  
+    _initLayout: function () {
+        var className = 'leaflet-control-layers',
+            container = this._container = L.DomUtil.create('div', className),
+            collapsed = this.options.collapsed;
+        
+        // Makes this work on IE10 Touch devices by stopping it from firing a mouseout event when the touch is released
+        container.setAttribute('aria-haspopup', true);
+    
+        L.DomEvent.disableClickPropagation(container);
+        L.DomEvent.disableScrollPropagation(container);
+    
+        var form = this._form = L.DomUtil.create('form', className + '-list');
+    
+        if (collapsed) {
+            this._map.on('click', this._collapse, this);  
+    
+            if (!L.Browser.android) {
+                L.DomEvent.on(container, {
+                    mouseenter: this._expand,
+                    mouseleave: this._collapse
+                }, this);
+            }
+        }
+    
+        var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container);
+        link.href = '#';
+        link.title = 'Layers';
+    
+        if (L.Browser.touch) {
+            L.DomEvent.on(link, 'click', L.DomEvent.stop);
+            L.DomEvent.on(link, 'click', this._expand, this);
+        } else {
+            L.DomEvent.on(link, 'focus', this._expand, this);
+        }
+    
+        if (!collapsed) {
+            this._expand();
+        }
+    
+        this._baseLayersList = L.DomUtil.create('div', className + '-base', form);
+        this._separator = L.DomUtil.create('div', className + '-separator', form);
+        this._overlaysList = L.DomUtil.create('div', className + '-overlays', form);
+    
+        container.appendChild(form);
+
+        controlContainer = container;
+    },
+  
+    _addLayer: function (layer, name, options) {
+        options = {...options};
+        if (options.image) {
+			//console.log(options)
+            name = `<img src="/static/maps/interactive/${layer.key}.png" class='control-item-image' /> ${name}`;
+        }
+
+        var _layer = {
+            layer: layer,
+            name: name,
+            overlay: options.overlay,
+            key: options.layerKey,
+        };
+        this._layers.push(_layer);
+    
+        const group = options.groupName || '';
+        var groupId = this._indexOf(this._groupList, group);
+    
+        if (groupId === -1) {
+            groupId = this._groupList.push(group) - 1;
+        }
+    
+        var exclusive = (this._indexOf(this.options.exclusiveGroups, group) !== -1);
+        var exclusiveOptional = (this._indexOf(this.options.exclusiveOptionalGroups, group) !== -1);
+    
+        _layer.group = {
+            name: group,
+            id: groupId,
+            exclusive: exclusive,
+            exclusiveOptional: exclusiveOptional,
+            key: options.groupKey,
+            collapsed: options.groupCollapsed,
+        };
+    
+        if (this.options.autoZIndex && layer.setZIndex) {
+            this._lastZIndex++;
+            layer.setZIndex(this._lastZIndex);
+        }
+    
+        if (this.options.sortLayers) {
+            this._layers.sort(L.bind(function (a, b) {
+            if (a.overlay === true && b.overlay === true) {
+                return this.options.sortFunction(a.name, b.name);
+            }
+            }, this));
+        }
+    
+        if (this.options.sortBaseLayers) {
+            this._layers.sort(L.bind(function (a, b) {
+            if (a.overlay === undefined && b.overlay === undefined) {
+                return this.options.sortFunction(a.name, b.name);
+            }
+            }, this));
+        }
+    
+        if (this.options.sortGroups) {
+            this._layers.sort(L.bind(function (a, b) {
+                if (a.group.exclusiveOptional && !b.group.exclusiveOptional) {
+                    return -1;
+                }
+                if (!a.group.exclusiveOptional && b.group.exclusiveOptional) {
+                    return 1;
+                }
+                return this.options.sortFunction(a.group.name, b.group.name);
+            }, this));
+        }
+    
+        this._expandIfNotCollapsed();
+    },
+  
+    _update: function () {
+        if (!this._container) {
+            return;
+        }
+    
+        this._baseLayersList.innerHTML = '';
+        this._overlaysList.innerHTML = '';
+        this._domGroups.length = 0;
+    
+        var baseLayersPresent = false,
+            overlaysPresent = false;
+    
+        for (var obj of this._layers) {
+            this._addItem(obj);
+            overlaysPresent = overlaysPresent || obj.overlay;
+            baseLayersPresent = baseLayersPresent || !obj.overlay;
+        }
+    
+        if (this.options.groupCheckboxes) {
+            this._refreshGroupsCheckStates();
+        }
+    
+        this._separator.style.display = overlaysPresent && baseLayersPresent ? '' : 'none';
+    },
+  
+    _onLayerChange: function (e) {
+        var obj = this._getLayer(L.Util.stamp(e.layer)),
+            type;
+    
+        if (!obj) {
+            return;
+        }
+    
+        if (!this._handlingClick) {
+            this._update();
+        }
+    
+        if (obj.overlay) {
+            type = e.type === 'layeradd' ? 'overlayadd' : 'overlayremove';
+        } else {
+            type = e.type === 'layeradd' ? 'baselayerchange' : null;
+        }
+    
+        if (type) {
+            this._map.fire(type, obj);
+        }
+    },
+  
+    _createRadioElement: function (name, checked) {
+        var radio = document.createElement('input');
+        radio.type = 'radio';
+        radio.name = name;
+        radio.className = 'leaflet-control-layers-selector';
+        radio.checked = checked;
+    
+        return radio;
+    },
+
+    _createExclusiveCheckElement: function (name, checked) {
+        var radio = document.createElement('input');
+        radio.type = 'checkbox';
+        radio.name = name;
+        radio.className = `leaflet-control-layers-selector ${name}`;
+        radio.checked = checked;
+        radio.onchange = e => {
+            if (!e.target.checked) {
+                return;
+            }
+            var radios = document.getElementsByClassName(name);
+            for (var r of radios) {
+                if (r === e.target || !r.checked) {
+                    continue;
+                }
+                r.checked = false;
+                this._onInputClick();
+            }
+        };
+    
+        return radio;
+    },
+  
+    _addItem: function (obj) {
+        var label = document.createElement('label'),
+            input,
+            checked = this._map.hasLayer(obj.layer),
+            container,
+            groupRadioName;
+    
+        if (obj.overlay) {
+            if (obj.group.exclusive) {
+                groupRadioName = 'leaflet-exclusive-group-layer-' + obj.group.id;
+                input = this._createRadioElement(groupRadioName, checked);
+            } else if (obj.group.exclusiveOptional) {
+                groupRadioName = 'leaflet-exclusive-group-layer-' + obj.group.id;
+                input = this._createExclusiveCheckElement(groupRadioName, checked);
+            } else {
+                input = document.createElement('input');
+                input.type = 'checkbox';
+                input.className = 'leaflet-control-layers-selector';
+                input.defaultChecked = checked;
+            }
+        } else {
+            input = this._createRadioElement('leaflet-base-layers', checked);
+        }
+    
+        input.layerId = L.Util.stamp(obj.layer);
+        input.groupID = obj.group.id;
+        L.DomEvent.on(input, 'click', this._onInputClick, this);
+        L.DomEvent.on(input, 'click', () => {
+            if (obj.layer.key && !obj.layer.options.overlay) {
+                controlContainer.dispatchEvent(new CustomEvent('layerToggle', {
+                    bubbles: false,
+                    detail: {    
+                        key: obj.layer.key,
+                        checked: input.checked,
+                    },
+                }));
+            } else if (obj.layer.options.overlay) {
+                controlContainer.dispatchEvent(new CustomEvent('overlayToggle', {
+                    bubbles: false,
+                    detail: {    
+                        key: obj.layer.options.name,
+                        checked: input.checked,
+                    },
+                }));
+            }
+        }, this);
+    
+        var name = document.createElement('span');
+        name.innerHTML = ' ' + obj.name;
+    
+        label.appendChild(input);
+        label.appendChild(name);
+    
+        if (obj.overlay) {
+            container = this._overlaysList;
+    
+            var groupContainer = this._domGroups[obj.group.id];
+    
+            // Create the group container if it doesn't exist
+            if (!groupContainer) {
+                groupContainer = document.createElement('div');
+                groupContainer.className = 'leaflet-control-layers-group';
+                groupContainer.id = 'leaflet-control-layers-group-' + obj.group.id;
+                groupContainer.dataset.key = obj.group.key;
+        
+                var groupLabel = document.createElement('label');
+                groupLabel.className = 'leaflet-control-layers-group-label';
+        
+                if (obj.group.name !== '' && !obj.group.exclusive && !obj.group.exclusiveOptional) {
+                    // ------ add a group checkbox with an _onInputClickGroup function
+                    if (this.options.groupCheckboxes) {
+                        var groupInput = document.createElement('input');
+                        groupInput.type = 'checkbox';
+                        groupInput.className = 'leaflet-control-layers-group-selector';
+                        groupInput.groupID = obj.group.id;
+                        groupInput.legend = this;
+                        groupInput.dataset.key = obj.group.key;
+                        L.DomEvent.on(groupInput, 'click', this._onGroupInputClick, groupInput);
+                        groupLabel.appendChild(groupInput);
+                    }
+                }
+        
+                if (this.options.groupsCollapsable){
+                    groupContainer.classList.add("group-collapsable");
+                    if (obj.group.collapsed) {
+                        groupContainer.classList.add("collapsed");
+                    }
+        
+                    var groupMin = document.createElement('span');
+                    groupMin.className = 'leaflet-control-layers-group-collapse '+this.options.groupsExpandedClass;
+                    groupLabel.appendChild(groupMin);
+        
+                    var groupMax = document.createElement('span');
+                    groupMax.className = 'leaflet-control-layers-group-expand '+this.options.groupsCollapsedClass;
+                    groupLabel.appendChild(groupMax);
+        
+                    L.DomEvent.on(groupLabel, 'click', this._onGroupCollapseToggle, groupContainer);
+                }
+        
+                var groupName = document.createElement('span');
+                groupName.className = 'leaflet-control-layers-group-name';
+                groupName.innerHTML = obj.group.name;
+                groupLabel.appendChild(groupName);
+        
+                groupContainer.appendChild(groupLabel);
+                container.appendChild(groupContainer);
+        
+                this._domGroups[obj.group.id] = groupContainer;
+            }
+    
+            container = groupContainer;
+        } else {
+            container = this._baseLayersList;
+        }
+    
+        container.appendChild(label);
+    
+        return label;
+    },
+  
+    _onGroupCollapseToggle: function (event) {
+        L.DomEvent.stopPropagation(event);
+        L.DomEvent.preventDefault(event);
+        if (this.classList.contains("group-collapsable") && this.classList.contains("collapsed")){
+            this.classList.remove("collapsed");
+        } else if (this.classList.contains("group-collapsable") && !this.classList.contains("collapsed")) {
+            this.classList.add("collapsed");
+        }
+        if (this.dataset.key) {
+            controlContainer.dispatchEvent(new CustomEvent('groupCollapseToggle', {
+                bubbles: false,
+                detail: {    
+                    key: this.dataset.key,
+                    collapsed: this.classList.contains("collapsed"),
+                },
+            }));
+        }
+    },
+  
+    _onGroupInputClick: function (event) {
+        L.DomEvent.stopPropagation(event);
+        var obj;
+    
+        var this_legend = this.legend;
+        this_legend._handlingClick = true;
+    
+        var inputs = this_legend._form.getElementsByTagName('input');
+    
+        for (var input of inputs) {
+            if (input.groupID === this.groupID && input.className === 'leaflet-control-layers-selector') {
+                input.checked = this.checked;
+                obj = this_legend._getLayer(input.layerId);
+                if (input.checked && !this_legend._map.hasLayer(obj.layer)) {
+                    this_legend._map.addLayer(obj.layer);
+                } else if (!input.checked && this_legend._map.hasLayer(obj.layer)) {
+                    this_legend._map.removeLayer(obj.layer);
+                }
+            }
+        }
+
+        if (this.dataset.key) {
+            controlContainer.dispatchEvent(new CustomEvent('groupToggle', {
+                bubbles: false,
+                detail: {    
+                    key: this.dataset.key,
+                    checked: this.checked,
+                },
+            }));
+        }
+    
+        this_legend._handlingClick = false;
+    },
+  
+    _onInputClick: function () {
+        var obj,
+        inputs = this._form.getElementsByClassName('leaflet-control-layers-selector'),
+        toBeRemoved,
+        toBeAdded;
+    
+        this._handlingClick = true;
+    
+        for (var input of inputs) {
+            obj = this._getLayer(input.layerId);
+            if (input.checked && !this._map.hasLayer(obj.layer)) {
+                toBeAdded = obj.layer;
+            } else if (!input.checked && this._map.hasLayer(obj.layer)) {
+                toBeRemoved = obj.layer;
+            }
+        }
+    
+        if (toBeRemoved !== undefined) {
+            this._map.removeLayer(toBeRemoved);
+        }
+        if (toBeAdded !== undefined) {
+            this._map.addLayer(toBeAdded);
+        }
+    
+        if (this.options.groupCheckboxes) {
+            this._refreshGroupsCheckStates();
+        }
+    
+        this._handlingClick = false;
+    },
+  
+    _refreshGroupsCheckStates: function () {
+        for (var i = 0; i < this._domGroups.length; i++) {
+            var groupContainer = this._domGroups[i];
+            if (groupContainer) {
+                var groupInput = groupContainer.getElementsByClassName('leaflet-control-layers-group-selector')[0];
+                var groupItemInputs = groupContainer.querySelectorAll('input.leaflet-control-layers-selector');
+                var checkedGroupItemInputs = groupContainer.querySelectorAll('input.leaflet-control-layers-selector:checked');
+        
+                if (groupInput) {
+                    groupInput.indeterminate = false;
+                    if (checkedGroupItemInputs.length === groupItemInputs.length) {
+                        groupInput.checked = true;
+                    } else if (checkedGroupItemInputs.length === 0) {
+                        groupInput.checked = false;
+                    } else {
+                        groupInput.indeterminate = true;
+                    }
+                }
+            }
+        }
+    },
+  
+    _expand: function () {
+        L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
+        this._form.style.height = null;
+        var acceptableHeight = this._map.getSize().y - (this._container.offsetTop + 50);
+        if (acceptableHeight < this._form.clientHeight) {
+            L.DomUtil.addClass(this._form, 'leaflet-control-layers-scrollbar');
+            this._form.style.height = acceptableHeight + 'px';
+        } else {
+            L.DomUtil.removeClass(this._form, 'leaflet-control-layers-scrollbar');
+        }
+    
+        return this;
+    },
+  
+    _expandIfNotCollapsed: function () {
+        if (this._map && !this.options.collapsed) {
+            this._expand();
+        }
+        return this;
+    },
+  
+    _collapse: function () {
+        this._container.className = this._container.className.replace(' leaflet-control-layers-expanded', '');
+    },
+  
+    _indexOf: function (arr, obj) {
+        for (var i = 0, j = arr.length; i < j; i++) {
+            if (arr[i] === obj) {
+                return i;
+            }
+        }
+        return -1;
+    },
+    on: (eventName, handler, options) => {
+        controlContainer.addEventListener(eventName, handler, options);
+    },
+    once: (eventName, handler, options) => {
+        controlContainer.addEventListener(eventName, handler, {...options, once: true});
+    },
+    off: (eventName, handler, options) => {
+        controlContainer.removeEventListener(eventName, handler, options);
+    },
+});
+  
+L.control.groupedLayers = function (baseLayers, groupedOverlays, options) {
+    return new L.Control.GroupedLayers(baseLayers, groupedOverlays, options);
+};
+  

static/leaflet-control-groupedlayer.js

@@ -0,0 +1,571 @@
+/* global L */
+
+let controlContainer;
+
+// A layer control which provides for layer groupings.
+// Author: Ishmael Smyrnow
+L.Control.GroupedLayers = L.Control.extend({
+    options: {
+        sortLayers: true,
+        sortGroups: true,
+        sortBaseLayers: false,
+        collapsed: true,
+        position: 'topright',
+        autoZIndex: true,
+        exclusiveGroups: [],
+        exclusiveOptionalGroups: [],
+        groupCheckboxes: false,
+        groupsCollapsable: false,
+        groupsExpandedClass: "leaflet-control-layers-group-collapse-default",
+        groupsCollapsedClass: "leaflet-control-layers-group-expand-default",
+        sortFunction: function (nameA, nameB) {
+            return nameA.localeCompare(nameB);
+        }
+    },
+  
+    initialize: function (baseLayers, groupedOverlays, options) {
+        var i, j;
+        L.Util.setOptions(this, options);
+    
+        this._layers = [];
+        this._lastZIndex = 0;
+        this._handlingClick = false;
+        this._groupList = [];
+        this._domGroups = [];
+    
+        for (i in baseLayers) {
+            this._addLayer(baseLayers[i], i);
+        }
+    
+        for (i in groupedOverlays) {
+            for (j in groupedOverlays[i]) {
+                this._addLayer(groupedOverlays[i][j], j, i, true);
+            }
+        }
+    },
+  
+    onAdd: function (map) {
+      this._initLayout();
+      this._update();
+  
+      map
+          .on('layeradd', this._onLayerChange, this)
+          .on('layerremove', this._onLayerChange, this);
+  
+      return this._container;
+    },
+  
+    addTo: function (map) {
+        L.Control.prototype.addTo.call(this, map);
+        // Trigger expand after Layers Control has been inserted into DOM so that is now has an actual height.
+        return this._expandIfNotCollapsed();
+      },
+  
+    onRemove: function (map) {
+        map
+            .off('layeradd', this._onLayerChange, this)
+            .off('layerremove', this._onLayerChange, this);
+    },
+  
+    addBaseLayer: function (layer, name) {
+        this._addLayer(layer, name);
+        this._update();
+        return this;
+    },
+  
+    addOverlay: function (layer, name, options) {
+        this._addLayer(layer, name, {...options, overlay: true});
+        this._update();
+        return this;
+    },
+  
+    removeLayer: function (layer) {
+        var id = L.Util.stamp(layer);
+        var _layer = this._getLayer(id);
+        if (_layer) {
+            this._layers.splice(this._layers.indexOf(_layer), 1);
+        }
+        this._update();
+        return this;
+    },
+  
+    _getLayer: function (id) {
+        for (var layer of this._layers) {
+            if (layer && L.stamp(layer.layer) === id) {
+                return layer;
+            }
+        }
+    },
+  
+    _initLayout: function () {
+        var className = 'leaflet-control-layers',
+            container = this._container = L.DomUtil.create('div', className),
+            collapsed = this.options.collapsed;
+        
+        // Makes this work on IE10 Touch devices by stopping it from firing a mouseout event when the touch is released
+        container.setAttribute('aria-haspopup', true);
+    
+        L.DomEvent.disableClickPropagation(container);
+        L.DomEvent.disableScrollPropagation(container);
+    
+        var form = this._form = L.DomUtil.create('form', className + '-list');
+    
+        if (collapsed) {
+            this._map.on('click', this._collapse, this);  
+    
+            if (!L.Browser.android) {
+                L.DomEvent.on(container, {
+                    mouseenter: this._expand,
+                    mouseleave: this._collapse
+                }, this);
+            }
+        }
+    
+        var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container);
+        link.href = '#';
+        link.title = 'Layers';
+    
+        if (L.Browser.touch) {
+            L.DomEvent.on(link, 'click', L.DomEvent.stop);
+            L.DomEvent.on(link, 'click', this._expand, this);
+        } else {
+            L.DomEvent.on(link, 'focus', this._expand, this);
+        }
+    
+        if (!collapsed) {
+            this._expand();
+        }
+    
+        this._baseLayersList = L.DomUtil.create('div', className + '-base', form);
+        this._separator = L.DomUtil.create('div', className + '-separator', form);
+        this._overlaysList = L.DomUtil.create('div', className + '-overlays', form);
+    
+        container.appendChild(form);
+
+        controlContainer = container;
+    },
+  
+    _addLayer: function (layer, name, options) {
+        options = {...options};
+        if (options.image) {
+            name = `<img src="${options.image}" class='control-item-image' /> ${name}`;
+        }
+
+        var _layer = {
+            layer: layer,
+            name: name,
+            overlay: options.overlay,
+            key: options.layerKey,
+        };
+        this._layers.push(_layer);
+    
+        const group = options.groupName || '';
+        var groupId = this._indexOf(this._groupList, group);
+    
+        if (groupId === -1) {
+            groupId = this._groupList.push(group) - 1;
+        }
+    
+        var exclusive = (this._indexOf(this.options.exclusiveGroups, group) !== -1);
+        var exclusiveOptional = (this._indexOf(this.options.exclusiveOptionalGroups, group) !== -1);
+    
+        _layer.group = {
+            name: group,
+            id: groupId,
+            exclusive: exclusive,
+            exclusiveOptional: exclusiveOptional,
+            key: options.groupKey,
+            collapsed: options.groupCollapsed,
+        };
+    
+        if (this.options.autoZIndex && layer.setZIndex) {
+            this._lastZIndex++;
+            layer.setZIndex(this._lastZIndex);
+        }
+    
+        if (this.options.sortLayers) {
+            this._layers.sort(L.bind(function (a, b) {
+            if (a.overlay === true && b.overlay === true) {
+                return this.options.sortFunction(a.name, b.name);
+            }
+            }, this));
+        }
+    
+        if (this.options.sortBaseLayers) {
+            this._layers.sort(L.bind(function (a, b) {
+            if (a.overlay === undefined && b.overlay === undefined) {
+                return this.options.sortFunction(a.name, b.name);
+            }
+            }, this));
+        }
+    
+        if (this.options.sortGroups) {
+            this._layers.sort(L.bind(function (a, b) {
+                if (a.group.exclusiveOptional && !b.group.exclusiveOptional) {
+                    return -1;
+                }
+                if (!a.group.exclusiveOptional && b.group.exclusiveOptional) {
+                    return 1;
+                }
+                return this.options.sortFunction(a.group.name, b.group.name);
+            }, this));
+        }
+    
+        this._expandIfNotCollapsed();
+    },
+  
+    _update: function () {
+        if (!this._container) {
+            return;
+        }
+    
+        this._baseLayersList.innerHTML = '';
+        this._overlaysList.innerHTML = '';
+        this._domGroups.length = 0;
+    
+        var baseLayersPresent = false,
+            overlaysPresent = false;
+    
+        for (var obj of this._layers) {
+            this._addItem(obj);
+            overlaysPresent = overlaysPresent || obj.overlay;
+            baseLayersPresent = baseLayersPresent || !obj.overlay;
+        }
+    
+        if (this.options.groupCheckboxes) {
+            this._refreshGroupsCheckStates();
+        }
+    
+        this._separator.style.display = overlaysPresent && baseLayersPresent ? '' : 'none';
+    },
+  
+    _onLayerChange: function (e) {
+        var obj = this._getLayer(L.Util.stamp(e.layer)),
+            type;
+    
+        if (!obj) {
+            return;
+        }
+    
+        if (!this._handlingClick) {
+            this._update();
+        }
+    
+        if (obj.overlay) {
+            type = e.type === 'layeradd' ? 'overlayadd' : 'overlayremove';
+        } else {
+            type = e.type === 'layeradd' ? 'baselayerchange' : null;
+        }
+    
+        if (type) {
+            this._map.fire(type, obj);
+        }
+    },
+  
+    _createRadioElement: function (name, checked) {
+        var radio = document.createElement('input');
+        radio.type = 'radio';
+        radio.name = name;
+        radio.className = 'leaflet-control-layers-selector';
+        radio.checked = checked;
+    
+        return radio;
+    },
+
+    _createExclusiveCheckElement: function (name, checked) {
+        var radio = document.createElement('input');
+        radio.type = 'checkbox';
+        radio.name = name;
+        radio.className = `leaflet-control-layers-selector ${name}`;
+        radio.checked = checked;
+        radio.onchange = e => {
+            if (!e.target.checked) {
+                return;
+            }
+            var radios = document.getElementsByClassName(name);
+            for (var r of radios) {
+                if (r === e.target || !r.checked) {
+                    continue;
+                }
+                r.checked = false;
+                this._onInputClick();
+            }
+        };
+    
+        return radio;
+    },
+  
+    _addItem: function (obj) {
+        var label = document.createElement('label'),
+            input,
+            checked = this._map.hasLayer(obj.layer),
+            container,
+            groupRadioName;
+    
+        if (obj.overlay) {
+            if (obj.group.exclusive) {
+                groupRadioName = 'leaflet-exclusive-group-layer-' + obj.group.id;
+                input = this._createRadioElement(groupRadioName, checked);
+            } else if (obj.group.exclusiveOptional) {
+                groupRadioName = 'leaflet-exclusive-group-layer-' + obj.group.id;
+                input = this._createExclusiveCheckElement(groupRadioName, checked);
+            } else {
+                input = document.createElement('input');
+                input.type = 'checkbox';
+                input.className = 'leaflet-control-layers-selector';
+                input.defaultChecked = checked;
+            }
+        } else {
+            input = this._createRadioElement('leaflet-base-layers', checked);
+        }
+    
+        input.layerId = L.Util.stamp(obj.layer);
+        input.groupID = obj.group.id;
+        L.DomEvent.on(input, 'click', this._onInputClick, this);
+        L.DomEvent.on(input, 'click', () => {
+            if (obj.layer.key && !obj.layer.options.overlay) {
+                controlContainer.dispatchEvent(new CustomEvent('layerToggle', {
+                    bubbles: false,
+                    detail: {    
+                        key: obj.layer.key,
+                        checked: input.checked,
+                    },
+                }));
+            } else if (obj.layer.options.overlay) {
+                controlContainer.dispatchEvent(new CustomEvent('overlayToggle', {
+                    bubbles: false,
+                    detail: {    
+                        key: obj.layer.options.name,
+                        checked: input.checked,
+                    },
+                }));
+            }
+        }, this);
+    
+        var name = document.createElement('span');
+        name.innerHTML = ' ' + obj.name;
+    
+        label.appendChild(input);
+        label.appendChild(name);
+    
+        if (obj.overlay) {
+            container = this._overlaysList;
+    
+            var groupContainer = this._domGroups[obj.group.id];
+    
+            // Create the group container if it doesn't exist
+            if (!groupContainer) {
+                groupContainer = document.createElement('div');
+                groupContainer.className = 'leaflet-control-layers-group';
+                groupContainer.id = 'leaflet-control-layers-group-' + obj.group.id;
+                groupContainer.dataset.key = obj.group.key;
+        
+                var groupLabel = document.createElement('label');
+                groupLabel.className = 'leaflet-control-layers-group-label';
+        
+                if (obj.group.name !== '' && !obj.group.exclusive && !obj.group.exclusiveOptional) {
+                    // ------ add a group checkbox with an _onInputClickGroup function
+                    if (this.options.groupCheckboxes) {
+                        var groupInput = document.createElement('input');
+                        groupInput.type = 'checkbox';
+                        groupInput.className = 'leaflet-control-layers-group-selector';
+                        groupInput.groupID = obj.group.id;
+                        groupInput.legend = this;
+                        groupInput.dataset.key = obj.group.key;
+                        L.DomEvent.on(groupInput, 'click', this._onGroupInputClick, groupInput);
+                        groupLabel.appendChild(groupInput);
+                    }
+                }
+        
+                if (this.options.groupsCollapsable){
+                    groupContainer.classList.add("group-collapsable");
+                    if (obj.group.collapsed) {
+                        groupContainer.classList.add("collapsed");
+                    }
+        
+                    var groupMin = document.createElement('span');
+                    groupMin.className = 'leaflet-control-layers-group-collapse '+this.options.groupsExpandedClass;
+                    groupLabel.appendChild(groupMin);
+        
+                    var groupMax = document.createElement('span');
+                    groupMax.className = 'leaflet-control-layers-group-expand '+this.options.groupsCollapsedClass;
+                    groupLabel.appendChild(groupMax);
+        
+                    L.DomEvent.on(groupLabel, 'click', this._onGroupCollapseToggle, groupContainer);
+                }
+        
+                var groupName = document.createElement('span');
+                groupName.className = 'leaflet-control-layers-group-name';
+                groupName.innerHTML = obj.group.name;
+                groupLabel.appendChild(groupName);
+        
+                groupContainer.appendChild(groupLabel);
+                container.appendChild(groupContainer);
+        
+                this._domGroups[obj.group.id] = groupContainer;
+            }
+    
+            container = groupContainer;
+        } else {
+            container = this._baseLayersList;
+        }
+    
+        container.appendChild(label);
+    
+        return label;
+    },
+  
+    _onGroupCollapseToggle: function (event) {
+        L.DomEvent.stopPropagation(event);
+        L.DomEvent.preventDefault(event);
+        if (this.classList.contains("group-collapsable") && this.classList.contains("collapsed")){
+            this.classList.remove("collapsed");
+        } else if (this.classList.contains("group-collapsable") && !this.classList.contains("collapsed")) {
+            this.classList.add("collapsed");
+        }
+        if (this.dataset.key) {
+            controlContainer.dispatchEvent(new CustomEvent('groupCollapseToggle', {
+                bubbles: false,
+                detail: {    
+                    key: this.dataset.key,
+                    collapsed: this.classList.contains("collapsed"),
+                },
+            }));
+        }
+    },
+  
+    _onGroupInputClick: function (event) {
+        L.DomEvent.stopPropagation(event);
+        var obj;
+    
+        var this_legend = this.legend;
+        this_legend._handlingClick = true;
+    
+        var inputs = this_legend._form.getElementsByTagName('input');
+    
+        for (var input of inputs) {
+            if (input.groupID === this.groupID && input.className === 'leaflet-control-layers-selector') {
+                input.checked = this.checked;
+                obj = this_legend._getLayer(input.layerId);
+                if (input.checked && !this_legend._map.hasLayer(obj.layer)) {
+                    this_legend._map.addLayer(obj.layer);
+                } else if (!input.checked && this_legend._map.hasLayer(obj.layer)) {
+                    this_legend._map.removeLayer(obj.layer);
+                }
+            }
+        }
+
+        if (this.dataset.key) {
+            controlContainer.dispatchEvent(new CustomEvent('groupToggle', {
+                bubbles: false,
+                detail: {    
+                    key: this.dataset.key,
+                    checked: this.checked,
+                },
+            }));
+        }
+    
+        this_legend._handlingClick = false;
+    },
+  
+    _onInputClick: function () {
+        var obj,
+        inputs = this._form.getElementsByClassName('leaflet-control-layers-selector'),
+        toBeRemoved,
+        toBeAdded;
+    
+        this._handlingClick = true;
+    
+        for (var input of inputs) {
+            obj = this._getLayer(input.layerId);
+            if (input.checked && !this._map.hasLayer(obj.layer)) {
+                toBeAdded = obj.layer;
+            } else if (!input.checked && this._map.hasLayer(obj.layer)) {
+                toBeRemoved = obj.layer;
+            }
+        }
+    
+        if (toBeRemoved !== undefined) {
+            this._map.removeLayer(toBeRemoved);
+        }
+        if (toBeAdded !== undefined) {
+            this._map.addLayer(toBeAdded);
+        }
+    
+        if (this.options.groupCheckboxes) {
+            this._refreshGroupsCheckStates();
+        }
+    
+        this._handlingClick = false;
+    },
+  
+    _refreshGroupsCheckStates: function () {
+        for (var i = 0; i < this._domGroups.length; i++) {
+            var groupContainer = this._domGroups[i];
+            if (groupContainer) {
+                var groupInput = groupContainer.getElementsByClassName('leaflet-control-layers-group-selector')[0];
+                var groupItemInputs = groupContainer.querySelectorAll('input.leaflet-control-layers-selector');
+                var checkedGroupItemInputs = groupContainer.querySelectorAll('input.leaflet-control-layers-selector:checked');
+        
+                if (groupInput) {
+                    groupInput.indeterminate = false;
+                    if (checkedGroupItemInputs.length === groupItemInputs.length) {
+                        groupInput.checked = true;
+                    } else if (checkedGroupItemInputs.length === 0) {
+                        groupInput.checked = false;
+                    } else {
+                        groupInput.indeterminate = true;
+                    }
+                }
+            }
+        }
+    },
+  
+    _expand: function () {
+        L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
+        this._form.style.height = null;
+        var acceptableHeight = this._map.getSize().y - (this._container.offsetTop + 50);
+        if (acceptableHeight < this._form.clientHeight) {
+            L.DomUtil.addClass(this._form, 'leaflet-control-layers-scrollbar');
+            this._form.style.height = acceptableHeight + 'px';
+        } else {
+            L.DomUtil.removeClass(this._form, 'leaflet-control-layers-scrollbar');
+        }
+    
+        return this;
+    },
+  
+    _expandIfNotCollapsed: function () {
+        if (this._map && !this.options.collapsed) {
+            this._expand();
+        }
+        return this;
+    },
+  
+    _collapse: function () {
+        this._container.className = this._container.className.replace(' leaflet-control-layers-expanded', '');
+    },
+  
+    _indexOf: function (arr, obj) {
+        for (var i = 0, j = arr.length; i < j; i++) {
+            if (arr[i] === obj) {
+                return i;
+            }
+        }
+        return -1;
+    },
+    on: (eventName, handler, options) => {
+        controlContainer.addEventListener(eventName, handler, options);
+    },
+    once: (eventName, handler, options) => {
+        controlContainer.addEventListener(eventName, handler, {...options, once: true});
+    },
+    off: (eventName, handler, options) => {
+        controlContainer.removeEventListener(eventName, handler, options);
+    },
+});
+  
+L.control.groupedLayers = function (baseLayers, groupedOverlays, options) {
+    return new L.Control.GroupedLayers(baseLayers, groupedOverlays, options);
+};
+