Как росла москва интерактивная карта
Перейти к содержимому

Как росла москва интерактивная карта

  • автор:

Карты Москвы в разные годы истории

Карты Москвы

Шаг за шагом в своей истории Москва укреплялась, менялась и расширялась. Менялись и карты города от карт древнего Кремля до современных широких размеров крупного мегаполиса.

Древняя Москва

В древние времена Москва представляла собой город, окруженный стенами Кремля, вокруг которого располагались деревни и сёла.

XII-XV века

Карты Москвы XII — XV веков — Исторические реконструкции Московского Кремля XII — XV веков, с дней первого упоминания в летописи, в виде схемы-плана, выполненные в 1960 году архитектором А. И. Хамцовым.

XVI-XVII века

Карты Москвы XVI — XVII веков — схематические, хорошо проиллюстрированные по тем временам рисунками, карты Кремля, составленные различными послами иностранных государств.

Старая Москва

Москва постепенно расширялась, выходя своими границами за стены Кремля, на месте деревень появлялись дома и более крупные строения, а бывшие дороги между деревнями становились улицами.

XVIII век

Карта Москвы XVIII века — Мичуринский план Москвы 1739 года.

XIX век

Карта Москвы XIX века — иллюстрированная схема-план города Москвы, нарисованная чертежником Орловским в 1882 году.

Начало XX века

Карта Москвы начала XX века — карта-план города книжного издательства А. Я. Петрова, ул. Тверская, дом Борисова.

Карта была издана, как приложение к «Всеобщему путеводителю и справочнику по Москве и окрестностям 1911 года

Советская Москва

Столица Советского государства стремительно росла и укреплялась, разрастаясь на жилые районы, промышленные сектора, обрастая мощной городской инфраструктурой.

1920-е годы

Карта Москвы 1920-х годов — карта-схема города Москвы, опубликованная в виде приложения к адресной книге «Вся Москва» издательства Московского коммунального хозяйства в 1927 году.

1930-е годы

Карта Москвы 1930-х годов — карта, изданная геодезической конторой отдела городских земель МосСовета и отпечатана на 2-й Картографической фабрике ГУГСК НКВД СССР, 1938 г.

1940-е годы

Карта Москвы 1940-х годов — карта Москвы, изданная в 1943 году и составлена на основе карт генерального штаба по состоянию местности и границ города на 1940 год.

1950-е годы

Карта Москвы 1950-х годов — Карта была издана в виде иллюстрированной схемы издательством МОСГОРИСПОЛКОМА, архитектурно-планировочным управлением МОСГОРГЕОТРЕСТ и отпечатана в 1957 году на Минской картфабрике.

1960-е годы

Карта Москвы 1960-х годов — карта была подготовлена картографическим отделом Мосгоргеотреста, отпечатана в 1966 году в издательстве мысль в виде приложения к московскому путеводителю.

1970-е годы

Карта Москвы 1970-х годов — cхема-план города Москвы по состоянию на март 1974 года был подготовлен картографическим отделом МОСГОРГЕОТРЕСТ, напечатан в издательстве «Московский рабочий» в крупном тираже 1 000 000 экземпляров

1980-е годы

Карта Москвы 1980-х годов — подробная карта Москвы была составленна по материалам топографических съемок, производственным картосоставительским объединением «Картография» в 1989 году.

Современная Москва

Столица Российской Федерации Москва продолжает не только расширяться, но и расти в высоту. Появляются высотные здания коммерческих и жилых секторов, многие из них смелых дизайнерских решений. Современный облик столицы теперь совмещает прежний исторический кольцевой с радиальными строениями вид в современной структуре города-мегаполиса..

1990-е годы

Карта Москвы 1990-х годов — Карта-схема города для путеводителя по культурным объектам города Москвы с указанием наименований примечательных объектов города.

2000-е годы

Карта Москвы 2000-х годов — карта со световой подсветкой изнутри располагалась в вестибюлях возле касс метро. Наложенная на улицы города схема линий метро указана приблизительно. На карте уже видна часть открытого участка 3-го транспортного кольца.

XXI век

Карта современной Москвы — современная карта постоянно строящейся и расширяющей свои границы Москвы.

Интерактивная карта Москвы расскажет о домах великих людей

Для Интерактивной карты Москвы, которая проецируется на специально сделанный для этого лайтбокс с географической картой столицы, в этом году планируется подготовить и обновить около 30 сценариев, сообщил руководитель Департамента градостроительной политики Сергей Лёвкин.

