Как сделать анимированную карту

21 сентября 2022 г. Бесплатные инструменты для дизайнера: создание карт

Карты сейчас стали необходимым элементом. Они присутствуют практически на каждом веб-сайте. В интерфейсах многих мобильных приложений также часто можно найти карту местности. В Uber-like сервисах без карты и вовсе не обойтись. Как создать уникальную карту и при этом не потратить много времени на дизайн? Наша подборка инструментов для дизайнеров поможет легко создать карту в стиле сервиса, который он разрабатывает.

ТОП бесплатных инструментов для создания карт

Snazzy Maps

Бесплатный инструмент для создания карт Snazzy Maps предназначен для работы с Google Maps. Этот сервис для дизайнеров поможет придать нестандартный вид карте, чтобы сделать ваш дизайн уникальным. Сервис Snazzy Maps позволяет подобрать интересный дизайн карты из уже готовых образцов. Также здесь можно создавать свои уникальные стили для оформления карты местности.

В данном сервисе для дизайнеров продуман рейтинг — можно подобрать готовые стили карт по релевантности, популярности и т.д. Что удобно — в Snazzy Maps есть плагины для адаптации карт на сайт или приложение.

Heat Map Tool

Само название этого инструмента для создания карт говорит за себя. Heat Map Tool предназначен для создания тепловых карт местности. Пользоваться инструментом проще простого — достаточно загрузить карту в формате CSV и выбрать нужные эффекты.

• Цвета и градиенты тепловых зон;
• Цвет фона;
• Радиусы тепловых пятен;
• Масштабы тепловых зон и т.д.

Free vector maps

Ресурс Free vector maps предоставляет бесплатные карты всех городов, регионов, стран и частей мира в векторном формате. На сайте каждый дизайнер может выбрать бесплатную карту для скачивания для вставки в макет, который он разрабатывает. Макеты карт доступны для скачивания бесплатно, достаточно отключить Adblock в браузере — ведь сайт спонсируется за счет рекламы.

Animaps

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

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

Scribble maps

• Разместить на карте текстовые сообщения и значки;
• Придать карте нужную форму;
• Рассчитать расстояния между пунктами и т.д.

Затем карту можно отправить друзьям, сохранить в формате PDF или же получить макет для вставки карты на сайт. Все вышеперечисленные сервисы для работы с картами на ресурсе бесплатны, но если вам, как дизайнеру, нужно получить больше возможностей — есть ПРО аккаунт. В платной версии можно импортировать файлы формата KML и SHP-файлы и отдельные элементы карты.

ZeeMaps

Бесплатный инструмент для создания интерактивных карт ZeeMaps позволяет дизайнеру без особого труда создать уникальную карту под нужды его макета. Сервис не требует регистрации поддерживает бесплатную и продвинутую версии. В ZeeMaps можно выделять страны (города, зоны) цветами, а также добавлять уникальные маркеры.

Что интересно — этот сервис для дизайнеров позволяет даже вставлять видео на карту. Вы можете экспериментировать с вставками видео и аудио-маркеров, что придает карте особый вид и выделяет среди прочих.

Гитхаб аккаунт с векторными картами

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

Создание карт в 2023: что будет актуально?

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

Хорошее решение от Google для настройки вида своих карт, можно применять и в вебе и в мобильных приложениях. Есть несколько готовых тем, но также кастомизации поддаются очень много параметров, дороги, кварталы, водоемы, парки и т.д. Сайт генерит JSON код который нужно передать разработчикам и карта будет выглядеть так как задумал дизайнер. Что удобно, можно также быстро импортировать настройки карты в JSON формате, например если нужно подправить стиль уже существующей карты.

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

Чрезвычайно мощный набор инструментов для работы с картами, возможности не столько для дизайнеров, сколько для разработчиков. Огромное количество компаний, такие как Tinder, CNN, IBM используют возможности Mapbox на своих проектах. Хороший пример использования можно посмотреть на https://map.onesoil.ai в проекте показываются все сельскохозяйственные поля Европы и Америки с данными культур и уровнем вегетативности.

Если вам необходимо создать кастомный дизайн, разработать сервис или нативное приложение, напишите нам на info@stfalcon.com!У нашей компании более 14-ти лет опыта в реализации проектов для среднего и крупного бизнеса. мы с радостью воплотим в жизнь вашу идею!

Как создать простую анимированную карту. Mult

Анимированную карту хорошо использовать, когда надо показать длительное путешествие, охватывающее несколько городов (или стран). Такой формат будет хорошо смотреться и на сайте, и в соцсетях.

МОЖНО СДЕЛАТЬ
ИСПОЛЬЗУЕТСЯ В:

Карта, созданная в сервисе mult.dev, представлена в виде глобуса, который постоянно движется, показывая очередные точки путешествия. Выглядит она так.

На бесплатном тарифе вы получите полный функционал редактора карты, но сможете добавить на нее максимум 15 мест и получить видео менее 30 секунд.

Базовый тариф на сервисе начинается с 720 рублей в месяц — при оплате сразу за год. Если оплатить только месяц пользования сервисом, то тариф составит 990 рублей.

Тариф Pro обойдется в 2550 рублей в месяц (при оплате сразу за год). Если оплатить только месяц, то тариф составит 3490 рублей.

Откройте сервис mult.dev. Нажмите «Начать» (кнопка находится в правом верхнем углу).

Авторизуйтесь через электронную почту, аккаунт в Google или GitHab.

Откроется редактор анимированной карты. В левой колонке — редакторская панель. Удалите автоматически поставленные сервисом города, прокрутите вниз, чтобы переключиться на русскоязычную версию сервиса mult.dev.

В строке (+Add place — +Добавить место) впишите отправную точку путешествия. Затем добавьте следующий город. Нажмите на кружок рядом с городом, чтобы выбрать вид транспорт: самолет, машина, автобус, поезд, мотоцикл, теплоход, велосипед или пешком. Аналогичным образом добавьте остальные точки.

Выберите цветовую гамму для карты и формат видео: квадратное, горизонтальное или вертикальное. Установите скорость видео (помните, что на бесплатном тарифе сможете загрузить только 29-секундный ролик.

Нажмите на кнопку «Поделиться анимацией» — вы получите ссылку на анимированную карту. Здесь же будет код для вставки на сайт.

Ссылка и код на анимированную карту появится и когда вы нажмете на кнопку «Создать видео». Дождитесь, когда сервис создаст видео вашей карты. Когда ролик будет готов, скачайте его. Видео анимированной карты будет в формате mp4.

Конструктор анимированной карты Сергея Никитина

Сегодня рад представить очень простой, но весьма привлекательный конструктор анимированных карт-маршрутов. О нём я узнал из небольшого сообщения на сайте MapsMania. С помощью этого инструмента вы и ваши ученики сможете создавать анимированные карты путешествий, которое вы совершили или планируете совершить. Вы можете дать задание ученикам проложить оптимальный маршрут из начальной до конечной точки. Новость эта тем более приятна, что автором этого инструмента является наш соотечественник Сергей Никитин.

Mult.dev — однозадачный инструмент, но делает это превосходно. Буквально за несколько минут вы сможете создать анимированную карту, иллюстрирующую маршруты и расстояния между двумя или более населёнными пунктами.

Для создания анимированной карты на Mult.dev вам не нужна учётная запись. Вы можете просто открыть сайт и начать создавать свою карту. Для этого просто удалите города-заполнители и замените их своими собственными. Вы добавляете города на свою карту с помощью поискового окна. После выбора населённого пункта, который вы хотите, чтобы он появился на карте. Анимация обновляется мгновенно, когда вы добавляете новый город. В данном видео вы можете посмотреть, как поэтапно создать такую карту:

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

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

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

Посмотрите анимированную карту путешествия из Владивостока в Мурманск.

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

Все анимированные карты, которые вы создаете на Mult.dev, можно загрузить в формате MP4.

Таким образом, такой инструмент вы можете использовать в своей учебной и внеклассной деятельности. А также поручить ученикам создать какой-либо виртуальный маршрут.

Комментарии к “ Конструктор анимированной карты Сергея Никитина ”

1. Sergey говорит:

Как сделать сторис «Анимированный маршрут путешествия»

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

Приложение с виртуальными картами путешествий: где найти?

Найти приложение, которое создает анимированный маршрут путешествий, не так-то просто. Более того, в настоящее время оно доступно только для IOS. Но если у вас есть гаджеты Apple, то вы без труда сможете воспользоваться этим приложением.

1. В поиске ищите приложение TravelBoast: Карты Путешествий.
2. Укажите точки вашего маршрута, постройте его как можно более точно.
3. Выберите транспорт, с помощью которого вы передвигались: автомобиль, мотоцикл, лодка, самолет, и т.д. В приложении более 50 оригинальных видов транспорта, и их количество увеличивается с каждым обновлением приложения. Средства передвижения можно использовать как реальные, так и вымышленные.
4. После этого вы можете сохранить свое видео, а затем загрузить его в сторис.

Анимация вашего путешествия на карте мира смотрится действительно намного более эффектно, чем если вы просто опубликуете фото маршрута. Посмотрите, как это выглядит:

Скачать приложение можно по ссылке. Устанавливайте приложение и монтируйте креативные ролики с вашими перемещениями по миру для сторис!