20 заметок с меткой карта
📅 29 марта

Карта магазинов для печати на А3

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

Карта отделений Читай-города в МосквеКарта отделений Читай-города в Москве

Но где её взять? На сайте компании обычно размещена карта отделений размером максимум с экран телефона или компьютера. Печатать такую карту прямо из браузера бесполезно по двум причинам: на ней помещается только часть нужных объектов, а качество обычно не подходит для печати.

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

Карта отделений Буквоеда в ПитереКарта отделений Буквоеда в Питере

▼ Читать дальше

📅 27 марта

Карта Московской области для печати

Ко мне обратился клиент с задачей изготовить карту Москвы и Московской области размером 200×200 см. На карте должны быть помечены границы областей, а названия городов и деревень должны читаться с 1-2 метров.

Обратите внимание, что продажа готовых карт на основе Яндекса, Гугла и т.д. запрещена лицензией. Если вам нужна помощь в изготовлении подобных карт для личного использования с какими-то доработками — обращайтесь.

Карта Московской области с границамиКарта Московской области с границами

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

При нанесении границ мы заметили, что координаты областей от разных картографических сервисов немного отличаются. Например, если взять Яндекс карту и наложить поверх неё готовую границу Московской области в SVG, взятую с Википедии, то они не совпадут во многих местах:

Разница границ в разных карточных сервисахРазница границ в разных карточных сервисах

Единственный способ подогнать границы — вручную двигать отдельные сегменты линий.

📅 16 марта

API Яндекс Карт: расчёт доставки по зонам

Задача:
рассчитать стоимость доставки товара по городу, учитывая различные тарифные зоны. Выбрать и сгруппировать заказы, которые удобно доставить курьером за одну поездку.

Данный модуль создан на движке Яндекс.Карт и предназначается для CRM-системы службы доставки. На вход поступают данные о всех новых (ещё не обработанных) заказах: номер заказа, желаемое время и адрес доставки. На выходе получается таблица, в которой перечислены заказы, расстояние от офиса, стоимость доставки в зависимости от тарифной зоны. Если адрес находится за пределами города, то показан километраж за МКАДом, а стоимость увеличивается с учётом цены за километр.

Сервис API Яндекс.Карт рассчитывает точки не мгновенно. На обработку и просчёт 10 точек уходит примерно 1-2 секунды. Поэтому пункты просчитываются по одному, и в это время таблица недоступна. После того, как все точки рассчитаны, менеджеру можно приступать к обработке заказов.

  • Поступившие заказы обрабатываются по одному, в итоге получается таблица с ценамиПоступившие заказы обрабатываются по одному, в итоге получается таблица с ценами

Здесь реализована синхронизация карты и таблицы. Заказы можно выбирать как на карте, так и в самой таблице. Кнопка «Только выделенные» оставляет на карте только выделенные заказы — так удобнее оценить, успеет ли курьер объехать все эти точки за один день.

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

📅 5 февраля 2016

Калькулятор стоимости поездки

автовозов.рф/расчет-онлайн

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

Этапы работы калькулятора

  • Главные поля — откуда и куда, а справа — карта с тарифными зонамиГлавные поля — откуда и куда, а справа — карта с тарифными зонами

Повышение доверия

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

📅 30 октября 2015

Яндекс или Гугл карта для печати на бумаге в масштабе с пометками

Ко мне всё чаще обращаются люди по поводу бумажной карты города. Я не занимаюсь печатью, но могу подготовить любую карту для печати в большом размере. Когда-то я рассказал, как скачать Яндекс.карту в виде картинки, но таким образом вы получаете «голую» карту. Если нужно что-то более интересное, отправляйте задание мне на почту или звоните (телефон есть в Контактах). Какие-то вещи можно сделать при помощи Яндекс.API, но большая часть работы делается вручную. Например, автобусные остановки есть на картах, но они мелкие и без названий, и нет инструмента, чтобы «вытащить» их координаты и названия. Если нужно красиво и читабельно — их придётся расставлять вручную. Вот примеры заказов:

Карта Серпухова с отмеченными участками дорог

Задание: разделить цветом выполненные и планируемые работы по ремонту дорог, указать улицу, площадь и стоимость работ.

Превьюшка и фрагмент картыПревьюшка и фрагмент карты

Для красоты я выделил город Серпухов жирной линией и высветлил остальную часть карты. Здесь не всё так просто: Яндекс (или Гугл) выделяет области очень тонкой линией (она не видна при печати). Пришлось брать за основу контур от Яндекса, отделять его от фона с помощью Фотошопа, затем переводить в вектор, чтобы итоговая граница была красивая и ровная при печати на большом формате.

▼ Читать дальше

📅 11 октября 2015

Красивые обзорные карты расположения посёлков

На сайте компании коттеджных посёлков мы провели такой АБ-тест:
Что лучше изобразить в верхней части страницы посёлка?

