Как сделать границы на карте
Конструктор карт. Инструкция
Конструктор карт — бесплатный инструмент для компаний, журналистов и блогеров. Помогает создавать карты со своей разметкой: точками, маршрутами, выделенными областями. Такие карты можно добавить на любой сайт.
Что есть в конструкторе
Отметки. Указывают на конкретное место, адрес или компанию. Расставляйте точки вручную или привязывайте к конкретному адресу. Чтобы привязать точку к адресу, введите улицу и дом, название организации или объекта в поисковой строке.
Линии. Пригодятся, чтобы показать маршрут забега, перекрытые улицы, дорогу от остановки до офиса.
Фигуры: квадраты, круги, многоугольники. Помогают выделить на карте небольшой участок или целый район.
Как добавить объекты на карту
Выберите отметку, линию или фигуру и поместите её в нужное место.
Цвет, толщина линии и другие свойства фигур настраиваются в левой панели.
Точкам, линиям и фигурам можно добавить описание — пользователи увидят его, когда кликнут на объект. Если знаете разметку Markdown и HTML, вставляйте в описания картинки.
Отметкам можно добавить подпись, которую всегда видно на карте.
Все отметки, линии и фигуры, которые вы нанесёте на карту, появятся в левой панели. Нажмите на объект в списке, чтобы выделить его на карте. И наоборот: выберите объект на карте, чтобы выделить в списке.
Если добавить объекту описание, оно появится в списке. Так проще отличить одну точку или фигуру от другой.
Площадные объекты могут накладываться друг на друга. Если кликнете по смежной области, то выберете тот объект, который находится на более высоком слое. Чтобы изменить приоритет объектов, перемещайте их в списке вверх и вниз.
Чтобы удалить объект, найдите его в списке и нажмите на крестик.
Как настроить размер карты
Ширина и высота карты настраиваются на верхней панели. Высоту всегда указывают в пикселях. Ширину можно выбрать по размеру экрана.
Как добавить карту на свой сайт
Нажмите на кнопку «Получить код» под картой, скопируйте код и вставьте на свою страничку. Если у сайта есть админка, которая поддерживает HTML, можно сделать это через неё. Если админки нет, добавьте карту прямо в код сайта.
Создание карты
Чтобы создать свою карту:
В окне Создайте собственную карту нажмите кнопку Создать карту :
Если вы уже создали одну или несколько своих карт и хотите вернуться к созданной карте, то вы увидите список этих карт и сможете выбрать нужную.
В каждой строке списка отображаются название и дата последнего обновления карты, а также кнопка, при нажатии на которую открывается меню.
В открывшемся окне Конструктора карт создайте объекты — метки, линии, многоугольники.
Существуют определенные ограничения на создание объектов:
На карту может быть добавлено не более 10 000 объектов (включая и метки, и линии, и многоугольники).
Одна линия или многоугольник могут включать не более 1 000 вершин.
Если число вершин объекта превышает эту величину, объект можно автоматически упростить: удалить некоторые вершины таким образом, чтобы максимально сохранить общий вид объекта.
Выберите вид своей карты. Для этого нажмите кнопку Слои и в открывшемся меню выберите вариант:
Схема — схематическое изображение картографических объектов: дорог, домов и т. д.
Спутник — снимок местности, сделанный из космоса,
Гибрид — снимок местности, сделанный из космоса, дополненный информацией карты: названиями улиц, адресами и др.
Степень загруженности участка дороги показывается цветом:
В области Редактирование карты задайте для карты название (оно пригодится при выборе нужной карты из списка ваших карт) и описание (оно поможет вспомнить подробности, относящиеся к карте):
Вы также можете изменить порядок отображения объектов внутри каждой категории, перемещая нужную метку (или линию, или многоугольник) на первый или, наоборот, на задний план. Подробнее см. раздел Создание объекта.
В панели Тип карты выберите нужный тип карты и получите код карты для вставки на сайт, в блог или мобильное приложение. Вы также можете скопировать ссылку на свою карту и поделиться ею с друзьями.
Это можно сделать несколькими способами (подробнее см. раздел Выбор типа карты и получение кода или ссылки).
Вы также можете сохранить объекты вашей карты на Яндекс.Диск в виде файла определенного формата (KML, CSV, GPX или GeoJSON).
Создание карты
Чтобы создать свою карту:
В окне Создайте собственную карту нажмите кнопку Создать карту :
Если вы уже создали одну или несколько своих карт и хотите вернуться к созданной карте, то вы увидите список этих карт и сможете выбрать нужную.
В каждой строке списка отображаются название и дата последнего обновления карты, а также кнопка, при нажатии на которую открывается меню.
В открывшемся окне Конструктора карт создайте объекты — метки, линии, многоугольники.
Существуют определенные ограничения на создание объектов:
На карту может быть добавлено не более 10 000 объектов (включая и метки, и линии, и многоугольники).
Одна линия или многоугольник могут включать не более 1 000 вершин.
Если число вершин объекта превышает эту величину, объект можно автоматически упростить: удалить некоторые вершины таким образом, чтобы максимально сохранить общий вид объекта.
Выберите вид своей карты. Для этого нажмите кнопку Слои и в открывшемся меню выберите вариант:
Схема — схематическое изображение картографических объектов: дорог, домов и т. д.
Спутник — снимок местности, сделанный из космоса,
Гибрид — снимок местности, сделанный из космоса, дополненный информацией карты: названиями улиц, адресами и др.
Степень загруженности участка дороги показывается цветом:
В области Редактирование карты задайте для карты название (оно пригодится при выборе нужной карты из списка ваших карт) и описание (оно поможет вспомнить подробности, относящиеся к карте):
Вы также можете изменить порядок отображения объектов внутри каждой категории, перемещая нужную метку (или линию, или многоугольник) на первый или, наоборот, на задний план. Подробнее см. раздел Создание объекта.
В панели Тип карты выберите нужный тип карты и получите код карты для вставки на сайт, в блог или мобильное приложение. Вы также можете скопировать ссылку на свою карту и поделиться ею с друзьями.
Это можно сделать несколькими способами (подробнее см. раздел Выбор типа карты и получение кода или ссылки).
Вы также можете сохранить объекты вашей карты на Яндекс.Диск в виде файла определенного формата (KML, CSV, GPX или GeoJSON).
Как сделать карту в конструкторе Яндекса и разместить ее на сайте
Доброго дня, дорогие читатели!
В этой статье я расскажу о том, как сделать карту в конструкторе Яндекса и разместить ее на своем сайте. Статья будет полезна преимущественно для владельцев коммерческих сайтов, ведь именно там нужна карта с указанием адреса.
Зачем это нужно
Карта может понадобиться для коммерческих сайтов. Допустим, если где-то есть офис, и надо рассказать клиентам, как к этому офису можно проехать. Карта на сайте позволит им не тратить время на поиск карты в других местах и построить маршрут прямо здесь и сейчас.
То же касается и проектов смежных направленностей: магазины, сервисы, автомастерские и т. д. Фактически карта на сайте не просто приятный бонус, это обязательный атрибут, который никак нельзя упускать из виду.
У этого есть и другое значение – если пользователь видит, что у вашей компании есть свой офис, куда можно приехать (еще лучше, если он обозначен в Яндекс и Гугл Мапс), уровень доверия к вам значительно повышается. Ваш бизнес уже не воспринимается как что-то непонятное и сомнительное.
Карта интерактивная. Это значит, что ваши клиенты смогут сориентироваться, посмотреть схему проезда, наличие условных знаков, названия улиц.
Поэтому давайте перейдем к инструкции размещения карты на сайт.
Создание карты
Для этого мы будем пользоваться специальным конструктором карт Яндекса. Его могут использовать все, но придется пройти регистрацию и завести себе аккаунт Яндекса.
Как только вы залогинитесь, можно переходить к следующей инструкции. С помощью полей ввода адреса или курсора найдите нужное место и задайте масштаб. Делайте это с умом, потому как именно таким образом и будет выглядеть карта на вашем сайте.
Вы можете поставить метки, линии, многоугольник и пробки для того, чтобы дать посетителям дополнительную информацию. Например, о том, что где-то есть удобный проход или же наоборот, что пути нет. Но обо всем этом далее.
Все созданные вами объекты будут доступны в “Списке объектов”. Их при желании можно удалить или отредактировать.
Метки
Метками можно обозначить ближайшие станции метро или автобусные остановки. Еще меткой можно обозначить вход в здание (если оно большое) или другие офисы, если они есть.
Чтобы создать метку выберите ее в панели управления сверху и кликните по любому месту на карте. После этого выскочит окно, в котором вы сможете ввести подпись метки и краткое описание – оно будет выводиться при клике. Также вы можете выбрать цвет и тип метки. Рядом доступны и другие параметры кастомизации, например иконки или произвольное число.
Как только редактирование будет завершено, кликните на кнопку “Готово”. Можно создать сколько угодно меток. Но если их будет слишком много, пользователи могут запутаться.
Линии
С помощью линий вы можете нарисовать маршрут, отметить какие-то обходные пути или показать наиболее короткую дорогу от того же метро или остановки.
Создавать линии очень просто, выберите их в панели инструментов и кликните по нужному месту.
Линия создается по точкам, как только вы кликните на определенного место, нужно переместить курсор по направлению линии и кликнуть еще раз. Как только формирование линии будет закончено, нажмите на клавишу “Esc”. После этого всплывет окно с опциями.
Вы можете выбрать цвет, процент прозрачности и толщину линии. Также можно ввести описание, которое будет доступно при клике по объекту. Кликаем на “Готово”, как только редактирование будет закончено.
Многоугольники
С помощью многоугольников вы также можете рисовать произвольные отметки на карте. Обычно этот инструмент используют для обрисовки контура здания. Им же можно обозначить какую-то территорию или любую другую местность.
Выбираем инструмент, кликаем в нужном месте, потом кликаем еще раз, как и в случае с линиями, и вот уже на третий раз вы сможете сформировать треугольник – самый простой вид многоугольников.
То есть он формируется при помощи трех точек, ничего сложного. При желании вы можете сделать больше точек, изобразив другую фигуру.
После того, как фигура сформирована, нажимаем на клавишу “Esc”. Выскочит окно с параметрами.
Можно задать цвет контура и заливки, выбрать толщину. Обратите внимание на два поля “Прозрачность”, которые расположены параллельно контуру и заливке. Здесь вы можете задать процент прозрачности.
Если выставить 100, то нужный элемент просто исчезнет. Например, вы хотите, чтобы был только контур – вводите значение 100 в поле напротив заливки и она исчезает. То же сработает и с самим контуром. Очень удобно.
Можно закрывать редактор с помощью кнопки “Готово”. Но не спешите, есть еще кое-что, о чем надо сказать.
Пробки и слои
Эти два инструмента также могут помочь при создании карты. С помощью кнопки “Пробки” вы можете включить отображение дорог, где есть пробки. Для больших городов это очень важный пункт.
Слои же отвечают за тип карты. Например, на моих скриншотах стоит стандартный рисованный вариант. Если он вам не нравится, то вы можете выбрать спутник (думаю, не надо объяснять, что это вид со спутника) и гибрид. Последний представляет собой смесь рисованного варианта и спутника (грубо говоря: спутник с отметками).
Сохранение и получение кода
После редактирования карты вы можете сохранить ее. Для этого нужно нажать на соответствующую кнопку внизу, но не забывайте ввести название и описание.
Но это еще не все. После этого конструктор предложит нам выбрать размер карты и ее тип. Есть интерактивный, когда пользователь может менять масштаб или прокручивать карту при помощи мыши, или статичный, когда он видит простую картинку в формате PNG.
С помощью боковой панели или интерактивных уголков (можно перетаскивать) выбираем размеры. С помощью курсора ее можно масштабировать. Эти функции пригодятся вам, если в предыдущем шаге вы переборщили с размером и элементы вылезли за края.
Нажимаем “Получить код карты”, после чего нам предлагается выбрать вариант кода: JavaScript или iframe.
Код на JavaScript имеет больше возможностей. Пользователи смогут менять масштаб, вид (слои), отмечать пробки и т. д. Если же вы выберете iframe, то функционал будет урезан, посетители смогут посмотреть пробки и больше ничего.
Размещение кода на сайте
Вне зависимости от выбранного варианта вам придется размещать код на сайте. Я не буду подробно рассказывать о том, как это сделать – все индивидуально и зависит от вашей платформы.
Принцип везде один – вам необходимо просто вставить код в нужном месте страницы вашего проекта. В том же WordPress это можно сделать при помощи встроенного редактора. В других CMS этот процесс тоже мало чем отличается.
В любой момент вы можете зайти в раздел “Мои карты” и изменить какие-то параметры, добавить новые метки или линии, получить другой тип кода.
Также вы можете импортировать готовую карту из форматов XLSX, CSV, KML, GPX или GeoJSON.
Заключение
Надеюсь, теперь вы понимаете, как создать свою вариацию карты и установить ее на сайт. Тут нет ничего сложного, нужно просто следовать инструкции и читать то, что написано в официальной документации. Последнее актуально в тех случаях, когда нужно изменить размеры или вставить ее в определенный контейнер. В общем-то, не сложнее, чем сделать карту в конструкторе Google Maps – все примерно так же.
Если вы хотите лучше разбираться в сайтах, а если быть точнее – в информационных проектах, то я рекомендую вам обратить внимание на курс Василия Блинова “Как создать сайт”. В нем автор рассматривает информационные сайты как способ стабильного пассивного дохода, учит правильно создавать и продвигать ресурсы в поисковых системах. Есть уроки по монетизации и написанию контента. Обязательно заглядывайте.
Управление картой
Вы можете самостоятельно управлять картой:
Переместить карту
По умолчанию, сервис показывает вам карту вашего города или региона.
Чтобы посмотреть другой участок карты, нажмите и, удерживая левую кнопку мыши, передвиньте карту в нужном направлении.
Изменить масштаб карты
Изменить масштаб карты можно:
С помощью колеса мыши: покрутите его на себя, чтобы уменьшить масштаб, или от себя — чтобы увеличить.
С помощью кнопок мыши: двойной щелчок левой кнопкой мыши на карте увеличивает масштаб карты, а правой — уменьшает.
С помощью правой кнопки мыши:
Нажмите правой кнопкой мыши точку на карте.
Не отпуская кнопку, переместите мышь в нужном направлении.
При движении мыши на карте будет выделена область.
Отпустите кнопку мыши.
Выделенная область переместится в центр карты; масштаб карты при этом увеличится.
Измерить расстояние
Измерить расстояние можно по прямой или по ломаной линии (например, повторяя линии улиц):
Чтобы выключить процесс измерения, нажмите на эту кнопку повторно.
Нажмите на начальную точку измеряемого отрезка:
Полученную линию можно откорректировать: любую из точек можно перетащить на новое место.
Можно также нажать на линию в произвольном месте — там появится новая точка, которую тоже можно перемещать по карте:
Чтобы удалить линию целиком — нажмите кнопку Очистить точки на панели возле конечной точки:
Чтобы выключить процесс измерения (и удалить линию целиком) — нажмите кнопку Выключить линейку на панели возле конечной точки (или повторно нажмите кнопку Линейка : ):
Напечатать карту
Вы можете напечатать карту, которую вы видите на экране, вместе с дополнительными элементами: найденными объектами, построенными маршрутами, панорамами (но не с пробками и фотографиями):
Нажмите кнопку ( Печать ). Откроется окно предварительного просмотра.
В этом окне вы можете изменить масштаб карты и переместить её так, как захотите.
портретная ─ длинная сторона листа располагается по вертикали;
альбомная ─ по горизонтали.
При необходимости напишите в поле, расположенном в нижней части страницы, текст комментария к печатаемой карте. Этот текст будет напечатан под картой.
В открывшемся стандартном окне выберите принтер и параметры печати.
Выбранная карта будет напечатана в соответствии с заданными параметрами.
Вы можете также напечатать карту, на которую нанесете собственные объекты, см. раздел Мои карты (конструктор карт).
Изменить вид карты
Нажмите кнопку ( Слои ) и выберите нужный режим отображения Яндекс.Карт ─
Схема (схематическое изображение дорог, домов и т. д.):
Спутник (снимок местности, сделанный из космоса) или Гибрид (снимок местности, сделанный из космоса, дополненный информацией карты: названиями улиц, адресами и др.):
Режим отображения не влияет на остальные функции карты: поиск, построение маршрутов или перемещение карты.
Изменить язык карты
Яндекс.Карты могут отображаться на разных языках: русском, английском и других.
По умолчанию используется язык, соответствующий выбранному домену. Например, на домене RU ─ русский (https://yandex.ru/maps), на COM ─ английский (https://yandex.com/maps).
На некоторых доменах язык, при необходимости, можно изменить:
Откройте главную страницу Яндекса.
Настройка будет работать во всех сервисах Яндекса, поддерживающих выбранный язык. В том числе на Яндекс.Картах.
Если для выбранного вами домена Яндекс.Карты поддерживаются на разных языках, то в нижней части карты появится переключатель между языком домена и языком, заданным вами в настройках.
Так, если вы открываете Яндекс.карты на украинском домене ( UA ), но в настройках задали русский язык (или наоборот, задали украинский язык на домене RU ), то в нижней части карты отобразится переключатель языков RU/UA :
Управление картой
Вы можете самостоятельно управлять картой:
Переместить карту
По умолчанию, сервис показывает вам карту вашего города или региона.
Чтобы посмотреть другой участок карты, нажмите и, удерживая левую кнопку мыши, передвиньте карту в нужном направлении.
Изменить масштаб карты
Изменить масштаб карты можно:
С помощью кнопок и
.
С помощью колеса мыши: покрутите его на себя, чтобы уменьшить масштаб, или от себя — чтобы увеличить.
С помощью кнопок мыши: двойной щелчок левой кнопкой мыши на карте увеличивает масштаб карты, а правой — уменьшает.
С помощью правой кнопки мыши:
Нажмите правой кнопкой мыши точку на карте.
Не отпуская кнопку, переместите мышь в нужном направлении.
При движении мыши на карте будет выделена область.
Отпустите кнопку мыши.
Выделенная область переместится в центр карты; масштаб карты при этом увеличится.
Измерить расстояние
Измерить расстояние можно по прямой или по ломаной линии (например, повторяя линии улиц):
Нажмите кнопку Линейка : .
Чтобы выключить процесс измерения, нажмите на эту кнопку повторно.
Нажмите на начальную точку измеряемого отрезка:
Полученную линию можно откорректировать: любую из точек можно перетащить на новое место.
Можно также нажать на линию в произвольном месте — там появится новая точка, которую тоже можно перемещать по карте:
Чтобы удалить линию целиком — нажмите кнопку Очистить точки на панели возле конечной точки:
Чтобы выключить процесс измерения (и удалить линию целиком) — нажмите кнопку Выключить линейку на панели возле конечной точки (или повторно нажмите кнопку Линейка : ):
Напечатать карту
Вы можете напечатать карту, которую вы видите на экране, вместе с дополнительными элементами: найденными объектами, построенными маршрутами, панорамами (но не с пробками и фотографиями):
Нажмите кнопку ( Печать ). Откроется окно предварительного просмотра.
В этом окне вы можете изменить масштаб карты и переместить её так, как захотите.
портретная ─ длинная сторона листа располагается по вертикали;
альбомная ─ по горизонтали.
При необходимости напишите в поле, расположенном в нижней части страницы, текст комментария к печатаемой карте. Этот текст будет напечатан под картой.
В открывшемся стандартном окне выберите принтер и параметры печати.
Выбранная карта будет напечатана в соответствии с заданными параметрами.
Вы можете также напечатать карту, на которую нанесете собственные объекты, см. раздел Мои карты (конструктор карт).
Изменить вид карты
Нажмите кнопку ( Слои ) и выберите нужный режим отображения Яндекс.Карт ─
Схема (схематическое изображение дорог, домов и т. д.):
Спутник (снимок местности, сделанный из космоса) или Гибрид (снимок местности, сделанный из космоса, дополненный информацией карты: названиями улиц, адресами и др.):
Режим отображения не влияет на остальные функции карты: поиск, построение маршрутов или перемещение карты.
Изменить язык карты
Яндекс.Карты могут отображаться на разных языках: русском, английском и других.
По умолчанию используется язык, соответствующий выбранному домену. Например, на домене RU ─ русский (https://yandex.ru/maps), на COM ─ английский (https://yandex.com/maps).
На некоторых доменах язык, при необходимости, можно изменить:
Откройте главную страницу Яндекса.
Настройка будет работать во всех сервисах Яндекса, поддерживающих выбранный язык. В том числе на Яндекс.Картах.
Если для выбранного вами домена Яндекс.Карты поддерживаются на разных языках, то в нижней части карты появится переключатель между языком домена и языком, заданным вами в настройках.
Так, если вы открываете Яндекс.карты на украинском домене ( UA ), но в настройках задали русский язык (или наоборот, задали украинский язык на домене RU ), то в нижней части карты отобразится переключатель языков RU/UA :