https://srt4rulez.github.io/fallout-new-vegas-interactive-map
Eine interaktive Karte des Mojave-Ödlandes in Fallout: New Vegas.
Wir verwenden eine Bibliothek namens Leaflet, um eine interaktive Karte zu erstellen, ähnlich wie Google Maps. Anstelle einer Karte der realen Welt laden wir ein Bild des Mojave-Ödlandes. Dies ermöglicht uns das Zoomen, Schwenken und Interagieren mit der Karte. Es ermöglicht uns auch, „Markierungen“ hinzuzufügen, die beim Klicken Popups mit benutzerdefinierten Inhalten öffnen.
Alle Marker werden in markers.json gespeichert. Jeder Marker verfügt über eine ID, einen Typ, einen Untertyp (optional), einen Titel, eine Beschreibung, eine URL (optional), ein Bild (optional) sowie Breiten- und Längengrade.
Wenn wir eine Markierung als „gefunden“ setzen, aktualisieren wir etwas namens „Lokaler Speicher“ im Browser. Hierbei handelt es sich um Daten, die im Browser gespeichert werden und Aktualisierungen überstehen können. Es ist domänenspezifisch. Dadurch können wir Ihren Fortschritt speichern, ohne ihn in einer externen Datenbank speichern zu müssen. Ihr Fortschritt wird jedoch nur in Ihrem aktuellen Browser gespeichert. Wenn Sie die Anwendung in einem anderen Browser besuchen, werden Ihre vorherigen Daten nicht angezeigt.
Öffnen Sie die Entwicklertools in Ihrem Browser (normalerweise F12), gehen Sie zur Registerkarte „Konsole“, geben Sie „window.debug = true“ ein und drücken Sie die Eingabetaste, um den Debug-Modus zu aktivieren. Durch Klicken auf die Karte werden nun die Breiten- und Längengrade in der Konsole protokolliert.
Um an diesem Repository zu arbeiten, installieren Sie Docker und führen Sie dann den folgenden Befehl im Projektstammverzeichnis aus:
./run-docker-development.sh
Dadurch wird ein Docker-Container gestartet, der alles enthält, was wir für die Entwicklung benötigen.
Installieren Sie einfach Abhängigkeiten mit Garn und starten Sie dann den Entwicklungsserver mit create-react-app:
yarn install
yarn start
Gehen Sie in Ihrem Browser auf Ihrem Computer zu http://localhost:3000/, um die Website anzuzeigen.
Weitere Informationen finden Sie unter https://github.com/facebook/create-react-app.