Создании исторической интерактивной карты города - какие технологии выбрать?

Доброго времени суток. Не так давно стал изучать программирование и познакомившись с основами HTML, CSS и JavaScript решил придумать себе проект для отточки навыков. Идея такова: сделать историческую карту города, в которой можно будет перемещать ползунок по временной шкале и карта города будет визуально изменяться в соответствие того времени. То есть будут расширяться границы города, появляться улицы и строения. Проблема в том что я не до конца понимаю как это реализовать и в какую сторону двигаться, что изучать для создания такого проекта. Может вы подскажите, может какие-то фреймворки есть или IDE, или может вообще на другом языке будет проще это делать все?

0

давай начнем с этого: есть ли у тебя такая инфа?

если есть, то в каком формате?

0

Карта планируется отрисовываться с нуля. Есть мысли попробовать через Canvas. Инфу планируется брать из исторических источников.

0

слишком технически сложный проект для новичка, если делать его с нуля голыми руками.
но самое самое это работа с картами. там такой титанический труд шо страшна представлять.

я бы сначала обдумал формат карты. например что то вроде массива-временной-шкалы [{date: 1999, objects: [..]}, {date: 2000, objects: [..]}].
далее написал рендер карты с временной шкалой(ползунком) и зумом. далее дописал бы к этому всему редактор карты.

рендер карты это достаточно больное место, потому что объектов будет много и все будет лагать, естественно. скорее всего нужно будет вручную указывать объекту как он будет выглядеть в зависимости от зума, что бы при сильном отдалении мелкие объекты исчезали.

1

Простите за любопытство, я всё же довольно далёк от увлекательного мира забивания гвоздей микроскопом web-программирования, поэтому, возможно, буду слишком наивен в своих вопросах.

Обязательно делать что-то сложное, особенно если ещё не так хорошо знакомы с инструментами, с которыми придётся работать? Может, лучше взять за основу что-то простое? Например, сделать карту в виде Div'a (внешняя рамка), внутри которого лежат другие div'ы - в виде матрицы, в каждом из которых лежит свой кусочек заранее отрисованной карты. Зумируете (ползунком или чем там хотите) - рамка остаётся на месте, внутренние кадры увеличиваются в размерах, лишние, не влезающие в рамку, скрываются, или уползают за рамку, браузер автоматически подгоняет размер изображения под новый размер кадров (лежащее там изображение соответственно, изначально несколько больше нужного). К каждому внутреннему кадру прикрепляете свой массив изображений, в зависимости от выбранного пользователем периода ваша программа будет оббегать все внутренние кадры и указывать в качестве фонового изображения внутреннего кадра нужное изображение из массива. Если есть сомнения, не слишком ли много будет браузеру работы с таким большим объёмом изображений - попробуйте делать карту сразу в векторе, и размер меньше, и масштабируемость не в пример лучше.

P.S. А хотите не только на сайте - попробуйте посмотреть в сторону технологии Electron.

0

Спасибо за ответ. Я уже тоже пришел к мнению что не надо сильно все усложнять.

0