По его словам, в сценариях будут задействованы как существующие, так и новые тематические слои.

«Интерактивная карта города Москвы – визитная карточка «Дома на Брестской». С помощью проекторов сюда можно «наносить» самые разные тематические слои и, соответственно, формировать разные сценарии лекций и экскурсий», – сказал Сергей Лёвкин.

Так, в прошлом году специалисты ГБУ «Мосстройинформ» разработали 11 новых сценариев. Самыми популярными у посетителей и интернет-пользователей стали проекции, посвященные Московскому кремлю, ВДНХ, правительственным зданиям Москвы, знаменитым московским высоткам и зданиям посольств.

«В этом году с помощью уже готовых и новых тем планируется разработать и актуализировать 30 сценариев», – подчеркнул Лёвкин.

Глава ведомства добавил, что один из сценариев будет посвящен домам великих людей.

«Писатели и поэты, художники и скульпторы, композиторы и театральные деятели, ученые и политики жили в Москве и черпали вдохновение в этом городе. Поэтому мы решили сделать специальную проекцию, показывающую дома выдающихся личностей, хранящие дух былых эпох и отражающие характер их жильцов», – пояснил руководитель Департамента.

В свою очередь директор ГБУ «Мосстройинформ» Юлия Куликова сообщила, что еще один новый тематический слой будет посвящен деревянному зодчеству Москвы.

«Трудно представить, что в мегаполисе XXI века уцелели более 100 деревянных памятников архитектуры. Деревянное зодчество Москвы – важная часть истории, которой будет посвящен новый тематический сценарий», – пояснила Куликова.

В мае на Интерактивной карте появится слой, посвященный строительству многофункциональных комплексов. Для жителей такие крупные центры – возможность сэкономить время, имея необходимую инфраструктуру рядом с домом или работой, что в условиях мегаполиса является большим преимуществом. В одном месте сосредоточены организации, оказывающие государственные, бытовые и медицинские услуги, торговые и развлекательные центры, рестораны и салоны красоты – это удобно как для горожан, так и для девелоперов.

Темой еще одного сценария станет медицина. На новом слое будут показаны современные проекты городских поликлиник, больничных корпусов и других объектов здравоохранения, реализующихся в Москве. Их архитектура постепенно уходит от типовых решений в пользу индивидуальных, разработанных с учетом потребностей и облика конкретного района.

Интерактивная карта Москвы – самый большой напольный лайтбокс в Европе. Его площадь составляет 178 кв. метров. Карта охватывает всю территорию столицы, включая Новую Москву, в масштабе 1:5000. Работа над созданием карты велась по поручению мэра Сергея Собянина.

Как росла Москва

На сайте риановости появилась неплохая инфографика, которая наглядно демонстрирует как увеличивалась Москва с 1916 года.
Эта интерактивная инфографика сделана на основе Гугл карт, на которые нанесены размеры города в разные года.

Как росла Москва

Всё на карте сделано очень наглядно и понятно. Плюс написано несколько комментариев, которые помогут прояснить ситуации, которые для немосквичей могут быть непонятны — например, о том, почему Москву в 2011 решили увеличить почти в 2 раза.
Кроме самой карты Москвы в инфографике представлена и сравнительная характеристики (как её назвали) “страны Москвы” с другими небольшими странами и государствами мира: Ватикан, Сингапур, Андорра и тд. Естественно, “новая” Москва больше любого из перечисленных государств.

Как росла Москва

Пусть тут все сделано очень неплохо и понятно, однако, моё мнение таково: конкретно эту работу можно было бы представить как неплохой журнальный разворот, потому что площади Москвы увеличивались вполне пропорционально и достаточно сильно — этот факт позволит рассмотреть несколько контуров Москвы на одной карте, наложенных друг на друга. Просто такой подход занимает гораздо больше времени, которого у РИА никогда нет — новости, новости, новости.
Можно было бы даже сделать простой ряд, где расположить подряд вид Москвы в разное время и это было бы ничуть не хуже. А в некоторых случаях и лучше, чем нажимать на кнопопки.

Как росла Москва

Как росла Москва

UPD: как вариант, для статического изображения роста именно Москвы (без сравнения её размеров с государствами) можно было использовать подобный приём, как показано ниже. Причём на одной странице уместился и текст, и все 10 отметок, которые нужно было упомянуть. А если увеличить рабочее поле по вертикали, то под каждым годом можно было бы добавить своё текстовое описание, а не одно общее, как сейчас.

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

