16 заметок с меткой карта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Нажмите для просмотра анимацииНажмите для просмотра анимации

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Маршрут через МКАДМаршрут из Москвы в МОМаршрут по МО

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

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

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

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

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

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

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

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

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

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

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

Карта поставок: кликните для просмотра флеш-версииКарта поставок: кликните для просмотра флеш-версии

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

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

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

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

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

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

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

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

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

Иван ТитовИван Титов
Фрилансер, музыкант, физтех по жизни, семьянин, философ.
© 2004...2017