Städteführer

Die Hotspots meiner Heimatstadt Basel aufzuzeigen, war der Ursprungsgedanke hinter diesem Projekt. Relativ rasch kam mir Idee, dies in Form einer interaktiven Karte zu machen. Ich war mir jedoch zu Beginn nicht bewusst, wie ich zu meinem gewünschten Endprodukt kommen werde – diese Herausforderung nahm ich dann an!

Entstanden ist eine Webseite, auf welcher man sich über diverse Schweizer Städte informieren kann. Nebst der interaktiven Karte kann man sich Basel auch mit Hilfe eines kurzen Trailers anschauen. Die Webseite wird wohl stetig erweitert werden..

Hier geht’s zur Webseite.

Anleitung für die interaktive Karte

  1. Karte in Photoshop zeichnen
  2. Webseite programmieren
  3. Karte in Webseite einbinden
  4. Buttons einfügen und jedem Button eine „id“ geben
  5. In der CSS-Datei die Buttons definieren (Position, Farbe, Grösse)
  6. Pop-Up Modal einfügen
Kritik
von Claudia Hierholzer

Idee

Die Idee zur interaktiven Karte kam mir, nachdem ich mich entschieden hatte, meine Heimatstadt Basel nicht Einheimischen näher zu bringen. Es entwickelte sich rasch die Idee, die Hotspots von Basel nicht nur zu beschreiben, sondern gleich auf einer Karte visuell ersichtlich zu machen.

Mit der Zeit wurde mir bewusst, dass man generell jede Stadt so Menschen näherbringen kann. Da ich sehr gerne reise, denke ich, dass ich die Webseite aufrecht erhalten werde.

Umsetzung

Nachdem ich erfolgslos nach Tutorials für Interaktive Karten googelte, kam mir die Idee, dass ich die Karte mit Button und Pop-Up Fenstern selbst programmieren könnte. Die Umsetzung gestaltete sich, sobald mir die Pop-Up Idee kam, relativ einfach. Da es mir nicht um das Design der Webseite, sondern um deren Inhalt ging, fokussierte ich mich auch nicht all zu sehr auf das Aussehen, sondern beschäftigte mich grösstenteils mit der Umsetzung des Inhalts.

Fazit

Mit dem Endresultat bin ich ziemlich zufrieden. Ein weiterer Schritt könnte aber noch sein, die Webseite und Karte so zu programmieren, dass man sie auch auf dem Smartphone oder Tablet nutzen kann. Dazu müsste man jedoch dich Position mit Prozent angeben. Dazu kam ich leider noch nicht. Wenn die Webseite jedoch weitergeführt wird, ist diese Anpassung jedoch nötig.

Keine Kommentare

Schreibe einen Kommentar