diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..30def97
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,8 @@
+# Specifies Line Feed (LF) Line Endings for Shell Scripts
+*.sh    text eol=lf
+
+# # Specifies Line Feed (LF) Line Endings for SQL Files
+*.sql   text eol=lf
+
+# Letd Git decide for other Files
+*       text=auto
\ No newline at end of file
diff --git a/api/init.php b/api/init.php
index 8a6d508..52a035b 100644
--- a/api/init.php
+++ b/api/init.php
@@ -1,40 +1,40 @@
-<?php
-
-// Reads Environment Configfile
-$envFile = __DIR__ . '/../.env';
-if (file_exists($envFile)) {
-    $lines = file($envFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
-    foreach ($lines as $line) {
-        if (strpos(trim($line), '#') === 0) continue;
-        list($key, $value) = array_map('trim', explode('=', $line, 2));
-        putenv("$key=$value");
-    }
-}
-
-// Defines Environment Variables
-$host = getenv('POSTGRES_HOST');
-$port = getenv('POSTGRES_PORT');
-$db   = getenv('POSTGRES_DB');
-$user = getenv('POSTGRES_USER');
-$pass = getenv('POSTGRES_PASSWORD');
-
-// Output Buffering and Session Start
-ob_start();
-session_start();
-
-// Initializes Database Connection
-try {
-    $opt = [
-        PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
-        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
-        PDO::ATTR_EMULATE_PREPARES   => false
-    ];
-    $dsn = "pgsql:host=$host;dbname=$db;port=$port";
-    $pdo = new PDO($dsn, $user, $pass, $opt);
-    
-// Creates Error Message
-} catch(PDOException $e) {
-    echo "Error: ".$e->getMessage();
-}
-
+<?php
+
+// Reads Environment Configfile
+$envFile = __DIR__ . '/../.env';
+if (file_exists($envFile)) {
+    $lines = file($envFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    foreach ($lines as $line) {
+        if (strpos(trim($line), '#') === 0) continue;
+        list($key, $value) = array_map('trim', explode('=', $line, 2));
+        putenv("$key=$value");
+    }
+}
+
+// Defines Environment Variables
+$host = getenv('POSTGRES_HOST');
+$port = getenv('POSTGRES_PORT');
+$db   = getenv('POSTGRES_DB');
+$user = getenv('POSTGRES_USER');
+$pass = getenv('POSTGRES_PASSWORD');
+
+// Output Buffering and Session Start
+ob_start();
+session_start();
+
+// Initializes Database Connection
+try {
+    $opt = [
+        PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
+        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+        PDO::ATTR_EMULATE_PREPARES   => false
+    ];
+    $dsn = "pgsql:host=$host;dbname=$db;port=$port";
+    $pdo = new PDO($dsn, $user, $pass, $opt);
+    
+// Creates Error Message
+} catch(PDOException $e) {
+    echo "Error: ".$e->getMessage();
+}
+
 ?>
\ No newline at end of file
diff --git a/legacy/delete_data.php b/legacy/delete_data.php
index f47a5db..8cc6d53 100644
--- a/legacy/delete_data.php
+++ b/legacy/delete_data.php
@@ -1,48 +1,48 @@
-<?php
-
-
-	// ToDo's
-	// Whitelists oder Prepared Statements gegen SQL-Injection hinzufügen
-
-
-    include 'init.php';
-
-    $request = htmlspecialchars($_POST['request'], ENT_QUOTES);
-
-    if ($request=='buildings') {
-        $webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
-
-        try {
-
-            $pdo -> query("DELETE FROM buildings WHERE webgis_id = '$webgis_id'");
-
-        } catch (PDOException $e) {
-            echo "ERROR ".$e->getMessage();
-        }
-    }
-
-    if ($request == 'pipelines') {
-		$webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
-
-		try {
-
-			$pdo -> query("DELETE from pipelines where webgis_id= '$webgis_id' ");
-
-		} catch(PDOException $e) {
-			echo "ERROR ".$e->getMessage();
-		}
-	}
-
-    if ($request == 'valves') {
-		$webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
-
-		try {
-
-			$pdo -> query("DELETE from valves where webgis_id= '$webgis_id' ");
-
-		} catch(PDOException $e) {
-			echo "ERROR ".$e->getMessage();
-		}
-	}
-
+<?php
+
+
+	// ToDo's
+	// Whitelists oder Prepared Statements gegen SQL-Injection hinzufügen
+
+
+    include 'init.php';
+
+    $request = htmlspecialchars($_POST['request'], ENT_QUOTES);
+
+    if ($request=='buildings') {
+        $webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
+
+        try {
+
+            $pdo -> query("DELETE FROM buildings WHERE webgis_id = '$webgis_id'");
+
+        } catch (PDOException $e) {
+            echo "ERROR ".$e->getMessage();
+        }
+    }
+
+    if ($request == 'pipelines') {
+		$webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
+
+		try {
+
+			$pdo -> query("DELETE from pipelines where webgis_id= '$webgis_id' ");
+
+		} catch(PDOException $e) {
+			echo "ERROR ".$e->getMessage();
+		}
+	}
+
+    if ($request == 'valves') {
+		$webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
+
+		try {
+
+			$pdo -> query("DELETE from valves where webgis_id= '$webgis_id' ");
+
+		} catch(PDOException $e) {
+			echo "ERROR ".$e->getMessage();
+		}
+	}
+
 ?>
\ No newline at end of file
diff --git a/legacy/find_data.php b/legacy/find_data.php
index 7c9fac9..f9fce34 100644
--- a/legacy/find_data.php
+++ b/legacy/find_data.php
@@ -1,52 +1,52 @@
-<?php
-
-	// ToDo's
-	// Whitelists oder Prepared Statements gegen SQL-Injection hinzufügen
-
-    // PostgreSQL-Serververbindung
-    include 'init.php';
-
-    // HTTP-POST-Methode für Formulardaten
-    $table = htmlspecialchars($_POST['table'], ENT_QUOTES);
-    $field = htmlspecialchars($_POST['field'], ENT_QUOTES);
-    $value = htmlspecialchars($_POST['value'], ENT_QUOTES);
-    
-    try {
-        // Datenbankabfrage
-        $result = $pdo -> query("SELECT *, ST_AsGeoJSON(geom) as geojson FROM $table WHERE $field = '$value'");
-
-        $features = [];
-
-        foreach($result as $row) {
-            // PHP-Objekt erstellen
-            $geometry = json_decode($row['geojson']);
-            
-            // PHP-Objekt bereinigen 
-            unset($row['geom']);
-            unset($row['geojson']);
-            
-            // JSON-Feature hinzufügen
-            $feature = [
-                "type"=>"Feature", 
-                "geometry"=>$geometry, 
-                "properties"=>$row
-            ];
-
-            array_push($features, $feature);
-        };
-
-        // Feature-Collection hinzufügen
-        $featureCollection = [
-            "type"=>"FeatureCollection",
-            "features"=>$features
-        ];
-
-        echo json_encode($featureCollection);
-
-    // Fehlernachricht ausgeben
-    } catch(PDOException $e) {
-        echo "ERROR ".$e->getMessage();
-
-    }
-
+<?php
+
+	// ToDo's
+	// Whitelists oder Prepared Statements gegen SQL-Injection hinzufügen
+
+    // PostgreSQL-Serververbindung
+    include 'init.php';
+
+    // HTTP-POST-Methode für Formulardaten
+    $table = htmlspecialchars($_POST['table'], ENT_QUOTES);
+    $field = htmlspecialchars($_POST['field'], ENT_QUOTES);
+    $value = htmlspecialchars($_POST['value'], ENT_QUOTES);
+    
+    try {
+        // Datenbankabfrage
+        $result = $pdo -> query("SELECT *, ST_AsGeoJSON(geom) as geojson FROM $table WHERE $field = '$value'");
+
+        $features = [];
+
+        foreach($result as $row) {
+            // PHP-Objekt erstellen
+            $geometry = json_decode($row['geojson']);
+            
+            // PHP-Objekt bereinigen 
+            unset($row['geom']);
+            unset($row['geojson']);
+            
+            // JSON-Feature hinzufügen
+            $feature = [
+                "type"=>"Feature", 
+                "geometry"=>$geometry, 
+                "properties"=>$row
+            ];
+
+            array_push($features, $feature);
+        };
+
+        // Feature-Collection hinzufügen
+        $featureCollection = [
+            "type"=>"FeatureCollection",
+            "features"=>$features
+        ];
+
+        echo json_encode($featureCollection);
+
+    // Fehlernachricht ausgeben
+    } catch(PDOException $e) {
+        echo "ERROR ".$e->getMessage();
+
+    }
+
 ?>
\ No newline at end of file
diff --git a/legacy/insert_data.php b/legacy/insert_data.php
index 33a2f75..54742c8 100644
--- a/legacy/insert_data.php
+++ b/legacy/insert_data.php
@@ -1,73 +1,73 @@
-<?php
-
-	// ToDo's
-	// Whitelists oder Prepared Statements gegen SQL-Injection hinzufügen
-
-    // PostgreSQL-Serververbindung
-    include 'init.php';
-
-    $request = htmlspecialchars($_POST['request'], ENT_QUOTES);
-
-    if ($request == 'valves') {
-        $valve_id = htmlspecialchars($_POST['valve_id'], ENT_QUOTES);
-        $valve_type = htmlspecialchars($_POST['valve_type'], ENT_QUOTES);
-        $valve_dma_id = htmlspecialchars($_POST['valve_dma_id'], ENT_QUOTES);
-        $valve_diameter = htmlspecialchars($_POST['valve_diameter'], ENT_QUOTES);
-        $valve_visibility = htmlspecialchars($_POST['valve_visibility'], ENT_QUOTES);
-        $valve_location = htmlspecialchars($_POST['valve_location'], ENT_QUOTES);
-        $valve_geometry = $_POST['valve_geometry'];
-
-        $result = $pdo -> query("SELECT * FROM valves WHERE valve_id = '$valve_id'");
-
-        if ($result->rowCount()>0) {
-            echo "ERROR: Valve ID already exists. Please type in another ID!";
-        } else {
-        // Datenbankabfrage
-            $result = $pdo -> query("INSERT INTO valves(valve_id, valve_type, valve_dma_id, valve_diameter, valve_location, valve_visibility,  geom) VALUES ('$valve_id', '$valve_type', '$valve_dma_id', '$valve_diameter', '$valve_location', '$valve_visibility',  ST_SetSRID(ST_GeomFromGeoJSON('$valve_geometry'), 4326))");
-        }
-    }
-
-    if ($request == 'pipelines') {
-        $pipeline_id = htmlspecialchars($_POST['pipeline_id'], ENT_QUOTES);
-        $pipeline_category = htmlspecialchars($_POST['pipeline_category'], ENT_QUOTES);
-        $pipeline_dma_id = htmlspecialchars($_POST['pipeline_dma_id'], ENT_QUOTES);
-        $pipeline_diameter = htmlspecialchars($_POST['pipeline_diameter'], ENT_QUOTES);
-        $pipeline_method = htmlspecialchars($_POST['pipeline_method'], ENT_QUOTES);
-        $pipeline_location = htmlspecialchars($_POST['pipeline_location'], ENT_QUOTES);
-        $pipeline_geometry = $_POST['pipeline_geometry'];
-
-        $result = $pdo -> query("SELECT * FROM pipelines WHERE pipeline_id = '$pipeline_id'");
-
-        if ($result->rowCount()>0) {
-            echo "ERROR: Pipeline ID already exists. Please type in another ID!";
-        } else {
-        // Datenbankabfrage
-            $result = $pdo -> query("INSERT INTO pipelines(pipeline_id, pipeline_category, pipeline_dma_id, pipeline_diameter, pipeline_method, pipeline_location,  geom) VALUES ('$pipeline_id', '$pipeline_category', '$pipeline_dma_id', '$pipeline_diameter', '$pipeline_method', '$pipeline_location',  ST_SetSRID(ST_GeomFromGeoJSON('$pipeline_geometry'), 4326))");
-        }
-    }
-
-    if ($request == 'buildings') {
-
-		$account_no = htmlspecialchars($_POST['account_no'], ENT_QUOTES);
-		$building_category = htmlspecialchars($_POST['building_category'], ENT_QUOTES);
-		$building_dma_id = htmlspecialchars($_POST['building_dma_id'], ENT_QUOTES);
-		$building_storey = htmlspecialchars($_POST['building_storey'], ENT_QUOTES);
-		$building_population = htmlspecialchars($_POST['building_population'], ENT_QUOTES);
-		$building_location = htmlspecialchars($_POST['building_location'], ENT_QUOTES);
-		$building_geometry = $_POST['building_geometry'];
-
-		$result = $pdo -> query("SELECT *from buildings where account_no= '$account_no'");
-
-		if ($result->rowCount()>0) {
-			echo "ERROR: Building ID already exists. Please type in another ID!";
-		} else {
-			$sql = $pdo -> query("INSERT INTO buildings(account_no, building_category, building_dma_id, building_storey, building_population, building_location, geom) VALUES ('$account_no', '$building_category', '$building_dma_id', '$building_storey', '$building_population', '$building_location', ST_Force3DZ(ST_SetSRID(ST_GeomFromGeoJSON('$building_geometry'), 4326)))");
-		}
-	}
-        
-
-
-
-
-
+<?php
+
+	// ToDo's
+	// Whitelists oder Prepared Statements gegen SQL-Injection hinzufügen
+
+    // PostgreSQL-Serververbindung
+    include 'init.php';
+
+    $request = htmlspecialchars($_POST['request'], ENT_QUOTES);
+
+    if ($request == 'valves') {
+        $valve_id = htmlspecialchars($_POST['valve_id'], ENT_QUOTES);
+        $valve_type = htmlspecialchars($_POST['valve_type'], ENT_QUOTES);
+        $valve_dma_id = htmlspecialchars($_POST['valve_dma_id'], ENT_QUOTES);
+        $valve_diameter = htmlspecialchars($_POST['valve_diameter'], ENT_QUOTES);
+        $valve_visibility = htmlspecialchars($_POST['valve_visibility'], ENT_QUOTES);
+        $valve_location = htmlspecialchars($_POST['valve_location'], ENT_QUOTES);
+        $valve_geometry = $_POST['valve_geometry'];
+
+        $result = $pdo -> query("SELECT * FROM valves WHERE valve_id = '$valve_id'");
+
+        if ($result->rowCount()>0) {
+            echo "ERROR: Valve ID already exists. Please type in another ID!";
+        } else {
+        // Datenbankabfrage
+            $result = $pdo -> query("INSERT INTO valves(valve_id, valve_type, valve_dma_id, valve_diameter, valve_location, valve_visibility,  geom) VALUES ('$valve_id', '$valve_type', '$valve_dma_id', '$valve_diameter', '$valve_location', '$valve_visibility',  ST_SetSRID(ST_GeomFromGeoJSON('$valve_geometry'), 4326))");
+        }
+    }
+
+    if ($request == 'pipelines') {
+        $pipeline_id = htmlspecialchars($_POST['pipeline_id'], ENT_QUOTES);
+        $pipeline_category = htmlspecialchars($_POST['pipeline_category'], ENT_QUOTES);
+        $pipeline_dma_id = htmlspecialchars($_POST['pipeline_dma_id'], ENT_QUOTES);
+        $pipeline_diameter = htmlspecialchars($_POST['pipeline_diameter'], ENT_QUOTES);
+        $pipeline_method = htmlspecialchars($_POST['pipeline_method'], ENT_QUOTES);
+        $pipeline_location = htmlspecialchars($_POST['pipeline_location'], ENT_QUOTES);
+        $pipeline_geometry = $_POST['pipeline_geometry'];
+
+        $result = $pdo -> query("SELECT * FROM pipelines WHERE pipeline_id = '$pipeline_id'");
+
+        if ($result->rowCount()>0) {
+            echo "ERROR: Pipeline ID already exists. Please type in another ID!";
+        } else {
+        // Datenbankabfrage
+            $result = $pdo -> query("INSERT INTO pipelines(pipeline_id, pipeline_category, pipeline_dma_id, pipeline_diameter, pipeline_method, pipeline_location,  geom) VALUES ('$pipeline_id', '$pipeline_category', '$pipeline_dma_id', '$pipeline_diameter', '$pipeline_method', '$pipeline_location',  ST_SetSRID(ST_GeomFromGeoJSON('$pipeline_geometry'), 4326))");
+        }
+    }
+
+    if ($request == 'buildings') {
+
+		$account_no = htmlspecialchars($_POST['account_no'], ENT_QUOTES);
+		$building_category = htmlspecialchars($_POST['building_category'], ENT_QUOTES);
+		$building_dma_id = htmlspecialchars($_POST['building_dma_id'], ENT_QUOTES);
+		$building_storey = htmlspecialchars($_POST['building_storey'], ENT_QUOTES);
+		$building_population = htmlspecialchars($_POST['building_population'], ENT_QUOTES);
+		$building_location = htmlspecialchars($_POST['building_location'], ENT_QUOTES);
+		$building_geometry = $_POST['building_geometry'];
+
+		$result = $pdo -> query("SELECT *from buildings where account_no= '$account_no'");
+
+		if ($result->rowCount()>0) {
+			echo "ERROR: Building ID already exists. Please type in another ID!";
+		} else {
+			$sql = $pdo -> query("INSERT INTO buildings(account_no, building_category, building_dma_id, building_storey, building_population, building_location, geom) VALUES ('$account_no', '$building_category', '$building_dma_id', '$building_storey', '$building_population', '$building_location', ST_Force3DZ(ST_SetSRID(ST_GeomFromGeoJSON('$building_geometry'), 4326)))");
+		}
+	}
+        
+
+
+
+
+
     ?>
\ No newline at end of file
diff --git a/legacy/load_data.php b/legacy/load_data.php
index b57a023..2d8b17d 100644
--- a/legacy/load_data.php
+++ b/legacy/load_data.php
@@ -1,63 +1,63 @@
-<?php
-
-	// ToDo's
-	// Whitelists oder Prepared Statements gegen SQL-Injection hinzufügen
-
-    // PostgreSQL-Serververbindung
-    include 'init.php';
-
-    // HTTP-POST-Methode für Formulardaten
-    $table = htmlspecialchars($_POST['table'], ENT_QUOTES);
-    $dma_id = htmlspecialchars($_POST['dma_id'], ENT_QUOTES);
-
-    if($table == 'valves') {
-        $dma_id_field = "valve_dma_id";
-    }
-
-    if($table == 'buildings') {
-        $dma_id_field = "building_dma_id";
-    }
-
-    if($table == 'pipelines') {
-        $dma_id_field = "pipeline_dma_id";
-    }
-    
-    try {
-        // Datenbankabfrage
-        $result = $pdo -> query("SELECT *, ST_AsGeoJSON(geom) as geojson FROM $table WHERE $dma_id_field = '$dma_id'");
-
-        $features = [];
-
-        foreach($result as $row) {
-            // PHP-Objekt erstellen
-            $geometry = json_decode($row['geojson']);
-            
-            // PHP-Objekt bereinigen 
-            unset($row['geom']);
-            unset($row['geojson']);
-            
-            // JSON-Feature hinzufügen
-            $feature = [
-                "type"=>"Feature", 
-                "geometry"=>$geometry, 
-                "properties"=>$row
-            ];
-
-            array_push($features, $feature);
-        };
-
-        // Feature-Collection hinzufügen
-        $featureCollection = [
-            "type"=>"FeatureCollection",
-            "features"=>$features
-        ];
-
-        echo json_encode($featureCollection);
-
-    // Fehlernachricht ausgeben
-    } catch(PDOException $e) {
-        echo "ERROR ".$e->getMessage();
-
-    }
-
+<?php
+
+	// ToDo's
+	// Whitelists oder Prepared Statements gegen SQL-Injection hinzufügen
+
+    // PostgreSQL-Serververbindung
+    include 'init.php';
+
+    // HTTP-POST-Methode für Formulardaten
+    $table = htmlspecialchars($_POST['table'], ENT_QUOTES);
+    $dma_id = htmlspecialchars($_POST['dma_id'], ENT_QUOTES);
+
+    if($table == 'valves') {
+        $dma_id_field = "valve_dma_id";
+    }
+
+    if($table == 'buildings') {
+        $dma_id_field = "building_dma_id";
+    }
+
+    if($table == 'pipelines') {
+        $dma_id_field = "pipeline_dma_id";
+    }
+    
+    try {
+        // Datenbankabfrage
+        $result = $pdo -> query("SELECT *, ST_AsGeoJSON(geom) as geojson FROM $table WHERE $dma_id_field = '$dma_id'");
+
+        $features = [];
+
+        foreach($result as $row) {
+            // PHP-Objekt erstellen
+            $geometry = json_decode($row['geojson']);
+            
+            // PHP-Objekt bereinigen 
+            unset($row['geom']);
+            unset($row['geojson']);
+            
+            // JSON-Feature hinzufügen
+            $feature = [
+                "type"=>"Feature", 
+                "geometry"=>$geometry, 
+                "properties"=>$row
+            ];
+
+            array_push($features, $feature);
+        };
+
+        // Feature-Collection hinzufügen
+        $featureCollection = [
+            "type"=>"FeatureCollection",
+            "features"=>$features
+        ];
+
+        echo json_encode($featureCollection);
+
+    // Fehlernachricht ausgeben
+    } catch(PDOException $e) {
+        echo "ERROR ".$e->getMessage();
+
+    }
+
 ?>
\ No newline at end of file
diff --git a/legacy/test.html b/legacy/test.html
index 41ff814..8a65c7b 100644
--- a/legacy/test.html
+++ b/legacy/test.html
@@ -1,97 +1,97 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-
-    <!-- jQuery UI -->
-    <link rel="stylesheet" href="source/jquery-ui.min.css">
-    <script src="source/jquery-ui.min.js"></script>
-
-    <!-- Bootstrap Stylesheet & Skript -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-
-    <link rel="stylesheet" href="styles.css">
-
-    <!-- Sidebar Plugin -->
-    <link rel="stylesheet" href="plugins/sidebar/leaflet-sidebar.css">
-    <script src="plugins/sidebar/leaflet-sidebar.js"></script>
-     
-
-    <!-- Button Plugin -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
-    <script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
-
-    <!-- Font Plugin -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
-
-    <!-- PolylineMeasure Plugin -->
-    <link rel="stylesheet" href="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.css">
-    <script src="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.js"></script>
-
-    <!-- MousePosition Plugin -->
-    <link rel="stylesheet" href="plugins/mouseposition/L.Control.MousePosition.css">
-    <script src="plugins/mouseposition/L.Control.MousePosition.js"></script>
-
-    <!-- Geoman Plugin -->
-    <link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css">
-    <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.js"></script>
-
-    <!-- Minimap Plugin -->
-    <link rel="stylesheet" href="plugins/minimap/Control.MiniMap.min.css">
-    <script src="plugins/minimap/Control.MiniMap.min.js"></script>
-
-    <!-- ajax Plugin -->
-    <script src="plugins/ajax/leaflet.ajax.js"></script>
-</head>
-
-<body>
-
-    <div class="popup-container">
-        
-        <input type="hidden" name="building_database_id" class="updateBuilding" value="something">
-        <input type="hidden" name="account_no_old" class="updateBuilding" value="something">
-
-        
-        <div class="popup-form-group">
-            <label class="control-label popup-label">Building ID</label>
-            <input type="text" class="form-control popup-input text-center updateBuilding" value="something" name="account_no">
-        </div>
-
-        <div class="popup-form-group">
-            <label class="control-label popup-label">Category</label>
-            <input type="text" class="form-control popup-input text-center updateBuilding" value="something" name="building_category">
-        </div>
-
-        <div class="popup-form-group">
-            <label class="control-label popup-label">Storey</label>
-            <input type="number" class="form-control popup-input text-center updateBuilding" value="something" name="building_storey">
-        </div>
-
-        <div class="popup-form-group">
-            <label class="control-label popup-label">Population</label>
-            <input type="number" class="form-control popup-input text-center updateBuilding" value="something" name="building_population">
-        </div>
-
-        <div class="popup-form-group">
-            <label class="control-label popup-label">Location</label>
-            <input type="text" class="form-control popup-input text-center updateBuilding" value="something" name="building_locationn">
-        </div>
-
-        <div class="popup-button-group">
-            <button type="submit" class="btn btn-success popup-button">Update</button>
-            <button type="submit" class="btn btn-danger popup-button">Delete</button>
-
-        </div>
-
-    </div>
-    
-
-
-
-
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <!-- jQuery UI -->
+    <link rel="stylesheet" href="source/jquery-ui.min.css">
+    <script src="source/jquery-ui.min.js"></script>
+
+    <!-- Bootstrap Stylesheet & Skript -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Sidebar Plugin -->
+    <link rel="stylesheet" href="plugins/sidebar/leaflet-sidebar.css">
+    <script src="plugins/sidebar/leaflet-sidebar.js"></script>
+     
+
+    <!-- Button Plugin -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
+    <script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
+
+    <!-- Font Plugin -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
+
+    <!-- PolylineMeasure Plugin -->
+    <link rel="stylesheet" href="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.css">
+    <script src="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.js"></script>
+
+    <!-- MousePosition Plugin -->
+    <link rel="stylesheet" href="plugins/mouseposition/L.Control.MousePosition.css">
+    <script src="plugins/mouseposition/L.Control.MousePosition.js"></script>
+
+    <!-- Geoman Plugin -->
+    <link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css">
+    <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.js"></script>
+
+    <!-- Minimap Plugin -->
+    <link rel="stylesheet" href="plugins/minimap/Control.MiniMap.min.css">
+    <script src="plugins/minimap/Control.MiniMap.min.js"></script>
+
+    <!-- ajax Plugin -->
+    <script src="plugins/ajax/leaflet.ajax.js"></script>
+</head>
+
+<body>
+
+    <div class="popup-container">
+        
+        <input type="hidden" name="building_database_id" class="updateBuilding" value="something">
+        <input type="hidden" name="account_no_old" class="updateBuilding" value="something">
+
+        
+        <div class="popup-form-group">
+            <label class="control-label popup-label">Building ID</label>
+            <input type="text" class="form-control popup-input text-center updateBuilding" value="something" name="account_no">
+        </div>
+
+        <div class="popup-form-group">
+            <label class="control-label popup-label">Category</label>
+            <input type="text" class="form-control popup-input text-center updateBuilding" value="something" name="building_category">
+        </div>
+
+        <div class="popup-form-group">
+            <label class="control-label popup-label">Storey</label>
+            <input type="number" class="form-control popup-input text-center updateBuilding" value="something" name="building_storey">
+        </div>
+
+        <div class="popup-form-group">
+            <label class="control-label popup-label">Population</label>
+            <input type="number" class="form-control popup-input text-center updateBuilding" value="something" name="building_population">
+        </div>
+
+        <div class="popup-form-group">
+            <label class="control-label popup-label">Location</label>
+            <input type="text" class="form-control popup-input text-center updateBuilding" value="something" name="building_locationn">
+        </div>
+
+        <div class="popup-button-group">
+            <button type="submit" class="btn btn-success popup-button">Update</button>
+            <button type="submit" class="btn btn-danger popup-button">Delete</button>
+
+        </div>
+
+    </div>
+    
+
+
+
+
+</body>
+
 </html>
\ No newline at end of file
diff --git a/legacy/update_data.php b/legacy/update_data.php
index af4cbe1..bfe7884 100644
--- a/legacy/update_data.php
+++ b/legacy/update_data.php
@@ -1,98 +1,98 @@
-<?php
-    include 'init.php';
-
-    $request = htmlspecialchars($_POST['request'], ENT_QUOTES);
-
-    if ($request=='buildings') {
-        $webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
-        $account_no_old = htmlspecialchars($_POST['account_no_old'], ENT_QUOTES);
-        $account_no = htmlspecialchars($_POST['account_no'], ENT_QUOTES);
-        $building_category = htmlspecialchars($_POST['building_category'], ENT_QUOTES);
-        $building_storey = htmlspecialchars($_POST['building_storey'], ENT_QUOTES);
-        $building_population = htmlspecialchars($_POST['building_population'], ENT_QUOTES);
-        $building_location = htmlspecialchars($_POST['building_location'], ENT_QUOTES);
-        $building_dma_id = htmlspecialchars($_POST['building_dma_id'], ENT_QUOTES);
-
-
-        try {
-            
-            if ($account_no_old != $account_no) {
-                $result = $pdo -> query("SELECT * FROM buildings WHERE account_no = '$account_no'");
-
-                if ($result -> rowCount()>0) {
-                    echo "ERROR: Account Number already exists. Pleas type in another Account Number!";
-                } else {
-                    $pdo -> query("UPDATE buildings SET account_no = '$account_no', building_category = '$building_category', building_storey = '$building_storey', building_population = '$building_population', building_location = '$building_location', building_dma_id = '$building_dma_id' WHERE webgis_id = '$webgis_id'");
-                }
-
-            } else { $pdo -> query("UPDATE buildings SET account_no = '$account_no', building_category = '$building_category', building_storey = '$building_storey', building_population = '$building_population', building_location = '$building_location', building_dma_id = '$building_dma_id' WHERE webgis_id = '$webgis_id'");
-            }
-
-        } catch (PDOException $e) {
-            echo "ERROR ".$e->getMessage();
-        }
-    }
-
-
-    if ($request == 'pipelines') {
-		$webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
-		$pipeline_id_old = htmlspecialchars($_POST['pipeline_id_old'], ENT_QUOTES);
-		$pipeline_id = htmlspecialchars($_POST['pipeline_id'], ENT_QUOTES);
-		$pipeline_dma_id = htmlspecialchars($_POST['pipeline_dma_id'], ENT_QUOTES);
-		$pipeline_diameter = htmlspecialchars($_POST['pipeline_diameter'], ENT_QUOTES);
-		$pipeline_location = htmlspecialchars($_POST['pipeline_location'], ENT_QUOTES);
-		$pipeline_category = htmlspecialchars($_POST['pipeline_category'], ENT_QUOTES);
-		$pipeline_length = htmlspecialchars($_POST['pipeline_length'], ENT_QUOTES);
-
-
-		try {
-
-			if ($pipeline_id_old != $pipeline_id) {
-				$result = $pdo -> query("SELECT *from pipelines where pipeline_id = '$pipeline_id' ");
-
-				if ($result -> rowCount()>0) {
-					echo "ERROR: Pipeline ID already exists. Please choose a new ID";
-				} else {
-					$pdo -> query("UPDATE pipelines set pipeline_id = '$pipeline_id', pipeline_dma_id = '$pipeline_dma_id', pipeline_diameter = '$pipeline_diameter', pipeline_location = '$pipeline_location', pipeline_category='$pipeline_category', pipeline_length='$pipeline_length' where webgis_id = '$webgis_id'");
-				}
-			} else {
-				$pdo -> query("UPDATE pipelines set pipeline_id = '$pipeline_id', pipeline_dma_id = '$pipeline_dma_id', pipeline_diameter = '$pipeline_diameter', pipeline_location = '$pipeline_location', pipeline_category='$pipeline_category', pipeline_length='$pipeline_length' where webgis_id = '$webgis_id'");
-			}
-
-		} catch(PDOException $e) {
-			echo "ERROR ".$e->getMessage();
-		}
-	}
-
-
-    if ($request == 'valves') {
-		$webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
-		$valve_id_old = htmlspecialchars($_POST['valve_id_old'], ENT_QUOTES);
-		$valve_id = htmlspecialchars($_POST['valve_id'], ENT_QUOTES);
-		$valve_dma_id = htmlspecialchars($_POST['valve_dma_id'], ENT_QUOTES);
-		$valve_type = htmlspecialchars($_POST['valve_type'], ENT_QUOTES);
-		$valve_diameter = htmlspecialchars($_POST['valve_diameter'], ENT_QUOTES);
-		$valve_location = htmlspecialchars($_POST['valve_location'], ENT_QUOTES);
-		$valve_visibility = htmlspecialchars($_POST['valve_visibility'], ENT_QUOTES);
-
-
-		try {
-
-			if ($valve_id_old != $valve_id) {
-				$result = $pdo -> query("SELECT *from valves where valve_id = '$valve_id' ");
-
-				if ($result -> rowCount()>0) {
-					echo "ERROR: Valve ID already exists. Please choose a new ID";
-				} else {
-					$pdo -> query("UPDATE valves set valve_id = '$valve_id', valve_dma_id = '$valve_dma_id', valve_type = '$valve_type', valve_diameter = '$valve_diameter', valve_location = '$valve_location', valve_visibility = '$valve_visibility' where webgis_id = '$webgis_id' ");
-				}
-			} else {
-				$pdo -> query("UPDATE valves set valve_id = '$valve_id', valve_dma_id = '$valve_dma_id', valve_type = '$valve_type', valve_diameter = '$valve_diameter', valve_location = '$valve_location', valve_visibility = '$valve_visibility' where webgis_id = '$webgis_id' ");
-			}
-
-		} catch(PDOException $e) {
-			echo "ERROR ".$e->getMessage();
-		}
-	}
-
+<?php
+    include 'init.php';
+
+    $request = htmlspecialchars($_POST['request'], ENT_QUOTES);
+
+    if ($request=='buildings') {
+        $webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
+        $account_no_old = htmlspecialchars($_POST['account_no_old'], ENT_QUOTES);
+        $account_no = htmlspecialchars($_POST['account_no'], ENT_QUOTES);
+        $building_category = htmlspecialchars($_POST['building_category'], ENT_QUOTES);
+        $building_storey = htmlspecialchars($_POST['building_storey'], ENT_QUOTES);
+        $building_population = htmlspecialchars($_POST['building_population'], ENT_QUOTES);
+        $building_location = htmlspecialchars($_POST['building_location'], ENT_QUOTES);
+        $building_dma_id = htmlspecialchars($_POST['building_dma_id'], ENT_QUOTES);
+
+
+        try {
+            
+            if ($account_no_old != $account_no) {
+                $result = $pdo -> query("SELECT * FROM buildings WHERE account_no = '$account_no'");
+
+                if ($result -> rowCount()>0) {
+                    echo "ERROR: Account Number already exists. Pleas type in another Account Number!";
+                } else {
+                    $pdo -> query("UPDATE buildings SET account_no = '$account_no', building_category = '$building_category', building_storey = '$building_storey', building_population = '$building_population', building_location = '$building_location', building_dma_id = '$building_dma_id' WHERE webgis_id = '$webgis_id'");
+                }
+
+            } else { $pdo -> query("UPDATE buildings SET account_no = '$account_no', building_category = '$building_category', building_storey = '$building_storey', building_population = '$building_population', building_location = '$building_location', building_dma_id = '$building_dma_id' WHERE webgis_id = '$webgis_id'");
+            }
+
+        } catch (PDOException $e) {
+            echo "ERROR ".$e->getMessage();
+        }
+    }
+
+
+    if ($request == 'pipelines') {
+		$webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
+		$pipeline_id_old = htmlspecialchars($_POST['pipeline_id_old'], ENT_QUOTES);
+		$pipeline_id = htmlspecialchars($_POST['pipeline_id'], ENT_QUOTES);
+		$pipeline_dma_id = htmlspecialchars($_POST['pipeline_dma_id'], ENT_QUOTES);
+		$pipeline_diameter = htmlspecialchars($_POST['pipeline_diameter'], ENT_QUOTES);
+		$pipeline_location = htmlspecialchars($_POST['pipeline_location'], ENT_QUOTES);
+		$pipeline_category = htmlspecialchars($_POST['pipeline_category'], ENT_QUOTES);
+		$pipeline_length = htmlspecialchars($_POST['pipeline_length'], ENT_QUOTES);
+
+
+		try {
+
+			if ($pipeline_id_old != $pipeline_id) {
+				$result = $pdo -> query("SELECT *from pipelines where pipeline_id = '$pipeline_id' ");
+
+				if ($result -> rowCount()>0) {
+					echo "ERROR: Pipeline ID already exists. Please choose a new ID";
+				} else {
+					$pdo -> query("UPDATE pipelines set pipeline_id = '$pipeline_id', pipeline_dma_id = '$pipeline_dma_id', pipeline_diameter = '$pipeline_diameter', pipeline_location = '$pipeline_location', pipeline_category='$pipeline_category', pipeline_length='$pipeline_length' where webgis_id = '$webgis_id'");
+				}
+			} else {
+				$pdo -> query("UPDATE pipelines set pipeline_id = '$pipeline_id', pipeline_dma_id = '$pipeline_dma_id', pipeline_diameter = '$pipeline_diameter', pipeline_location = '$pipeline_location', pipeline_category='$pipeline_category', pipeline_length='$pipeline_length' where webgis_id = '$webgis_id'");
+			}
+
+		} catch(PDOException $e) {
+			echo "ERROR ".$e->getMessage();
+		}
+	}
+
+
+    if ($request == 'valves') {
+		$webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
+		$valve_id_old = htmlspecialchars($_POST['valve_id_old'], ENT_QUOTES);
+		$valve_id = htmlspecialchars($_POST['valve_id'], ENT_QUOTES);
+		$valve_dma_id = htmlspecialchars($_POST['valve_dma_id'], ENT_QUOTES);
+		$valve_type = htmlspecialchars($_POST['valve_type'], ENT_QUOTES);
+		$valve_diameter = htmlspecialchars($_POST['valve_diameter'], ENT_QUOTES);
+		$valve_location = htmlspecialchars($_POST['valve_location'], ENT_QUOTES);
+		$valve_visibility = htmlspecialchars($_POST['valve_visibility'], ENT_QUOTES);
+
+
+		try {
+
+			if ($valve_id_old != $valve_id) {
+				$result = $pdo -> query("SELECT *from valves where valve_id = '$valve_id' ");
+
+				if ($result -> rowCount()>0) {
+					echo "ERROR: Valve ID already exists. Please choose a new ID";
+				} else {
+					$pdo -> query("UPDATE valves set valve_id = '$valve_id', valve_dma_id = '$valve_dma_id', valve_type = '$valve_type', valve_diameter = '$valve_diameter', valve_location = '$valve_location', valve_visibility = '$valve_visibility' where webgis_id = '$webgis_id' ");
+				}
+			} else {
+				$pdo -> query("UPDATE valves set valve_id = '$valve_id', valve_dma_id = '$valve_dma_id', valve_type = '$valve_type', valve_diameter = '$valve_diameter', valve_location = '$valve_location', valve_visibility = '$valve_visibility' where webgis_id = '$webgis_id' ");
+			}
+
+		} catch(PDOException $e) {
+			echo "ERROR ".$e->getMessage();
+		}
+	}
+
 ?>
\ No newline at end of file
diff --git a/public/index.php b/public/index.php
index b3c82c1..75463be 100644
--- a/public/index.php
+++ b/public/index.php
@@ -1,1631 +1,1631 @@
-<!-- ToDo's -->
-    <!-- Bereinigen und Kommentieren -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Leaflet Training</title>
-    
-    <!-- Leaflet Stylesheet & Skripte -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.0/leaflet.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.0/leaflet.js"></script>
-    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.0/leaflet-src.js"></script> -->
-
-    <!-- jQuery Skrip -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js"></script>
-
-    <!-- jQuery UI -->
-    <link rel="stylesheet" href="source/jquery-ui.min.css">
-    <script src="source/jquery-ui.min.js"></script>
-
-    <!-- Bootstrap Stylesheet & Skript -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-
-    <link rel="stylesheet" href="styles.css">
-
-    <!-- Sidebar Plugin -->
-    <link rel="stylesheet" href="plugins/sidebar/leaflet-sidebar.css">
-    <script src="plugins/sidebar/leaflet-sidebar.js"></script>
-     
-
-    <!-- Button Plugin -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
-    <script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
-
-    <!-- Font Plugin -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
-
-    <!-- PolylineMeasure Plugin -->
-    <link rel="stylesheet" href="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.css">
-    <script src="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.js"></script>
-
-    <!-- MousePosition Plugin -->
-    <link rel="stylesheet" href="plugins/mouseposition/L.Control.MousePosition.css">
-    <script src="plugins/mouseposition/L.Control.MousePosition.js"></script>
-
-    <!-- Geoman Plugin -->
-    <link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css">
-    <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.js"></script>
-
-    <!-- Minimap Plugin -->
-    <link rel="stylesheet" href="plugins/minimap/Control.MiniMap.min.css">
-    <script src="plugins/minimap/Control.MiniMap.min.js"></script>
-
-    <!-- ajax Plugin -->
-    <script src="plugins/ajax/leaflet.ajax.js"></script>
-
-    <!-- sweetalert2 Plugin -->
-     <script src=" https://cdn.jsdelivr.net/npm/sweetalert2@11.26.24/dist/sweetalert2.all.min.js "></script>
-     <link href=" https://cdn.jsdelivr.net/npm/sweetalert2@11.26.24/dist/sweetalert2.min.css " rel="stylesheet">
-
-    <!-- Sidebar Styles -->
-    <style>
-        .bold {
-            font-weight: bold;
-            font-size: 16px;
-        }
-
-        .errorMsg {
-            padding: 0;
-            text-align: center;
-            background-color: darksalmon;
-        }
-
-        .new_feature {
-            display: none;
-        }
-
-        .successMsg {
-            text-align: center;
-            background-color: darksalmon;
-            font-weight: bold;
-        }
-
-        /* .legend {
-            background: white;
-            padding: 10px 14px;
-            border-radius: 5px;
-            box-shadow: 0 0 15px rgba(0,0,0,0.2);
-            line-height: 24px;
-            font-size: 13px;
-        }
-
-        .legend h4 {
-            margin: 0 0 8px;
-            font-size: 15px;
-        }
-
-        .legend i {
-            width: 14px;
-            height: 14px;
-            display: inline-block;
-            margin-right: 6px;
-            border-radius: 50%;
-            vertical-align: middle;
-        }
-
-        .legend i.line {
-            border-radius: 0;
-            height: 3px;
-            width: 20px;
-            vertical-align: middle;
-        } */
-
-    </style>
-
-
-
-</head>
-
-<body>
-
-    <div id="sidebar" class="sidebar collapsed">
-	    <!-- Nav tabs -->
-	    <div class="sidebar-tabs">
-	        <ul role="tablist">
-	           	<li><a href="#home" role="tab"><i class="fa fa-home"></i></a></li>
-	            <li><a href="#valve" role="tab"><i class="fa fa-puzzle-piece"></i></a></li>
-	            <li><a href="#pipeline" role="tab"><i class="fa fa-sliders"></i></a></li>
-	            <li><a href="#building" role="tab"><i class="fa fa-building"></i></a></li>        
-	        </ul>
-	    </div>
-
-	    <!-- Tab panes -->
-	    <div class="sidebar-content">
-            <div class="sidebar-pane" id="home">
-                <h1 class="sidebar-header">
-                    Home
-                    <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
-                </h1>
-
-                <div id="divhome" class="col-xs-12">
-                    <div class="col-xs-12" style="height: 10px;"></div>
-
-                    <div class="col-xs-12">
-                        <p class="text-center bold">Area Filter</p>
-                    </div>
-
-                    <div id="home_error" class="errorMsg col-xs-12"></div>
-
-                    <div class="col-xs-12" style="height: 10px;"></div>
-
-                    <div class="form-group">
-                        <div class="col-xs-6">
-                            <input type="text" id="dma_id" class="form-control" placeholder="DMA ID">
-                        </div>
-                        <div class="col-xs-6">
-                            <button id="filter_dma" class="btn btn-primary btn-block">Filter Area</button>
-                        </div>
-                    </div>
-                    <div class="col-xs-12" id="home_information">
-                        
-                    </div>
-                </div>
-
-
-            </div>
-
-            <div class="sidebar-pane" id="valve">
-                <h1 class="sidebar-header">
-                    Valves
-                    <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
-                </h1>
-
-                <div id="divValve" class="col-xs-12">
-                    <div class="col-xs-12" style="height: 10px;"></div>
-
-                    <div class="col-xs-12">
-                        <p class="text-center bold">Valve Information</p>
-                    </div>
-
-                    <div id="valve_error" class="errorMsg col-xs-12"></div>
-
-                    <div class="col-xs-12" style="height: 10px;"></div>
-
-                    <div class="form-group">
-                        <div class="col-xs-6">
-                            <input type="text" id="valve_id" class="form-control" placeholder="Valve ID">
-                        </div>
-                        <div class="col-xs-6">
-                            <button id="findValve" class="btn btn-primary btn-block">Find Valve</button>
-                        </div>
-                    </div>
-                    <div class="col-xs-12" id="valve_information">
-                        
-                    </div>
-                </div>
-
-                <div class="col-xs-12" style="height: 60px;"></div>
-
-                <div id="newValve" class="col-xs-12">
-                    
-                    <div class="col-xs-8">
-                        <button type="button" class="btn btn-info btn-block" id="btn_valve_form">Insert New Valve</button>
-                    </div>
-                    <div class="col-xs-4">
-                        <button type="button" class="btn btn-success btn-block" id="btn_valve_refresh">Refresh</button>
-                    </div>
-
-                    <div class="col-xs-12" style="height: 10px;"></div>
-
-                    <div id="new_valve_information" class="col-xs-12 new_feature">
-                        
-                        <label class="control-label col-sm-4" for="valve_id_new">Valve ID</label>
-                        <div class="col-sm-8">
-                            <input type="text" class="form-control" name="valve_id_new" id="valve_id_new">
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-
-                        <label class="control-label col-sm-4" for="valve_type">Valve Type</label>
-                        <div class="col-sm-8">
-                            <select class="form-control" name="valve_type" id="valve_type">
-                                <option value=""></option>
-                                <option value="Gate Valve">Gate Valve</option>
-                                <option value="Washout Valve">Washout Valve</option>
-                                <option value="Air Release Valve">Air Release Valve</option>
-                            </select>
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-
-                        <label class="control-label col-sm-4" for="valve_dma_id">DMA ID</label>
-                        <div class="col-sm-8">
-                            <input type="text" class="form-control" name="valve_dma_id" id="valve_dma_id">
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-
-                        <label class="control-label col-sm-4" for="valve_diameter">Diameter (mm)</label>
-                        <div class="col-sm-8">
-                            <input type="text" class="form-control" name="valve_diameter" id="valve_diameter">
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-
-                        <label class="control-label col-sm-4" for="valve_visibility">Visibility</label>
-                        <div class="col-sm-8">
-                            <select class="form-control" name="valve_visibility" id="valve_visibility">
-                                <option value=""></option>
-                                <option value="Visible">Visible</option>
-                                <option value="Invisible">Invisible</option>
-                            </select>
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-
-                        <label class="control-label col-sm-4" for="valve_location">Location</label>
-                        <div class="col-sm-8">
-                            <input type="text" class="form-control" name="valve_location" id="valve_location">
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-
-                        <label class="control-label col-sm-4" for="valve_geometry">Geometry</label>
-                        <div class="col-sm-8">
-                            <textarea name="valve_geometry" id="valve_geometry" disabled></textarea>
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-                        
-                        <div class="col-sm-6">
-                            <button type="button" class="btn btn-danger btn-block" id="btn_valve_cancel">Cancel</button>	
-                        </div>
-                        <div class="col-sm-6">
-                            <button type="button" class="btn btn-success btn-block" id="btn_valve_insert">Insert Valve</button>	
-                        </div>
-                    </div>
-                </div>
-
-                <div class="col-xs-12" style="height: 10px;"></div>
-                <div id="valve_status" class="col-xs-12 successMsg"></div>  
-            </div>
-
-            <div class="sidebar-pane" id="pipeline">
-                <h1 class="sidebar-header">
-                    Pipelines
-                    <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
-                </h1>
-
-                <div id="divPipeline" class="col-xs-12">
-                    <div class="col-xs-12" style="height: 10px;"></div>
-
-                    <div class="col-xs-12">
-                        <p class="text-center bold">Pipeline Information</p>
-                    </div>
-
-                    <div id="pipeline_error" class="errorMsg col-xs-12"></div>
-
-                    <div class="col-xs-12" style="height: 10px;"></div>
-
-                    <div class="form-group">
-                        <div class="col-xs-6">
-                            <input type="text" id="pipeline_id" class="form-control" placeholder="Pipeline ID">
-                        </div>
-                        <div class="col-xs-6">
-                            <button id="findPipeline" class="btn btn-primary btn-block">Find Pipeline</button>
-                        </div>
-                    </div>
-                    <div class="col-xs-12" id="pipeline_information">
-                        
-                    </div>
-                    
-                </div>
-
-                <div class="col-xs-12" style="height: 60px;"></div>
-
-                <div id="newPipeline" class="col-xs-12">
-                    
-                    <div class="col-xs-8">
-                        <button type="button" class="btn btn-info btn-block" id="btn_pipeline_form">Insert New Pipeline</button>
-                    </div>
-                    <div class="col-xs-4">
-                        <button type="button" class="btn btn-success btn-block" id="btn_pipeline_refresh">Refresh</button>
-                    </div>
-
-                    <div class="col-xs-12" style="height: 10px;"></div>
-
-                    <div id="new_pipeline_information" class="col-xs-12 new_feature">
-                        
-                        <label class="control-label col-sm-4" for="new_pipeline_id">Pipe ID</label>
-                        <div class="col-sm-8">
-                            <input type="text" class="form-control" name="new_pipeline_id" id="new_pipeline_id">
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-
-                        <label class="control-label col-sm-4" for="pipeline_category">Category</label>
-                        <div class="col-sm-8">
-                            <select class="form-control" name="pipeline_category" id="pipeline_category">
-                                <option value=""></option>
-                                <option value="Distribution Pipeline">Distribution Pipeline</option>
-                                <option value="Reticulation Pipeline">Reticulation Pipeline</option>
-                                <option value="Transmission Pipeline">Transmission Pipeline</option>
-                            </select>
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-
-                        <label class="control-label col-sm-4" for="pipeline_dma_id">DMA ID</label>
-                        <div class="col-sm-8">
-                            <input type="text" class="form-control" name="pipeline_dma_id" id="pipeline_dma_id">
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-
-                        <label class="control-label col-sm-4" for="pipeline_diameter">Diameter (mm)</label>
-                        <div class="col-sm-8">
-                            <input type="text" class="form-control" name="pipeline_diameter" id="pipeline_diameter">
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-
-                        <label class="control-label col-sm-4" for="pipeline_method">Construction Method</label>
-                        <div class="col-sm-8">
-                            <select class="form-control" name="pipeline_method" id="pipeline_method">
-                                <option value=""></option>
-                                <option value="OT">OT</option>
-                                <option value="HDD">HDD</option>
-                            </select>
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-
-                        <label class="control-label col-sm-4" for="pipeline_location">Location</label>
-                        <div class="col-sm-8">
-                            <input type="text" class="form-control" name="pipeline_location" id="pipeline_location">
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-
-                        <label class="control-label col-sm-4" for="pipeline_geometry">Geometry</label>
-                        <div class="col-sm-8">
-                            <textarea name="pipeline_geometry" id="pipeline_geometry" disabled></textarea>
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-                        
-                        <div class="col-sm-6">
-                            <button type="button" class="btn btn-danger btn-block" id="btn_pipeline_cancel">Cancel</button>	
-                        </div>
-                        <div class="col-sm-6">
-                            <button type="button" class="btn btn-success btn-block" id="btn_pipeline_insert">Insert Pipeline</button>	
-                        </div>
-                    </div>
-                </div>
-
-                <div class="col-xs-12" style="height: 10px;"></div>
-                <div id="pipeline_status" class="col-xs-12 successMsg"></div>  
-                
-            </div>
-
-            <div class="sidebar-pane" id="building">
-                <h1 class="sidebar-header">
-                    Buildings
-                    <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
-                </h1>
-
-                <div id="divbuilding" class="col-xs-12">
-                    <div class="col-xs-12" style="height: 10px;"></div>
-
-                    <div class="col-xs-12">
-                        <p class="text-center bold">Building Information</p>
-                    </div>
-
-                    <div id="building_error" class="errorMsg col-xs-12"></div>
-
-                    <div class="col-xs-12" style="height: 10px;"></div>
-
-                    <div class="form-group">
-                        <div class="col-xs-6">
-                            <input type="text" id="building_id" class="form-control" placeholder="Building ID">
-                        </div>
-                        <div class="col-xs-6">
-                            <button id="findBuilding" class="btn btn-primary btn-block">Find Building</button>
-                        </div>
-                    </div>
-                    <div class="col-xs-12" id="building_information">
-                        
-                    </div>
-                    
-                </div>
-
-                <div class="col-xs-12" style="height: 60px;"></div>
-
-                <div id="newBuilding" class="col-xs-12">
-                    
-                    <div class="col-xs-8">
-                        <button type="button" class="btn btn-info btn-block" id="btn_building_form">Insert New Building</button>
-                    </div>
-                    <div class="col-xs-4">
-                        <button type="button" class="btn btn-success btn-block" id="btn_building_refresh">Refresh</button>
-                    </div>
-
-                    <div class="col-xs-12" style="height: 10px;"></div>
-
-                    <div id="new_building_information" class="col-xs-12 new_feature">
-                        
-                        <label class="control-label col-sm-4" for="new_building_id">Building ID</label>
-                        <div class="col-sm-8">
-                            <input type="text" class="form-control" name="new_building_id" id="new_building_id">
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-
-                        <label class="control-label col-sm-4" for="building_category">Category</label>
-                        <div class="col-sm-8">
-                            <select class="form-control" name="building_category" id="building_category">
-                                <option value=""></option>
-                                <option value="Building">Building</option>
-                                <option value="Tin Shed">Tin Shed</option>
-                                <option value="Under Construction">Under Construction</option>
-                                <option value="Open Plot">Open Plot</option>
-                            </select>
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-
-                        <label class="control-label col-sm-4" for="building_dma_id">DMA ID</label>
-                        <div class="col-sm-8">
-                            <input type="text" class="form-control" name="building_dma_id" id="building_dma_id">
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-
-                        <label class="control-label col-sm-4" for="building_storey">Storey</label>
-                        <div class="col-sm-8">
-                            <input type="number" class="form-control" name="building_storey" id="building_storey">
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-
-                        <label class="control-label col-sm-4" for="building_population">Population</label>
-                        <div class="col-sm-8">
-                            <input type="number" class="form-control" name="building_population" id="building_population">
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-
-                        <label class="control-label col-sm-4" for="building_location">Location</label>
-                        <div class="col-sm-8">
-                            <input type="text" class="form-control" name="building_location" id="building_location">
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-
-                        <label class="control-label col-sm-4" for="building_geometry">Geometry</label>
-                        <div class="col-sm-8">
-                            <textarea name="building_geometry" id="building_geometry" disabled></textarea>
-                        </div>
-
-                        <div class="col-xs-12" style="height: 10px;"></div>
-                        
-                        <div class="col-sm-6">
-                            <button type="button" class="btn btn-danger btn-block" id="btn_building_cancel">Cancel</button>	
-                        </div>
-                        <div class="col-sm-6">
-                            <button type="button" class="btn btn-success btn-block" id="btn_building_insert">Insert building</button>	
-                        </div>
-                    </div>
-                </div>
-
-                <div class="col-xs-12" style="height: 10px;"></div>
-                <div id="building_status" class="col-xs-12 successMsg"></div>  
-
-                
-            </div>
-	    </div>
-	</div>
-    
-    <div id="mapdiv" class="col-md-12"></div>
-
-    <script>
-        var mymap;
-        var baseLayers;
-        var overlays;
-        var lyrSearch;
-        
-        var layerValves;
-        var layerPipelines;
-        var layerBuildings;
-        var raster_data;
-
-        var valves_array = [];
-        var pipelines_array = [];
-        var buildings_array = [];
-
-        var dma_id;
-
-
-        // Map Canvas
-        var mymap = L.map('mapdiv', {
-            center: [23.78573, 90.44378],
-            zoom: 12.5,
-            attributionControl: false,
-            zoomControl: false,
-            
-        });
-        
-        // Background Maps
-        var OpenStreetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: 'OpenStreetMap Contributors',
-            maxZoom: 20,
-        })
-
-        var CartoDB = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
-            attribution: 'Carto Contributors',
-            maxZoom: 20,
-        })
-
-        var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
-            attribution: 'ESRI',
-            maxZoom: 20,        
-        })
-
-        var Esri_WorldImagery_Minimap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
-            attribution: 'ESRI',
-            maxZoom: 20,        
-        })
-
-		var GoogleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
-			maxZoom: 20,
-			subdomains:['mt0','mt1','mt2','mt3']
-		});
-
-        var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
-            maxZoom: 20,
-        });
-        
-        CartoDB.addTo(mymap);
-
-
-        // Sidebar
-        var sidebar = L.control.sidebar('sidebar', {
-            position: 'left'
-        });
-
-        mymap.addControl(sidebar);
-        
-        // Zoom Control
-        L.control.zoom({
-            position: "topright",
-        }).addTo(mymap);
-
-        // Measure Tool
-        L.control.polylineMeasure({
-            position: 'topright',
-        }).addTo(mymap);
-
-        // Geoman Plugin
-        mymap.pm.addControls({  
-            position: 'topright',
-            drawMarker: true,
-            drawPolyline: true,
-            drawPolygon: true,
-            drawCircleMarker: false,
-            drawCircle: false,
-            drawText: false,
-            drawRectangle: false,
-            editMode: false,
-            dragMode: false,
-            cutPolygon: false,
-            removalMode: true,
-            rotateMode: false,
-        });
-        
-        mymap.on("pm:create", function(e) {
-            var jsn = e.layer.toGeoJSON().geometry;
-            var jsn_modified;
-
-            if (e.shape == 'Marker') {
-                
-                if(confirm("Add Valve?")) {
-                    jsn_modified = {type:"Point", coordinates:jsn.coordinates}
-                    $("#valve_geometry").val(JSON.stringify(jsn_modified));
-                }
-            }
-
-            if (e.shape == 'Line') {
-                
-                if(confirm("Add Pipeline?")) {
-                    jsn_modified = {type:"MultiLineString", coordinates:[jsn.coordinates]}
-                    $("#pipeline_geometry").val(JSON.stringify(jsn_modified));
-                }
-            }
-
-            if (e.shape == 'Polygon') {
-                
-                if(confirm("Add Building?")) {
-                    jsn_modified = {type:"MultiPolygon", coordinates:[jsn.coordinates]}
-                    $("#building_geometry").val(JSON.stringify(jsn_modified));
-                }
-            }
-        });
-
-        // Layer Control
-        var baseLayers = {
-            "Google Streets": GoogleStreets,
-            "OpenStreetMap": OpenStreetMap,
-            "CartoDB": CartoDB,
-            "ESRI Satelite": Esri_WorldImagery,
-            "OpenTopoMap": OpenTopoMap,
-        };
-
-        var control_layers = L.control.layers(baseLayers, overlays).addTo(mymap)
-
-        // Scale Display
-        L.control.scale({
-            position: 'bottomright',
-            maxWidth: 250,
-            imperial: false,
-        }).addTo(mymap)
-
-        // Mouse-Position
-        L.control.mousePosition({
-            position: 'bottomright',
-        }).addTo(mymap);
-
-        // Minimap Plugin
-        var miniMap = new L.Control.MiniMap(Esri_WorldImagery_Minimap, {
-            position: "bottomright",
-            height: 200,
-            width: 200,
-            toggleDisplay: true,
-        }).addTo(mymap);
-
-
-        // Legend Control
-        // var legend = L.control({ position: 'bottomleft' });
-
-        // legend.onAdd = function (map) {
-        //     var div = L.DomUtil.create('div', 'legend');
-        //     div.innerHTML = `
-        //         <h4>Legende</h4>
-        //         <b>Valves</b><br>
-        //         <i style="background:#2E7D32"></i> Air Release Valve<br>
-        //         <i style="background:#43A047"></i> Gate Valve<br>
-        //         <i style="background:#66BB6A"></i> Washout Valve<br><br>
-        //         <b>Pipelines</b><br>
-        //         <i class="line" style="background:#1565C0"></i> Distribution<br>
-        //         <i class="line" style="background:#797DA4"></i> Reticulation<br>
-        //         <i class="line" style="background:#1E88E5"></i> Transmission<br><br>
-        //         <b>Buildings</b><br>
-        //         <i style="background:#B71C1C"></i> 10+ Storey<br>
-        //         <i style="background:#D32F2F"></i> 5-9 Storey<br>
-        //         <i style="background:#F44336"></i> 1-2 Storey<br>
-        //         <i style="background:#EF5350"></i> Tin Shed<br>
-        //         <i style="background:#E57373"></i> Open Plot<br>
-        //     `;
-        //     return div;
-        // };
-
-        // legend.addTo(mymap);
-
-        
-        // Data Control
-
-        // HOME
-        $("#filter_dma").click(function() {
-            dma_id = $("#dma_id").val();
-
-            if (!dma_id) {
-                $("#home_error").html("Please provide a DMA ID first!")
-            } else {
-                load_valves(dma_id);
-                load_pipelines(dma_id);
-                load_buildings(dma_id);
-                load_rasterdata(dma_id);
-
-            }
-        });
-        
-        
-        
-
-        // Point Features
-        function load_valves (dma_id) {
-            $.ajax({
-                url:'load_data.php',
-                data: {table:'valves', dma_id:dma_id},
-                type: 'POST',
-                success: function(response) {
-                    if (response.trim().substr(0, 5)=="ERROR") {
-                        console.log(response);
-                    } else {
-                        var jsnValve = JSON.parse(response);
-
-                        if (layerValves) {
-                            layerValves.remove();
-                            control_layers.removeLayer(layerValves)
-                        }
-
-                        layerValves = L.geoJSON(jsnValve, {
-                            pointToLayer:style_valves
-                        }).addTo(mymap);
-
-                        control_layers.addOverlay(layerValves, "Valves");
-                        mymap.fitBounds(layerValves.getBounds());
-                    }
-                },
-                error: function(xhr, status, error) {
-                    console.log("Error: "+error);
-                }
-            });
-        }
-
-        function refresh_valves (dma_id) {
-            $.ajax({
-                url:'load_data.php',
-                data: {table:'valves', dma_id:dma_id},
-                type: 'POST',
-                success: function(response) {
-                    if (response.trim().substr(0, 5)=="ERROR") {
-                        console.log(response);
-                    } else {
-                        var jsnValve = JSON.parse(response);
-
-                        if (layerValves) {
-                            layerValves.remove();
-                            control_layers.removeLayer(layerValves)
-                        }
-
-                        layerValves = L.geoJSON(jsnValve, {
-                            pointToLayer:style_valves
-                        }).addTo(mymap);
-
-                        control_layers.addOverlay(layerValves, "Valves");
-                    }
-                },
-                error: function(xhr, status, error) {
-                    console.log("Error: "+error);
-                }
-            });
-        }
-
-        $("#valve_id").autocomplete({
-                source:valves_array,
-                appendTo: "#sidebar"
-            })
-
-        function style_valves(json, latlng) {
-            var att = json.properties;
-            var color;
-            var fill_color;
-            var radius = 5;
-            var fill_opacity = 1;
-
-            valves_array.push(att.valve_id);
-
-            switch (att.valve_type) {
-                case 'Air Release Valve':
-                    color = '#2e7d32';
-                    fill_color = '#2E7D32';                  
-                    break;
-                case 'Gate Valve':
-                    color = '#43A047';
-                    fill_color = '#43A047';                  
-                    break;
-                case 'Washout Valve':
-                    color = '#66BB6A';
-                    fill_color = '#66BB6A';                  
-                    break;
-                default:
-                    color = '#616161'
-                    fill_color = '#616161'
-                    break;
-            }
-        
-            var style = {radius:radius, color:color, fillColor:fill_color, fillOpacity:fill_opacity};
-
-            return L.circleMarker(latlng, style).bindTooltip("Valve ID: "+att.valve_id+"<br>Valve Type: "+att.valve_type+"<br>Diameter: "+att.valve_diameter+" mm<br>Location: "+att.valve_location+"<br>Visibility: "+att.valve_visibility).bindPopup(
-                `<div class="popup-container">
-                    <input type="hidden" name="webgis_id" class="updateValve" value='${att.webgis_id}'>
-
-                    <input type="hidden" name="valve_id_old" class="updateValve" value='${att.valve_id}'>
-                    
-                    <div class="popup-form-group">
-                        <label class="control-label popup-label">Valve ID</label>
-                        <input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_id}' name="valve_id">			
-                    </div>
-                    <div class="popup-form-group">
-                        <label class="control-label popup-label">DMA ID</label>
-                        <input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_dma_id}' name="valve_dma_id">			
-                    </div>
-                    <div class="popup-form-group">
-                        <label class="control-label popup-label">Type</label>
-                        <input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_type}' name="valve_type">			
-                    </div>
-                    <div class="popup-form-group">
-                        <label class="control-label popup-label">Diameter (mm)</label>
-                        <input type="number" class="form-control popup-input text-center updateValve" value='${att.valve_diameter}' name="valve_diameter">			
-                    </div>
-                    <div class="popup-form-group">
-                        <label class="control-label popup-label">Location</label>
-                        <input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_location}' name="valve_location">			
-                    </div>
-                    <div class="popup-form-group">
-                        <label class="control-label popup-label">Visibility</label>
-                        <input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_visibility}' name="valve_visibility">			
-                    </div>
-                    
-                    <div class="popup-button-group">
-                        <button type="submit" class="btn btn-success popup-button" onclick='updateValve()'>Update</button>
-                        <button type="submit" class="btn btn-danger popup-button" onclick='deleteValve()'>Delete</button>
-                    </div>
-
-                </div>`
-                );
-		}
-
-
-			function updateValve(){
-				var jsn = returnFormData('updateValve');
-				jsn.request = "valves";
-
-				Swal.fire({
-					title: "Do you want to save this Valve?",
-				 	showDenyButton: true,
-				 	showCancelButton: true,
-				 	confirmButtonText: "Save",
-				 	denyButtonText: `Don't save`
-				}).then((result) => {
-					if (result.isConfirmed) {
-						$.ajax({
-							url:'update_data.php',
-							data:jsn,
-							type: 'POST',
-							success: function(response){
-								if (response.trim().substr(0, 5) == "ERROR") {
-                                    Swal.fire("Error!", response, "error");
-                                } else {
-                                    Swal.fire("Saved!", "", "success");
-                                    refresh_valves(dma_id);
-                                }
-							},
-							error: function(error){
-								console.log("ERROR: "+error);
-							}
-						});
-				    	
-					} else if (result.isDenied) {
-						Swal.fire("Valve not saved", "", "info");
-					}
-				});
-			}
-
-			function deleteValve(){
-				var jsn = returnFormData('updateValve');
-				jsn.request = "valves";
-
-				Swal.fire({
-					title: "Do you want to delete this Valve?",
-				 	showDenyButton: true,
-				 	showCancelButton: true,
-				 	confirmButtonText: "Delete",
-				 	denyButtonText: `Don't Delete`
-				}).then((result) => {
-					if (result.isConfirmed) {
-						$.ajax({
-							url:'delete_data.php',
-							data:jsn,
-							type: 'POST',
-							success: function(response){
-                                if (response.trim().substr(0, 5) == "ERROR") {
-                                    Swal.fire("Error!", response, "error");
-                                } else {
-                                    Swal.fire("Deleted!", "", "success");
-                                    refresh_valves(dma_id);
-                                }
-                            },
-							error: function(error){
-								console.log("ERROR: "+error);
-							}
-						});
-				    	
-					} else if (result.isDenied) {
-						Swal.fire("Valve not deleted!", "", "info");
-					}
-				});
-			}
-        
-
-        // jQuery
-        $("#findValve").click(function() {
-            var valve_id = $("#valve_id").val();
-            
-            returnLayerByAttribute("valves", "valve_id", valve_id, function(lyr) {
-                $("#valve_error").html("");
-                $("#valve_information").html("");
-                
-                if (lyrSearch) {
-                    mymap.removeLayer(lyrSearch);
-                }
-
-                if (lyr) {
-                    var att = lyr.feature.properties;
-                    lyrSearch = L.circle(lyr.getLatLng(), {radius:10, color:'red', weight:10, opacity:0.5, fillOpacity:0.25}).addTo(mymap);
-
-                    mymap.setView(lyr.getLatLng(), 20);
-               
-                    layerValves.bringToFront();
-
-                    $("#valve_information").html("Valve ID: "+att.valve_id+"<br>Valve Type: "+att.valve_type+"<br>Diameter: "+att.valve_diameter+" mm<br>Location: "+att.valve_location+"<br>Visibility: "+att.valve_visibility);
-
-                } else {
-                    $("#valve_error").html("Valve not found!");
-                }
-            });
-        });
-
-
-        $("#btn_valve_form").click(function() {
-            $("#new_valve_information").show();
-        })
-
-        $("#btn_valve_cancel").click(function() {
-            $("#new_valve_information").hide();
-        })
-
-        $("#btn_valve_insert").click(function() {
-            var valve_id = $("#valve_id_new").val();
-            var valve_type = $("#valve_type").val();
-            var valve_dma_id = $("#valve_dma_id").val();
-            var valve_diameter = $("#valve_diameter").val();
-            var valve_visibility = $("#valve_visibility").val();
-            var valve_location = $("#valve_location").val();
-            var valve_geometry = $("#valve_geometry").val();
-
-            if (valve_id=="" || valve_type=="" || valve_dma_id=="" || valve_geometry =="") {
-                $("#valve_status").html("Please fill up all Fields.")
-            } else {
-                $.ajax({
-                    url:'insert_data.php',
-                    data:{valve_id:valve_id, valve_type:valve_type, valve_dma_id:valve_dma_id, valve_diameter:valve_diameter, valve_visibility:valve_visibility, valve_location:valve_location, valve_geometry:valve_geometry, request:'valves'},
-                    type: "POST",
-                    success:function(response) {
-                        if (response.trim().substr(0, 5)=="ERROR") {
-                            console.log(response);
-                            $("#valve_status").html(response)
-                        } else {
-                            $("#valve_status").html("Valve inserted successfully!")
-                            refresh_valves(dma_id);
-
-                            $("#valve_id_new").val("");
-                            $("#valve_type").val("");
-                            $("#valve_dma_id").val("");
-                            $("#valve_diameter").val("");
-                            $("#valve_visibility").val("");
-                            $("#valve_location").val("");
-                            $("#valve_geometry").val("");
-                        }
-                    },
-                    error:function(xhr, status, error) {
-                        $("#valve_status").html(error)
-                    }
-                })
-            }
-        });
-
-        $("#btn_valve_refresh").click(function() {
-            refresh_valves(dma_id);
-        })
-
-        // Line Features
-        function load_pipelines(dma_id) {
-            $.ajax({
-                url:'load_data.php',
-                data: {table:'pipelines', dma_id:dma_id},
-                type: 'POST',
-                success: function(response) {
-                    if (response.trim().substr(0, 5)=="ERROR") {
-                        console.log(response);
-                    } else {
-                        var jsnPipeline = JSON.parse(response);
-
-                        if (layerPipelines) {
-                            layerPipelines.remove();
-                            control_layers.removeLayer(layerPipelines)
-                        }
-
-                        layerPipelines = L.geoJSON(jsnPipeline, {
-                            style:style_pipelines,
-                            onEachFeature:process_pipelines,
-                        }).addTo(mymap);
-
-                        control_layers.addOverlay(layerPipelines, "Pipelines");
-                    }
-                },
-                error: function(xhr, status, error) {
-                    console.log("Error: "+error);
-                }
-            });
-        }
-
-        $("#pipeline_id").autocomplete({
-                source:pipelines_array,
-                appendTo: "#sidebar",
-            })
-
-        function style_pipelines(json) {
-            var att = json.properties;
-            var color;
-
-            pipelines_array.push(att.pipeline_id);
-
-            switch (att.pipeline_category) {
-                case 'Distribution Pipeline':
-                    color = '#1565C0';
-                    break;
-                case 'Reticulation Pipeline':
-                    color = '#797DA4';
-                    break;
-                case 'Transmission Pipeline':
-                    color = '#1E88E5';
-                    break;
-                default:
-                    color = '#616161'
-                    break;
-            }
-            
-            return {color:color};
-        }
-
-        function process_pipelines(json, lyr) {
-            var att = json.properties
-            lyr.bindTooltip("Pipe ID: "+att.pipeline_id+"<br>Category: "+att.pipeline_category+"<br>Diameter: "+att.pipeline_diameter+" mm"+"<br>Length: "+att.pipeline_length+" m"+"<br>Location: "+att.pipeline_location).bindPopup(
-                `<div class="popup-container">
-
-						<input type="hidden" name="webgis_id" class="updatePipeline" value='${att.webgis_id}'>
-
-						<input type="hidden" name="pipeline_id_old" class="updatePipeline" value='${att.pipeline_id}'>
-						
-						<div class="popup-form-group">
-							<label class="control-label popup-label">Pipe ID</label>
-							<input type="text" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_id}' name="pipeline_id">			
-						</div>
-						<div class="popup-form-group">
-							<label class="control-label popup-label">DMA ID</label>
-							<input type="text" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_dma_id}' name="pipeline_dma_id">			
-						</div>
-						<div class="popup-form-group">
-							<label class="control-label popup-label">Diameter (mm)</label>
-							<input type="number" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_diameter}' name="pipeline_diameter">			
-						</div>
-						<div class="popup-form-group">
-							<label class="control-label popup-label">Location</label>
-							<input type="text" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_location}' name="pipeline_location">			
-						</div>
-						<div class="popup-form-group">
-							<label class="control-label popup-label">Category</label>
-							<input type="text" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_category}' name="pipeline_category">			
-						</div>
-						<div class="popup-form-group">
-							<label class="control-label popup-label">Length (m)</label>
-							<input type="number" step="any" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_length}' name="pipeline_length">			
-						</div>
-						
-						<div class="popup-button-group">
-							<button type="submit" class="btn btn-success popup-button" onclick='updatePipeline()'>Update</button>
-							<button type="submit" class="btn btn-danger popup-button" onclick='deletePipeline()'>Delete</button>
-						</div>
-
-					</div>`
-					);
-			}
-
-			function updatePipeline(){
-				var jsn = returnFormData('updatePipeline');
-				jsn.request = "pipelines";
-
-				Swal.fire({
-					title: "Do you want to save the changes?",
-				 	showDenyButton: true,
-				 	showCancelButton: true,
-				 	confirmButtonText: "Save",
-				 	denyButtonText: `Don't save`
-				}).then((result) => {
-					if (result.isConfirmed) {
-						$.ajax({
-							url:'update_data.php',
-							data:jsn,
-							type: 'POST',
-							success: function(response){
-                                if (response.trim().substr(0, 5) == "ERROR") {
-                                    Swal.fire("Error!", response, "error");
-                                } else {
-                                    Swal.fire("Saved!", "", "success");
-                                    load_pipelines(dma_id);
-                                }
-                            },
-							error: function(error){
-								console.log("ERROR: "+error);
-							}
-						});
-				    	
-					} else if (result.isDenied) {
-						Swal.fire("Changes are not saved", "", "info");
-					}
-				});
-			}
-
-			function deletePipeline(){
-				var jsn = returnFormData('updatePipeline');
-				jsn.request = "pipelines";
-
-				Swal.fire({
-					title: "Do you want to delete this pipeline?",
-				 	showDenyButton: true,
-				 	showCancelButton: true,
-				 	confirmButtonText: "Delete",
-				 	denyButtonText: `Don't Delete`
-				}).then((result) => {
-					if (result.isConfirmed) {
-						$.ajax({
-							url:'delete_data.php',
-							data:jsn,
-							type: 'POST',
-							success: function(response){
-                                if (response.trim().substr(0, 5) == "ERROR") {
-                                    Swal.fire("Error!", response, "error");
-                                } else {
-                                    Swal.fire("Deleted!", "", "success");
-                                    load_pipelines(dma_id);
-                                }
-                            },
-							error: function(error){
-								console.log("ERROR: "+error);
-							}
-						});
-				    	
-					} else if (result.isDenied) {
-						Swal.fire("Pipeline not deleted!", "", "info");
-					}
-				});
-			}
-
-
-    
-        // jQuery
-        $("#findPipeline").click(function() {
-            var pipeline_id = $("#pipeline_id").val();
-            
-            returnLayerByAttribute("pipelines", "pipeline_id", pipeline_id, function(lyr) {
-                $("#pipeline_error").html("");
-                $("#pipeline_information").html("");
-
-                if (lyrSearch) {
-                    mymap.removeLayer(lyrSearch);
-                }
-
-                if (lyr) {
-                    var att = lyr.feature.properties;
-            
-                    lyrSearch = L.geoJSON(lyr.toGeoJSON(), {style:{color:'red', weight:10, opacity:0.5}}).addTo(mymap);
-
-                    mymap.fitBounds(lyr.getBounds());
-                    layerPipelines.bringToFront();
-                                    
-                    $("#pipeline_information").html("Pipe ID: "+att.pipeline_id+"<br>Category: "+att.pipeline_category+"<br>Diameter: "+att.pipeline_diameter+" mm"+"<br>Length: "+att.pipeline_length+" m"+"<br>Location: "+att.pipeline_location);
-
-                } else {
-                    $("#pipeline_error").html("Pipeline not found!");
-                }
-            });
-        })
-
-
-        $("#btn_pipeline_form").click(function() {
-            $("#new_pipeline_information").show();
-        })
-
-        $("#btn_pipeline_cancel").click(function() {
-            $("#new_pipeline_information").hide();
-        })
-
-        $("#btn_pipeline_insert").click(function() {
-            var pipeline_id = $("#new_pipeline_id").val();
-            var pipeline_category = $("#pipeline_category").val();
-            var pipeline_dma_id = $("#pipeline_dma_id").val();
-            var pipeline_diameter = $("#pipeline_diameter").val();
-            var pipeline_method = $("#pipeline_method").val();
-            var pipeline_location = $("#pipeline_location").val();
-            var pipeline_geometry = $("#pipeline_geometry").val();
-
-            if (pipeline_id == "" || pipeline_category == "" || pipeline_geometry == "") {
-                $("#pipeline_status").html("Please fill up all Fields.")
-            } else {
-                $.ajax({
-                    url:'insert_data.php',
-                    data: {pipeline_id:pipeline_id, pipeline_category:pipeline_category, pipeline_dma_id:pipeline_dma_id, pipeline_diameter:pipeline_diameter, pipeline_method:pipeline_method, pipeline_location:pipeline_location, pipeline_geometry:pipeline_geometry, request:'pipelines'},
-                    type: "POST",
-                    success:function(response) {
-                        if (response.trim().substr(0, 5)=="ERROR") {
-                            console.log(response);
-                            $("#pipeline_status").html(response)
-                        } else {
-                            $("#pipeline_status").html("Pipeline inserted successfully!")
-                            load_pipelines(dma_id);
-
-                            $("#new_pipeline_id").val("");
-                            $("#pipeline_category").val("");
-                            $("#pipeline_dma_id").val("");
-                            $("#pipeline_diameter").val("");
-                            $("#pipeline_method").val("");
-                            $("#pipeline_location").val("");
-                            $("#pipeline_geometry").val("");
-                        }
-                    },
-                    error:function(xhr, status, error) {
-                        $("#pipeline_status").html(error)
-                    }
-                })
-            }
-        })
-
-        $("#btn_pipeline_refresh").click(function() {
-            load_pipelines(dma_id);
-        })
-
-
-        // Polygon Features
-        function load_buildings (dma_id) {
-            $.ajax({
-                url:'load_data.php',
-                data: {table:'buildings', dma_id:dma_id},
-                type: 'POST',
-                success: function(response) {
-                    if (response.trim().substr(0, 5)=="ERROR") {
-                        console.log(response);
-                    } else {
-                        var jsnBuilding = JSON.parse(response);
-
-                        if (layerBuildings) {
-                            layerBuildings.remove();
-                            control_layers.removeLayer(layerBuildings)
-                        }
-
-                        layerBuildings = L.geoJSON(jsnBuilding, {
-                            style:style_buildings,
-                            onEachFeature:process_buildings,
-                        }).addTo(mymap);
-
-                        control_layers.addOverlay(layerBuildings, "Buildings");
-                    }
-                },
-                error: function(xhr, status, error) {
-                    console.log("Error: "+error);
-                }
-            });
-        }
-
-        $("#building_id").autocomplete({
-                source:buildings_array,
-                appendTo: "#sidebar"
-            })
-        
-        function style_buildings(json) {
-            var att = json.properties;
-            var storey = att.building_storey
-            var color;
-            var fill_color;
-            var fill_opacity = 1;
-
-            buildings_array.push(att.building_id);
-
-            switch (att.building_category) {
-                case 'Building':
-                    if (storey>=10) {
-                        color = '#B71C1C';
-                        fill_color = '#B71C1C';
-                    } else if (storey>=7) {
-                        color = '#C62828';
-                        fill_color = '#C62828';
-                    } else if (storey>=5) {
-                        color = '#D32F2F';
-                        fill_color = '#D32F2F';
-                    } else if (storey>=3) {
-                        color = '#E53935';
-                        fill_color = '#E53935';
-                    } else {
-                        color = '#F44336';
-                        fill_color = "#F44336";
-                    }
-                    break;
-                case 'Tin Shed':
-                    color = '#EF5350';
-                    fill_color = '#EF5350';
-                    break;
-                case 'Open Plot':
-                    color = '#E57373';
-                    fill_color = '#E57373';                    
-                    break;
-                default:
-                    color = '#EF9A9A'
-                    fill_color = '#EF9A9A'
-                    break;
-            }
-
-        return {color:color, fillColor:fill_color, fillOpacity:fill_opacity}
-        }
-
-        function process_buildings(json, lyr) {
-            var att = json.properties;
-
-            lyr.bindTooltip("Building ID: "+att.building_id+"<br>Account Number: "+att.account_no+"<br>Category: "+att.building_category+"<br>Storey: "+att.building_storey+"<br>Population: "+att.building_population+"<br>Location: "+att.building_location).bindPopup(
-                `<div class="popup-container">
-        
-                    <input type="hidden" name="webgis_id" class="updateBuilding" value='${att.webgis_id}'>
-                    <input type="hidden" name="account_no_old" class="updateBuilding" value='${att.account_no}'>
-
-                    <div class="popup-form-group">
-                        <label class="control-label popup-label">Account Number</label>
-                        <input type="text" class="form-control popup-input text-center updateBuilding" value='${att.account_no}' name="account_no">
-                    </div>
-
-                    <div class="popup-form-group">
-                        <label class="control-label popup-label">DMA ID</label>
-                        <input type="text" class="form-control popup-input text-center updateBuilding" value='${att.building_dma_id}' name="building_dma_id">
-                    </div>
-
-                    <div class="popup-form-group">
-                        <label class="control-label popup-label">Category</label>
-                        <input type="text" class="form-control popup-input text-center updateBuilding" value='${att.building_category}' name="building_category">
-                    </div>
-
-                    <div class="popup-form-group">
-                        <label class="control-label popup-label">Storey</label>
-                        <input type="number" class="form-control popup-input text-center updateBuilding" value='${att.building_storey}' name="building_storey">
-                    </div>
-
-                    <div class="popup-form-group">
-                        <label class="control-label popup-label">Population</label>
-                        <input type="number" class="form-control popup-input text-center updateBuilding" value='${att.building_population}' name="building_population">
-                    </div>
-
-                    <div class="popup-form-group">
-                        <label class="control-label popup-label">Location</label>
-                        <input type="text" class="form-control popup-input text-center updateBuilding" value='${att.building_location}' name="building_location">
-                    </div>
-
-                    <div class="popup-button-group">
-                        <button type="submit" class="btn btn-success popup-button" onclick='updateBuilding()'>Update</button>
-                        <button type="submit" class="btn btn-danger popup-button" onclick='deleteBuilding()'>Delete</button>
-                    </div>
-
-                </div>`
-            );
-        }
-    
-
-        function updateBuilding() {
-            var jsn = returnFormData('updateBuilding');
-            jsn.request = "buildings";
-
-            Swal.fire({
-                title: "Do you want to save this Building?",
-                showDenyButton: true,
-                showCancelButton: true,
-                confirmButtonText: "Save",
-                denyButtonText: `Don't save`
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    $.ajax({
-                        url:'update_data.php',
-                        data:jsn,
-                        type:'POST',
-                        success: function(response){
-                            if (response.trim().substr(0, 5) == "ERROR") {
-                                Swal.fire("Error!", response, "error");
-                            } else {
-                                Swal.fire("Saved!", "", "success");
-                                load_buildings(dma_id);
-                            }
-                        },
-                        error: function(error) {
-                            console.log("ERROR: "+error);
-                        },
-                    })
-                } 
-                else if (result.isDenied) {
-                    Swal.fire("Building not saved", "", "info");
-                }
-            });
-        };
-
-        function deleteBuilding() {
-            var jsn = returnFormData('updateBuilding');
-            jsn.request = "buildings";
-
-            Swal.fire({
-                title: "Do you want to delete this Building?",
-                showDenyButton: true,
-                showCancelButton: true,
-                confirmButtonText: "Delete",
-                denyButtonText: `Don't delete`
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    $.ajax({
-                        url:'delete_data.php',
-                        data:jsn,
-                        type:'POST',
-                        success: function(response){
-                            if (response.trim().substr(0, 5) == "ERROR") {
-                                Swal.fire("Error!", response, "error");
-                            } else {
-                                Swal.fire("Deleted!", "", "success");
-                                load_buildings(dma_id);
-                            }
-                        },
-                        error: function(error) {
-                            console.log("ERROR: "+error);
-                        },
-                    })
-                } 
-                else if (result.isDenied) {
-                    Swal.fire("Building not deleted!", "", "info");
-                }
-            });
-
-
-
-        }
-
-        // jQuery
-        $("#findBuilding").click(function() {
-            var building_id = $("#building_id").val();
-            
-            returnLayerByAttribute("buildings", "building_id", building_id, function(lyr) {
-                $("#building_error").html("");
-                $("#building_information").html("");
-
-                if (lyrSearch) {
-                    mymap.removeLayer(lyrSearch);
-                }
-
-                if (lyr) {
-                    var att = lyr.feature.properties;
-                    
-                    lyrSearch = L.geoJSON(lyr.toGeoJSON(), {style:{color:'red', weight:10, opacity:1.0, fillOpacity:0.0}}).addTo(mymap);
-
-                    mymap.fitBounds(lyr.getBounds());
-                    // buildings.bringToFront();
-                                
-                    $("#building_information").html("Building ID: "+att.building_id+"<br>Account Number: "+att.account_no+"<br>Category: "+att.building_category+"<br>Storey: "+att.building_storey+"<br>Population: "+att.building_population+"<br>Location: "+att.building_location);
-
-                } else {
-                    $("#building_error").html("Building not found!");
-                }
-            });
-        })
-        
-
-        $("#btn_building_form").click(function() {
-            $("#new_building_information").show();
-        })
-
-        $("#btn_building_cancel").click(function() {
-            $("#new_building_information").hide();
-        })
-
-
-        $("#btn_building_insert").click(function(){
-            var account_no = $("#new_building_id").val();
-            var building_category = $("#building_category").val();
-            var building_dma_id = $("#building_dma_id").val();
-            var building_storey = $("#building_storey").val();
-            var building_population = $("#building_population").val();
-            var building_location = $("#building_location").val();
-            var building_geometry = $("#building_geometry").val();
-
-            if (account_no == "" || building_category == "" || building_dma_id == "" || building_storey =="" || building_geometry =="") {
-                $("#building_status").html("Please fill up all Fields");
-            } else {
-                $.ajax({
-                    url:'insert_data.php',
-                    data:{account_no:account_no, building_category:building_category, building_dma_id:building_dma_id, building_storey:building_storey, building_population:building_population, building_location:building_location, building_geometry:building_geometry, request:'buildings'},
-                    type:'POST',
-                    success:function(response) {
-
-                        if (response.trim().substr(0,5)=='ERROR') {
-                            console.log(response);
-                            $("#building_status").html(response);
-                        } else {
-                            $("#building_status").html("Building inserted successfully!");
-                            load_buildings(dma_id);
-
-                            $("#new_building_id").val("");
-                            $("#building_category").val("");
-                            $("#building_dma_id").val("");
-                            $("#building_storey").val("");
-                            $("#building_population").val("");
-                            $("#building_location").val("");
-                            $("#building_geometry").val("");
-                        }	
-                    },
-                    error:function(xhr, status, error){
-                        $("#building_status").html(error);
-                    }
-
-                })
-            }
-
-        });
-
-
-        $("#btn_building_refresh").click(function(){
-            load_buildings(dma_id);
-        });
-
-
-
-        // RASTER DATA
-
-        function load_rasterdata(dma_id) {
-
-            if (raster_data) {
-                raster_data.remove();
-                control_layers.removeLayer(raster_data)
-            }
-
-            var path = 'https://localhost/webgisCourse/webgisPortal/raster_data/'+dma_id+'/{z}/{x}/{y}.png';
-
-            raster_data = L.tileLayer(path, {
-                tms:1,
-                opacity:1,
-                attribution:"",
-                maxZoom:22
-            });
-            
-            control_layers.addOverlay(raster_data, "Drone Image");
-        }
-
-
-
-
-        // GENERAL FUNCTIONS
-        function returnLayerByAttribute(table, field, value, callback) {
-            $.ajax({
-                url:'find_data.php',
-                data:{table:table, field:field, value:value},
-                type:'POST',
-                success:function(response) {
-                    if (response.trim().substr(0, 5)=="ERROR") {
-                        console.log(response);
-                        callback(false)
-                    } else {
-                        var jsn = JSON.parse(response);
-                        var layer = L.geoJSON(jsn);
-                        var layers = layer.getLayers();
-
-                        if (layers.length>0) {
-                            callback(layers[0])
-                        } else {
-                            callback(false)
-                        }
-                    }
-                },
-                error:function(xhr, status, error){
-                    console.log("ERROR: "+error);
-                }      
-            })
-        };
-
-
-        function returnFormData(inpClass) {
-            var objFormData = {};
-
-            $("."+inpClass).each(function(){
-                objFormData[this.name] = this.value;
-            });
-
-            return objFormData
-        };
-
-    </script>
-
-
-</body>
+<!-- ToDo's -->
+    <!-- Bereinigen und Kommentieren -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Leaflet Training</title>
+    
+    <!-- Leaflet Stylesheet & Skripte -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.0/leaflet.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.0/leaflet.js"></script>
+    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.0/leaflet-src.js"></script> -->
+
+    <!-- jQuery Skrip -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js"></script>
+
+    <!-- jQuery UI -->
+    <link rel="stylesheet" href="source/jquery-ui.min.css">
+    <script src="source/jquery-ui.min.js"></script>
+
+    <!-- Bootstrap Stylesheet & Skript -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Sidebar Plugin -->
+    <link rel="stylesheet" href="plugins/sidebar/leaflet-sidebar.css">
+    <script src="plugins/sidebar/leaflet-sidebar.js"></script>
+     
+
+    <!-- Button Plugin -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
+    <script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
+
+    <!-- Font Plugin -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
+
+    <!-- PolylineMeasure Plugin -->
+    <link rel="stylesheet" href="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.css">
+    <script src="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.js"></script>
+
+    <!-- MousePosition Plugin -->
+    <link rel="stylesheet" href="plugins/mouseposition/L.Control.MousePosition.css">
+    <script src="plugins/mouseposition/L.Control.MousePosition.js"></script>
+
+    <!-- Geoman Plugin -->
+    <link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css">
+    <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.js"></script>
+
+    <!-- Minimap Plugin -->
+    <link rel="stylesheet" href="plugins/minimap/Control.MiniMap.min.css">
+    <script src="plugins/minimap/Control.MiniMap.min.js"></script>
+
+    <!-- ajax Plugin -->
+    <script src="plugins/ajax/leaflet.ajax.js"></script>
+
+    <!-- sweetalert2 Plugin -->
+     <script src=" https://cdn.jsdelivr.net/npm/sweetalert2@11.26.24/dist/sweetalert2.all.min.js "></script>
+     <link href=" https://cdn.jsdelivr.net/npm/sweetalert2@11.26.24/dist/sweetalert2.min.css " rel="stylesheet">
+
+    <!-- Sidebar Styles -->
+    <style>
+        .bold {
+            font-weight: bold;
+            font-size: 16px;
+        }
+
+        .errorMsg {
+            padding: 0;
+            text-align: center;
+            background-color: darksalmon;
+        }
+
+        .new_feature {
+            display: none;
+        }
+
+        .successMsg {
+            text-align: center;
+            background-color: darksalmon;
+            font-weight: bold;
+        }
+
+        /* .legend {
+            background: white;
+            padding: 10px 14px;
+            border-radius: 5px;
+            box-shadow: 0 0 15px rgba(0,0,0,0.2);
+            line-height: 24px;
+            font-size: 13px;
+        }
+
+        .legend h4 {
+            margin: 0 0 8px;
+            font-size: 15px;
+        }
+
+        .legend i {
+            width: 14px;
+            height: 14px;
+            display: inline-block;
+            margin-right: 6px;
+            border-radius: 50%;
+            vertical-align: middle;
+        }
+
+        .legend i.line {
+            border-radius: 0;
+            height: 3px;
+            width: 20px;
+            vertical-align: middle;
+        } */
+
+    </style>
+
+
+
+</head>
+
+<body>
+
+    <div id="sidebar" class="sidebar collapsed">
+	    <!-- Nav tabs -->
+	    <div class="sidebar-tabs">
+	        <ul role="tablist">
+	           	<li><a href="#home" role="tab"><i class="fa fa-home"></i></a></li>
+	            <li><a href="#valve" role="tab"><i class="fa fa-puzzle-piece"></i></a></li>
+	            <li><a href="#pipeline" role="tab"><i class="fa fa-sliders"></i></a></li>
+	            <li><a href="#building" role="tab"><i class="fa fa-building"></i></a></li>        
+	        </ul>
+	    </div>
+
+	    <!-- Tab panes -->
+	    <div class="sidebar-content">
+            <div class="sidebar-pane" id="home">
+                <h1 class="sidebar-header">
+                    Home
+                    <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
+                </h1>
+
+                <div id="divhome" class="col-xs-12">
+                    <div class="col-xs-12" style="height: 10px;"></div>
+
+                    <div class="col-xs-12">
+                        <p class="text-center bold">Area Filter</p>
+                    </div>
+
+                    <div id="home_error" class="errorMsg col-xs-12"></div>
+
+                    <div class="col-xs-12" style="height: 10px;"></div>
+
+                    <div class="form-group">
+                        <div class="col-xs-6">
+                            <input type="text" id="dma_id" class="form-control" placeholder="DMA ID">
+                        </div>
+                        <div class="col-xs-6">
+                            <button id="filter_dma" class="btn btn-primary btn-block">Filter Area</button>
+                        </div>
+                    </div>
+                    <div class="col-xs-12" id="home_information">
+                        
+                    </div>
+                </div>
+
+
+            </div>
+
+            <div class="sidebar-pane" id="valve">
+                <h1 class="sidebar-header">
+                    Valves
+                    <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
+                </h1>
+
+                <div id="divValve" class="col-xs-12">
+                    <div class="col-xs-12" style="height: 10px;"></div>
+
+                    <div class="col-xs-12">
+                        <p class="text-center bold">Valve Information</p>
+                    </div>
+
+                    <div id="valve_error" class="errorMsg col-xs-12"></div>
+
+                    <div class="col-xs-12" style="height: 10px;"></div>
+
+                    <div class="form-group">
+                        <div class="col-xs-6">
+                            <input type="text" id="valve_id" class="form-control" placeholder="Valve ID">
+                        </div>
+                        <div class="col-xs-6">
+                            <button id="findValve" class="btn btn-primary btn-block">Find Valve</button>
+                        </div>
+                    </div>
+                    <div class="col-xs-12" id="valve_information">
+                        
+                    </div>
+                </div>
+
+                <div class="col-xs-12" style="height: 60px;"></div>
+
+                <div id="newValve" class="col-xs-12">
+                    
+                    <div class="col-xs-8">
+                        <button type="button" class="btn btn-info btn-block" id="btn_valve_form">Insert New Valve</button>
+                    </div>
+                    <div class="col-xs-4">
+                        <button type="button" class="btn btn-success btn-block" id="btn_valve_refresh">Refresh</button>
+                    </div>
+
+                    <div class="col-xs-12" style="height: 10px;"></div>
+
+                    <div id="new_valve_information" class="col-xs-12 new_feature">
+                        
+                        <label class="control-label col-sm-4" for="valve_id_new">Valve ID</label>
+                        <div class="col-sm-8">
+                            <input type="text" class="form-control" name="valve_id_new" id="valve_id_new">
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+
+                        <label class="control-label col-sm-4" for="valve_type">Valve Type</label>
+                        <div class="col-sm-8">
+                            <select class="form-control" name="valve_type" id="valve_type">
+                                <option value=""></option>
+                                <option value="Gate Valve">Gate Valve</option>
+                                <option value="Washout Valve">Washout Valve</option>
+                                <option value="Air Release Valve">Air Release Valve</option>
+                            </select>
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+
+                        <label class="control-label col-sm-4" for="valve_dma_id">DMA ID</label>
+                        <div class="col-sm-8">
+                            <input type="text" class="form-control" name="valve_dma_id" id="valve_dma_id">
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+
+                        <label class="control-label col-sm-4" for="valve_diameter">Diameter (mm)</label>
+                        <div class="col-sm-8">
+                            <input type="text" class="form-control" name="valve_diameter" id="valve_diameter">
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+
+                        <label class="control-label col-sm-4" for="valve_visibility">Visibility</label>
+                        <div class="col-sm-8">
+                            <select class="form-control" name="valve_visibility" id="valve_visibility">
+                                <option value=""></option>
+                                <option value="Visible">Visible</option>
+                                <option value="Invisible">Invisible</option>
+                            </select>
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+
+                        <label class="control-label col-sm-4" for="valve_location">Location</label>
+                        <div class="col-sm-8">
+                            <input type="text" class="form-control" name="valve_location" id="valve_location">
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+
+                        <label class="control-label col-sm-4" for="valve_geometry">Geometry</label>
+                        <div class="col-sm-8">
+                            <textarea name="valve_geometry" id="valve_geometry" disabled></textarea>
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+                        
+                        <div class="col-sm-6">
+                            <button type="button" class="btn btn-danger btn-block" id="btn_valve_cancel">Cancel</button>	
+                        </div>
+                        <div class="col-sm-6">
+                            <button type="button" class="btn btn-success btn-block" id="btn_valve_insert">Insert Valve</button>	
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-xs-12" style="height: 10px;"></div>
+                <div id="valve_status" class="col-xs-12 successMsg"></div>  
+            </div>
+
+            <div class="sidebar-pane" id="pipeline">
+                <h1 class="sidebar-header">
+                    Pipelines
+                    <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
+                </h1>
+
+                <div id="divPipeline" class="col-xs-12">
+                    <div class="col-xs-12" style="height: 10px;"></div>
+
+                    <div class="col-xs-12">
+                        <p class="text-center bold">Pipeline Information</p>
+                    </div>
+
+                    <div id="pipeline_error" class="errorMsg col-xs-12"></div>
+
+                    <div class="col-xs-12" style="height: 10px;"></div>
+
+                    <div class="form-group">
+                        <div class="col-xs-6">
+                            <input type="text" id="pipeline_id" class="form-control" placeholder="Pipeline ID">
+                        </div>
+                        <div class="col-xs-6">
+                            <button id="findPipeline" class="btn btn-primary btn-block">Find Pipeline</button>
+                        </div>
+                    </div>
+                    <div class="col-xs-12" id="pipeline_information">
+                        
+                    </div>
+                    
+                </div>
+
+                <div class="col-xs-12" style="height: 60px;"></div>
+
+                <div id="newPipeline" class="col-xs-12">
+                    
+                    <div class="col-xs-8">
+                        <button type="button" class="btn btn-info btn-block" id="btn_pipeline_form">Insert New Pipeline</button>
+                    </div>
+                    <div class="col-xs-4">
+                        <button type="button" class="btn btn-success btn-block" id="btn_pipeline_refresh">Refresh</button>
+                    </div>
+
+                    <div class="col-xs-12" style="height: 10px;"></div>
+
+                    <div id="new_pipeline_information" class="col-xs-12 new_feature">
+                        
+                        <label class="control-label col-sm-4" for="new_pipeline_id">Pipe ID</label>
+                        <div class="col-sm-8">
+                            <input type="text" class="form-control" name="new_pipeline_id" id="new_pipeline_id">
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+
+                        <label class="control-label col-sm-4" for="pipeline_category">Category</label>
+                        <div class="col-sm-8">
+                            <select class="form-control" name="pipeline_category" id="pipeline_category">
+                                <option value=""></option>
+                                <option value="Distribution Pipeline">Distribution Pipeline</option>
+                                <option value="Reticulation Pipeline">Reticulation Pipeline</option>
+                                <option value="Transmission Pipeline">Transmission Pipeline</option>
+                            </select>
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+
+                        <label class="control-label col-sm-4" for="pipeline_dma_id">DMA ID</label>
+                        <div class="col-sm-8">
+                            <input type="text" class="form-control" name="pipeline_dma_id" id="pipeline_dma_id">
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+
+                        <label class="control-label col-sm-4" for="pipeline_diameter">Diameter (mm)</label>
+                        <div class="col-sm-8">
+                            <input type="text" class="form-control" name="pipeline_diameter" id="pipeline_diameter">
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+
+                        <label class="control-label col-sm-4" for="pipeline_method">Construction Method</label>
+                        <div class="col-sm-8">
+                            <select class="form-control" name="pipeline_method" id="pipeline_method">
+                                <option value=""></option>
+                                <option value="OT">OT</option>
+                                <option value="HDD">HDD</option>
+                            </select>
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+
+                        <label class="control-label col-sm-4" for="pipeline_location">Location</label>
+                        <div class="col-sm-8">
+                            <input type="text" class="form-control" name="pipeline_location" id="pipeline_location">
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+
+                        <label class="control-label col-sm-4" for="pipeline_geometry">Geometry</label>
+                        <div class="col-sm-8">
+                            <textarea name="pipeline_geometry" id="pipeline_geometry" disabled></textarea>
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+                        
+                        <div class="col-sm-6">
+                            <button type="button" class="btn btn-danger btn-block" id="btn_pipeline_cancel">Cancel</button>	
+                        </div>
+                        <div class="col-sm-6">
+                            <button type="button" class="btn btn-success btn-block" id="btn_pipeline_insert">Insert Pipeline</button>	
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-xs-12" style="height: 10px;"></div>
+                <div id="pipeline_status" class="col-xs-12 successMsg"></div>  
+                
+            </div>
+
+            <div class="sidebar-pane" id="building">
+                <h1 class="sidebar-header">
+                    Buildings
+                    <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
+                </h1>
+
+                <div id="divbuilding" class="col-xs-12">
+                    <div class="col-xs-12" style="height: 10px;"></div>
+
+                    <div class="col-xs-12">
+                        <p class="text-center bold">Building Information</p>
+                    </div>
+
+                    <div id="building_error" class="errorMsg col-xs-12"></div>
+
+                    <div class="col-xs-12" style="height: 10px;"></div>
+
+                    <div class="form-group">
+                        <div class="col-xs-6">
+                            <input type="text" id="building_id" class="form-control" placeholder="Building ID">
+                        </div>
+                        <div class="col-xs-6">
+                            <button id="findBuilding" class="btn btn-primary btn-block">Find Building</button>
+                        </div>
+                    </div>
+                    <div class="col-xs-12" id="building_information">
+                        
+                    </div>
+                    
+                </div>
+
+                <div class="col-xs-12" style="height: 60px;"></div>
+
+                <div id="newBuilding" class="col-xs-12">
+                    
+                    <div class="col-xs-8">
+                        <button type="button" class="btn btn-info btn-block" id="btn_building_form">Insert New Building</button>
+                    </div>
+                    <div class="col-xs-4">
+                        <button type="button" class="btn btn-success btn-block" id="btn_building_refresh">Refresh</button>
+                    </div>
+
+                    <div class="col-xs-12" style="height: 10px;"></div>
+
+                    <div id="new_building_information" class="col-xs-12 new_feature">
+                        
+                        <label class="control-label col-sm-4" for="new_building_id">Building ID</label>
+                        <div class="col-sm-8">
+                            <input type="text" class="form-control" name="new_building_id" id="new_building_id">
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+
+                        <label class="control-label col-sm-4" for="building_category">Category</label>
+                        <div class="col-sm-8">
+                            <select class="form-control" name="building_category" id="building_category">
+                                <option value=""></option>
+                                <option value="Building">Building</option>
+                                <option value="Tin Shed">Tin Shed</option>
+                                <option value="Under Construction">Under Construction</option>
+                                <option value="Open Plot">Open Plot</option>
+                            </select>
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+
+                        <label class="control-label col-sm-4" for="building_dma_id">DMA ID</label>
+                        <div class="col-sm-8">
+                            <input type="text" class="form-control" name="building_dma_id" id="building_dma_id">
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+
+                        <label class="control-label col-sm-4" for="building_storey">Storey</label>
+                        <div class="col-sm-8">
+                            <input type="number" class="form-control" name="building_storey" id="building_storey">
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+
+                        <label class="control-label col-sm-4" for="building_population">Population</label>
+                        <div class="col-sm-8">
+                            <input type="number" class="form-control" name="building_population" id="building_population">
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+
+                        <label class="control-label col-sm-4" for="building_location">Location</label>
+                        <div class="col-sm-8">
+                            <input type="text" class="form-control" name="building_location" id="building_location">
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+
+                        <label class="control-label col-sm-4" for="building_geometry">Geometry</label>
+                        <div class="col-sm-8">
+                            <textarea name="building_geometry" id="building_geometry" disabled></textarea>
+                        </div>
+
+                        <div class="col-xs-12" style="height: 10px;"></div>
+                        
+                        <div class="col-sm-6">
+                            <button type="button" class="btn btn-danger btn-block" id="btn_building_cancel">Cancel</button>	
+                        </div>
+                        <div class="col-sm-6">
+                            <button type="button" class="btn btn-success btn-block" id="btn_building_insert">Insert building</button>	
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-xs-12" style="height: 10px;"></div>
+                <div id="building_status" class="col-xs-12 successMsg"></div>  
+
+                
+            </div>
+	    </div>
+	</div>
+    
+    <div id="mapdiv" class="col-md-12"></div>
+
+    <script>
+        var mymap;
+        var baseLayers;
+        var overlays;
+        var lyrSearch;
+        
+        var layerValves;
+        var layerPipelines;
+        var layerBuildings;
+        var raster_data;
+
+        var valves_array = [];
+        var pipelines_array = [];
+        var buildings_array = [];
+
+        var dma_id;
+
+
+        // Map Canvas
+        var mymap = L.map('mapdiv', {
+            center: [23.78573, 90.44378],
+            zoom: 12.5,
+            attributionControl: false,
+            zoomControl: false,
+            
+        });
+        
+        // Background Maps
+        var OpenStreetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: 'OpenStreetMap Contributors',
+            maxZoom: 20,
+        })
+
+        var CartoDB = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
+            attribution: 'Carto Contributors',
+            maxZoom: 20,
+        })
+
+        var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+            attribution: 'ESRI',
+            maxZoom: 20,        
+        })
+
+        var Esri_WorldImagery_Minimap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+            attribution: 'ESRI',
+            maxZoom: 20,        
+        })
+
+		var GoogleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
+			maxZoom: 20,
+			subdomains:['mt0','mt1','mt2','mt3']
+		});
+
+        var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
+            maxZoom: 20,
+        });
+        
+        CartoDB.addTo(mymap);
+
+
+        // Sidebar
+        var sidebar = L.control.sidebar('sidebar', {
+            position: 'left'
+        });
+
+        mymap.addControl(sidebar);
+        
+        // Zoom Control
+        L.control.zoom({
+            position: "topright",
+        }).addTo(mymap);
+
+        // Measure Tool
+        L.control.polylineMeasure({
+            position: 'topright',
+        }).addTo(mymap);
+
+        // Geoman Plugin
+        mymap.pm.addControls({  
+            position: 'topright',
+            drawMarker: true,
+            drawPolyline: true,
+            drawPolygon: true,
+            drawCircleMarker: false,
+            drawCircle: false,
+            drawText: false,
+            drawRectangle: false,
+            editMode: false,
+            dragMode: false,
+            cutPolygon: false,
+            removalMode: true,
+            rotateMode: false,
+        });
+        
+        mymap.on("pm:create", function(e) {
+            var jsn = e.layer.toGeoJSON().geometry;
+            var jsn_modified;
+
+            if (e.shape == 'Marker') {
+                
+                if(confirm("Add Valve?")) {
+                    jsn_modified = {type:"Point", coordinates:jsn.coordinates}
+                    $("#valve_geometry").val(JSON.stringify(jsn_modified));
+                }
+            }
+
+            if (e.shape == 'Line') {
+                
+                if(confirm("Add Pipeline?")) {
+                    jsn_modified = {type:"MultiLineString", coordinates:[jsn.coordinates]}
+                    $("#pipeline_geometry").val(JSON.stringify(jsn_modified));
+                }
+            }
+
+            if (e.shape == 'Polygon') {
+                
+                if(confirm("Add Building?")) {
+                    jsn_modified = {type:"MultiPolygon", coordinates:[jsn.coordinates]}
+                    $("#building_geometry").val(JSON.stringify(jsn_modified));
+                }
+            }
+        });
+
+        // Layer Control
+        var baseLayers = {
+            "Google Streets": GoogleStreets,
+            "OpenStreetMap": OpenStreetMap,
+            "CartoDB": CartoDB,
+            "ESRI Satelite": Esri_WorldImagery,
+            "OpenTopoMap": OpenTopoMap,
+        };
+
+        var control_layers = L.control.layers(baseLayers, overlays).addTo(mymap)
+
+        // Scale Display
+        L.control.scale({
+            position: 'bottomright',
+            maxWidth: 250,
+            imperial: false,
+        }).addTo(mymap)
+
+        // Mouse-Position
+        L.control.mousePosition({
+            position: 'bottomright',
+        }).addTo(mymap);
+
+        // Minimap Plugin
+        var miniMap = new L.Control.MiniMap(Esri_WorldImagery_Minimap, {
+            position: "bottomright",
+            height: 200,
+            width: 200,
+            toggleDisplay: true,
+        }).addTo(mymap);
+
+
+        // Legend Control
+        // var legend = L.control({ position: 'bottomleft' });
+
+        // legend.onAdd = function (map) {
+        //     var div = L.DomUtil.create('div', 'legend');
+        //     div.innerHTML = `
+        //         <h4>Legende</h4>
+        //         <b>Valves</b><br>
+        //         <i style="background:#2E7D32"></i> Air Release Valve<br>
+        //         <i style="background:#43A047"></i> Gate Valve<br>
+        //         <i style="background:#66BB6A"></i> Washout Valve<br><br>
+        //         <b>Pipelines</b><br>
+        //         <i class="line" style="background:#1565C0"></i> Distribution<br>
+        //         <i class="line" style="background:#797DA4"></i> Reticulation<br>
+        //         <i class="line" style="background:#1E88E5"></i> Transmission<br><br>
+        //         <b>Buildings</b><br>
+        //         <i style="background:#B71C1C"></i> 10+ Storey<br>
+        //         <i style="background:#D32F2F"></i> 5-9 Storey<br>
+        //         <i style="background:#F44336"></i> 1-2 Storey<br>
+        //         <i style="background:#EF5350"></i> Tin Shed<br>
+        //         <i style="background:#E57373"></i> Open Plot<br>
+        //     `;
+        //     return div;
+        // };
+
+        // legend.addTo(mymap);
+
+        
+        // Data Control
+
+        // HOME
+        $("#filter_dma").click(function() {
+            dma_id = $("#dma_id").val();
+
+            if (!dma_id) {
+                $("#home_error").html("Please provide a DMA ID first!")
+            } else {
+                load_valves(dma_id);
+                load_pipelines(dma_id);
+                load_buildings(dma_id);
+                load_rasterdata(dma_id);
+
+            }
+        });
+        
+        
+        
+
+        // Point Features
+        function load_valves (dma_id) {
+            $.ajax({
+                url:'load_data.php',
+                data: {table:'valves', dma_id:dma_id},
+                type: 'POST',
+                success: function(response) {
+                    if (response.trim().substr(0, 5)=="ERROR") {
+                        console.log(response);
+                    } else {
+                        var jsnValve = JSON.parse(response);
+
+                        if (layerValves) {
+                            layerValves.remove();
+                            control_layers.removeLayer(layerValves)
+                        }
+
+                        layerValves = L.geoJSON(jsnValve, {
+                            pointToLayer:style_valves
+                        }).addTo(mymap);
+
+                        control_layers.addOverlay(layerValves, "Valves");
+                        mymap.fitBounds(layerValves.getBounds());
+                    }
+                },
+                error: function(xhr, status, error) {
+                    console.log("Error: "+error);
+                }
+            });
+        }
+
+        function refresh_valves (dma_id) {
+            $.ajax({
+                url:'load_data.php',
+                data: {table:'valves', dma_id:dma_id},
+                type: 'POST',
+                success: function(response) {
+                    if (response.trim().substr(0, 5)=="ERROR") {
+                        console.log(response);
+                    } else {
+                        var jsnValve = JSON.parse(response);
+
+                        if (layerValves) {
+                            layerValves.remove();
+                            control_layers.removeLayer(layerValves)
+                        }
+
+                        layerValves = L.geoJSON(jsnValve, {
+                            pointToLayer:style_valves
+                        }).addTo(mymap);
+
+                        control_layers.addOverlay(layerValves, "Valves");
+                    }
+                },
+                error: function(xhr, status, error) {
+                    console.log("Error: "+error);
+                }
+            });
+        }
+
+        $("#valve_id").autocomplete({
+                source:valves_array,
+                appendTo: "#sidebar"
+            })
+
+        function style_valves(json, latlng) {
+            var att = json.properties;
+            var color;
+            var fill_color;
+            var radius = 5;
+            var fill_opacity = 1;
+
+            valves_array.push(att.valve_id);
+
+            switch (att.valve_type) {
+                case 'Air Release Valve':
+                    color = '#2e7d32';
+                    fill_color = '#2E7D32';                  
+                    break;
+                case 'Gate Valve':
+                    color = '#43A047';
+                    fill_color = '#43A047';                  
+                    break;
+                case 'Washout Valve':
+                    color = '#66BB6A';
+                    fill_color = '#66BB6A';                  
+                    break;
+                default:
+                    color = '#616161'
+                    fill_color = '#616161'
+                    break;
+            }
+        
+            var style = {radius:radius, color:color, fillColor:fill_color, fillOpacity:fill_opacity};
+
+            return L.circleMarker(latlng, style).bindTooltip("Valve ID: "+att.valve_id+"<br>Valve Type: "+att.valve_type+"<br>Diameter: "+att.valve_diameter+" mm<br>Location: "+att.valve_location+"<br>Visibility: "+att.valve_visibility).bindPopup(
+                `<div class="popup-container">
+                    <input type="hidden" name="webgis_id" class="updateValve" value='${att.webgis_id}'>
+
+                    <input type="hidden" name="valve_id_old" class="updateValve" value='${att.valve_id}'>
+                    
+                    <div class="popup-form-group">
+                        <label class="control-label popup-label">Valve ID</label>
+                        <input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_id}' name="valve_id">			
+                    </div>
+                    <div class="popup-form-group">
+                        <label class="control-label popup-label">DMA ID</label>
+                        <input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_dma_id}' name="valve_dma_id">			
+                    </div>
+                    <div class="popup-form-group">
+                        <label class="control-label popup-label">Type</label>
+                        <input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_type}' name="valve_type">			
+                    </div>
+                    <div class="popup-form-group">
+                        <label class="control-label popup-label">Diameter (mm)</label>
+                        <input type="number" class="form-control popup-input text-center updateValve" value='${att.valve_diameter}' name="valve_diameter">			
+                    </div>
+                    <div class="popup-form-group">
+                        <label class="control-label popup-label">Location</label>
+                        <input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_location}' name="valve_location">			
+                    </div>
+                    <div class="popup-form-group">
+                        <label class="control-label popup-label">Visibility</label>
+                        <input type="text" class="form-control popup-input text-center updateValve" value='${att.valve_visibility}' name="valve_visibility">			
+                    </div>
+                    
+                    <div class="popup-button-group">
+                        <button type="submit" class="btn btn-success popup-button" onclick='updateValve()'>Update</button>
+                        <button type="submit" class="btn btn-danger popup-button" onclick='deleteValve()'>Delete</button>
+                    </div>
+
+                </div>`
+                );
+		}
+
+
+			function updateValve(){
+				var jsn = returnFormData('updateValve');
+				jsn.request = "valves";
+
+				Swal.fire({
+					title: "Do you want to save this Valve?",
+				 	showDenyButton: true,
+				 	showCancelButton: true,
+				 	confirmButtonText: "Save",
+				 	denyButtonText: `Don't save`
+				}).then((result) => {
+					if (result.isConfirmed) {
+						$.ajax({
+							url:'update_data.php',
+							data:jsn,
+							type: 'POST',
+							success: function(response){
+								if (response.trim().substr(0, 5) == "ERROR") {
+                                    Swal.fire("Error!", response, "error");
+                                } else {
+                                    Swal.fire("Saved!", "", "success");
+                                    refresh_valves(dma_id);
+                                }
+							},
+							error: function(error){
+								console.log("ERROR: "+error);
+							}
+						});
+				    	
+					} else if (result.isDenied) {
+						Swal.fire("Valve not saved", "", "info");
+					}
+				});
+			}
+
+			function deleteValve(){
+				var jsn = returnFormData('updateValve');
+				jsn.request = "valves";
+
+				Swal.fire({
+					title: "Do you want to delete this Valve?",
+				 	showDenyButton: true,
+				 	showCancelButton: true,
+				 	confirmButtonText: "Delete",
+				 	denyButtonText: `Don't Delete`
+				}).then((result) => {
+					if (result.isConfirmed) {
+						$.ajax({
+							url:'delete_data.php',
+							data:jsn,
+							type: 'POST',
+							success: function(response){
+                                if (response.trim().substr(0, 5) == "ERROR") {
+                                    Swal.fire("Error!", response, "error");
+                                } else {
+                                    Swal.fire("Deleted!", "", "success");
+                                    refresh_valves(dma_id);
+                                }
+                            },
+							error: function(error){
+								console.log("ERROR: "+error);
+							}
+						});
+				    	
+					} else if (result.isDenied) {
+						Swal.fire("Valve not deleted!", "", "info");
+					}
+				});
+			}
+        
+
+        // jQuery
+        $("#findValve").click(function() {
+            var valve_id = $("#valve_id").val();
+            
+            returnLayerByAttribute("valves", "valve_id", valve_id, function(lyr) {
+                $("#valve_error").html("");
+                $("#valve_information").html("");
+                
+                if (lyrSearch) {
+                    mymap.removeLayer(lyrSearch);
+                }
+
+                if (lyr) {
+                    var att = lyr.feature.properties;
+                    lyrSearch = L.circle(lyr.getLatLng(), {radius:10, color:'red', weight:10, opacity:0.5, fillOpacity:0.25}).addTo(mymap);
+
+                    mymap.setView(lyr.getLatLng(), 20);
+               
+                    layerValves.bringToFront();
+
+                    $("#valve_information").html("Valve ID: "+att.valve_id+"<br>Valve Type: "+att.valve_type+"<br>Diameter: "+att.valve_diameter+" mm<br>Location: "+att.valve_location+"<br>Visibility: "+att.valve_visibility);
+
+                } else {
+                    $("#valve_error").html("Valve not found!");
+                }
+            });
+        });
+
+
+        $("#btn_valve_form").click(function() {
+            $("#new_valve_information").show();
+        })
+
+        $("#btn_valve_cancel").click(function() {
+            $("#new_valve_information").hide();
+        })
+
+        $("#btn_valve_insert").click(function() {
+            var valve_id = $("#valve_id_new").val();
+            var valve_type = $("#valve_type").val();
+            var valve_dma_id = $("#valve_dma_id").val();
+            var valve_diameter = $("#valve_diameter").val();
+            var valve_visibility = $("#valve_visibility").val();
+            var valve_location = $("#valve_location").val();
+            var valve_geometry = $("#valve_geometry").val();
+
+            if (valve_id=="" || valve_type=="" || valve_dma_id=="" || valve_geometry =="") {
+                $("#valve_status").html("Please fill up all Fields.")
+            } else {
+                $.ajax({
+                    url:'insert_data.php',
+                    data:{valve_id:valve_id, valve_type:valve_type, valve_dma_id:valve_dma_id, valve_diameter:valve_diameter, valve_visibility:valve_visibility, valve_location:valve_location, valve_geometry:valve_geometry, request:'valves'},
+                    type: "POST",
+                    success:function(response) {
+                        if (response.trim().substr(0, 5)=="ERROR") {
+                            console.log(response);
+                            $("#valve_status").html(response)
+                        } else {
+                            $("#valve_status").html("Valve inserted successfully!")
+                            refresh_valves(dma_id);
+
+                            $("#valve_id_new").val("");
+                            $("#valve_type").val("");
+                            $("#valve_dma_id").val("");
+                            $("#valve_diameter").val("");
+                            $("#valve_visibility").val("");
+                            $("#valve_location").val("");
+                            $("#valve_geometry").val("");
+                        }
+                    },
+                    error:function(xhr, status, error) {
+                        $("#valve_status").html(error)
+                    }
+                })
+            }
+        });
+
+        $("#btn_valve_refresh").click(function() {
+            refresh_valves(dma_id);
+        })
+
+        // Line Features
+        function load_pipelines(dma_id) {
+            $.ajax({
+                url:'load_data.php',
+                data: {table:'pipelines', dma_id:dma_id},
+                type: 'POST',
+                success: function(response) {
+                    if (response.trim().substr(0, 5)=="ERROR") {
+                        console.log(response);
+                    } else {
+                        var jsnPipeline = JSON.parse(response);
+
+                        if (layerPipelines) {
+                            layerPipelines.remove();
+                            control_layers.removeLayer(layerPipelines)
+                        }
+
+                        layerPipelines = L.geoJSON(jsnPipeline, {
+                            style:style_pipelines,
+                            onEachFeature:process_pipelines,
+                        }).addTo(mymap);
+
+                        control_layers.addOverlay(layerPipelines, "Pipelines");
+                    }
+                },
+                error: function(xhr, status, error) {
+                    console.log("Error: "+error);
+                }
+            });
+        }
+
+        $("#pipeline_id").autocomplete({
+                source:pipelines_array,
+                appendTo: "#sidebar",
+            })
+
+        function style_pipelines(json) {
+            var att = json.properties;
+            var color;
+
+            pipelines_array.push(att.pipeline_id);
+
+            switch (att.pipeline_category) {
+                case 'Distribution Pipeline':
+                    color = '#1565C0';
+                    break;
+                case 'Reticulation Pipeline':
+                    color = '#797DA4';
+                    break;
+                case 'Transmission Pipeline':
+                    color = '#1E88E5';
+                    break;
+                default:
+                    color = '#616161'
+                    break;
+            }
+            
+            return {color:color};
+        }
+
+        function process_pipelines(json, lyr) {
+            var att = json.properties
+            lyr.bindTooltip("Pipe ID: "+att.pipeline_id+"<br>Category: "+att.pipeline_category+"<br>Diameter: "+att.pipeline_diameter+" mm"+"<br>Length: "+att.pipeline_length+" m"+"<br>Location: "+att.pipeline_location).bindPopup(
+                `<div class="popup-container">
+
+						<input type="hidden" name="webgis_id" class="updatePipeline" value='${att.webgis_id}'>
+
+						<input type="hidden" name="pipeline_id_old" class="updatePipeline" value='${att.pipeline_id}'>
+						
+						<div class="popup-form-group">
+							<label class="control-label popup-label">Pipe ID</label>
+							<input type="text" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_id}' name="pipeline_id">			
+						</div>
+						<div class="popup-form-group">
+							<label class="control-label popup-label">DMA ID</label>
+							<input type="text" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_dma_id}' name="pipeline_dma_id">			
+						</div>
+						<div class="popup-form-group">
+							<label class="control-label popup-label">Diameter (mm)</label>
+							<input type="number" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_diameter}' name="pipeline_diameter">			
+						</div>
+						<div class="popup-form-group">
+							<label class="control-label popup-label">Location</label>
+							<input type="text" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_location}' name="pipeline_location">			
+						</div>
+						<div class="popup-form-group">
+							<label class="control-label popup-label">Category</label>
+							<input type="text" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_category}' name="pipeline_category">			
+						</div>
+						<div class="popup-form-group">
+							<label class="control-label popup-label">Length (m)</label>
+							<input type="number" step="any" class="form-control popup-input text-center updatePipeline" value='${att.pipeline_length}' name="pipeline_length">			
+						</div>
+						
+						<div class="popup-button-group">
+							<button type="submit" class="btn btn-success popup-button" onclick='updatePipeline()'>Update</button>
+							<button type="submit" class="btn btn-danger popup-button" onclick='deletePipeline()'>Delete</button>
+						</div>
+
+					</div>`
+					);
+			}
+
+			function updatePipeline(){
+				var jsn = returnFormData('updatePipeline');
+				jsn.request = "pipelines";
+
+				Swal.fire({
+					title: "Do you want to save the changes?",
+				 	showDenyButton: true,
+				 	showCancelButton: true,
+				 	confirmButtonText: "Save",
+				 	denyButtonText: `Don't save`
+				}).then((result) => {
+					if (result.isConfirmed) {
+						$.ajax({
+							url:'update_data.php',
+							data:jsn,
+							type: 'POST',
+							success: function(response){
+                                if (response.trim().substr(0, 5) == "ERROR") {
+                                    Swal.fire("Error!", response, "error");
+                                } else {
+                                    Swal.fire("Saved!", "", "success");
+                                    load_pipelines(dma_id);
+                                }
+                            },
+							error: function(error){
+								console.log("ERROR: "+error);
+							}
+						});
+				    	
+					} else if (result.isDenied) {
+						Swal.fire("Changes are not saved", "", "info");
+					}
+				});
+			}
+
+			function deletePipeline(){
+				var jsn = returnFormData('updatePipeline');
+				jsn.request = "pipelines";
+
+				Swal.fire({
+					title: "Do you want to delete this pipeline?",
+				 	showDenyButton: true,
+				 	showCancelButton: true,
+				 	confirmButtonText: "Delete",
+				 	denyButtonText: `Don't Delete`
+				}).then((result) => {
+					if (result.isConfirmed) {
+						$.ajax({
+							url:'delete_data.php',
+							data:jsn,
+							type: 'POST',
+							success: function(response){
+                                if (response.trim().substr(0, 5) == "ERROR") {
+                                    Swal.fire("Error!", response, "error");
+                                } else {
+                                    Swal.fire("Deleted!", "", "success");
+                                    load_pipelines(dma_id);
+                                }
+                            },
+							error: function(error){
+								console.log("ERROR: "+error);
+							}
+						});
+				    	
+					} else if (result.isDenied) {
+						Swal.fire("Pipeline not deleted!", "", "info");
+					}
+				});
+			}
+
+
+    
+        // jQuery
+        $("#findPipeline").click(function() {
+            var pipeline_id = $("#pipeline_id").val();
+            
+            returnLayerByAttribute("pipelines", "pipeline_id", pipeline_id, function(lyr) {
+                $("#pipeline_error").html("");
+                $("#pipeline_information").html("");
+
+                if (lyrSearch) {
+                    mymap.removeLayer(lyrSearch);
+                }
+
+                if (lyr) {
+                    var att = lyr.feature.properties;
+            
+                    lyrSearch = L.geoJSON(lyr.toGeoJSON(), {style:{color:'red', weight:10, opacity:0.5}}).addTo(mymap);
+
+                    mymap.fitBounds(lyr.getBounds());
+                    layerPipelines.bringToFront();
+                                    
+                    $("#pipeline_information").html("Pipe ID: "+att.pipeline_id+"<br>Category: "+att.pipeline_category+"<br>Diameter: "+att.pipeline_diameter+" mm"+"<br>Length: "+att.pipeline_length+" m"+"<br>Location: "+att.pipeline_location);
+
+                } else {
+                    $("#pipeline_error").html("Pipeline not found!");
+                }
+            });
+        })
+
+
+        $("#btn_pipeline_form").click(function() {
+            $("#new_pipeline_information").show();
+        })
+
+        $("#btn_pipeline_cancel").click(function() {
+            $("#new_pipeline_information").hide();
+        })
+
+        $("#btn_pipeline_insert").click(function() {
+            var pipeline_id = $("#new_pipeline_id").val();
+            var pipeline_category = $("#pipeline_category").val();
+            var pipeline_dma_id = $("#pipeline_dma_id").val();
+            var pipeline_diameter = $("#pipeline_diameter").val();
+            var pipeline_method = $("#pipeline_method").val();
+            var pipeline_location = $("#pipeline_location").val();
+            var pipeline_geometry = $("#pipeline_geometry").val();
+
+            if (pipeline_id == "" || pipeline_category == "" || pipeline_geometry == "") {
+                $("#pipeline_status").html("Please fill up all Fields.")
+            } else {
+                $.ajax({
+                    url:'insert_data.php',
+                    data: {pipeline_id:pipeline_id, pipeline_category:pipeline_category, pipeline_dma_id:pipeline_dma_id, pipeline_diameter:pipeline_diameter, pipeline_method:pipeline_method, pipeline_location:pipeline_location, pipeline_geometry:pipeline_geometry, request:'pipelines'},
+                    type: "POST",
+                    success:function(response) {
+                        if (response.trim().substr(0, 5)=="ERROR") {
+                            console.log(response);
+                            $("#pipeline_status").html(response)
+                        } else {
+                            $("#pipeline_status").html("Pipeline inserted successfully!")
+                            load_pipelines(dma_id);
+
+                            $("#new_pipeline_id").val("");
+                            $("#pipeline_category").val("");
+                            $("#pipeline_dma_id").val("");
+                            $("#pipeline_diameter").val("");
+                            $("#pipeline_method").val("");
+                            $("#pipeline_location").val("");
+                            $("#pipeline_geometry").val("");
+                        }
+                    },
+                    error:function(xhr, status, error) {
+                        $("#pipeline_status").html(error)
+                    }
+                })
+            }
+        })
+
+        $("#btn_pipeline_refresh").click(function() {
+            load_pipelines(dma_id);
+        })
+
+
+        // Polygon Features
+        function load_buildings (dma_id) {
+            $.ajax({
+                url:'load_data.php',
+                data: {table:'buildings', dma_id:dma_id},
+                type: 'POST',
+                success: function(response) {
+                    if (response.trim().substr(0, 5)=="ERROR") {
+                        console.log(response);
+                    } else {
+                        var jsnBuilding = JSON.parse(response);
+
+                        if (layerBuildings) {
+                            layerBuildings.remove();
+                            control_layers.removeLayer(layerBuildings)
+                        }
+
+                        layerBuildings = L.geoJSON(jsnBuilding, {
+                            style:style_buildings,
+                            onEachFeature:process_buildings,
+                        }).addTo(mymap);
+
+                        control_layers.addOverlay(layerBuildings, "Buildings");
+                    }
+                },
+                error: function(xhr, status, error) {
+                    console.log("Error: "+error);
+                }
+            });
+        }
+
+        $("#building_id").autocomplete({
+                source:buildings_array,
+                appendTo: "#sidebar"
+            })
+        
+        function style_buildings(json) {
+            var att = json.properties;
+            var storey = att.building_storey
+            var color;
+            var fill_color;
+            var fill_opacity = 1;
+
+            buildings_array.push(att.building_id);
+
+            switch (att.building_category) {
+                case 'Building':
+                    if (storey>=10) {
+                        color = '#B71C1C';
+                        fill_color = '#B71C1C';
+                    } else if (storey>=7) {
+                        color = '#C62828';
+                        fill_color = '#C62828';
+                    } else if (storey>=5) {
+                        color = '#D32F2F';
+                        fill_color = '#D32F2F';
+                    } else if (storey>=3) {
+                        color = '#E53935';
+                        fill_color = '#E53935';
+                    } else {
+                        color = '#F44336';
+                        fill_color = "#F44336";
+                    }
+                    break;
+                case 'Tin Shed':
+                    color = '#EF5350';
+                    fill_color = '#EF5350';
+                    break;
+                case 'Open Plot':
+                    color = '#E57373';
+                    fill_color = '#E57373';                    
+                    break;
+                default:
+                    color = '#EF9A9A'
+                    fill_color = '#EF9A9A'
+                    break;
+            }
+
+        return {color:color, fillColor:fill_color, fillOpacity:fill_opacity}
+        }
+
+        function process_buildings(json, lyr) {
+            var att = json.properties;
+
+            lyr.bindTooltip("Building ID: "+att.building_id+"<br>Account Number: "+att.account_no+"<br>Category: "+att.building_category+"<br>Storey: "+att.building_storey+"<br>Population: "+att.building_population+"<br>Location: "+att.building_location).bindPopup(
+                `<div class="popup-container">
+        
+                    <input type="hidden" name="webgis_id" class="updateBuilding" value='${att.webgis_id}'>
+                    <input type="hidden" name="account_no_old" class="updateBuilding" value='${att.account_no}'>
+
+                    <div class="popup-form-group">
+                        <label class="control-label popup-label">Account Number</label>
+                        <input type="text" class="form-control popup-input text-center updateBuilding" value='${att.account_no}' name="account_no">
+                    </div>
+
+                    <div class="popup-form-group">
+                        <label class="control-label popup-label">DMA ID</label>
+                        <input type="text" class="form-control popup-input text-center updateBuilding" value='${att.building_dma_id}' name="building_dma_id">
+                    </div>
+
+                    <div class="popup-form-group">
+                        <label class="control-label popup-label">Category</label>
+                        <input type="text" class="form-control popup-input text-center updateBuilding" value='${att.building_category}' name="building_category">
+                    </div>
+
+                    <div class="popup-form-group">
+                        <label class="control-label popup-label">Storey</label>
+                        <input type="number" class="form-control popup-input text-center updateBuilding" value='${att.building_storey}' name="building_storey">
+                    </div>
+
+                    <div class="popup-form-group">
+                        <label class="control-label popup-label">Population</label>
+                        <input type="number" class="form-control popup-input text-center updateBuilding" value='${att.building_population}' name="building_population">
+                    </div>
+
+                    <div class="popup-form-group">
+                        <label class="control-label popup-label">Location</label>
+                        <input type="text" class="form-control popup-input text-center updateBuilding" value='${att.building_location}' name="building_location">
+                    </div>
+
+                    <div class="popup-button-group">
+                        <button type="submit" class="btn btn-success popup-button" onclick='updateBuilding()'>Update</button>
+                        <button type="submit" class="btn btn-danger popup-button" onclick='deleteBuilding()'>Delete</button>
+                    </div>
+
+                </div>`
+            );
+        }
+    
+
+        function updateBuilding() {
+            var jsn = returnFormData('updateBuilding');
+            jsn.request = "buildings";
+
+            Swal.fire({
+                title: "Do you want to save this Building?",
+                showDenyButton: true,
+                showCancelButton: true,
+                confirmButtonText: "Save",
+                denyButtonText: `Don't save`
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    $.ajax({
+                        url:'update_data.php',
+                        data:jsn,
+                        type:'POST',
+                        success: function(response){
+                            if (response.trim().substr(0, 5) == "ERROR") {
+                                Swal.fire("Error!", response, "error");
+                            } else {
+                                Swal.fire("Saved!", "", "success");
+                                load_buildings(dma_id);
+                            }
+                        },
+                        error: function(error) {
+                            console.log("ERROR: "+error);
+                        },
+                    })
+                } 
+                else if (result.isDenied) {
+                    Swal.fire("Building not saved", "", "info");
+                }
+            });
+        };
+
+        function deleteBuilding() {
+            var jsn = returnFormData('updateBuilding');
+            jsn.request = "buildings";
+
+            Swal.fire({
+                title: "Do you want to delete this Building?",
+                showDenyButton: true,
+                showCancelButton: true,
+                confirmButtonText: "Delete",
+                denyButtonText: `Don't delete`
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    $.ajax({
+                        url:'delete_data.php',
+                        data:jsn,
+                        type:'POST',
+                        success: function(response){
+                            if (response.trim().substr(0, 5) == "ERROR") {
+                                Swal.fire("Error!", response, "error");
+                            } else {
+                                Swal.fire("Deleted!", "", "success");
+                                load_buildings(dma_id);
+                            }
+                        },
+                        error: function(error) {
+                            console.log("ERROR: "+error);
+                        },
+                    })
+                } 
+                else if (result.isDenied) {
+                    Swal.fire("Building not deleted!", "", "info");
+                }
+            });
+
+
+
+        }
+
+        // jQuery
+        $("#findBuilding").click(function() {
+            var building_id = $("#building_id").val();
+            
+            returnLayerByAttribute("buildings", "building_id", building_id, function(lyr) {
+                $("#building_error").html("");
+                $("#building_information").html("");
+
+                if (lyrSearch) {
+                    mymap.removeLayer(lyrSearch);
+                }
+
+                if (lyr) {
+                    var att = lyr.feature.properties;
+                    
+                    lyrSearch = L.geoJSON(lyr.toGeoJSON(), {style:{color:'red', weight:10, opacity:1.0, fillOpacity:0.0}}).addTo(mymap);
+
+                    mymap.fitBounds(lyr.getBounds());
+                    // buildings.bringToFront();
+                                
+                    $("#building_information").html("Building ID: "+att.building_id+"<br>Account Number: "+att.account_no+"<br>Category: "+att.building_category+"<br>Storey: "+att.building_storey+"<br>Population: "+att.building_population+"<br>Location: "+att.building_location);
+
+                } else {
+                    $("#building_error").html("Building not found!");
+                }
+            });
+        })
+        
+
+        $("#btn_building_form").click(function() {
+            $("#new_building_information").show();
+        })
+
+        $("#btn_building_cancel").click(function() {
+            $("#new_building_information").hide();
+        })
+
+
+        $("#btn_building_insert").click(function(){
+            var account_no = $("#new_building_id").val();
+            var building_category = $("#building_category").val();
+            var building_dma_id = $("#building_dma_id").val();
+            var building_storey = $("#building_storey").val();
+            var building_population = $("#building_population").val();
+            var building_location = $("#building_location").val();
+            var building_geometry = $("#building_geometry").val();
+
+            if (account_no == "" || building_category == "" || building_dma_id == "" || building_storey =="" || building_geometry =="") {
+                $("#building_status").html("Please fill up all Fields");
+            } else {
+                $.ajax({
+                    url:'insert_data.php',
+                    data:{account_no:account_no, building_category:building_category, building_dma_id:building_dma_id, building_storey:building_storey, building_population:building_population, building_location:building_location, building_geometry:building_geometry, request:'buildings'},
+                    type:'POST',
+                    success:function(response) {
+
+                        if (response.trim().substr(0,5)=='ERROR') {
+                            console.log(response);
+                            $("#building_status").html(response);
+                        } else {
+                            $("#building_status").html("Building inserted successfully!");
+                            load_buildings(dma_id);
+
+                            $("#new_building_id").val("");
+                            $("#building_category").val("");
+                            $("#building_dma_id").val("");
+                            $("#building_storey").val("");
+                            $("#building_population").val("");
+                            $("#building_location").val("");
+                            $("#building_geometry").val("");
+                        }	
+                    },
+                    error:function(xhr, status, error){
+                        $("#building_status").html(error);
+                    }
+
+                })
+            }
+
+        });
+
+
+        $("#btn_building_refresh").click(function(){
+            load_buildings(dma_id);
+        });
+
+
+
+        // RASTER DATA
+
+        function load_rasterdata(dma_id) {
+
+            if (raster_data) {
+                raster_data.remove();
+                control_layers.removeLayer(raster_data)
+            }
+
+            var path = 'https://localhost/webgisCourse/webgisPortal/raster_data/'+dma_id+'/{z}/{x}/{y}.png';
+
+            raster_data = L.tileLayer(path, {
+                tms:1,
+                opacity:1,
+                attribution:"",
+                maxZoom:22
+            });
+            
+            control_layers.addOverlay(raster_data, "Drone Image");
+        }
+
+
+
+
+        // GENERAL FUNCTIONS
+        function returnLayerByAttribute(table, field, value, callback) {
+            $.ajax({
+                url:'find_data.php',
+                data:{table:table, field:field, value:value},
+                type:'POST',
+                success:function(response) {
+                    if (response.trim().substr(0, 5)=="ERROR") {
+                        console.log(response);
+                        callback(false)
+                    } else {
+                        var jsn = JSON.parse(response);
+                        var layer = L.geoJSON(jsn);
+                        var layers = layer.getLayers();
+
+                        if (layers.length>0) {
+                            callback(layers[0])
+                        } else {
+                            callback(false)
+                        }
+                    }
+                },
+                error:function(xhr, status, error){
+                    console.log("ERROR: "+error);
+                }      
+            })
+        };
+
+
+        function returnFormData(inpClass) {
+            var objFormData = {};
+
+            $("."+inpClass).each(function(){
+                objFormData[this.name] = this.value;
+            });
+
+            return objFormData
+        };
+
+    </script>
+
+
+</body>
 </html>
