Über uns

Quadrate zeigt die Mannheimer Innenstadt als 3D-Karte. Du wählst Tag, Uhrzeit und Kategorie und siehst, in welchen Quadraten gerade etwas geöffnet hat. Ein Studienprojekt an der DHBW Mannheim.

Die Idee

Die Innenstadt von Mannheim ist ein Raster. Statt Straßennamen tragen die Häuserblöcke Kürzel aus einem Buchstaben und einer Zahl: die Quadrate. Die Buchstaben A bis K liegen links der Kurpfalzstraße, L bis U rechts davon. Gezählt wird vom Schloss aus nach Norden, die Zahlen steigen von der Kurpfalzstraße nach außen. Eine Adresse wie „M 2, 11“ heißt also: Quadrat M2, Haus Nummer 11.

Dieses Raster ist schon eine Karte. Jeder Block hat einen Namen und eine feste Stelle. Wir zeigen die 144 Quadrate und die beiden Sonderblöcke M3a und M4a als 3D-Modell aus der Vogelperspektive und färben jeden Block danach, wie viele Orte dort zu einer bestimmten Zeit geöffnet haben.

So siehst du auf einen Blick, wo du am Sonntagabend noch essen gehen kannst, wo am Samstagmittag die meisten Läden offen sind oder welches Museum am Dienstag geöffnet hat. Die Orte und ihre Öffnungszeiten stammen aus OpenStreetMap, einer freien Karte, an der Menschen auf der ganzen Welt mitarbeiten.

Quelle zum Raster: Wikipedia, Artikel Quadratestadt (abgerufen am 29.09.2026). Der Grundriss geht auf das Jahr 1606 zurück.

Die Quadrate als 3D-Karte aus der Vogelperspektive: weiße Blöcke mit dunklen Kürzeln, dazwischen die sandfarbenen Achsen Kurpfalzstraße und Planken, unten das Schloss, rechts am Ende der Planken der Wasserturm.
Die Karte ohne Filter: jedes Quadrat mit seinem Kürzel.

Drei Orte, die jeder kennt

So funktioniert es

Die Karte auf der Startseite beantwortet eine Frage: Was hat gerade offen? So gehst du vor:

  1. Tag und Uhrzeit wählen

    Über der Karte stellst du den Wochentag ein und mit dem Schieberegler die Uhrzeit.

  2. Kategorie wählen

    Essen, Trinken, Kultur oder Shoppen. Jede Kategorie hat eine eigene Farbe.

  3. Karte lesen

    Je kräftiger ein Quadrat gefärbt ist, desto mehr passende Orte haben zu dieser Zeit geöffnet. Ungefärbt heißt: keiner. Die Legende unter der Karte nennt die Stufen 1, 2–3, 4–6 und 7 oder mehr. Die Karte zeigt auch die Tageszeit: Morgens geht rechts im Osten die Sonne auf, tagsüber ist die Stadt hell, abends geht links im Westen die Sonne unter, und nachts leuchten Fenster und Straßenlaternen unter Mond und Sternen.

  4. Quadrat anklicken

    Das Gebäude wächst und leuchtet, darunter erscheint sein Steckbrief: was das Quadrat besonders macht und welche Orte dort geöffnet sind. Mit der Tastatur gehst du mit der Tabulatortaste zum Quadrat und wählst es mit der Eingabetaste oder der Leertaste.

  5. Orte merken

    Mit einem Konto kannst du Orte merken. Quadrate mit gemerkten Orten tragen auf der Karte eine Stecknadel. Konto und gemerkte Orte bleiben in deinem Browser.

Ein Anker-Link wie quadrate.html#vorschlagen springt direkt zum Formular „Ort vorschlagen“ auf der Seite Orte. Auf der Karte öffnet ein Link wie index.html#G1 den Steckbrief eines Quadrats: JavaScript liest den Teil nach dem # aus der Adresse. Ohne JavaScript zeigt die Startseite ein festes Bild der Karte; Filter und Steckbrief brauchen JavaScript.

Zur Karte Zu den Orten

Das Team

Wir sind fünf Studierende im Studiengang Wirtschaftsinformatik an der DHBW Mannheim. Quadrate ist unser Gruppenprojekt im Modul Webprogrammierung.

Quadrate im Video

Bildschirmaufnahme der Karte, 29 Sekunden, ohne Ton: Mittwoch, 12:00 Uhr, Kategorie Essen. Die Uhrzeit läuft bis 23:30 Uhr: Die Sonne geht im Westen unter, dann wird es Nacht mit Mond, beleuchteten Fenstern und Straßenlaternen. Die Kategorie wechselt zu Trinken, das Quadrat O3 wird gewählt, wächst und leuchtet, darunter erscheint sein Steckbrief. Zum Schluss geht um 7:00 Uhr im Osten die Sonne auf, dann ist Tag. Kartendaten © OpenStreetMap-Mitwirkende, ODbL.

Womit wir bauen

Die Website wächst mit den Vorlesungen. Jede Zwischenversion läuft für sich: V1 nur mit HTML und CSS, V2 mit JavaScript. Die Endversion braucht keinen Server: Man öffnet einfach index.html. Wir verwenden keine Frameworks und keine fremden Bibliotheken; Fotos und Daten liegen bei der Website.

Technik je Vorlesung
Technik Was wir damit gebaut haben
HTML V1 Vorlesung 2 und 3
  • Seitenaufbau mit Kopf, Navigation, Hauptteil und Fußzeile
  • Tabelle: der Monatskalender auf der Seite Events
  • Formular „Ort vorschlagen“
  • Eingebettete OpenStreetMap-Karte (iframe) und dieses Video
  • Anker-Links, zum Beispiel quadrate.html#vorschlagen (Sprung zum Formular)
CSS V1 Vorlesung 4 und 5
  • Ein gemeinsames Design für alle Seiten mit Farben als Variablen, angelehnt an Apples Websites
  • Layout mit Flexbox und Grid, lesbar ab 360 Pixel Breite
  • 3D-Karte mit perspective und transform, Tageszeit-Stimmungen
JavaScript V2 Vorlesung 6
  • Interaktive 3D-Karte, die Gebäude wachsen beim Anklicken
  • Filter nach Wochentag, Uhrzeit und Kategorie
  • Steckbrief mit den geöffneten Orten
  • Ortssuche mit Merkmalen, „In meiner Nähe“ und Monatskalender der Events
  • Konto, gemerkte Orte und Vorschläge im Browser speichern (localStorage mit JSON.stringify und JSON.parse)
PHP Vorlesung 7
  • Zuerst haben wir Anmelden, Merken und das Formular mit PHP auf einem Server gebaut (Sessions, Passwort-Hash, JSON-Dateien). Diese Fassung ist im Projektarchiv gesichert.
  • Weil die Website nur lokal läuft und alle sie ohne Server öffnen sollen, speichert die Endversion diese Daten im Browser.

Die Orte stammen aus OpenStreetMap (Lizenz ODbL), die Fotos von Wikimedia Commons mit freien Lizenzen. Alle Nachweise stehen im Impressum.