Фотогалерею или вот такую обзорную схему посёлка? Идея была в том, что на схеме сразу показано примерное расположение объекта, окружающая инфраструктура — ж/д станции, ближайшие города. Чтобы посетитель сайта сразу понимал, что к чему. Но посетитель оказался не готов к такому повороту событий 😃 Ведь гораздо проще и милее сердцу — живые фотографии из посёлков. А вот эти красивые схемы переехали на вкладку «Окружение». А в дальнейшем их заменили на Яндекс.Карты.

Схемы посёлков сохраняю для истории:

  • Карта коттеджного посёлка КлассикаКарта коттеджного посёлка Классика

Я рисую красивые схемы проезда, карты и другую инфографику. Обращайтесь через раздел Контакты.

📅 3 июля 2015

География проектов

Разработал галерею работ с использованием Яндекс карты для компании «Фасад-Гарант». Чтобы фотографии не накладывались друг на друга, была использована кластеризация. Превьюшки + кластеризация — это нестандартное решение, пришлось немного повозиться 😃

  • Вид карты при загрузкеВид карты при загрузке

До карты на сайте был обычный список работ с превьюшками, разбитый на страницы. Такое представление неудобно с точки зрения навигации: клиент посмотрит 1-2 работы и уйдёт со страницы, потому что фотографии довольно однотипные. А вот карта даёт гораздо больше информации за несколько секунд. Видно количество работ, географический охват, какие объекты выполнены в интересующем районе. То, что фирма уже работала в данном районе, повышает доверие к ней.

Для того, чтобы сделать карту более интересной (и таким образом продлить время её изучения), я придумал кнопки изменения масштаба: Москва, Область, Россия.

При клике на Россию (и при начальной загрузке карты) делается автозум — готовая опция в Яндекс.Картах. Если бы мы показали действительно всю Россию, то работы собрались бы в мелкую кучку в районе Москвы.

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

Готовая карта поддерживается заказчиком. Организация предельно простая: текстовый файл с адресами + две папки с фотографиями работ по номерам. Также я подготовил инструкцию по установке карты на сайт, добавлению и редактированию объектов.

📅 21 апреля 2013

Определение координат полигонов на Яндекс.Картах

Яндекс запустил новый конструктор карт, и теперь собственная карта с пометками вставляется всего одной строчкой скрипта. Это удобно для большинства пользователей, но в новом коде встраивания нет координат объектов.

Выкладываю свой скрипт, который выводит координаты полигонов, центра карты и значение зума.

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

📅 1 марта 2013

Захват большой Яндекс.Карты для печати

(Это обучающая статья. Если вы хотите заказать карту, вам сюда: plunix.ru/yandeks-ili-gugl-karta...)

В предыдущей заметке я рассказал, как захватить большое изображение (карту) по частям при помощи скриншотов и Фотошопа. Однако если есть средства для управления картой (API), то можно лёгким движением получить карту любого размера:

Такая карта получится в итогеТакая карта получится в итоге

Зачем вообще такая большая карта? Неужели нельзя проматывать её на экране, или купить карту нужной области, повесить на стенку и втыкать в неё флажки?

С помощью инструментов Яндекс.Карт на карте можно расположить «умные» метки (например, разноцветные), маршруты и любую другую информацию. Эти операции можно выполнить вручную или автоматически. Потом карта с информацией печатается, вешается на стенку: это удобно, потому что видно сразу всю карту, а не только её часть. После распечатывания остаётся возможность порисовать на готовой карте.

Или вот ещё идея: распечатать карту с крестиками, а в них воткнуть настоящие флажки. Если объектов сотня, экономится немало времени.

Захват карты в 2 шага

Нам нужно:
1) отобразить карту необходимого масштаба и размера в браузере,
2) сохранить всю страницу в виде картинки (в том числе фрагменты, выходящие за область экрана).

▼ Читать дальше

📅 25 февраля 2013

Большая карта: автоматическое выравнивание слоёв

(Это обучающая статья. Если вы хотите заказать карту, вам сюда: plunix.ru/yandeks-ili-gugl-karta...)

Иногда бывает нужна большая Яндекс— или Гугл-карта. Например, для распечатки на плакате или для создания какого-нибудь приложения.

Если у карты есть API или код вставки, используйте быстрый способ (полностью автоматический, без фотошопа). Если API нет, или вы не понимаете, о чём идёт речь, то читайте дальше.

Сейчас я расскажу, как можно быстро собрать её из кусочков (из нескольких скриншотов). Этот способ подходит не только для карт, но и для любых больших изображений, которые нельзя скачать целиком.

Склеиваем большую карту из нескольких скриншотовСклеиваем большую карту из нескольких скриншотов

▼ Читать дальше

📅 3 июня 2012

Цветная карта округов РФ

Очередная карта России с округами. При наведении выводится подсказка, по клику — переход в нужный раздел.

