geo-step-game/КАК_ЗАМЕНИТЬ_КАРТУ.md

🗺️ Как заменить карту мира на свою

Вариант 1: Использовать свой файл изображения

1. Положите файл с картой мира в папку проекта (например, world-map.jpg или world-map.png)

2. Откройте файл map.js и найдите строку 26:

this.mapImage.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Equirectangular_projection_SW.jpg/1280px-Equirectangular_projection_SW.jpg';

3. Замените на:

this.mapImage.src = 'world-map.jpg'; // или ваше имя файла

Вариант 2: Использовать другой URL

Вы можете использовать любое изображение карты из интернета.

Например:

// Физическая карта
this.mapImage.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Equirectangular_projection_SW.jpg/1280px-Equirectangular_projection_SW.jpg';

// Политическая карта
this.mapImage.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Mercator_projection_SW.jpg/1280px-Mercator_projection_SW.jpg';

// Карта без подписей
this.mapImage.src = 'https://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73909/world.topo.bathy.200412.3x5400x2700.jpg';

Рекомендации по карте

Идеальный формат:

• Разрешение: 1280x640 или выше
• Формат: JPG или PNG
• Проекция: Равнопромежуточная (Equirectangular)
• Без текста: Лучше карта без подписей стран

Где найти карты:

1. Wikimedia Commons - https://commons.wikimedia.org/wiki/Category:World_maps
2. Natural Earth - https://www.naturalearthdata.com/
3. NASA Visible Earth - https://visibleearth.nasa.gov/

Настройка положения локаций

Если карта отличается от стандартной, возможно потребуется скорректировать координаты локаций в файле data.js.

Координаты задаются в пикселях:

{ id: 'moscow', name: 'Москва', x: 640, y: 180, ... }

Где:

• x - положение по горизонтали (0 = левый край, 1100 = правый край)
• y - положение по вертикали (0 = верхний край, 600 = нижний край)

Отключить затемнение

Если карта слишком светлая или темная, можно изменить затемнение в map.js (строка 91):

// Убрать затемнение
// ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
// ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

// Или изменить прозрачность (0.1 = слабое, 0.5 = сильное)
ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';

Размер canvas

Размер карты автоматически подстраивается под размер окна, но координаты локаций рассчитаны на:

• Ширина: 1100px
• Высота: 600px

Если хотите изменить размер, измените координаты локаций пропорционально.