Как сделать контур карты
10 бесплатных инструментов для создания карт
Давно ушли в прошлое те времена, когда на странице контактов было достаточно указать адрес и номер телефона. Сегодня любая компания, которая ценит своих клиентов, обязательно размещает рядом с адресом карту проезда. Это очень удобно, в том числе и с точки зрения UX. Создать простую карту проезда можно с помощью конструктора Яндекс.Карт или Google Map. Но порой требуется нечто посложнее – например, карта может понадобиться для презентации или для создания инфографики. В таком случае можно воспользоваться специальными онлайн-инструментами для создания пользовательских карт. Некоторые из этих инструментов позволяют создавать интерактивные карты, с помощью которых можно представить информацию в наиболее удобном для пользователя виде. FreelanceToday предлагает вашему вниманию 10 бесплатных инструментов для создания карт.
Сервис Animaps расширяет функционал Google Maps, позволяя создавать карты с анимированными маркерами. Маркеры передвигаются по карте, показывая, к примеру, маршрут передвижения. Очень полезный сервис для создания интерактивной инфографики. С помощью Animaps можно создать целый рассказ о каком-либо событии, сопроводив его текстовыми блоками и иллюстрациями.
Простой в использовании сервис Scribble Maps имеет множество инструментов для создания практически любого вида карт. Можно сделать обычную маршрутную карту, но одновременно с этим сервис может быть полезен дизайнерам, которые хотели бы создать красочную инфографику. В Scribble Maps имеется возможность добавлять текст, изображения, рисовать и закрашивать различные геометрические фигуры, расставлять маркеры и многое другое. Если нужна инфографика на основе карты – лучшего инструмента не придумать. Готовую карту можно разместить на сайте, в блоге или отправить ее клиенту, сохранив ее в формате PDF.
Создатели сервиса MapTiler позаботились о том, чтобы созданные пользователем карты отображались на любых устройствах. MapTiler – одно из самых удобных приложений для подготовки тайлов с использованием API Google Maps. К сожалению, бесплатная версия программы обладает очень ограниченным функционалом, с помощью которого можно создавать лишь самые простые карты.
HeatmapTool является лучшим онлайн-сервисом для создания очень точных тепловых карт. С помощью такой карты можно быстро визуализировать данные, используя различные цвета. Сервис позволяет управлять радиусом, масштабированием и непрозрачностью тепловых пятен. Информацию можно обновлять в режиме реального времени. Для чего создан данный сервис? В первую очередь для визуального отображения любых статистических данных в заранее выбранном регионе. Можно делать достаточно сложные карты, к примеру с помощью сервиса можно показать покрытие сотовой сети, плотность населения в стране и многое другое. Сервис очень мощный, с его помощью можно быстро обрабатывать даже очень большие объемы статистических данных.
После покупки Nokia корпорация Microsoft значительно улучшила свой картографический сервис Bing Maps. Карты Nokia всегда отличались высокой детализацией и хорошим покрытием, так что можно не переживать за точность. Функционал сервиса не может похвастаться разнообразием, но треков, маркеров и геометрических фигур вполне достаточно, чтобы создать достаточно информативную карту. Также имеется возможность добавления изображений и текстовых комментариев. После окончания работы результат нужно сохранить, после чего Bing Maps сгенерирует ссылку и код для встраивания карты на сайт.
Дружественный пользовательский интерфейс сервиса Click2Map поможет быстро и легко создавать интерактивные карты любого уровня сложности. Мощный функционал сервиса позволит создать профессиональные карты в кратчайшие сроки. С помощью большого набора иконок можно персонализировать карту, если требуется рассказать о какой-то конкретной сфере деятельности. Тематические маркеры позволят пользователям легко ориентироваться по карте. Также маркеры можно использовать для определения местоположения конкретной точке. Маркер поддерживает различные виды контента – текст, изображения, HTML-код. Чтобы получить доступ ко всем возможностям сервиса, придется оформить платную подписку, однако если зарегистрировать бесплатный аккаунт, то можно создавать карты с ограниченным количеством маркеров, максимум 10.
Картографический сервис ZeeMaps позволяет легко создавать, публиковать и делиться интерактивными картами. Сервис работает на основе Google Map и с его помощью можно создать даже очень сложную карту с большим количеством данных. Статистику можно импортировать из Excel, Access, MS Outlook и других программ. Ограничений на количество маркеров нет, информацию можно в любой момент изменять по желанию пользователя. К маркерам можно добавлять картинки, текст, аудио-файлы, а также видео из YouTube.
Если нужно создать впечатляющую инфографику, то для этого идеально подойдет веб-приложение TargetMap. Сервис абсолютно бесплатен и обладает широким функционалом. Создатели сервиса основали его с образовательной целью – создавая свои карты, пользователи могут поделиться информацией с сообществом TargetMap. В галерее сервиса представлены очень интересные карты, которые разбиты на несколько категорий. Данные в сервис загружаются из файла Excel, после чего информация тут же появляется на карте. Потребуется всего несколько минут, чтобы поработать над цветовым оформлением, и карта готова.
GmapGis – простенькое-онлайн приложение для рисования на картах Google. Можно расставить маркеры, измерить расстояние между двумя точками на карте, рисовать линии и геометрические фигуры. Весь функционал представлен в верхней части страницы, так что проблем с использованием сервиса не будет – все очень понятно. Полученный результат можно сохранить как файл или в виде ссылки. Во время использования GmapGIS может появиться проблема – пользователь не может провести линию или нарисовать фигуру. В этом случае разработчики рекомендуют закрыть и снова открыть браузер. После этого появится полный доступ ко всему функционалу.
Создание объекта
Чтобы создать объект (точку, линию или многоугольник) на своей карте:
В окне Конструктора карт нажмите нужную кнопку под поисковой строкой или горячие клавиши, нарисуйте объект на карте и задайте значения параметров объекта:
заполнение ─ пустая, с номером (от единицы до 999) или со значком из предлагаемого меню;
подпись, которая будет отображаться на карте;
текст, который будет показываться при нажатии (клике) на объект:
Линия — задается цвет, прозрачность и толщина линии.
Вы можете также автоматически упростить линию (см. ниже).
Многоугольник — задаются цвета контура и заливки, прозрачность контура и заливки и толщина линии контура.
Если нарисованная линия или многоугольник содержит более тысячи вершин (т. е. не выполняется Внимание. \\n
Существуют определенные ограничения на создание объектов:
На карту может быть добавлено не более 10 000 объектов (включая и метки, и линии, и многоугольники).
Одна линия или многоугольник могут включать не более 1 000 вершин.
Если число вершин объекта превышает эту величину, объект можно автоматически упростить: удалить некоторые вершины таким образом, чтобы максимально сохранить общий вид объекта.
Для этого нажмите левой кнопкой на любую вершину линии или многоугольника и в открывшемся контекстном меню выберите пункт Упростить линию (или Упростить контур ). При упрощении вершины удаляются таким образом, чтобы максимально сохранить общий вид объекта.
Чтобы выйти из режима создания объекта, нажмите клавишу Esc или повторно нажмите горячие клавиши.
Для любого объекта в поле Описание можно задать текст, который будет показываться при нажатии на объект:
Кроме того, в тексте описания может использоваться html-разметка. Например:
При вставке кода на сайт получим балун с изображением и ссылкой:
Создавая карту, вы можете копировать и вставлять выделенный объект с помощью горячих клавиш.
Создавая карту, вы можете отменять и возвращать действия над объектами кнопками или горячими клавишами.
Эти операции доступны в процессе создания карты. Кроме того, они могут быть доступны и после сохранения карты ─ если вернуться к редактированию карты с шага выбора типа карты (см. раздел Выбор типа карты и получение кода или ссылки).
Если карта закрыта полностью (т. е. закрыта вкладка браузера, или вы начали рисовать другую карту, или выбрали другую карту из списка) ─ операции становятся недоступны.
Для отмены и возврата доступны действия:
Нельзя отменить и вернуть действия:
Каждый объект вашей карты отображается в панели Редактирование карты в виде отдельной строки списка объектов. Каждая строка включает название и превью объекта; для линейных объектов показывается также их длина (она рассчитывается автоматически).
Объекты в списке расположены в порядке Метки → Линии → Многоугольники.
В этом же порядке объекты отображаются на карте: метки отображаются «выше» линий и могут перекрывать их изображение, а линии — выше многоугольников.
Этот порядок изменить нельзя. Но при необходимости можно изменить порядок отображения объектов внутри каждой категории, перемещая нужную метку (или линию, или многоугольник) на первый или, наоборот, на задний план.
Для того, чтобы изменить порядок отображения объектов, перетащите нужную строку списка на нужную позицию (или воспользуйтесь горячими клавишами):
Создавая новый объект, вы можете найти его положение на карте с помощью поисковой строки (если нужный объект относится к географическим объектам — населенным пунктам, улицам, водоемам и т. п.):
Создание объекта
Чтобы создать объект (точку, линию или многоугольник) на своей карте:
В окне Конструктора карт нажмите нужную кнопку под поисковой строкой или горячие клавиши, нарисуйте объект на карте и задайте значения параметров объекта:
заполнение ─ пустая, с номером (от единицы до 999) или со значком из предлагаемого меню;
подпись, которая будет отображаться на карте;
текст, который будет показываться при нажатии (клике) на объект:
Линия — задается цвет, прозрачность и толщина линии.
Вы можете также автоматически упростить линию (см. ниже).
Многоугольник — задаются цвета контура и заливки, прозрачность контура и заливки и толщина линии контура.
Если нарисованная линия или многоугольник содержит более тысячи вершин (т. е. не выполняется Внимание. \n
Существуют определенные ограничения на создание объектов:
На карту может быть добавлено не более 10 000 объектов (включая и метки, и линии, и многоугольники).
Одна линия или многоугольник могут включать не более 1 000 вершин.
Если число вершин объекта превышает эту величину, объект можно автоматически упростить: удалить некоторые вершины таким образом, чтобы максимально сохранить общий вид объекта.
Для этого нажмите левой кнопкой на любую вершину линии или многоугольника и в открывшемся контекстном меню выберите пункт Упростить линию (или Упростить контур ). При упрощении вершины удаляются таким образом, чтобы максимально сохранить общий вид объекта.
Чтобы выйти из режима создания объекта, нажмите клавишу Esc или повторно нажмите горячие клавиши.
Для любого объекта в поле Описание можно задать текст, который будет показываться при нажатии на объект:
Кроме того, в тексте описания может использоваться html-разметка. Например:
При вставке кода на сайт получим балун с изображением и ссылкой:
Создавая карту, вы можете копировать и вставлять выделенный объект с помощью горячих клавиш.
Создавая карту, вы можете отменять и возвращать действия над объектами кнопками 
или горячими клавишами.
Эти операции доступны в процессе создания карты. Кроме того, они могут быть доступны и после сохранения карты ─ если вернуться к редактированию карты с шага выбора типа карты (см. раздел Выбор типа карты и получение кода или ссылки).
Если карта закрыта полностью (т. е. закрыта вкладка браузера, или вы начали рисовать другую карту, или выбрали другую карту из списка) ─ операции становятся недоступны.
Для отмены и возврата доступны действия:
Нельзя отменить и вернуть действия:
Каждый объект вашей карты отображается в панели Редактирование карты в виде отдельной строки списка объектов. Каждая строка включает название и превью объекта; для линейных объектов показывается также их длина (она рассчитывается автоматически).
Объекты в списке расположены в порядке Метки → Линии → Многоугольники.
В этом же порядке объекты отображаются на карте: метки отображаются «выше» линий и могут перекрывать их изображение, а линии — выше многоугольников.
Этот порядок изменить нельзя. Но при необходимости можно изменить порядок отображения объектов внутри каждой категории, перемещая нужную метку (или линию, или многоугольник) на первый или, наоборот, на задний план.
Для того, чтобы изменить порядок отображения объектов, перетащите нужную строку списка на нужную позицию (или воспользуйтесь горячими клавишами):
Создавая новый объект, вы можете найти его положение на карте с помощью поисковой строки (если нужный объект относится к географическим объектам — населенным пунктам, улицам, водоемам и т. п.):
Выбор типа карты и получение кода или ссылки
После того, как ваша карта создана, вы можете получить код для вставки своей карты на сайт, в блог или мобильное приложение, а также ссылку, по которой вашу карту можно будет увидеть в интернете.
Кроме того, вы можете экспортировать свою карту в файл. См. раздел Экспорт объектов карты.
При подготовке карты следует помнить о Внимание. \\n
Существуют определенные ограничения на создание объектов:
На карту может быть добавлено не более 10 000 объектов (включая и метки, и линии, и многоугольники).
Одна линия или многоугольник могут включать не более 1 000 вершин.
Если число вершин объекта превышает эту величину, объект можно автоматически упростить: удалить некоторые вершины таким образом, чтобы максимально сохранить общий вид объекта.
Для этого выберите нужный тип карты (нажмите кнопку на панели Тип карты ):
Подробнее об этом типе и существующих ограничениях см. раздел Печатная карта.
Интерактивная карта
Чтобы получить код для вставки на сайт, в блог или мобильное приложение своей карты таким образом, что с ней можно будет взаимодействовать (двигать, менять масштаб, строить маршруты, просматривать описания и т. п.), выберите тип карты Интерактивная :
В открывшейся форме вы можете скопировать код, который позволит отобразить вашу карту на сайте или в блоге (доступны два варианта HTML-кода ─ JavaScript или iframe ):
Использование кода iframe имеет ограничения:
карта может отображаться только на крупных масштабах,
не все теги HTML будут работать (см. \\n \\n Некоторые теги HTML не работают на карте при вставке через iframe: \\n \\n
не показываются произвольные изображения, тег img ( <img src=\\»my-picture.png\\» />);
не запускаются скрипты, тег script ( <script src=\\»\\»></script>);
не обрабатываются \\nинлайн-стили ( style=\\». \\») и инлайн-скрипты ( onclick=\\». \\») и т. п.
При использовании кода JavaScript по умолчанию на карте Конструктора нет поиска / маршрутов / панорам.
Чтобы они появились, нужно получить API-ключ в Кабинете разработчика для продукта «JavaScript API и HTTP Геокодер» и добавить его в код.
Пример кода с использованием API-ключа:
Ваша карта откроется на Яндекс.Картах вместе с информационной панелью (см. выше).
В открывшейся форме вы можете скопировать ссылку на карту (или код, который позволит отобразить вашу карту).
Статическая карта
Чтобы получить код для вставки своей карты в виде статического изображения (такие карты можно размещать на сайтах без поддержки JavaScript), выберите тип карты Статическая :
В открывшейся форме вы можете скопировать код, который позволит отобразить вашу карту. Подробнее см. в разделе API Конструктора Карт.
Печатная карта
Чтобы сохранить на Яндекс.Диске файл, содержащий изображение карты в высоком разрешении, которое можно распечатать, или чтобы непосредственно отправить свою карту на печать в текущем разрешении, выберите тип карты Печатная :
Для печатных карт вы можете выбрать единицу измерения: пиксели ( px ), дюймы ( in ) или сантиметры ( cm ).
Печатные карты высокого разрешения можно создать:
Только для карт вида Схема; для спутниковых снимков и гибридов карты для печати создать нельзя.
Только для крупных масштабов карты; для обзорных (мелких) масштабов печатные карты создать нельзя.
Только в последних версиях настольных браузеров Firefox, Chrome, Яндекс.Браузер, Edge, Safari и Opera.
Файл будет сохранен в автоматически созданной папке Конструктор Яндекс.Карт вашего Яндекс.Диска под тем именем, которое вы дали карте.
Выбор типа карты и получение кода или ссылки
После того, как ваша карта создана, вы можете получить код для вставки своей карты на сайт, в блог или мобильное приложение, а также ссылку, по которой вашу карту можно будет увидеть в интернете.
Кроме того, вы можете экспортировать свою карту в файл. См. раздел Экспорт объектов карты.
При подготовке карты следует помнить о Внимание. \n
Существуют определенные ограничения на создание объектов:
На карту может быть добавлено не более 10 000 объектов (включая и метки, и линии, и многоугольники).
Одна линия или многоугольник могут включать не более 1 000 вершин.
Если число вершин объекта превышает эту величину, объект можно автоматически упростить: удалить некоторые вершины таким образом, чтобы максимально сохранить общий вид объекта.
Для этого выберите нужный тип карты (нажмите кнопку на панели Тип карты ):
Подробнее об этом типе и существующих ограничениях см. раздел Печатная карта.
Интерактивная карта
Чтобы получить код для вставки на сайт, в блог или мобильное приложение своей карты таким образом, что с ней можно будет взаимодействовать (двигать, менять масштаб, строить маршруты, просматривать описания и т. п.), выберите тип карты Интерактивная :
В открывшейся форме вы можете скопировать код, который позволит отобразить вашу карту на сайте или в блоге (доступны два варианта HTML-кода ─ JavaScript или iframe ):
Использование кода iframe имеет ограничения:
карта может отображаться только на крупных масштабах,
не все теги HTML будут работать (см. \n \n Некоторые теги HTML не работают на карте при вставке через iframe: \n \n
не показываются произвольные изображения, тег img ( );
не запускаются скрипты, тег script ( );
не обрабатываются \nинлайн-стили ( style=\». \») и инлайн-скрипты ( onclick=\». \») и т. п.
При использовании кода JavaScript по умолчанию на карте Конструктора нет поиска / маршрутов / панорам.
Чтобы они появились, нужно получить API-ключ в Кабинете разработчика для продукта «JavaScript API и HTTP Геокодер» и добавить его в код.
Пример кода с использованием API-ключа:
Ваша карта откроется на Яндекс.Картах вместе с информационной панелью (см. выше).
Нажмите на этой панели кнопку Поделиться 
.
В открывшейся форме вы можете скопировать ссылку на карту (или код, который позволит отобразить вашу карту).
Статическая карта
Чтобы получить код для вставки своей карты в виде статического изображения (такие карты можно размещать на сайтах без поддержки JavaScript), выберите тип карты Статическая :
В открывшейся форме вы можете скопировать код, который позволит отобразить вашу карту. Подробнее см. в разделе API Конструктора Карт.
Печатная карта
Чтобы сохранить на Яндекс.Диске файл, содержащий изображение карты в высоком разрешении, которое можно распечатать, или чтобы непосредственно отправить свою карту на печать в текущем разрешении, выберите тип карты Печатная :
Для печатных карт вы можете выбрать единицу измерения: пиксели ( px ), дюймы ( in ) или сантиметры ( cm ).
Печатные карты высокого разрешения можно создать:
Только для карт вида Схема; для спутниковых снимков и гибридов карты для печати создать нельзя.
Только для крупных масштабов карты; для обзорных (мелких) масштабов печатные карты создать нельзя.
Только в последних версиях настольных браузеров Firefox, Chrome, Яндекс.Браузер, Edge, Safari и Opera.
Файл будет сохранен в автоматически созданной папке Конструктор Яндекс.Карт вашего Яндекс.Диска под тем именем, которое вы дали карте.