Как росла Москва

UPD 2: доделал первую версию карты до человеческого вида. Теперь всё стало более читабельно и красиво.

Интерактивная карта развития Московского метрополитена

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

Любопытная деталь, что в течение следующих десятилетий схема метро изображалась с привязкой к реальному расположению на карте города. И только в семидесятых годах прошлого века, когда общее количество станций приблизилось к сотне, начали использовать схематичное изображение линий метро, которое оказалось удобнее и проще для восприятия пассажирами.

Упрощенная схема читается быстрее. Но, в то же время, не дает представления о реальном расположении линий, скрывает детали. Длинные перегоны метро ничем не отличаются от коротких. Нет привязки к географии.

Давайте создадим интерактивную карту линий Московского метрополитена и посмотрим на его историю — как развивалась одна из самых больших сетей мира.

Для создания такой карты нам потребуются:

  • Механизм для отображения карты
  • Удобная модель хранения данных
  • Сами данные

Механизм

Для начала, определяемся с требования к механизму. Он должен уметь:

  • отображать базовый слой с «обычной» картой — дорогами, водоемами, улицами, зданиями и т.д.;
  • отображать поверх базового слоя круги и линии, которые будут изображать станции и линии метро соответственно;
  • обновлять отрисованные станции и линии метро в зависимости от выбранной даты;
  • переключать текущую дату в интервале от 15 мая 1935 года (запуск первой линии метро) до настоящего времени.

Первые три пункта из коробки есть в open source библиотеке Leaflet. Четвертый будем реализовывать самостоятельно.

Базовый слой карты

Пример 1: Создание базового слоя карты

          

Что такое tile server?

Небольшое пояснение для тех, кто никогда не сталкивался с понятиями тайлов (tiles) и тайлового сервера (tile server).

Онлайн карты, к которым привыкло большинство пользователей, — OpenStreetMap, Яндекс.Карты, 2ГИС и т.п. — состоят из тайлов (tile): квадратов с длиной стороны в 256 пикселей.

Каждый тайл имеет координаты x, y и z:

  • z — масштаб, при котором он отображается (чем больше значение z, тем больше увеличение);
  • x — порядковый номер тайла по горизонтали при выбранном масштабе z;
  • y — порядковый номер тайла по вертикали при выбранном масштабе z.

Например, тайл с координатами x=2476, y=1280 и z=12 выглядит вот так:

Эти “квадраты” хранятся на тайловом сервере (tile server) в определенной структуре. Например, тайл выше доступен по адресу https://tile.openstreetmap.org/12/2476/1280.png

Полное изображение, которое мы, в конечном счете, видим, склеивается из множества тайлов в единую картину:

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

В нашем случае в качестве тайлового сервера используется сервер tile.openstreetmap.org.

Станции и линии метро

Для отображения станций метро используем circleMarker: круг с заданными в пикселях радиусом, цветом обводки и заливки, прозрачностью и прочими свойствами.

Пример 2: Добавляем станцию метро на карту

Создаем красную окружность с координатами 55.7578487° северной широты и 37.6163659° восточной долготы (станция «Охотный ряд»), с белой заливкой, радиусом 6 пикселей и добавляем его на карту:

L.circleMarker([55.7578487, 37.6163659], < radius: 6, width: 2.5, color: "red", fillColor: "white", fillOpacity: 1 >).bindPopup("Охотный Ряд") .addTo(mymap);

Для отображения линий метро будем использовать Polyline: ломаную с заданной шириной, цветом, прозрачностью и другими параметрами.

Пример: Добавляем линию метро на карту

Добавим первую очередь московского метро, открытую 15 мая 1935 года. Это будет ломаная красного цвета, шириной 4, проходящая через соответствующие станции метро.

