Чтобы создать интерактивную карту или виртуальную экскурсию, можно воспользоваться Конструктором карт от Яндекс.
С помощью этого сервиса можно наносить на карту метки (для обозначения объектов), линии (для рисования маршрутов) и многоугольники (для выделения областей и районов).
Готовую карту можно вставить на сайт, в блог или мобильное приложение, ей можно поделиться с друзьями с помощью ссылки. Также её можно распечатать и сохранить в форме рисунка.
Сервис бесплатный, но для работы необходим аккаунт Яндекс.
Заходим на сайт Конструктора карт и нажимаем на кнопку «Создать карту».
Если мы уже создали одну или несколько своих карт, то вы увидим список этих работ и сможем выбрать нужную для редактирования.
В каждой строке списка отображаются название и дата последнего обновления карты, а также кнопка, при нажатии на которую открывается меню.
Выбор пунктов меню позволяет создать копию карты, удалить ее или поделиться ею (для этого надо выбрать пункт «Поделиться», и в открывшейся форме — скопировать ссылку на карту).
Для создания карты нужно авторизироваться: либо войти в свой аккаунт Яндекс, либо создать его (Создать ID). Можно воспользоваться учетными записями ВКонтакте или Google.
В открывшемся окне Конструктора карт мы будем создавать объекты: метки, линии, многоугольники.
Существуют определенные ограничения на создание объектов. На карту может быть добавлено не более 10 000 объектов (включая и метки, и линии, и многоугольники).
Одна линия или многоугольник могут включать не более 1 000 вершин. Если число вершин объекта превышает эту величину, объект можно автоматически упростить: удалить некоторые вершины таким образом, чтобы максимально сохранить общий вид объекта.
Для начала выбираем вид карты. Для этого нажимаем на кнопку «Слои» и в открывшемся меню выбираем из нескольких вариантов:
Схема — схематическое изображение картографических объектов: дорог, домов и т. д.
На панели слева, в области «Новая карта» указываем название карты и её описание. Список созданных нами объектов будет отображаться в области «Список объектов».
Как размещать на карте объекты?
Чтобы добавить на карту маркер для обозначения объекта, нажимаем на кнопку «Метки» и выставляем маркер вручную, кликая «мышкой» по нужному месту на карте.
Для поиска объектов можно воспользоваться поисковой строкой вверху: вписываем в неё название достопримечательности или адрес объекта и нажимаем «Найти».
Для метки на карте можно установить цвет, тип (форму). Можно оставить метку пустой или добавить к ней номер (от 1 до 999). Добавляем подпись, которая будет отображаться на карте, и текст, который будет показываться при нажатии на объект.
Нажимаем на кнопку «Готово», и метка сохраняется на карте.
В тексте описания можно использовать html-разметку для добавления ссылок на веб-ресурсы.
Это разметка для добавления гиперссылки — вместо слова «Ссылка» вставляем свой URL, а вместо «Название ссылки» — слово или предложение, при нажатии на которое это ссылка будет открываться:
<a href=»Ссылка»>Название ссылки</a>
Раньше была возможность с помощью разметки вставить картинки, но сейчас почему-то эта опция недоступна.
Чтобы проложить маршрут между несколькими объектами на карте, нажимаем на кнопку «Линии» и с помощью «мышки» рисуем линию маршрута, кликая по точкам на карте.
Когда линия нарисована, нажимаем левой клавишей «мыши» на последнюю вершину линии и в открывшемся контекстном меню выбираем пункт «Завершить». Маршрут построен!
Для маршрута можно задать текст описания, цвет, прозрачность и толщину линии. Чтобы сохранить созданную линию маршрута, нажимаем на кнопку «Готово».
Чтобы выделить область на карте, нажимаем на кнопку «Многоугольники» и рисуем нужную фигуру, щёлкая «мышкой» в нужных местах на карте. Когда многоугольник будет нарисован, нажимаем левой клавишей «мыши» на последнюю вершину линии и в открывшемся контекстном меню выбираем пункт «Завершить».
Можно добавить к многоугольнику внутренний контур: ещё один многоугольник, находящийся в пределах первого. Для этого нажимаем левой клавишей «мыши» на любую вершину многоугольника и в открывшемся контекстном меню выбираем пункт «Добавить внутренний контур».
Можно добавить к многоугольнику внутренний контур: ещё один многоугольник, находящийся в пределах первого. Для этого нажимаем левой клавишей «мыши» на любую вершину многоугольника и в открывшемся контекстном меню выбираем пункт «Добавить внутренний контур».
Для многоугольников задаются описание, цвета контура и заливки, прозрачность контура и заливки и толщина линии контура.
Все объекты, добавленные на карту, отображается слева, в панели «Редактирование карты», в виде списка. Каждая строка включает название и превью объекта; для линейных объектов показывается также их длина (она рассчитывается автоматически).
Объекты в списке расположены в порядке Метки → Линии → Многоугольники.
В этом же порядке объекты отображаются на карте: метки отображаются «выше» линий и могут перекрывать их изображение, а линии — «выше» многоугольников.
Этот порядок изменить нельзя. Но при необходимости можно изменить порядок отображения объектов внутри каждой категории, перемещая нужную метку (или линию, или многоугольник) на первый или, наоборот, на задний план.
Для того, чтобы изменить порядок отображения объектов, переносим нужную строку списка на другую позицию с помощью «мышки».
Как опубликовать и распечатать карту?
Чтобы опубликовать получившуюся работу, нажимаем на кнопку «Сохранить и продолжить».
Далее выбираем нужный тип карты:
Интерактивная карта. Карту этого типа можно двигать, а объекты отзываются на действия пользователя.
Статическая карта. Это картинка в формате PNG. На статической карте можно разместить ограниченное число объектов.
Печатная карта (Распечатать). Это изображение карты в высоком разрешении, которое можно распечатать.
Чтобы получить код для вставки на сайт, в блог или мобильное приложение своей карты таким образом, что с ней можно будет взаимодействовать (двигать, менять масштаб, строить маршруты, просматривать описания и т. п.), выбираем тип карты «Интерактивная».
Задаём размеры карты — в px (пикселях). Если включить опцию «Растянуть по ширине», то для нашей карты будет задано значение параметра width = 100%. В этом случае встроенная на сайт карта займет всю ширину (100%) блока.
Нажимаем на кнопку «Получить код карты». В открывшейся форме можно скопировать код в виде JavaScript или iframe.
Ссылку на карту копируем из одноимённого поля внизу.
Чтобы получить код для вставки своей карты в виде статического изображения, выбираем тип карты «Статическая».
Задаём размеры карты — в px (пикселях). Через кнопку «Получить код карты» копируем нужный код для размещения проекта на сайте или в блоге.
Чтобы распечатать карту или скачать её в виде картинки на ПК, выбираем опцию «Распечатать».
Задаём размеры карты для печати — в пикселях (px), дюймах (in) или сантиметрах (cm). Выбираем формат файла (PNG или JPG) и разрешение растрового изображения карты: 96 DPI (для просмотра в WEB) или 300 DPI — для печати.
Если разрешение карты не важно, нажимаем на кнопку «Воспользоваться стандартной печатью».
Можно скачать карту в виде картинки на ПК (Скачать) или на Яндекс Диск (Сохранить на Яндекс Диск).
