Logos und ein bisschen Layout

2026-04-27 22:43:17 +02:00
parent 0a6b638004
commit 8a9911c28c
5 changed files with 120 additions and 28 deletions
--- a/index.html
+++ b/index.html
@@ -4,12 +4,18 @@
  <meta charset="utf-8" />
  <title>LiDAR App</title>
  <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
+  <link rel="stylesheet" type="text/css" href="style.css" />
  <script type="module" src="/main.js"></script>
 </head>
 <body>
+ <header id="title">
+     3D-LiDAR Visualisierung
+     <img id="logoJadeHs" src="logoJadeHs.png" />
+     <img id="logoLbeg" src="logoLbeg.svg" />
+  </header>
  <button id="resetBtn">Zurück auf Nord</button>
-  Hintergrundkarte:
  <select name="basemap" id="basemap">
+    <option value="" disabled selected>Hintergrundkarte</option>
    <option value="openfree_bright">OpenFreeMap hell</option>
    <option value="openfree_dark">OpenFreeMap dunkel</option>
    <option value="openfree_liberty">OpenFreeMap Liberty</option>
@@ -17,7 +23,8 @@
    <option value="terrain">Terrain</option>
    <option value="satellite_terrain">Terrain mit Satellitenbild</option>
  </select>
-  <div id="map" style="width:100%; height:100vh;"></div>
+  
+  <div id="map"></div>
  
 </body>
 </html>