const plln = [ [ [55.7888499, 37.6801924], // Сокольники [55.7798626, 37.6666841], // Красносельская [55.7754719, 37.6566036], // Комсомольская [55.7691137, 37.64887], // Красные Ворота [55.7658915, 37.6388871], // Кировская [55.7598058, 37.6264977], // Дзержинская [55.7578487, 37.6163659], // Охотный Ряд [55.7515247, 37.6102524], // Библиотека имени Ленина [55.7454796, 37.6036755], // Дворец Советов [55.7352856, 37.5940414] // Парк культуры имени Горького ], [ [55.7578487, 37.6163659], // Охотный Ряд [55.7524242, 37.6086732], // Улица Коминтерна [55.7519189, 37.6007512], // Арбатская [55.7488633, 37.5826955] // Смоленская ] ]; L.polyline(plln, < color: "red", weight: 6, >).bindPopup("Кировско-Фрунзенская линия") .addTo(mymap);

Обратим внимание, что при движении от Сокольников, после Охотного ряда, была развилка. Поезда следовали в двух направлениях: в сторону Смоленской и в сторону Парка культуры имени Горького.

Удаление и добавление новых кругов (станций) и ломаных (линий метро) также является встроенными функциями Leaflet — это потребуется для перерисовки схемы метро в зависимости от выбранной даты.

Переключение текущей даты

Следующим шагом нужно будет прикрутить слайдер с диапазоном от «15 мая 1935» и до сего дня. С помощью него мы будем задавать «текущую» дату для отображения схемы метро, какой она была в этот день.

Алгоритм прост: при изменении значения слайдера выполняем по порядку:

  • очищаем текущую схему,
  • проходим по всем объектам (станциям и линиям) в “базе”,
  • выбираем те объекты, которые существовали в новую выбранную дату,
  • отображаем их на карте.

Чтобы определить, какие объекты существовали в указанный день, необходимы правильным образом подготовленные данные. Например, нужно сохранить в “базе” детали о том, что с момента открытия в 1935 году и до 1990 года станция метро «Чистые пруды» называлась «Кировской». Или, например, что первая версия станции «Первомайская» полностью закрылась в 1961 году.

Чем проще и удобнее будет модель хранения данных, тем удобнее будет работа с самими данными.

Модель

За основу возьмем готовое решение, прошедшим проверку временем — модель данных OpenStreetMap. И доработаем ее до наших целей там, где её будет не хватать.

В OSM все данные состоят из трех видов элементов (elements): точки (node), линии (way) и отношения (relation).

Точка (Node)

Node — простейший элемент, который хранит в себе координаты широты и долготы.

Nodes, с координатами станций первой линии метро на момент её открытия 15 мая 1935 года в нотации OSM XML формате (без служебных данных):

Линия (Way)

Way — упорядоченная ломаная линия, состоящая из последовательно заданных точек (nodes).

Отношение (Relation)

Отношение (relation) — это группировка элементов (elements) по определенному признаку. В отношение могут входит точки (nodes), линии (ways), а также, другие отношения (relations).

Например, объединение всех станций и участков метро могут объединяться под одним отношением (relation) — «Московский метрополитен».

Тег (Tag)

Также, у каждого из элементов (elements) могут быть заданы теги: пара «ключ=значение». Теги определяют свойства объекта, и используются для описания того, как объекты будут отображаться на карте.

Например, станция метро может иметь такой набор тегов

Доработка модели данных OSM

OpenStreetMap создана и развивается для отображения актуальных деталей — того, что существует в данный момент. Для некоторых типов объектов есть возможность указать год их возникновения (например, год постройки здания). Но про объекты, которых уже не существует, или которые изменялись в прошлом, данных нет.

Чтобы это исправить, к каждому объекту, который может отображаться на карте, добавляем две характеристики:

  • from_date — дата, с которой объект появляется на карте
  • to_date — дата, с которой объект более не должен отображаться на карте (например, временная станция Калужская: from_date = 1964-04-15, to_date = 1974-08-12).

С помощью этих характеристик можно будет управлять отображаемыми на карте данными, в зависимости от выбранной даты.

Собираем всё вместе

Точки (nodes) и линии (ways) будут использоваться для определения геометрии — точек и ломаных линий, из которых состоят все объекты. У них есть только уникальные идентификаторы (id) и их координаты: широта и долгота.

Отношения (relations) будут использоваться для определения самих объектов (станция или линия) и их характеристик. Relations состоят из комбинации nodes или ways, и дополняются необходимыми тегами. Теги from_date и to_date являются обязательными.

Такой подход позволяет использовать одни и те же nodes и ways повторно: вся информация об объекте хранится на уровне relation.

Например, чтобы отобразить, что станция метро Кировская была переименована в Чистые пруды, будет использовано два relation. Один: с момента открытия до момента переименования. Второй: с момента переименования и до настоящего времени.

Пример relations для переименованной станции метро

Аналогичная история с участками линий. Например, если с 1935 года участок путей принадлежал Сокольнической линии, а с 1938 года стал участком Арбатской линии, то нам потребуется три relation.

Пример relations для изменения линий

Данные

Подготовка данных состояла из трех шагов.

Первым шагом была начальная загрузка данных из википедии со страницы список станций Московского метрополитена, которая содержит всю нужную информацию — список станций, их координаты, дату открытия. Все детали были загружены в электронные таблицы Google документов для дальнейшей обработки и доработки.

Второй шаг — уточнение и добавление деталей по тем станциям и линиям, «свойства» которых изменялись.

Переименование станций метро — история известная.

Переход участка линии из-под одной линии к другой — тоже не что-то из ряда вон выходящее (например, Каховская линия (ныне закрытая) до 20 ноября 1995 была частью Замоскворецкой; участок от Кунцевской до Крылатского принадлежал Филевской линии, а с 7 января 2008 стал частью Арбатско-Покровской линии).

Но некоторые изменения оказались довольно неожиданными. Например, что в Москве было две станции метро, которые изначально создавались как временные: Калужская и Первомайская.

Впрочем, мой победитель: переименование в 1963 году станций «Измайловская» и «Измайловский парк» в. «Измайловский парк» и «Измайловскую». Две подряд идущие станции «поменяли местами». Остается только догадываться, как должно было рвать шаблоны у москвичей и гостей столицы, которых это изменение непосредственно коснулось.

И, заключительный третий шаг: выгрузка таблиц в CSV и конвертация её в json структуру данных для использования через JavaScript.

Немного косметики

Карта-подложка, которую предоставляет OSM, — достаточно яркая и шумная. На таком фоне наша схема метро теряется. Чтобы сделать её более наглядной, добавим второй базовый слой, с менее выраженным акцентом. Здесь очень хорошо подойдет светлый слой от Mapbox — Mapbox Light.

Стоит заметить, что в отличии от тайлов OSM, бесплатное использование тайлов Mapbox ограничено, и при превышении определенного количества в месяц тайлы перестанут подгружаться.

Пример: Добавляем альтернативный базовый слой — Mapbox Light

// Создаем новый слой const grayscale = L.tileLayer('https://api.mapbox.com/styles/v1//tiles///?access_token=pk.eyJ1IjoidGltZWxhcHNlbWFwIiwiYSI6ImNrcWZuemE3dzBxbjIyb3Njazk4ODd4M3oifQ._f0k3m2zgmxrdleisUaymQ', < minZoom: 1, maxZoom: 18, id: 'mapbox/light-v10', tileSize: 512, zoomOffset: -1, attribution: '© Mapbox | © OpenStreetMap | Improve this map', >); // Создаем и добавляем на карту контрол для переключениям между слоями const mapLayers = < "OpenStreetMap": osm, "Grayscale": grayscale, >; L.control.layers(mapLayers).addTo(mymap);

Ещё одно визуальное улучшение, которое напрашивается сразу, — изменение размеров станций и линий метро в зависимости от масштаба.

Для каждого масштаба (zoom) определяем стили окружностей и линий — толщину, прозрачность, радиус, толщину обводки. При изменении масштаба (zoom) вызываем принудительную перерисовку всех объектов с использованием соответствующих стилей.

Вот теперь — красота:

Итоги

Получилась интерактивная карта московского метро, на которой можно проследить, как развивалась сеть. Например, в каких направлениях она росла, с какой скоростью шел запуск новых станций, да и просто поностальгировать.

Итоговый результат можно посмотреть здесь: https://mm.timelapsemap.com.

Карта по ссылке выше будет развиваться дальше. Для истории здесь https://timelapsemap.com/h/bc4fc2 лежит сохраненная копия, соответствующая этой статье.

При подготовке использованы материалы OpenStreetMap и Wikipedia. КДПВ — с сайта http://n-metro.ru.

PS

Несмотря на большое количество данных в Википедии, не про все изменения удалось найти точную информации.

Поделитесь, пожалуйста, в комментариях если знаете:

  • С какой даты «Парк Культуры имени Горького» стал просто «Парком культуры»?
  • С какой даты «Измайловский парк культуры и отдыха имени Сталина» был переименован в «Измайловскую»?
  • С какой даты станция «Имени Кагановича» была переименована в «Охотный ряд»?
  • Детали о закрытии станции «Чистые пруды» во время Великой Отечественной войны
  • Детали о переименовании станции «Калининская» в станцию «Воздвиженка» (ныне «Александровский сад»)
  • Геоинформационные сервисы
  • DIY или Сделай сам

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *