fallout new vegas interactive map

Fallout: New Vegas — Интерактивная карта

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

Интерактивная карта Пустоши Мохаве в Fallout: New Vegas.

Функции

• Содержит все книги навыков и снежные шары.
• Отмечайте предметы как найденные, чтобы отслеживать свой прогресс. Ваш прогресс сохраняется в вашем браузере.
• Каждый тип предметов имеет цветовую маркировку, чтобы их можно было легко идентифицировать.
• Переключить видимость найденных предметов.
• Переключить видимость одного типа элемента.
• У каждого предмета есть соответствующая ссылка на статью на https://fallout.fandom.com/ для получения дополнительной информации.

Другие интерактивные карты

• Gamemapscout

Как это работает?

Мы используем библиотеку Leaflet для создания интерактивной карты, похожей на Google Maps. Вместо карты реального мира мы загружаем изображение Пустоши Мохаве. Это позволяет нам масштабировать, панорамировать и взаимодействовать с картой. Это также позволяет нам добавлять «маркеры», при нажатии на которые открываются всплывающие окна с пользовательским содержимым.

Все маркеры хранятся в файле Markers.json. Каждый маркер имеет идентификатор, тип, подтип (необязательно), заголовок, описание, URL-адрес (необязательно), изображение (необязательно), а также значения широты и долготы.

Устанавливая маркер как «найденный», мы обновляем в браузере так называемое локальное хранилище. Это данные, которые сохраняются в браузере и могут сохраняться при обновлении. Это специфично для домена. Это позволяет нам сохранять ваш прогресс без необходимости хранить его во внешней базе данных. Однако ваш прогресс сохраняется только в вашем текущем браузере. Если вы зайдете в приложение в другом браузере, вы не увидите свои предыдущие данные.

Отладка широты и долготы

Откройте инструменты разработчика в браузере (обычно F12), перейдите на вкладку консоли, введите «window.debug = true» и нажмите Enter, чтобы включить режим отладки. При нажатии на карту широта и долгота будут записываться на консоль.

Разработка

Чтобы работать с этим репозиторием, установите Docker, затем выполните следующую команду в корне проекта:

 ./run-docker-development.sh

Это запустит докер-контейнер, в котором есть все необходимое для разработки.

Просто установите зависимости с помощью Yarn, затем запустите сервер разработки с помощью create-react-app:

 yarn install
yarn start

Перейдите по адресу http://localhost:3000/ в браузере на своем компьютере, чтобы просмотреть сайт.

Оформить заказ https://github.com/facebook/create-react-app для получения дополнительной информации.