--- a/logoJadeHs.png
+++ b/logoJadeHs.png
--- a/logoLbeg.svg
+++ b/logoLbeg.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Created with Inkscape (http://www.inkscape.org/) by Marsupilami -->
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="1024"
+   height="537"
+   viewBox="-1.88710317 -1.88710317 127.24670634 66.67764534"
+   id="svg21462">
+  <defs
+     id="defs21464" />
+  <path
+     d="m 41.80875,0.7575 36.3925,0 0,8.8675 -9.88375,0 0,7.40375 9.61375,0 0,8.8675 -9.61375,0 0,8.02125 16.4375,0 0,8.8675 -24.965,0 -12.68,0.0425 c 2.55125,-0.295 4.715,-1.105 6.48625,-2.42875 C 53.95625,40.13 54.3,39.84 54.6275,39.5275 56.95375,37.31625 58.145,34.45625 58.19875,30.95125 58.21005,28.24 57.47625,25.97 55.99625,24.1425 c -0.645,-0.79625 -1.44625,-1.52375 -2.4,-2.18125 -1.2375,-0.8525 -2.7325,-1.58875 -4.4875,-2.20875 1.905,-0.83 3.40125,-1.8525 4.4875,-3.0625 0.165,-0.18375 0.32,-0.3725 0.46625,-0.565 1.10625,-1.46125 1.66,-3.1825 1.66125,-5.1625 C 55.74625,9.2975 55.3225,7.69125 54.4525,6.14375 54.2125,5.715 53.92625,5.3075 53.59625,4.92125 52.7325,3.91 51.56375,3.0425 50.08875,2.31625 48.05125,1.3125 45.29,0.7925 41.80875,0.7575 m -7.455,17.51125 0,-11.08375 4.2725,0 c 2.39125,0.0275 4.11,0.54375 5.155,1.5475 1.045,1.00375 1.555,2.325 1.5325,3.96375 0.0225,1.55875 -0.4875,2.8675 -1.5325,3.92375 -1.045,1.05625 -2.76375,1.60625 -5.155,1.64875 l -4.2725,0 m 0,18.255 0,-11.82625 4.83,0 c 2.4125,0.0163 4.2125,0.525 5.40125,1.52375 1.19,1 1.7825,2.39125 1.78,4.1725 -0.005,2.07 -0.64375,3.61125 -1.91875,4.62125 -1.275,1.01 -3.1525,1.5125 -5.635,1.50875 l -4.4575,0 M 0,42.78375 l 27.8,0 0,-10.5325 -13.0775,0 0,-31.495 -14.7225,0 0,42.0275 m 123.4725,-23.985 -16.5125,0 0,8.8675 5.24125,0 0,4.93875 C 107.5875,33.1925 103.95875,32.4925 101.3175,30.5075 98.67625,28.52 97.33,25.60375 97.27875,21.755 c 0.0562,-3.6275 1.24,-6.515 3.55375,-8.6625 2.31375,-2.14875 5.425,-3.24875 9.33375,-3.3 1.97625,0.003 4.01375,0.30625 6.11375,0.91 2.1,0.60375 4.23,1.49375 6.39125,2.6675 l 0,-10.53625 c -2.32,-0.92625 -4.7175,-1.63 -7.1925,-2.11 C 113.005,0.24375 110.515,0.0025 108.01,0 102.94125,0.03 98.5025,0.96875 94.6975,2.81625 90.8925,4.6625 87.92625,7.235 85.79875,10.53375 83.6725,13.8325 82.59125,17.675 82.55625,22.0625 c -0.0325,3.1525 0.73875,6.34 2.315,9.56125 1.575,3.2225 4.15375,5.93375 7.73625,8.13625 3.5825,2.20125 8.3675,3.3475 14.355,3.43875 2.59125,-0.009 5.35875,-0.19125 8.3025,-0.5475 2.94375,-0.355 5.68,-0.83 8.2075,-1.42375 l 0,-22.42875"
+     id="path20833"
+     style="fill:#4a8dcd;fill-opacity:1;fill-rule:nonzero;stroke:none" />
+  <path
+     d="M 60.2925,47.90625 40.325,62.555 18.565,47.90625 l 41.7275,0 z"
+     id="path20837"
+     style="fill:#eb1e24;fill-opacity:1;fill-rule:nonzero;stroke:#eb1e24;stroke-width:0.57749999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:6;stroke-opacity:1;stroke-dasharray:none" />
+</svg>
+<!-- version: 20110311, original size: 123.4725 62.903439, border: 3% -->
--- a/main.js
+++ b/main.js
@@ -102,32 +102,52 @@ function changeBaseMap(newMap){
    }
    break;
    case "satellite_terrain": 
-      basemapStyle = {
-    version: 8,
-    sources: {
-      "satellite": {
-        type: "raster",
-        tiles: [
-          "https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
-          "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
-          "https://mt2.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
-          "https://mt3.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
+      basemapStyle =  {
+        version: 8,
+        sources: {
+            osm: {
+                type: 'raster',
+                 tiles: [
+                  "https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
+                  "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
+                  "https://mt2.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
+                  "https://mt3.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
        ],
-        tileSize: 256,
-      },
-      // ── Elevation data ──────────────────────────
-      "terrarium": {
-        type: "raster-dem",
-        tiles: ["https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"],
-        tileSize: 256,
-        encoding: "terrarium",
-        maxzoom: 15
-      },
-    },
-    layers: [{ id: "satellite", type: "raster", source: "satellite" }],
-    // 2-fache Überhöhung
-    terrain: { source: "terrarium", exaggeration: 2 },
-  }
+                tileSize: 256,
+                attribution: '&copy; OpenStreetMap Contributors',
+                maxzoom: 19
+            },
+            // Use a different source for terrain and hillshade layers, to improve render quality
+            terrainSource: {
+                type: 'raster-dem',
+                url: 'https://tiles.mapterhorn.com/tilejson.json',
+            },
+            hillshadeSource: {
+                type: 'raster-dem',
+                url: 'https://tiles.mapterhorn.com/tilejson.json'
+            }
+        },
+        layers: [
+            {
+                id: 'osm',
+                type: 'raster',
+                source: 'osm'
+            },
+            {
+                id: 'hills',
+                type: 'hillshade',
+                source: 'hillshadeSource',
+                layout: {visibility: 'visible'},
+                paint: {'hillshade-shadow-color': '#473B24'}
+            }
+        ],
+        terrain: {
+            source: 'terrainSource',
+            exaggeration: 1
+        },
+        sky: {}
+    }
+	
  }
  map.setStyle(basemapStyle);
 }
@@ -142,4 +162,5 @@ selectElement.addEventListener('change', (event) => {
 // Karte auf Nord zurücksetzen
 document.getElementById("resetBtn").addEventListener("click", () => {
  map.resetNorth();
-});
+});
+
--- a/style.css
+++ b/style.css
@@ -2,8 +2,49 @@ body {
  padding: 0;
 }

+
+#title {
+  text-align: center;
+  font-size:xx-large;
+  font-family:'Trebuchet MS';
+  font-weight: bold;
+  width: 50%;
+  padding: 15px;
+  margin: auto;
+}
+
+
 h1 {
  font-family:'Trebuchet MS';
  margin: 0;
  text-align: center;
+}
+
+#logoJadeHs{
+  position: fixed;
+  top: 1%;
+  right: 10%;
+  width: 128px;
+  height: 69px;
+  transform-origin: center center;
+  z-index: 0;
+}
+
+
+#logoLbeg{
+  position: fixed;
+  top: 1%;
+  right: 1%;
+  width: 128px;
+  height: 69px;
+  transform-origin: center center;
+  z-index: 0;
+}
+
+#map {
+  width: 85%; 
+  height: 90%; 
+  position: fixed; 
+  right: 0%; 
+  bottom: 0%;
 }