fallout new vegas interactive map

Fallout: New Vegas - Mapa Interativo

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

Um mapa interativo de Mojave Wasteland em Fallout: New Vegas.

Características

• Contém todos os livros de habilidades e globos de neve.
• Marque os itens como encontrados para acompanhar seu progresso. Seu progresso é salvo em seu navegador.
• Cada tipo de item é codificado por cores para identificá-los facilmente.
• Alterne a visibilidade dos itens encontrados.
• Alterna a visibilidade de um único tipo de item.
• Cada item tem um link correspondente para um artigo em https://fallout.fandom.com/ para mais informações.

Outros mapas interativos

• gamemapscout

Como funciona?

Usamos uma biblioteca chamada Leaflet para criar um mapa interativo, semelhante ao Google Maps. Em vez de um mapa do mundo real, carregamos uma imagem de Mojave Wasteland. Isso nos permite ampliar, deslocar e interagir com o mapa. Também nos permite adicionar “marcadores” que, ao serem clicados, abrem pop-ups com conteúdo personalizado.

Todos os marcadores são armazenados em marcadores.json. Cada marcador possui um ID, tipo, subtipo (opcional), título, descrição, url (opcional), imagem (opcional) e valores de latitude e longitude.

Ao definir um marcador como “encontrado”, atualizamos algo chamado Armazenamento Local no navegador. São dados salvos no navegador e que podem sobreviver às atualizações. É específico para o domínio. Isso nos permite salvar seu progresso sem precisar armazená-lo em um banco de dados externo. Seu progresso só é salvo no seu navegador atual. Se você visitar o aplicativo em outro navegador, não verá seus dados anteriores.

Depurando latitude e longitude

Abra as ferramentas do desenvolvedor em seu navegador (geralmente F12), vá para a guia do console e digite "window.debug = true" e pressione Enter para ativar o modo de depuração. Clicar no mapa agora registrará a latitude e a longitude no console.

Desenvolvimento

Para trabalhar neste repositório, instale o Docker e execute o seguinte comando na raiz do projeto:

 ./run-docker-development.sh

Isso iniciará um contêiner docker que contém tudo o que precisamos para desenvolver.

Basta instalar dependências com o fio e iniciar o servidor de desenvolvimento com create-react-app:

 yarn install
yarn start

Acesse http://localhost:3000/ no navegador da sua máquina para visualizar o site.

Confira https://github.com/facebook/create-react-app para mais informações.