From fe2d3233fab135c93450924a059bc19f10ed9eb5 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 6 Jun 2024 10:31:56 +0200
Subject: [PATCH] add: MAPTypC.aspx

---
 MapTypC.aspx/MapTypC.andy        | 1305 ++++++++++++++++++++++++++++++
 MapTypC.aspx/MapTypC.aspx        |   46 ++
 MapTypC.aspx/MapTypC.aspx.ismail |   46 ++
 3 files changed, 1397 insertions(+)
 create mode 100644 MapTypC.aspx/MapTypC.andy
 create mode 100644 MapTypC.aspx/MapTypC.aspx
 create mode 100644 MapTypC.aspx/MapTypC.aspx.ismail

diff --git a/MapTypC.aspx/MapTypC.andy b/MapTypC.aspx/MapTypC.andy
new file mode 100644
index 000000000..a11c719a9
--- /dev/null
+++ b/MapTypC.aspx/MapTypC.andy
@@ -0,0 +1,1305 @@
+<%@ Page Title="" Language="C#" MasterPageFile="~/Standard.Master" AutoEventWireup="true" CodeBehind="MapTypC.aspx.cs" Inherits="TALAS_V5.MessagesMap.MapTypC" %>
+
+<%@ Register assembly="DevExpress.Web.v19.2, Version=19.2.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>
+
+<asp:Content ID="NaviContent" ContentPlaceHolderID="NaviContent" runat="server">  
+
+</asp:Content>
+ 
+
+<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server" >
+
+		<link rel="stylesheet" href="../TileMap/css/leaflet.css?v=054" />
+	<link rel="stylesheet" href="../TileMap/css/foundation.css?v=054">
+	<link rel="stylesheet" href="../TileMap/css/app.css?v=054">
+	<link rel="stylesheet" href="../TileMap/css/foundation-icons.css?v=054">
+	<link rel="stylesheet" href="../TileMap/css/leaflet.contextmenu.min.css?v=054">
+
+	<script src="../TileMap/js/vendor/jquery.js?v=054"></script>
+	<script src="../TileMap/js/leaflet/leaflet.js?v=054"></script>
+	<script src="../TileMap/js/vendor/oms.min.js"></script>
+	<script src="../TileMap/js/vendor/leaflet.contextmenu.min.js"></script>
+	<!--<script src="../TileMap/js/vendor/gktowgs.js?v=054"></script>-->
+	<script src="../TileMap/js/config.js?v=053"></script>
+	<script src="../TileMap/js/icons.js?v=053"></script>
+	<script src="../TileMap/js/vendor/bundle.js?v=054"></script>
+
+	<style type="text/css">
+    #map{
+       width: 100%;
+       height: 100%;
+    }
+</style>
+
+<div id="map" style="z-index: 1;position:absolute !important;top:36px;left:37px;" ></div>
+	
+	<script>
+		var toggle = false;
+		var toggleTalas = false;
+		var osm = L.tileLayer('../TileMap/mapTiles/{z}/{x}/{y}.png', {
+					minZoom: 7,
+					maxZoom: 15,
+					tms: false,
+					useCache: false,
+					crossOrigin: true,
+					attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+				});
+
+		function checkInternet(callback) {
+			var xhr = new XMLHttpRequest();
+			var file = "https://tile.openstreetmap.org/1/1/1.png"; // URL einer kleinen Datei
+			var randomNum = Math.round(Math.random() * 10000);
+
+			xhr.open('HEAD', file + "?rand=" + randomNum, true);
+			xhr.send();
+
+			xhr.addEventListener("readystatechange", processRequest, false);
+
+			function processRequest(e) {
+				if (xhr.readyState == 4) {
+					if (xhr.status >= 200 && xhr.status < 304) {
+						callback(true);
+					} else {
+						callback(false);
+					}
+				}
+			}
+		}
+
+		function switchLayer(isOnline) {
+			if (isOnline) {
+				console.log("online");
+				if (!map.hasLayer(osm)) {
+					map.removeLayer(osm);
+        		}
+				osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+					minZoom: 7,
+					maxZoom: 19,
+					tms: false,
+					useCache: false,
+					crossOrigin: true,
+					attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+				});
+				osm.addTo(map);
+			} else {
+				console.log("offline");
+				if (!map.hasLayer(osm)) {
+					map.removeLayer(osm);
+        		}
+				osm = L.tileLayer('mapTiles/{z}/{x}/{y}.png', {
+					minZoom: 7,
+					maxZoom: 14,
+					tms: false,
+					useCache: false,
+					crossOrigin: true,
+					attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+				});
+				osm.addTo(map);
+			}
+		}
+
+		// Überprüfen der Internetverbindung und Wechseln des Layers
+		checkInternet(function(isOnline) {
+			switchLayer(isOnline);
+		});
+
+		// Event Listener für Online- und Offline-Status
+		window.addEventListener('online', function() {
+			checkInternet(function(isOnline) {
+				switchLayer(isOnline);
+			});
+		});
+		window.addEventListener('offline', function() {
+			checkInternet(function(isOnline) {
+				switchLayer(isOnline);
+			});
+		});
+		
+		var Esri_WorldImagery = L.tileLayer('../TileMap/geoMapTiles/{z}/{y}/{x}.png', {
+			attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
+			minZoom: 4,
+			maxZoom: 15
+		});
+
+		var CartoDB_PositronNoLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png', {
+			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+			subdomains: 'abcd',
+			maxZoom: 17
+		});
+
+		var TALAS = new L.layerGroup();
+		var ECI = new L.layerGroup();
+		var ULAF = new L.layerGroup();
+		var GSMModem = new L.layerGroup();
+		var CiscoRouter = new L.layerGroup();
+		var WAGO = new L.layerGroup();
+		var Siemens = new L.layerGroup();
+		var OTDR = new L.layerGroup();
+		var WDM = new L.layerGroup();
+		var GMA = new L.layerGroup();
+		var Sonstige = new L.layerGroup();
+		var TALASICL = new L.layerGroup();
+
+		//var map = L.map('map').setView([51.41321407879154, 7.739617925303934], 8);
+		ll = new L.LatLng(51.41321407879154, 7.739617925303934),
+			map = L.map('map', {
+				center: ll,
+				zoom: 8,
+				layers: [osm, TALAS, ECI, GSMModem, CiscoRouter, WAGO, Siemens, OTDR, WDM, GMA, TALASICL, Sonstige],
+				contextmenu: true,
+				contextmenuWidth: 160,
+				contextmenuItems: [{
+					text: 'Station öffnen (Tab)',
+					icon: 'img/screen_new.png',
+					callback: newLink
+				},
+				{
+					text: 'Station öffnen',
+					icon: 'img/screen_same.png',
+					callback: sameLink
+				}, '-', {
+					text: 'Reinzoomen',
+					icon: 'img/zoom_in.png',
+					callback: zoomIn
+				}, {
+					text: 'Rauszoomen',
+					icon: 'img/zoom_out.png',
+					callback: zoomOut
+				}, {
+					text: 'Hier zentrieren',
+					icon: 'img/center_focus.png',
+					callback: centerMap
+				}, '-', {
+					text: 'Koordinaten',
+					icon: 'img/not_listed_location.png',
+					callback: showCoordinates
+				}, {
+					text: 'Get Data to Console',
+					icon: 'img/not_listed_location.png',
+					callback: showData
+				}, {
+					text: 'Show Talas',
+					icon: 'img/not_listed_location.png',
+					callback: showTalas
+				}, {
+					text: 'Hide Talas',
+					icon: 'img/not_listed_location.png',
+					callback: hideTalas
+				}, {
+					text: 'Show GMA',
+					icon: 'img/not_listed_location.png',
+					callback: showGSM
+				}, {
+					text: 'Hide GMA',
+					icon: 'img/not_listed_location.png',
+					callback: hideGSM
+				}]
+			});
+
+		function showCoordinates(e) {
+			alert("Breitengrad: " + e.latlng.lat + "\nLängengrad: " + e.latlng.lng);
+		}
+
+		function newLink(e) {
+			alert("Neues Fenster: " + e.relatedTarget.options.test);
+			window.open("../devices/" + e.relatedTarget.options.test, '_blank').focus();
+
+		}
+
+		function sameLink(e) {
+			alert(e.relatedTarget.options.test);
+			window.open("../devices/" + e.relatedTarget.options.test, '_parent').focus();
+		}
+
+		function showData(e) {
+			console.log(e);
+		}
+
+		function showSatMap() {
+			map.removeLayer(osm);
+			map.addLayer(Esri_WorldImagery);
+			map.removeLayer(CartoDB_PositronNoLabels);
+			document.getElementById("satSheet").style.opacity = "0.5";
+			document.getElementById("whiteSheet").style.opacity = "1";
+			document.getElementById("mapSheet").style.opacity = "1";
+		}
+
+		function showWhiteMap() {
+			map.removeLayer(osm);
+			map.removeLayer(Esri_WorldImagery);
+			map.addLayer(CartoDB_PositronNoLabels);
+			document.getElementById("whiteSheet").style.opacity = "0.5";
+			document.getElementById("satSheet").style.opacity = "1";
+			document.getElementById("mapSheet").style.opacity = "1";
+		}
+
+		function showMap() {
+			map.addLayer(osm);
+			map.removeLayer(Esri_WorldImagery);
+			map.removeLayer(CartoDB_PositronNoLabels);
+			document.getElementById("mapSheet").style.opacity = "0.5";
+			document.getElementById("whiteSheet").style.opacity = "1";
+			document.getElementById("satSheet").style.opacity = "1";
+		}
+
+		function centerMap(e) {
+			//map.removeLayer(TALAS); ////////////////////////////////////////////////////////////////////
+			map.panTo(e.latlng);
+		}
+
+		function zoomIn(e) {
+			map.flyTo(e.latlng, 12);
+		}
+
+		function zoomOut(e) {
+			//map.addLayer(TALAS); ///////////////////////////////////////////////////////////////
+			//map.flyTo(e.latlng,8);
+			fly();
+		}
+
+		function showTalas() {
+			map.addLayer(TALAS); ////////////////////////////////////////////////////////////////////
+			loadData();
+		}
+
+		function hideTalas() {
+			map.removeLayer(TALAS); ////////////////////////////////////////////////////////////////////
+			loadData();
+		}
+
+		function showCisco() {
+			map.addLayer(Cisco); ////////////////////////////////////////////////////////////////////
+			loadData();
+		}
+
+		function hideCisco() {
+			map.removeLayer(Cisco); ////////////////////////////////////////////////////////////////////
+			loadData();
+		}
+
+		function showGSM() {
+			map.addLayer(GMA); ////////////////////////////////////////////////////////////////////
+			loadData();
+		}
+
+		function hideGSM() {
+			map.removeLayer(GMA); ////////////////////////////////////////////////////////////////////
+			loadData();
+		}
+
+		var oms = new OverlappingMarkerSpiderfier(map);
+
+		/*oms.addListener('format', function(marker, status) {
+		var iconURL = status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIED ? console.log :
+			status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE ? 'marker-plus.svg' :
+			status == OverlappingMarkerSpiderfier.markerStatus.UNSPIDERFIABLE ? 'marker.svg' :
+			null;
+		marker.setIcon({
+			url: iconURL,
+			scaledSize: new google.maps.Size(23, 32);  // makes SVG icons work in IE
+		});
+		});*/
+
+		var popup = new L.Popup();
+		oms.addListener('click', function (marker) {
+			popup.setContent(marker.desc);
+			popup.setLatLng(marker.getLatLng());
+			//map.openPopup(popup);
+		});
+
+		var dataStatic;
+		var dataStaticlength;
+		var dataStatus;
+		var dataStatuslength;
+		var dataSystem;
+		var dataSystemlength;
+		var notdataStatic;
+		var notdataStaticlength;
+		var notdataStatus;
+		var notdataStatuslength;
+		var dataMeasures = [];
+		var dataMeasureslength = [];
+		let systemsListing = [];
+		let systems = [];
+		let namesString = [];
+		let namesArray = [];
+		let filterSystems = [];
+
+		$(document).ready(() => {
+			$.when(
+				// http://10.10.0.13/talas5/ClientData/WebserviceMap.asmx/GisStationsStatic?idMap=8
+				$.getJSON(mapDataStaticUrl, function (dataD) {
+					dataStatic = dataD.Points;
+					dataStaticlength = dataStatic.length;
+				}),
+				$.getJSON(mapDataStatusUrl, function (dataS) {
+					dataStatus = dataS.Statis;
+					dataStatuslength = dataStatus.length;
+				}),
+				$.getJSON(mapDataIconUrl, function (dataI) {
+					dataIcons = dataI.List;
+					dataIconslength = dataIcons.length;
+				}),
+				$.getJSON(mapDataSystemUrl, function (dataSy) {
+					dataSystem = dataSy.Systems;
+					dataSystemlength = dataSystem.length;
+
+					 // Filtern der Daten, um nur die Elemente mit Allow = 1 zu behalten
+					dataSystem = dataSystem.filter(function (system) {
+						return system.Allow === 1;
+					});
+					console.log(dataSystem);
+					// Aktualisieren der Länge des gefilterten Arrays
+					dataSystemlength = dataSystem.length;
+
+					// Erstellen eines Arrays der Namen der gefilterten Systeme
+					namesArray = dataSystem.map(function (system) {
+						return system.Name;
+					});
+					console.log(namesArray);
+					namesArray = namesArray.map(name => name.replace(/\s/g, ''));
+
+					let systemFilterDiv = document.createElement("div");
+						namesArray.forEach(name => {
+						const html = `
+							<div id="div-${name}">
+							<input name="${name}" id="box-${name}" type="checkbox" checked>
+							<label for="box-${name}">
+								<b style="font-size:0.75rem;font-weight:400;">${name}</b>
+							</label>
+							</div>
+						`;
+						systemFilterDiv.innerHTML += html;
+					});
+
+					document.getElementById("systemfilter").appendChild(systemFilterDiv);
+
+						filterSystems = dataSystem.map(function (system) {
+							return system.IdSystem;
+						});
+
+						console.log(namesArray);
+						console.log(filterSystems);
+
+						var layerObjects = {
+							"TALAS": TALAS,
+							"ECI": ECI,
+							'GSMModem': GSMModem, 
+							'CiscoRouter': CiscoRouter, 
+							'WAGO': WAGO, 
+							'Siemens': Siemens, 
+							'OTDR': OTDR, 
+							'WDM': WDM, 
+							'GMA': GMA, 
+							'TALASICL': TALASICL, 
+							'Sonstige': Sonstige,
+							// ... andere Layer
+						};
+
+						namesArray.forEach(name => {
+							console.log(`#box-${name}`)
+							var checkbox = document.querySelector(`#box-${name}`);
+							checkbox.addEventListener('change', function() {
+								if (this.checked) {
+									map.addLayer(layerObjects[name]);
+									console.log(`${name} is checked..`);
+								} else {
+									map.removeLayer(layerObjects[name]);
+									console.log(`${name} is not checked..`);
+								}
+							});
+						});
+
+
+				}),
+				$.getJSON(mapDataMeasures, function (dataM) {
+					dataMeasures = dataM.Statis;
+					dataMeasureslength = dataMeasures.length;
+				})
+
+			).then(function () {
+				if (dataStatic) {
+					console.log("%cMAP| Statische Daten geladen", 'color: green');
+				}
+				else {
+					console.log("%cMAP| Fehler beim Laden der statischen Daten", 'color: red');
+				}
+				if (dataStatus) {
+					console.log("%cMAP| Status Daten geladen", 'color: green');
+					loadData();
+					getDataMenu();
+				}
+				else {
+					console.log("%cMAP| Fehler beim Laden der status Daten", 'color: red');
+				}
+				if (dataIcons) {
+					console.log("%cMAP| Icons geladen", 'color: green');
+				}
+				else {
+					console.log("%cMAP| Fehler beim Laden der Icons", 'color: red');
+				}
+				if (dataMeasures) {
+					console.log("%cMAP| Messwerte geladen", 'color: green');
+				}
+				else {
+					console.log("%cMAP| Fehler beim Laden der Messwerte", 'color: red');
+				}
+				if (dataSystem) {
+					console.log("%cMAP| System Liste geladen", 'color: green');
+					console.log("%cMAP| " + dataSystemlength + " Systeme gefunden", 'color: green');
+					var systemHTMLFields = [];
+				}
+				else {
+					console.log("%cMAP| Fehler beim Laden der System Liste", 'color: red');
+				}
+			});
+
+		});
+
+		function getJSONData() {
+			$(document).ready(() => {
+				$.when(
+					$.getJSON(mapDataStaticUrl, function (dataD) {
+						dataStatic = dataD.Points;
+						dataStaticlength = dataStatic.length;
+					}),
+					$.getJSON(mapDataStatusUrl, function (dataS) {
+						dataStatus = dataS.Statis;
+						dataStatuslength = dataStatus.length;
+					}),
+					$.getJSON(mapDataIconUrl, function (dataI) {
+						dataIcons = dataI.List;
+						dataIconslength = dataIcons.length;
+					}),
+					$.getJSON(mapDataMeasures, function (dataM) {
+						dataMeasures = dataM.Statis;
+						dataMeasureslength = dataMeasures.length;
+					})
+				).then(function () {
+					if (dataStatic) {
+						console.log("%cMAP| Statische Daten geladen", 'color: green');
+					}
+					else {
+						console.log("%cMAP| Fehler beim Laden der statischen Daten", 'color: red');
+					}
+					if (dataStatus) {
+						console.log("%cMAP| Status Daten geladen", 'color: green');
+					}
+					else {
+						console.log("%cMAP| Fehler beim Laden der status Daten", 'color: red');
+					}
+					if (dataIcons) {
+						console.log("%cMAP| Icons geladen", 'color: green');
+					}
+					else {
+						console.log("%cMAP| Fehler beim Laden der Icons", 'color: red');
+					}
+					if (dataMeasures) {
+						console.log("%cMAP| Messwerte geladen", 'color: green');
+					}
+					else {
+						console.log("%cMAP| Fehler beim Laden der Messwerte", 'color: red');
+					}
+				});
+			});
+		}
+
+
+
+		// Add Object Du save CircleIds
+		var markers = [];
+		var setLoadTemp;
+		var idsListing = [];
+		var idsListingURL = [];
+		let geoDataListlat = [];
+		let geoDataListlng = [];
+		let geoDataID = [];
+		let geoDataIdLD = [];
+		let geoDataIdLocation = [];
+		let geoDataListComb = [];
+		let uniqueGMA = [];
+		let uniqueGMAFilter = [];
+
+		// Loop through the data
+		function loadData() {
+			var clicked = [];
+			// Erstes Setzen der Pins
+			if (setLoadTemp == null) {
+				console.log("%cMAP| Marker werden fixiert", 'color: green');
+				for (var i = 0; i < dataStaticlength; i++) {
+					var gisStatics = dataStatic[i];
+					// i.O. Marker
+					if(filterSystems.includes(gisStatics.System)){
+						//console.log("System Add: "+gisStatics.IdLD);
+					markers[gisStatics.IdLD] = L.marker([gisStatics.X, gisStatics.Y],
+						{
+							icon: greenMarkerBox,
+							test: gisStatics.Link,
+							device: gisStatics.Device,
+							jsonicon: gisStatics.Icon,
+							system: gisStatics.System, ///////////////////////////////////////////////////////
+							IdLD: gisStatics.IdLD,
+							IdLocation: gisStatics.IdLocation,
+							contextmenu: true,
+
+						}).addTo(map);
+					
+					let markerOKIcon = L.icon({
+						iconUrl: 'img/icons/marker-icon-' + gisStatics.Icon + '.png',
+						iconSize: [26, 41], // Größe
+						iconAnchor: [13, 41], // Ankerpunkt
+						popupAnchor: [0, -36] // PopUp Anker
+					});
+					//console.log(markers[gisStatics.IdLD]._latlng);	
+
+					geoDataListlat.push(markers[gisStatics.IdLD]._latlng.lat);
+					geoDataListlng.push(markers[gisStatics.IdLD]._latlng.lng);
+					geoDataID.push(markers[gisStatics.IdLD]._leaflet_id);
+					geoDataIdLD.push(markers[gisStatics.IdLD].options.IdLD);
+					geoDataIdLocation.push(markers[gisStatics.IdLD].options.IdLocation);
+
+					markers[gisStatics.IdLD].setIcon(markerOKIcon);
+					let markerTemp = markers[gisStatics.IdLD];
+
+					oms.addMarker(markers[gisStatics.IdLD]);
+
+					markers[gisStatics.IdLD].setZIndexOffset(9995);
+					//console.log(markers[gisStatics.IdLD]);
+					//console.log("bingo");
+
+					//OverlappingMarkerSpiderfier.markers[gisStatics.IdLD].SPIDERFIED ? console.log("Is Spidered ") : console.log("Not Spidered ");
+					let markerVar = markers[gisStatics.IdLD].options.jsonicon;
+
+					///////////////////////////////// Layer Filter
+					if (markers[gisStatics.IdLD].options.system === 1) {
+						if (namesArray.includes("TALAS")) {
+							markers[gisStatics.IdLD].addTo(TALAS);
+							console.log("TALAS system added");
+						}
+					}
+					if (markers[gisStatics.IdLD].options.system === 2) {
+						if (namesArray.includes("ECI")) {
+							markers[gisStatics.IdLD].addTo(ECI);
+							console.log("ECI system added");
+						}
+					}
+					if (markers[gisStatics.IdLD].options.system === 3) {
+						if (namesArray.includes("ULAF")) {
+							markers[gisStatics.IdLD].addTo(ULAF);
+							console.log("ULAF system added");
+						}
+						//markers[gisStatics.IdLD].addTo(ULAF);
+					}
+					if (markers[gisStatics.IdLD].options.system === 4) {
+						if (namesArray.includes("TALAS")) {
+							markers[gisStatics.IdLD].addTo(TALAS);
+							console.log("TALAS+ system added");
+						}
+						//markers[gisStatics.IdLD].addTo(TALAS); // Fehlt in der Liste
+					}
+					if (markers[gisStatics.IdLD].options.system === 5) {
+						if (namesArray.includes("GSMModem")) {
+							markers[gisStatics.IdLD].addTo(GSMModem);
+							console.log("GSM system added");
+						}
+						//markers[gisStatics.IdLD].addTo(GSM);
+					}
+					if (markers[gisStatics.IdLD].options.system === 6) {
+						if (namesArray.includes("CiscoRouter")) {
+							markers[gisStatics.IdLD].addTo(CiscoRouter);
+							console.log("Cisco system added");
+						}
+						//markers[gisStatics.IdLD].addTo(Cisco);
+					}
+					if (markers[gisStatics.IdLD].options.system === 7) {
+						if (namesArray.includes("WAGO")) {
+							markers[gisStatics.IdLD].addTo(WAGO);
+							console.log("WAGO system added");
+						}
+						//markers[gisStatics.IdLD].addTo(WAGO);
+					}
+					if (markers[gisStatics.IdLD].options.system === 8) {
+						if (namesArray.includes("Siemens")) {
+							markers[gisStatics.IdLD].addTo(Siemens);
+							console.log("Siemens system added");
+						}
+						//markers[gisStatics.IdLD].addTo(Siemens);
+					}
+					if (markers[gisStatics.IdLD].options.system === 9) {
+						if (namesArray.includes("OTDR")) {
+							markers[gisStatics.IdLD].addTo(OTDR);
+							console.log("OTDR system added");
+						}
+						//markers[gisStatics.IdLD].addTo(OTDR);
+					}
+					if (markers[gisStatics.IdLD].options.system === 10) {
+						if (namesArray.includes("WDM")) {
+							markers[gisStatics.IdLD].addTo(WDM);
+							console.log("WDM system added");
+						}
+						//markers[gisStatics.IdLD].addTo(WDM);
+					}
+					if (markers[gisStatics.IdLD].options.system === 11) {
+						if (namesArray.includes("GMA")) {
+							markers[gisStatics.IdLD].addTo(GMA);
+							console.log("GMA system added");
+						}
+						//markers[gisStatics.IdLD].addTo(GMA);
+					}
+					if (markers[gisStatics.IdLD].options.system === 100) {
+						if (namesArray.includes("TALASICL")) {
+							markers[gisStatics.IdLD].addTo(TALASICL);
+							console.log("Talas ICL system added");
+						}
+						//markers[gisStatics.IdLD].addTo(TALASICL);
+					}
+
+					if (markers[gisStatics.IdLD].options.system === 200) {
+						if (namesArray.includes("Sonstige")) {
+							markers[gisStatics.IdLD].addTo(Sonstige);
+							console.log("Sonstige system added");
+						}
+						//markers[gisStatics.IdLD].addTo(TALASICL);
+					}
+
+					var idListing = ([gisStatics.IdLD, markers[gisStatics.IdLD]._leaflet_id]);
+					var idListingURL = ([gisStatics.Link, markers[gisStatics.IdLD]._leaflet_id]);
+					idsListing.push(idListing);
+					idsListingURL.push(idListingURL);
+					markers[gisStatics.IdLD].bindPopup("<b style='font-size:1.25rem;'>" + gisStatics.LD_Name + "</b><br /><b>" + gisStatics.Device + "</b><br /><b>" + gisStatics.Area_Short + "</b> ( " + gisStatics.Area_Name + " )<br /><b>" + gisStatics.Location_Short + "</b> ( " + gisStatics.Location_Name + " )");
+
+					markers[gisStatics.IdLD].on('mouseover', function (e) {
+						this.openPopup();
+					});
+					markers[gisStatics.IdLD].on('mouseout', function (e) {
+						this.closePopup();
+					});
+
+					// Fehlermarker
+					let meldungen = [];
+					for (var istatus = 0; istatus < dataStatuslength; istatus++) {
+						var gisStatus = dataStatus[istatus];
+						if (gisStatus.IdLD == gisStatics.IdLD) {
+							//console.log(dataStatuslength);
+							//console.log(markers[gisStatics.IdLD]);
+							//console.log("Fehlerfall: "+gisStatus.IdLD);
+							if (gisStatus.Na === "critical") {
+								//console.log(gisStatus.Icon);
+								let markerIcon = L.icon({
+									iconUrl: 'img/icons/critical-marker-icon-' + markers[gisStatics.IdLD].options.jsonicon + '.png',
+									iconSize: [26, 41], // Größe
+									iconAnchor: [13, 41], // Ankerpunkt
+									popupAnchor: [0, -36] // PopUp Anker
+								});
+								markers[gisStatics.IdLD].setIcon(markerIcon);
+								markers[gisStatics.IdLD].setZIndexOffset(10000);
+							}
+							if (gisStatus.Na === "system") {
+
+								let markerIcon = L.icon({
+									iconUrl: 'img/icons/system-marker-icon-' + markers[gisStatics.IdLD].options.jsonicon + '.png',
+									iconSize: [26, 41], // Größe
+									iconAnchor: [13, 41], // Ankerpunkt
+									popupAnchor: [0, -36] // PopUp Anker
+								});
+								markers[gisStatics.IdLD].setIcon(markerIcon);
+								markers[gisStatics.IdLD].setZIndexOffset(9997);
+							}
+							if (gisStatus.Na === "major") {
+
+								let markerIcon = L.icon({
+									iconUrl: 'img/icons/major-marker-icon-' + markers[gisStatics.IdLD].options.jsonicon + '.png',
+									iconSize: [26, 41], // Größe
+									iconAnchor: [13, 41], // Ankerpunkt
+									popupAnchor: [0, -36] // PopUp Anker
+								});
+								markers[gisStatics.IdLD].setIcon(markerIcon);
+								markers[gisStatics.IdLD].setZIndexOffset(9999);
+							}
+							if (gisStatus.Na === "minor") {
+
+								let markerIcon = L.icon({
+									iconUrl: 'img/icons/minor-marker-icon-' + markers[gisStatics.IdLD].options.jsonicon + '.png',
+									iconSize: [26, 41], // Größe
+									iconAnchor: [13, 41], // Ankerpunkt
+									popupAnchor: [0, -36] // PopUp Anker
+								});
+								markers[gisStatics.IdLD].setIcon(markerIcon);
+								markers[gisStatics.IdLD].setZIndexOffset(9998);
+							}
+
+							let idldTemp = gisStatus.IdLD;
+							let idldlast = "";
+							var meldung = "";
+
+							if (idldlast = idldTemp) {
+								meldung = "<b style='font-size:0.75rem;'><i style='color:" + gisStatus.Co + ";' class='fi-stop'></i> " + gisStatus.Me + "</b><b style='color:" + gisStatus.Co + ";font-size:0.5rem;'> (" + (gisStatus.Na).toUpperCase() + ")</b><br />";
+								meldungen.push(meldung);
+								idldlast = gisStatus.IdLD;
+								//console.log(meldungen+" - "+idldTemp+" - "+idldlast);
+							}
+							else {
+								var meldung = "<b style='font-size:0.75rem;'>" + gisStatus.Me + "</b><b style='color:" + gisStatus.Co + ";font-size:0.5rem;'> (" + (gisStatus.Na).toUpperCase() + ")</b><br />";
+								meldungen.push(meldung);
+								idldlast = gisStatus.IdLD;
+								console.log("NOP");
+							}
+
+
+							markers[gisStatics.IdLD].bindPopup("<b style='font-size:1.25rem;'>" + gisStatics.LD_Name + "</b><br /><b>" + gisStatics.Device + "</b><br /><b>" + gisStatics.Area_Short + "</b> ( " + gisStatics.Area_Name + " )<br /><b>" + gisStatics.Location_Short + "</b> ( " + gisStatics.Location_Name + " )<br /><br />" + meldungen.reverse().join(''));
+							markers[gisStatics.IdLD].bounce();
+						}
+						else {
+
+						}
+					}
+				}
+					else{
+						console.log("System Not Viewed: "+gisStatics.IdLD);
+					}
+					
+				}
+
+				// GeoDaten mit Leaflet-ID und IdLD verbinden
+				for (let index = 0; index < geoDataListlat.length; index++) {
+					geoDataListComb[index] = geoDataListlat[index] + "," + geoDataListlng[index] + "," + geoDataID[index] + "," + geoDataIdLD[index] + "," + geoDataIdLocation[index];
+					console.log("Station Nr.: "+index+" Geo Daten: "+geoDataListComb[index]);
+				}
+
+				// Wenn idLocation gleich dann IdLDs zusammenfassen
+
+				// Doppelte IdLDs aussortieren und mit Gruppenzeichen versehen
+				let uniqueIdLDsGeo = [];
+				let uniqueIdLDsData = [];
+				let doubleIdLDsGeo = [];
+				let geoGroupIdLDs = [];
+				let geoGroupIdLDsfiltert = [];
+
+				geoDataListComb.forEach((c) => {
+					const myArray = c.split(",");
+					let el = myArray[3];
+					let ele = myArray[4];
+					
+					geoGroupIdLDs[ele] += ","+ele+","+el;
+					
+					if (!uniqueIdLDsGeo.includes(myArray[0] + myArray[1])) {
+						uniqueIdLDsGeo.push(myArray[0] + myArray[1]);
+						uniqueIdLDsData.push(myArray[0] + "," + myArray[1] + "," + myArray[2] + "," + myArray[3]+ "," + myArray[4]);
+						//console.log(myArray[3]);
+					}
+					else {
+						doubleIdLDsGeo.push(myArray[0] + myArray[1]);
+						//console.log("Double:" +myArray[3]);
+						L.marker([myArray[0], myArray[1]],
+							{
+								icon: markerGroup
+
+							}).addTo(map);
+					}
+				});
+				
+				//console.log(geoGroupIdLDs);
+
+				for (let index = 0; index < geoGroupIdLDs.length; index++) {
+					try {
+						const element = geoGroupIdLDs[index].split(",");
+						if(element.length == 3){
+							geoGroupIdLDsfiltert.push(element[1]+","+element[2]);
+						}
+						
+						if(element.length == 5){
+							geoGroupIdLDsfiltert.push(element[1]+","+element[2]+","+element[4]);
+						}
+						
+						if(element.length == 7){
+							geoGroupIdLDsfiltert.push(element[1]+","+element[2]+","+element[4]+","+element[6]);
+						}
+						if(element.length == 9){
+							geoGroupIdLDsfiltert.push(element[1]+","+element[2]+","+element[4]+","+element[6]+","+element[8]);
+						}
+						if(element.length == 11){
+							geoGroupIdLDsfiltert.push(element[1]+","+element[2]+","+element[4]+","+element[6]+","+element[8]+","+element[10]);
+						}
+						if(element.length == 13){
+							geoGroupIdLDsfiltert.push(element[1]+","+element[2]+","+element[4]+","+element[6]+","+element[8]+","+element[10]+","+element[12]);
+						}
+
+					} catch (error) {
+						
+					}
+					
+				}
+
+				// Tooltips an die Stationen legen
+				//console.log(geoGroupIdLDsfiltert);
+				//console.log(geoDataIdLD);
+
+				let Tooltip = [];
+
+				for (let index = 0; index < uniqueIdLDsData.length; index++) {
+					let element = uniqueIdLDsData[index].split(",");
+					let lat = element[0];
+					let lng = element[1];
+					let ID = element[2];
+					let IdLD = element[3];
+					let LocID = element[4];
+			
+					Tooltip[LocID] = L.marker([lat, lng], { icon: invisibleMarker }).bindTooltip('<div id="tip-' + LocID + '">'
+						+ '<div id="areaname' + LocID + '" style="font-weight:700;font-size:0.9rem">---</div>'
+						+ '<div id="value1-' + LocID + '" style="font-weight:700;color:blue">---</div>'
+						+ '<div id="value2-' + LocID + '" style="font-weight:700;color:red">---</div>'
+						+ '<div id="value3-' + LocID + '" style="font-weight:700;color:#ECC5C0">---</div>'
+						+ '<div id="value4-' + LocID + '" style="font-weight:700;color:green">---</div>'
+					+ '</div>', { permanent: true, direction: "right", opacity: 0, offset: L.point({ x: 10, y: 0 }) }).openTooltip().addTo(GMA);
+				}
+				// console.log(dataMeasures);
+
+				for (let index = 0; index < dataMeasures.length; index++) {
+					let el = dataMeasures[index];
+					let shortname = el.Na;
+
+					if ("areaname-"+el.IdL && el.Area_Name) {
+						try {document.getElementById("areaname"+el.IdL).innerHTML = el.Area_Name;
+						//console.log(el.IdL+"Test"+el.Area_Name);
+					}
+						catch {}
+					}
+
+					//console.log(dataMeasures.Na);
+					if (el.Na == "LT") {
+						//console.log("FBT found!"+el.IdLD);
+						try {
+							Tooltip[el.IdL].getTooltip().setOpacity(0.8);
+							document.getElementById("value1-"+el.IdL).innerHTML = shortname +": "+ el.Val +" "+ el.Unit;
+						} catch (error) {
+							
+						}
+					}
+					if (el.Na == "FBT") {
+						try {
+							Tooltip[el.IdL].getTooltip().setOpacity(0.8);
+							document.getElementById("value2-"+el.IdL).innerHTML = shortname +": "+ el.Val +" "+ el.Unit;
+						} catch (error) {
+							
+						}
+					}
+					if (el.Na == "GT") {
+						try {
+							Tooltip[el.IdL].getTooltip().setOpacity(0.8);
+							document.getElementById("value3-"+el.IdL).innerHTML = shortname +": "+ el.Val +" "+ el.Unit;
+						} catch (error) {
+							
+						}
+					}
+					if (el.Na == "RLF") {
+						try {
+							Tooltip[el.IdL].getTooltip().setOpacity(0.8);
+							document.getElementById("value4-"+el.IdL).innerHTML = shortname +": "+ el.Val +" "+ el.Unit;
+						} catch (error) {
+							
+						}
+					}
+				}
+				
+				setLoadTemp = true;
+			}
+			else {
+				// Update der Pins
+				console.log("%cMAP| -UPDATE BEGINN-", 'color: grey;font-weight:700;');
+				console.log("%cMAP| Update der Marker", 'color: green');
+				console.log(filterSystems);
+				getJSONData();
+
+				for (var i = 0; i < dataStaticlength; i++) {
+					var gisStatics = dataStatic[i];
+					if(filterSystems.includes(gisStatics.System)){
+					// i.O. Marker
+					let markerOKIcon = L.icon({
+						iconUrl: 'img/icons/marker-icon-' + gisStatics.Icon + '.png',
+						iconSize: [26, 41], // Größe
+						iconAnchor: [13, 41], // Ankerpunkt
+						popupAnchor: [0, -36] // PopUp Anker
+					});
+					try {
+						markers[gisStatics.IdLD].setIcon(markerOKIcon);
+					} catch (err) {
+
+					}
+
+					markers[gisStatics.IdLD].setZIndexOffset(9995);
+					markers[gisStatics.IdLD].bindPopup("<b style='font-size:1.25rem;'>" + gisStatics.LD_Name + "</b><br /><b>" + gisStatics.Device + "</b><br /><b>" + gisStatics.Area_Short + "</b> ( " + gisStatics.Area_Name + " )<br /><b>" + gisStatics.Location_Short + "</b> ( " + gisStatics.Location_Name + " )");
+					markers[gisStatics.IdLD].stopBouncing();
+					//console.log("Marker :"+markers[gisStatics.IdLD].options.jsonicon);
+					let markerVar = markers[gisStatics.IdLD].options.jsonicon;
+
+					// Fehlermarker
+					meldungen = [];
+					//console.log(meldungen);
+					for (var istatus = 0; istatus < dataStatuslength; istatus++) {
+						var gisStatus = dataStatus[istatus];
+						if (gisStatus.IdLD == gisStatics.IdLD) {
+							//console.log("Fehlerfall: "+gisStatus.IdLD);
+							if (gisStatus.Na === "critical") {
+
+								let markerIcon = L.icon({
+									iconUrl: 'img/icons/critical-marker-icon-' + markers[gisStatics.IdLD].options.jsonicon + '.png',
+									iconSize: [26, 41], // Größe
+									iconAnchor: [13, 41], // Ankerpunkt
+									popupAnchor: [0, -36] // PopUp Anker
+								});
+								try {
+									markers[gisStatics.IdLD].setIcon(markerIcon);
+									markers[gisStatics.IdLD].setZIndexOffset(10000);
+								} catch (err) {
+
+								}
+
+							}
+							if (gisStatus.Na === "system") {
+
+								let markerIcon = L.icon({
+									iconUrl: 'img/icons/system-marker-icon-' + markers[gisStatics.IdLD].options.jsonicon + '.png',
+									iconSize: [26, 41], // Größe
+									iconAnchor: [13, 41], // Ankerpunkt
+									popupAnchor: [0, -36] // PopUp Anker
+								});
+								try {
+									markers[gisStatics.IdLD].setIcon(markerIcon);
+									markers[gisStatics.IdLD].setZIndexOffset(9997);
+								} catch (err) {
+
+								}
+							}
+							if (gisStatus.Na === "major") {
+
+								let markerIcon = L.icon({
+									iconUrl: 'img/icons/major-marker-icon-' + markers[gisStatics.IdLD].options.jsonicon + '.png',
+									iconSize: [26, 41], // Größe
+									iconAnchor: [13, 41], // Ankerpunkt
+									popupAnchor: [0, -36] // PopUp Anker
+								});
+								try {
+									markers[gisStatics.IdLD].setIcon(markerIcon);
+									markers[gisStatics.IdLD].setZIndexOffset(9999);
+								} catch (err) {
+
+								}
+							}
+							if (gisStatus.Na === "minor") {
+
+								let markerIcon = L.icon({
+									iconUrl: 'img/icons/minor-marker-icon-' + markers[gisStatics.IdLD].options.jsonicon + '.png',
+									iconSize: [26, 41], // Größe
+									iconAnchor: [13, 41], // Ankerpunkt
+									popupAnchor: [0, -36] // PopUp Anker
+								});
+								try {
+									markers[gisStatics.IdLD].setIcon(markerIcon);
+									markers[gisStatics.IdLD].setZIndexOffset(9998);
+								} catch (err) {
+
+								}
+							}
+
+							idldTemp = gisStatus.IdLD;
+							idldlast = "";
+							meldung = "";
+
+							if (idldlast = idldTemp) {
+								meldung = "<b style='font-size:0.75rem;'><i style='color:" + gisStatus.Co + ";' class='fi-stop'></i> " + gisStatus.Me + "</b><b style='color:" + gisStatus.Co + ";font-size:0.5rem;'> (" + (gisStatus.Na).toUpperCase() + ")</b><br />";
+								meldungen.push(meldung);
+								idldlast = gisStatus.IdLD;
+								//console.log(meldungen+" - "+idldTemp+" - "+idldlast);
+							}
+							else {
+								var meldung = "<b style='font-size:0.75rem;'>" + gisStatus.Me + "</b><b style='color:" + gisStatus.Co + ";font-size:0.5rem;'> (" + (gisStatus.Na).toUpperCase() + ")</b><br />";
+								meldungen.push(meldung);
+								idldlast = gisStatus.IdLD;
+								console.log("NOP");
+							}
+
+							markers[gisStatics.IdLD].bindPopup("<b style='font-size:1.25rem;'>" + gisStatics.LD_Name + "</b><br /><b>" + gisStatics.Device + "</b><br /><b>" + gisStatics.Area_Short + "</b> ( " + gisStatics.Area_Name + " )<br /><b>" + gisStatics.Location_Short + "</b> ( " + gisStatics.Location_Name + " )<br /><br />" + meldungen.reverse().join(''));
+							//markers[gisStatics.IdLD].bindPopup("<b style='font-size:1.25rem;'>" + gisStatics.LD_Name + "</b><br /><b>" + gisStatics.Device + "</b><br /><b>" + gisStatics.Area_Short + "</b> ( " + gisStatics.Area_Name + " )<br /><b>" + gisStatics.Location_Short + "</b> ( " + gisStatics.Location_Name + " )<br /><br />"+meldung);
+
+						}
+						else {
+
+						}
+
+					}
+				}
+				}
+
+				for (let index = 0; index < dataMeasures.length; index++) {
+					let el = dataMeasures[index];
+					let shortname = el.Na+" : ";
+					//console.log(dataMeasures.Na);
+					
+					if (el.Na == "LT") {
+						//console.log("FBT found!"+el.IdLD);
+						try {
+							document.getElementById("value1-"+el.IdL).innerHTML = shortname + el.Val +" "+ el.Unit;
+						} catch (error) {
+							
+						}
+					}
+					if (el.Na == "FBT") {
+						try {
+							document.getElementById("value2-"+el.IdL).innerHTML = shortname + el.Val +" "+ el.Unit;
+						} catch (error) {
+							
+						}
+					}
+					if (el.Na == "GT") {
+						try {
+							document.getElementById("value3-"+el.IdL).innerHTML = shortname + el.Val +" "+ el.Unit;
+						} catch (error) {
+							
+						}
+					}
+					if (el.Na == "RLF") {
+						try {
+							document.getElementById("value4-"+el.IdL).innerHTML = shortname + el.Val +" "+ el.Unit;
+						} catch (error) {
+							
+						}
+					}
+				}
+
+			}
+
+			setTimeout(loadData, updateIntervall);
+		}
+
+		var marker = markers[1866];
+		//console.log(marker);
+
+		function fly(stationValue) {
+
+			var x = 51.41321407879154;
+			var y = 7.739617925303934;
+			var zoom = 14;
+
+			for (var i = 0; i < dataStaticlength; i++) {
+				var gisStatics = dataStatic[i];
+				if (stationValue === gisStatics.Area_Name) {
+					//console.log(gisStatics.X+","+gisStatics.Y);
+					x = gisStatics.X;
+					y = gisStatics.Y;
+				}
+			}
+			if (y === 7.739617925303934) {
+				zoom = 8;
+			}
+			map.flyTo([x, y], zoom);
+			var popup = new L.Popup();
+			oms.addListener('click', function (marker) {
+				popup.setContent(marker.desc);
+				popup.setLatLng(marker.getLatLng());
+				map.openPopup(popup);
+			});
+
+			for (var i = 0; i < window.mapData.length; i++) {
+				var datum = window.mapData[i];
+				var loc = new L.LatLng(datum.lat, datum.lon);
+				var marker = new L.Marker(loc);
+				marker.desc = datum.d;
+				map.addLayer(marker);
+				//oms.addMarker(marker);  // <-- here
+			}
+		}
+
+	</script>
+	<!--Overlay-->
+    
+	<div id="mainDataSheet" class="standardSideMenu" style="position:absolute;top:50px;right:15px;width:15%;min-width:300px;z-index:1000;">
+		<div class="card"
+			style="border-radius: 8px;-webkit-box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);">
+
+			<div class="title-bar" style="border-bottom:1px solid #D6D8DA">
+				<div class="title-bar-left" onmouseover="" style="cursor: move">
+					<form>
+						<select onchange='fly(document.getElementById("stationListing").value)' id="stationListing" style="margin:0 0 0 0 !important;width:100%;border:none;">
+							<option>Station wählen</option>
+						</select>
+					</form>
+				</div>
+				<div class="title-bar-right">
+					<!--<a><i class="fi-magnifying-glass"
+							style="color:#333333;font-size:1rem;padding-right:10px;padding-left:3px;border-right:1px solid #D6D8DA"
+							title="Suchen" onclick='fly(document.getElementById("stationListing").value)'></i></a>
+					<a><i class="fi-filter"
+							style="color:#333333;font-size:1rem;padding-right:10px;padding-left:3px;border-right:1px solid #D6D8DA"
+							title="Filter für die Geräte"></i></a>-->
+					<a><i class="fi-arrows-out"
+							style="color:#333333;font-size:1rem;padding-right:10px;padding-left:3px;" title="Ansicht zurücksetzen"
+							onclick='fly()'></i></a>
+				</div>
+
+
+			</div>
+			<div class="card-section" style="padding-bottom: 15px;padding-top: 15px;">
+				<div id="systemfilter">
+				<!--<div id="div-TALAS"><input name="TALAS" id="box-TALAS" type="checkbox" checked><label
+						for="TALAScheckbox"><b style="font-size:0.75rem;font-weight:100;">TALAS</b></label></div>
+				<div id="div-GMA"><input name="GMA" id="box-GMA" type="checkbox" checked><label for="GMAcheckbox"><b
+							style="font-size:0.75rem;font-weight:100;">GMA</b></label></div>
+				<div id="div-MODEM"><input name="MODEM" id="box-MODEM" type="checkbox" checked><label
+						for="MODEMcheckbox"><b style="font-size:0.75rem;font-weight:100;">GSM Modems</b></label></div>
+				<div id="div-SIEMENS"><input name="SIEMENS" id="box-SIEMENS" type="checkbox" checked><label
+						for="SIEMENScheckbox"><b style="font-size:0.75rem;font-weight:100;">Notruf Säulen</b></label>
+				</div>-->
+
+				<!--<div id="div-GMA"><input name="GMA" id="box-GMA" type="checkbox" checked><label for="GMAcheckbox"><b  style="font-size:0.75rem;font-weight:400;">GMA</b></label></div>
+				<div id="div-MODEM"><input name="MODEM" id="box-MODEM" type="checkbox" checked><label for="MODEMcheckbox"><b  style="font-size:0.75rem;font-weight:400;">Modems</b></label></div>
+				<div id="div-CISCO"><input name="CISCO" id="box-CISCO" type="checkbox" checked><label for="CISCOcheckbox"><b  style="font-size:0.75rem;font-weight:400;">Cisco</b></label></div>
+				-->
+				</div>
+			</div>
+
+		</div>
+	</div>
+
+
+	<div id="mapSheet" class="standardSideMenu"
+		style="position:absolute;bottom:25px;right:25px;width:75px;height:75px;z-index:1000;opacity:0.5;">
+		<div class="card"
+			style="border-radius: 8px;-webkit-box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);">
+			<div style="padding:5px;">
+				<img src="img/map.png" alt="" onclick="showMap()">
+			</div>
+		</div>
+	</div>
+
+	<div id="satSheet" class="standardSideMenu"
+		style="position:absolute;bottom:25px;right:110px;width:75px;height:75px;z-index:1000;">
+		<div class="card"
+			style="border-radius: 8px;-webkit-box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);">
+			<div style="padding:5px;">
+				<img src="img/sat.png" alt="" onclick="showSatMap()">
+			</div>
+		</div>
+	</div>
+
+	<div id="whiteSheet" class="standardSideMenu"
+		style="position:absolute;bottom:25px;right:195px;width:75px;height:75px;z-index:1000;">
+		<div class="card"
+			style="border-radius: 8px;-webkit-box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);">
+			<div style="padding:5px;">
+				<img src="img/white.png" alt="" onclick="showWhiteMap()">
+			</div>
+		</div>
+	</div>
+
+	<div class="card"
+		style="z-index:1000;position:absolute;bottom:0px;left:50px;width:300px;border-radius: 8px;-webkit-box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);">
+		<div class="title-bar">
+			<div class="title-bar-left">
+				<span class="title-bar-title" id="mousovertext"
+					style="padding-left:10px;color:#333333;font-size:0.8rem;">TALAS.Map<br />Version 0.5.5</span>
+			</div>
+			<div class="title-bar-right">
+				<a><i class="fi-info" title="Weitere Infos" style="color:#0c0c9d;font-size:1.5rem;padding-right:10px;"
+						data-open="weitereInfos"></i></a>
+			</div>
+		</div>
+	</div>
+
+	<!-- Full Side Menu -->
+	<!--<div id="fullDataSheet" class="fullSideMenu"
+		style="overflow-x:visible;position:absolute;top:0px;right:0px;width:15%;min-width:350px;z-index:1000;">
+		<div id="fullSideMenuCard" class="card">
+			<ul class="tabs" data-active-collapse="true" data-tabs id="collapsing-tabs">
+				<li class="tabs-title is-active"><a href="#stationenFullSideMenu" aria-selected="true"
+						style="color:#000000;font-size:0.75rem;font-weight:700;">STATIONEN</a></li>
+				<li class="tabs-title"><a href="#panel2c"
+						style="color:#000000;font-size:0.75rem;font-weight:700;">DIENSTE</a></li>
+			</ul>
+
+			<div class="tabs-content" data-tabs-content="collapsing-tabs">
+				<div class="tabs-panel is-active" id="stationenFullSideMenu"
+					style="padding: 10px 5px 5px 5px !important">
+
+				</div>
+				<div class="tabs-panel" id="panel2c">
+					<div class="card-section" style="padding-bottom:0px" id="systemfilter">
+						<div id="div-TALAS"><input name="TALAS" id="box-TALAS" type="checkbox" checked><label
+								for="TALAScheckbox"><b style="font-size:0.75rem;font-weight:100;">TALAS</b></label>
+						</div>
+						<div id="div-GMA"><input name="GMA" id="box-GMA" type="checkbox" checked><label
+								for="GMAcheckbox"><b style="font-size:0.75rem;font-weight:100;">GMA</b></label></div>
+						<div id="div-MODEM"><input name="MODEM" id="box-MODEM" type="checkbox" checked><label
+								for="MODEMcheckbox"><b style="font-size:0.75rem;font-weight:100;">GSM Modems</b></label>
+						</div>
+						<div id="div-SIEMENS"><input name="SIEMENS" id="box-SIEMENS" type="checkbox" checked><label
+								for="SIEMENScheckbox"><b style="font-size:0.75rem;font-weight:100;">Notruf
+									Säulen</b></label></div>
+						<div style="margin-bottom:15px;"></div>
+					</div>
+				</div>
+			</div>
+			<div style="position:absolute;bottom:35px;">
+				<hr>
+				<div style="padding-left:15px;">
+					<div id="mapSheet"
+						style="float: left;padding-left:10px;;width:75px;height:75px;z-index:1000;opacity:0.5;">
+						<div class="card"
+							style="border-radius: 8px;-webkit-box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);">
+							<div style="padding:5px;">
+								<img src="img/map.png" alt="" onclick="showMap()">
+							</div>
+						</div>
+					</div>
+
+					<div id="satSheet" style="float: left;padding-left:10px;width:75px;height:75px;z-index:1000;">
+						<div class="card"
+							style="border-radius: 8px;-webkit-box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);">
+							<div style="padding:5px;">
+								<img src="img/sat.png" alt="" onclick="showSatMap()">
+							</div>
+						</div>
+					</div>
+
+					<div id="whiteSheet" style="float: left;padding-left:10px;width:75px;height:75px;z-index:1000;">
+						<div class="card"
+							style="border-radius: 8px;-webkit-box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);">
+							<div style="padding:5px;">
+								<img src="img/white.png" alt="" onclick="showWhiteMap()">
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>-->
+
+	<!-- Modals -->
+	<div class="reveal" id="weitereInfos" style="z-index:100000;" data-reveal>
+		<img src="img/Logo_TALAS.png" alt="TALAS V5 Logo" width="50%"
+			style="margin-left:25%;margin-top:10px;margin-bottom:10px;">
+		<div class="card"
+			style="padding:10px;border-radius: 8px;margin-top:10px;margin-bottom:10px;margin-left:10%;width:80%;-webkit-box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);box-shadow: 2px 2px 5px 2px rgba(204,204,204,0.5);">
+			<div class="card-section">
+				<p style="font-size:1.2rem;font-weight:700;">Littwin Systemtechnik GmbH & Co. KG</p>
+				<p style="font-weight:700;">Bürgermeister-Brötje Str. 28<br />D-26180 Rastede</p>
+				<p>T: +49 4402 9725 77-0<br />E: kontakt@littwin-systemtechnik.de</p>
+				<div style="background-color: #cacaca;">
+					<center><small style="font-size:0.75rem;padding:5px;"><b>TALAS.MAP</b> Version 0.5.5</small>
+					</center>
+				</div>
+
+			</div>
+		</div>
+
+		<button class="close-button" data-close aria-label="Close modal" type="button">
+			<span aria-hidden="true">&times;</span>
+		</button>
+	</div>
+
+	<!-- Scripts -->
+	<script src="../TileMap/js/vendor/foundation.js?v=054"></script>
+	<script src="../TileMap/js/vendor/what-input.js?v=054"></script>
+	<script src="../TileMap/js/app.js?v=054"></script>
+     
+</asp:Content>
+
diff --git a/MapTypC.aspx/MapTypC.aspx b/MapTypC.aspx/MapTypC.aspx
new file mode 100644
index 000000000..18559e557
--- /dev/null
+++ b/MapTypC.aspx/MapTypC.aspx
@@ -0,0 +1,46 @@
+<%@ Page Title="" Language="C#" MasterPageFile="~/Standard.Master" AutoEventWireup="true" CodeBehind="MapTypC.aspx.cs" Inherits="TALAS_V5.MessagesMap.MapTypC" %>
+<%@ Register assembly="DevExpress.Web.v19.2, Version=19.2.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>
+
+<asp:Content ID="NaviContent" ContentPlaceHolderID="NaviContent" runat="server">
+</asp:Content>
+
+<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
+
+<style>
+    .responsive-iframe-wrapper {
+        position: relative  !important;
+        width: 100%  !important;
+        height: 97.2vh  !important; /* Setzt die Höhe des Wrappers auf die Höhe des Viewports */
+        overflow: hidden  !important; /* Verhindert Scrollbalken innerhalb des Wrappers */
+		padding: 0 0 0 0  !important;
+		margin: 0 0 0 0  !important;
+    }
+    .responsive-iframe-wrapper iframe {
+        position: absolute !important;
+        top: 0 !important;
+        left: 0  !important;
+        width: 100%  !important;
+        height: 100%  !important;
+        border: none  !important; /* Removes the border */
+    }
+</style>
+
+
+<div class="responsive-iframe-wrapper">
+    <iframe frameborder="0"></iframe>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    var url = new URL(window.location.href);
+    var mValue = url.searchParams.get("m");
+    var uValue = url.searchParams.get("u");
+
+    // Setzen der src-Eigenschaft des iframe mit den abgerufenen Parametern
+    document.querySelector('.responsive-iframe-wrapper iframe').src = 
+       // "http://10.10.0.70:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);
+       "http://10.10.0.13:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);
+});
+</script>
+
+</asp:Content>
\ No newline at end of file
diff --git a/MapTypC.aspx/MapTypC.aspx.ismail b/MapTypC.aspx/MapTypC.aspx.ismail
new file mode 100644
index 000000000..f24961e14
--- /dev/null
+++ b/MapTypC.aspx/MapTypC.aspx.ismail
@@ -0,0 +1,46 @@
+<%@ Page Title="" Language="C#" MasterPageFile="~/Standard.Master" AutoEventWireup="true" CodeBehind="MapTypC.aspx.cs" Inherits="TALAS_V5.MessagesMap.MapTypC" %>
+<%@ Register assembly="DevExpress.Web.v19.2, Version=19.2.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>
+
+<asp:Content ID="NaviContent" ContentPlaceHolderID="NaviContent" runat="server">
+</asp:Content>
+
+<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
+
+<style>
+    .responsive-iframe-wrapper {
+        position: relative  !important;
+        width: 100%  !important;
+        height: 95vh  !important; /* Setzt die Höhe des Wrappers auf die Höhe des Viewports */
+        overflow: hidden  !important; /* Verhindert Scrollbalken innerhalb des Wrappers */
+		padding: 0 0 0 0  !important;
+		margin: 0 0 0 0  !important;
+    }
+    .responsive-iframe-wrapper iframe {
+        position: absolute !important;
+        top: 0 !important;
+        left: 0  !important;
+        width: 100%  !important;
+        height: 100%  !important;
+        border: none  !important; /* Removes the border */
+    }
+</style>
+
+
+<div class="responsive-iframe-wrapper">
+    <iframe frameborder="0"></iframe>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    var url = new URL(window.location.href);
+    var mValue = url.searchParams.get("m");
+    var uValue = url.searchParams.get("u");
+
+    // Setzen der src-Eigenschaft des iframe mit den abgerufenen Parametern
+    document.querySelector('.responsive-iframe-wrapper iframe').src = 
+       // "http://10.10.0.70:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);
+       "http://10.10.0.13:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);
+});
+</script>
+
+</asp:Content>