Цветная карта округов РФЦветная карта округов РФ

Цвета округов легко меняются (это может сделать сам заказчик). Карта векторная → будет отлично смотреться и в небольшом баннере, и на полном экране.

▼ Читать дальше

📅 22 февраля 2012

Планы посёлков для mobilstroy.ru

Красивые двухмерные планы посёлка показывают расположение основных объектов, очерёдность застройки, наличие участков для продажи и многое другое. В данном случае на плане представлены картинки-фотки «как это будет»:

План посёлка с превьюшкамиПлан посёлка с превьюшками

На участки можно наводить или кликать мышкой для получения дополнительной информации. Цвет подсказки совпадает с цветом участка (маркировкой в зависимости от статуса участка):

Цветные подсказки к участкамЦветные подсказки к участкам

▼ Читать дальше

📅 10 февраля 2012

Как создавалась схема проезда для spmet.ru

Путь до «Металл-ателье» не совсем прост, но нам удалось показать его доступно:

Это прозрачная и контрастная схема — она в равной степени хорошо смотрится и на белом фоне (при распечатывании), и на сайте компании (там бежевый фон).

По желанию заказчика была подготовлена схема в PDF, её можно посылать по почте или печатать в высоком разрешении:

Векторная схема проезда в PDFВекторная схема проезда в PDF

Далее я расскажу и покажу, как создаётся схема.

▼ Читать дальше

📅 8 февраля 2012

Океан на картах Google (часть 2)

Я уже писал про то, что спутниковые Гугл-карты земли и воды совмещены неаккуратно. Сегодня прочитал об обновлении карт:

Выпущенное Google обновление стало продуктом сотрудничества с Океанографическим институтом Скриппса и Национальным управлением океанических и атмосферных исследований США.
Обновление получило дополнительное название Google Ocean. Благодаря ему карта имеет более высокое разрешение, в нем исправлены тысячи ошибок, связанные именно с перекрытием данных.

Проверим, как всё обстоит на самом деле. Беглый поиск по карте даёт, например, вот такие результаты:

Глюки на картах Гугл — 1Глюки на картах Гугл — 1
Глюки на картах Гугл — 2Глюки на картах Гугл — 2
Глюки на картах Гугл — 3Глюки на картах Гугл — 3
Глюки на картах Гугл — 4Глюки на картах Гугл — 4

Оперативно такие глюки не исправляются, так что пока их можно наблюдать на реальной карте:

Короче, по-прежнему очевидны грубые и местами странные следы ручной работы.

📅 14 декабря 2011

Расчёт маршрута (API Яндекс.Карт)

Доделал сервис расчёта маршрутов для сайта «МК-Лидер» (с помощью API Яндекс.Карт). Задача была непростая: внутри МКАД одни расценки, за МКАД — другие. Например, для сквозного маршрута через МКАД из Зеленограда до Красногорска нужно рассчитать 5 участков:

1) выезд от базы до Зеленограда,
2) Зеленоград — МКАД,
3) кусочек по МКАДу,
4) МКАД — Красногорск,
5) возврат из Красногорска на базу.

Кроме путей по Москве (внутри МКАД) есть маршруты сквозные, из Москвы в Московскую область (или наоборот), а также только по МО:

▼ Читать дальше

📅 14 октября 2011

Ручная работа на картах Гугла

Пару лет назад я случайно нашёл косяк на картах в программе Google Earth:

Червячки подпортили карты Гугла 😃Червячки подпортили карты Гугла 😃

▼ Читать дальше

📅 2 января 2011

Схемы дачных посёлков

Интерактивная схема посёлка помогает лучше понять расположение участков:

▼ Читать дальше

📅 28 августа 2010

Карта поставок из других стран

Для сайта Rainbowproduction Co. требовалось сделать красивую карту поставок продукции из других стран.

Карта тянется до любого размера, слайд-шоу увеличивается при наведении курсора:

Карта производства товаров в разных странахКарта производства товаров в разных странах

▼ Читать дальше

📅 25 мая 2009

Схема месторождений

Простенькая схема или карта месторождений:

Клик по любому активному объекту открывает соответствующий раздел сайта.

📅 30 марта 2000

Карта Сумозера

Папа откуда-то надыбал карту Сумозера и окрестностей (в районе нашей деревни Ендогубы). Раскидал её на 9 листов А4 — приедем в деревню, склеим и повесим на стенку.

Апдейт. Вот раскрашенная версия и попытка наложить её на Яндекс.Карты:

Карта Сумозера (деревня Ендогуба)Карта Сумозера (деревня Ендогуба)
Карта Сумозера + Яндекс.КартыКарта Сумозера + Яндекс.Карты

(большие версии по клику)

Иван ТитовИван Титов
Веб-дизайнер,
разработчик
★ Москва
© 2004 – 2019