Konzept Darstellung Webseite

weberius commented 8 months ago

Die Kulturpfade sollten eine Landingpage haben, die die verfügbaren Kulturpfade präsentieren und weitere Informationen vorhält. Welche Informationen sollten hier vorgehalten werden? Wie sollen die einzelnen Kulturpfade repräsentiert werden? Wie werden die Kartendarstellungen eingebunden? Weitere Fragen können gestellt werden.

weberius commented 8 months ago

Forderungen:

Webseite für Desktop und Smartphone
Es werden POI und die Route dargestellt
es hat eine Kopfzeile mit Burger zur Auswahl an Funktionen
Download und Anzeige von PDF Dateien (via PDF.js)
Daten werden als Dateien hinterlegt
url-parameter müssen interpretiert werden
es sollen layer an- und abgewählt werden (Standard alle an)
es soll möglich sein eine Dokument als pdf herunterzuladen
es soll eine Dia-Show ermöglichen
Klick auf POI öffnet Infoseite (auf Smartphone ganzflächig)

weberius commented 8 months ago

HTML für Leaflet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Leaflet Karte mit Kopfzeile und Menü</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <link rel="stylesheet" href="styles.css"> <!-- Verweisen Sie auf die CSS-Datei -->
</head>
<body>
  <div id="header">
    <div id="menu">
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
        <li><a href="#">Menüpunkt 3</a></li>
      </ul>
    </div>
    <div id="burger">&#9776;</div>
  </div>
  <div id="map"></div>

  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="script.js"></script>
</body>
</html>

weberius commented 8 months ago

script.js:

// Leaflet Karte initialisieren
var mymap = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
}).addTo(mymap);

// Marker zur Karte hinzufügen
L.marker([51.0, 7.0]).addTo(mymap)
    .bindPopup('Ein Marker hier.')
    .openPopup();

weberius commented 8 months ago

styles.css:

#map {
  height: 400px;
}
#header {
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}
#menu {
  background-color: #ddd;
  padding: 5px;
}
#menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  display: none; /* Standardmäßig ausgeblendet */
}
#menu ul li {
  display: block;
  margin-bottom: 5px;
}
#menu ul li a {
  text-decoration: none;
  color: #333;
}
#menu ul li a:hover {
  color: #000;
}
#burger {
  display: block;
  cursor: pointer;
}
@media (min-width: 768px) {
  #menu ul {
    display: block; /* Menü anzeigen, wenn Bildschirmbreite größer als 768px */
  }
  #burger {
    display: none; /* Burger ausblenden, wenn Bildschirmbreite größer als 768px */
  }
}

weberius commented 8 months ago

übergabeparameter aus url:

// Funktion zum Auswerten von Übergabeparametern aus der URL
function getParameterByName(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, '\\$&');
  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
      results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

// Beispielaufruf der Funktion mit dem Parameter "parameter"
var parameterValue = getParameterByName('parameter');
console.log(parameterValue); // Gibt den Wert des Parameters aus

danieldegroot2 commented 7 months ago

https://github.com/weberius/kulturpfadservice/issues/22#issuecomment-2022802958 @weberius bitte nutzen Sie die neue URL tile.openstreetmap.org, ohne {s}. (oder a/b/c/...). Sehe https://github.com/openstreetmap/operations/issues/737

Edit: Ref https://github.com/codeforcologne/kulturpfade/issues/8

weberius commented 7 months ago

Das Konzept wird in https://github.com/codeforcologne/kulturpfade/wiki/Webseite weiter entwickelt. Die oben aufgeführten Forderungen sich an der Stelle bereits eingebunden. Das Ticket kann damit geschlossen werden.

weberius commented 7 months ago

@danieldegroot2 Vielen Dank für den Hinweis.

weberius / kulturpfadservice

Konzept Darstellung Webseite #22