fallout new vegas interactive map

Fallout : New Vegas - Carte interactive

https://srt4rulez.github.io/fallout-new-vegas-interactive-map

Une carte interactive du Mojave Wasteland dans Fallout: New Vegas.

Caractéristiques

• Contient tous les livres de compétences et boules à neige.
• Marquez les éléments comme trouvés pour suivre vos progrès. Votre progression est enregistrée dans votre navigateur.
• Chaque type d'élément est codé par couleur pour les identifier facilement.
• Basculez la visibilité des éléments trouvés.
• Basculer la visibilité d’un seul type d’élément.
• Chaque élément a un lien correspondant vers un article sur https://fallout.fandom.com/ pour plus d'informations.

Autres cartes interactives

• jeumapscout

Comment ça marche ?

Nous utilisons une bibliothèque appelée Leaflet pour créer une carte interactive, similaire à Google Maps. Au lieu d'une carte du monde réel, nous chargeons une image du désert de Mojave. Cela nous permet de zoomer, de faire un panoramique et d'interagir avec la carte. Cela nous permet également d'ajouter des « marqueurs » qui, une fois cliqués, ouvrent des fenêtres contextuelles avec un contenu personnalisé.

Tous les marqueurs sont stockés dans Markers.json. Chaque marqueur a un identifiant, un type, un sous-type (facultatif), un titre, une description, une URL (facultatif), une image (facultatif) et des valeurs de latitude et de longitude.

Lorsque nous définissons un marqueur comme « trouvé », nous mettons à jour quelque chose appelé Local Storage dans le navigateur. Il s'agit de données enregistrées dans le navigateur et qui peuvent survivre aux actualisations. C'est spécifique au domaine. Cela nous permet de sauvegarder votre progression sans avoir à la stocker dans une base de données externe. Cependant, votre progression n'est enregistrée que dans votre navigateur actuel. Si vous visitez l'application sur un autre navigateur, vous ne verrez pas vos données précédentes.

Débogage de la latitude et de la longitude

Ouvrez les outils de développement dans votre navigateur (généralement F12), accédez à l'onglet console, tapez "window.debug = true" et appuyez sur Entrée pour activer le mode débogage. Cliquer sur la carte enregistrera désormais la latitude et la longitude sur la console.

Développement

Pour travailler sur ce référentiel, installez Docker, puis exécutez la commande suivante à la racine du projet :

 ./run-docker-development.sh

Cela démarrera un conteneur Docker contenant tout ce dont nous avons besoin pour développer.

Installez simplement les dépendances avec fil, puis démarrez le serveur de développement avec create-react-app :

 yarn install
yarn start

Accédez à http://localhost:3000/ dans votre navigateur sur votre ordinateur pour afficher le site.

Consultez https://github.com/facebook/create-react-app pour plus d'informations.