Code Monkey home page Code Monkey logo

regenbogenkarte's Introduction

Regenbogenkarte

Die Regenbogenkarte ist eine interaktive Karte für das Anzeigen und Entdecken von queeren (Jugend)-Gruppen. Die Idee dahinter war, insbesondere Jugendlichen einen Anlaufpunkt zu geben, um sich mit Gleichgesinnten austauschen zu können.

Screenshot der Karte mit Jugendgruppen

Der aktuelle Stand ist online vorzufinden: https://karte.queer-lexikon.net/

Wo sind die Daten?

Wir haben uns bewusst dagegen entschieden, die dahinter liegenden Daten zu veröffentlichen. Dennoch wollen wir den Code der Karte teilen, damit:

  1. transparent wird, wie die Karte funktioniert.
  2. Änderungen und Verbesserungen aus der Community ergänzt werden können.

Für Ergänzungen und Korrekturen einzelner Gruppen ist der E-Mail-Kontakt unter [email protected] vorzuziehen. Bitte beachte, dass wir Meldungen nur von Gruppenleitungen annehmen können.

Wie funktioniert die Karte?

  1. Beim Aufruf wird die Karte und eventuelle Elemente (Suchfeld, Menü, etc.) geladen. Für das Kartenmaterial nutzen wir den deutschen OpenStreetMap-Server des FOSSGIS e.V. Das Material steht unter einer CC-BY-SA 2.0 Lizenz.
  2. Der aktuelle Ort wird abgefragt. Der Browser übermittelt uns die (ungefähren) Standortdaten. Zu diesen Koordinaten wird anschließend navigiert.

Kompilieren

Die Karte ist rein JavaScript basiert. Wir nutzen aber für ein bisschen Komfort TypeScript, das macht Refactorings deutlich leichter. Anschließend wird Vite als Bundler genutzt und die finalen, komprimierten Assets erzeugt. Verwaltet wird alles über npm. Also:

npm install     # installiert alle Abhängigkeiten
npm run build   # kompiliert den Code

Code-Format

Prettier wird für ein einheitliches Format der Daten verwendet. Mit

npm run format

werden alle Dateien formatiert. Außerdem wird bei Pull Requests eingehender Code automatisch formatiert, also falls es mal vergessen wurde, kein Problem.

Warum nutzt ihr kein Framework wie Vue, React, Svelte, etc.?

Das hat mehrere Gründe. Zum Einen sind die benannten Frameworks stets im Wandel. Die Karte soll aber eine fire-and-forget Lösung sein. Das heißt, einmal aufgesetzt und deployed, soll die erst mal bis in alle Ewigkeiten laufen. Die stetigen Änderungen und der damit einhergehende Wartungsaufwand bei den bekannten Frameworks ist nicht ohne. Natürlich achten diese darauf, dass die breaking changes so klein wie möglich ausfallen, dennoch ist ein stetiges Weiterentwickeln der Karte notwendig.

Zum anderen ist die Funktionalität der Karte gering. Bis auf die Karte, ein Suchfeld und das mobile Menü sind quasi keine interaktiven Elemente vorhanden. Es ist für Menschen, die nicht im JavaScript- Universum unterwegs sind, deutlich einfacher, den sehr explizit geschriebenen Code der Karte zu verstehen, anstatt erst einmal das benutzte Framework zu verstehen.

Sofern sich aber die Funktionalitäten der Karte in Zukunft erweitern, schließen wir nicht aus, Schritt für Schritt die Karte auf eines der Frameworks umzubauen. Nur aktuell besteht kein Bedarf.

Lizenzen

  • Code: OSL-3.0
  • Icons: CC-BY-ND 4.0
  • Kartenmaterial: CC-BY-SA 2.0

Dankeschön ❤️

Ein großes Dankeschön geht an all die lieben Vereine und Organisationen, die wir auf unserer Karte anzeigen dürfen. Ein weiteres Dankeschön geht raus an den FOSSGIS e.V. für die Bereitstellung der Infrastruktur, auf dem die Karte aufbaut.

Und ein besonderes Dankeschön auch an folgende Wesen:

  • CherryKitten für ihre Pull Requests und die Verbesserung der Karte.

regenbogenkarte's People

Contributors

aurorasmiles avatar cherrykitten avatar dependabot[bot] avatar nachtjasmin avatar xenein avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

cherrykitten

regenbogenkarte's Issues

Reset-Button

Xenia hat sich nen Reset-Button gewünscht, vielleicht wär das noch sinnvoll. Effektiv einfach die Seite neu laden.

Hacktoberfest: Labels für Barrierefreiheit für einzelne Angebote

Bezieht sich deine Anfrage auf ein Problem? Falls ja, beschreibe dieses.
Um zu überprüfen, ob ein Angebot passend ist, spielt nicht nur eine Rolle, wo sich eine Gruppe trifft, wann, welche Altersgruppen und Identitäten eingeladen sind, sondern auch, wer tatsächlich kommen kann, bzw wodurch das eingeschränkt wird.

Beschreibe die Lösung, die du dir wünschst
Daher wäre es sinnvoll und hilfreich, wenn die Informationen die Klick auf einen Kartenmarker eingeblendet werden, optional Labels beinhalten könnten, die Informationen zu Barrieren und ähnlichem zeigen.

Dazu müsste im JSON zusätzliche Informationen hinterlegt werden, die, falls vorhanden, dann in den Informationstafeln angezeigt werden.

Für jedes Label drei Symbole: vorhanden, nicht vorhanden und keine Information hinterlegt.
Zusätzlich zu dieser sehr komprimierten Information kann für alle Labels ein kurzer Satz oder Stichwort hinterlegt werden, falls weitere Informationen zum Punkt relevant sind.

Beispiel an einem Label für stufenlosen Zugang:

  • möglich: ja
  • Information: Zugang zum Aufzug über Innenhof

Die Symbole zur Darstellung können auch erstmal emoji-paare sein, wobei das erste Emoji die Kategorie und das zweite die Ausprägung (vorhanden, fehlt, ?) darstellt. Das Graphikteam vom Queer Lexikon kann auf das Design abgestimmte Symbole beisteuern und stehen außerhalb dieser Issue.

Weitere Informationen

  • es gibt keine definitive Liste von Barrierefreiheits-Merkmalen, die hier erfasst werden sollen
  • stufenloser Zugang als typisches Merkmal wäre ein guter Start für einen Pull-Request.
  • die Lösung sollte generalisierbar für mehrere Barriefreiheitslabels sein
  • ein pull-request sollte entweder damit zurechtkommen, dass Einträge in der JSON-Config keine Barrierefreiheitsinformationen tragen oder mit einem Update-Script kommen, um bestehende Configs kompatibel zu machen.

Extra Button für Location-Abfrage

Ich bin irgendwie kein Fan davon wenn mich eine Webseite direkt beim Aufrufen nach meiner Location fragt. Wäre es eine Idee, hierfür noch einen extra Button einzubauen und erst dann die Location abzufragen?

Kompletten Bildschirm für Karte nutzen

Bezieht sich deine Anfrage auf ein Problem? Falls ja, beschreibe dieses.
Aktuell ist die Karte auf meinem iPhone 12 Mini zur Hälfte von dem Menü oben verdeckt. Vielleicht ist es möglich, das Menü und die Suche hinter einem Button (floating action button?) zu verstecken, um den Bildschirm bestens ausreizen zu können.

Beschreibe die Lösung, die du dir wünschst
Mehr von der Karte und den popups, weniger von dem Zeug außenrum.

Weitere Informationen

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.