In Berlin gibt es viel zu erleben und zu entdecken. Jede Woche eröffnen neue Restaurants, finden aufregende Events oder Kunstausstellungen statt oder gibt es spannende Aktivitäten auszuprobieren.

Bisher habe ich versucht, all diese Informationen in verschiedenen Notizen auf meinem Handy zu verwalten. Leider kam ich bei so vielen neuen Informationen nicht mehr hinterher. Wenn ich dann vor der Frage stand, wo ich abends essen gehen wollte, sah ich den Wald vor lauter Bäumen nicht mehr. Es musste also eine andere Möglichkeit der Verwaltung gefunden werden.

Da ich parallel an der Software für das Alliance Management arbeite und mich tief in React und Leaflet eingearbeitet habe, lag es nahe, die vielen Informationen in einer Karte darzustellen. Hier findest Du meine persönlichen Highlights.

Es gibt folgende Kategorien:

  • Eis
  • Aktivitäten: Alles was regelmäßig stattfindet oder besucht werden kann
  • Essen: Unterteilt in verschiedene Kategorien wie z.B.: Asiatisch, Italienisch, Spitzenrestaurants uvm.
  • Shops
  • Badeseen
  • Orte: Besondere Orte, die oft kostenlos besucht werden können
  • Events: Veranstaltungen oder Kunstausstellungen, die zeitlich begrenzt sind
  • Camping: Campingplätze oder feste Übernachtungsmöglichkeiten am Wochenende
  • Star: Meine persönlichen Highlights

Da ich etwas pedantisch bin, wenn es um das Design und die Bedienung von Webseiten geht 😏 und mich oft über unausgereifte und undurchdachte Benutzeroberflächen ärgere, wollte ich es natürlich besser machen.

Folgende Funktionalitäten und Designelemente wurden daher integriert (Stand Ende Sept. 2022):

  • Design der Karte auf das Wesentliche reduziert. Schaltflächen in Neumorphismus
  • Automatischer Zoom auf alle Elemente in der Karte nach Auswahl der Kriterien.
  • Nach Klick auf ein Element wird auf das Element gezoomt.
  • Der eigene Standort kann angezeigt werden. Anschließend wird auf diesen Standort gezoomt. Nützlich, wenn man unterwegs ist.
  • Erkennung, ob Touch-Device oder nicht. So werden die Elemente am PC (mit Maus) so dargestellt, dass beim Hovern über das Element nur der Titel angezeigt wird. Ein Klick führt dann per Zoom zu mehr Details.
  • Auf mobilen Touch-Devices führt eine Berührung nicht zum Zoom, sondern es wird direkt der gesamte Inhalt angezeigt.
  • MongoDB Atlas Datenbank, die einfach von überall befüllt werden kann

Die Karte ist noch nicht fertig und es sind noch einige Updates/Bugfixes geplant:

  • Der Neumorphismus ist in der von mir umgesetzten Form nicht für alle Personengruppen zugänglich. Der Kontrast der Schaltflächen muss noch verstärkt werden, um besser erkennen zu können, ob eine Schaltfläche gedrückt wurde oder nicht.
  • Die Suchleiste findet die Ergebnisse, aber ein Klick auf das Ergebnis führt zu nichts. Nach einem Klick auf ein Ergebnis sollte nur dieses Ergebnis angezeigt werden.
  • Der eigene Standort wird mehrfach angezeigt, wenn der Button mehrmals gedrückt wird.
  • Einige Elemente enthalten noch weitere Hintergrunddetails. Diese müssen noch angezeigt werden.
  • Codebereinigung: Häufig sich wiederholende Codeschnipsel. Muss noch verbessert und gekürzt werden.
  • Veröffentlichung auf github: Die Repos für den Client und den Server sind bereits auf github, aber noch privat. Sobald alles funktioniert und der Code halbwegs sauber ist, werde ich zumindest die Client-Seite veröffentlichen.
  • Die Daten der Karte werden in MongoDB gespeichert, das auch geospatiale Daten verarbeiten kann. Die Daten sind bereits in der richtigen Form für zukünftige Anwendungen gespeichert, die ich mir noch ausdenken muss…
1
2
3
4

location: {
type: "Point",
coordinates: [-73.856077, 40.848447]
}

Eventuell werde ich noch Kategorie Radtouren hinzufügen, da MongoDB auch MultiLineStrings verarbeiten kann, mit denen ich Touren darstellen kann.

Die Karte kann natürlich ab sofort genutzt werden und ich werde sie regelmäßig mit neuen Elementen erweitern. Viel Spaß beim Entdecken neuer Orte und Aktivitäten in und um Berlin 😃