\ No newline at end of file
diff --git a/public/styles.css b/public/styles.css
index 4d14d8e..f27c4df 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,41 +1,41 @@
-#mapdiv {
-	height: 100vh;
-}
-
-.popup-container {
-    width: 80vw;  /* 80% of the viewport width */
-    max-width: 300px;  /* Maximum width */
-    height: 60vh;  /* 60% of the viewport height */
-    max-height: 350px;  /* Maximum height */
-    padding: 10px;  /* Add some padding */
-    box-sizing: border-box;  /* Ensure padding is included in width/height */
-}
-
-.popup-form-group {
-    display: flex;          /* popup-label und popup-input nebeneinander statt untereinander */
-    align-items: center;
-    margin-bottom: 15px;
-}
-
-.popup-label {
-    flex: 1;
-    margin-right: 10px;
-}
-
-.popup-input {
-    flex: 2;
-}
-
-.popup-button-group {
-    display: flex;
-    justify-content: space-between;
-}
-
-.popup-button {
-    flex: 1;
-    margin-right: 10px;
-}
-
-.popup-button:last-child {
-    margin-right: 0;
-}
+#mapdiv {
+	height: 100vh;
+}
+
+.popup-container {
+    width: 80vw;  /* 80% of the viewport width */
+    max-width: 300px;  /* Maximum width */
+    height: 60vh;  /* 60% of the viewport height */
+    max-height: 350px;  /* Maximum height */
+    padding: 10px;  /* Add some padding */
+    box-sizing: border-box;  /* Ensure padding is included in width/height */
+}
+
+.popup-form-group {
+    display: flex;          /* popup-label und popup-input nebeneinander statt untereinander */
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.popup-label {
+    flex: 1;
+    margin-right: 10px;
+}
+
+.popup-input {
+    flex: 2;
+}
+
+.popup-button-group {
+    display: flex;
+    justify-content: space-between;
+}
+
+.popup-button {
+    flex: 1;
+    margin-right: 10px;
+}
+
+.popup-button:last-child {
+    margin-right: 0;
+}