fallout new vegas interactive map

Fallout: New Vegas - Mapa interactivo

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

Un mapa interactivo del Yermo de Mojave en Fallout: New Vegas.

Características

• Contiene todos los libros de habilidades y bolas de nieve.
• Marque los elementos como encontrados para realizar un seguimiento de su progreso. Su progreso se guarda en su navegador.
• Cada tipo de artículo está codificado por colores para identificarlos fácilmente.
• Alterna la visibilidad de los elementos encontrados.
• Alterna la visibilidad de un solo tipo de elemento.
• Cada elemento tiene un enlace correspondiente a un artículo en https://fallout.fandom.com/ para obtener más información.

Otros mapas interactivos

• explorar mapas de juego

¿Cómo funciona?

Usamos una biblioteca llamada Leaflet para crear un mapa interactivo, similar a Google Maps. En lugar de un mapa del mundo real, cargamos una imagen del Yermo de Mojave. Esto nos permite hacer zoom, desplazarnos e interactuar con el mapa. También nos permite agregar "marcadores" que al hacer clic abren ventanas emergentes con contenido personalizado.

Todos los marcadores se almacenan en marcadores.json. Cada marcador tiene un ID, tipo, subtipo (opcional), título, descripción, URL (opcional), imagen (opcional) y valores de latitud y longitud.

Al configurar un marcador como "encontrado", actualizamos algo llamado Almacenamiento local en el navegador. Estos son datos que se guardan en el navegador y pueden sobrevivir a las actualizaciones. Es específico del dominio. Esto nos permite guardar su progreso sin tener que almacenarlo en una base de datos externa. Sin embargo, tu progreso sólo se guarda en tu navegador actual. Si visita la aplicación en otro navegador, no verá sus datos anteriores.

Depuración de latitud y longitud

Abra las herramientas de desarrollador en su navegador (generalmente F12), vaya a la pestaña de la consola, escriba "window.debug = true" y presione Intro para habilitar el modo de depuración. Al hacer clic en el mapa ahora se registrará la latitud y longitud en la consola.

Desarrollo

Para trabajar en este repositorio, instale Docker y luego ejecute el siguiente comando en la raíz del proyecto:

 ./run-docker-development.sh

Esto iniciará un contenedor acoplable que tiene todo lo que necesitamos para desarrollar.

Simplemente instale las dependencias con hilo, luego inicie el servidor de desarrollo con create-react-app:

 yarn install
yarn start

Vaya a http://localhost:3000/ en el navegador de su máquina para ver el sitio.

Consulte https://github.com/facebook/create-react-app para obtener más información.