У нас новый внештатный иллюстратор: Дмитрий Жерновой.

Ну, на всякий случай, кто еще не знает, завтра в Одессе Webcamp: http://webcamp.in.ua/ru/main

Для «Таврия В» мы разработали приятную составную систему для выбора и показа магазинов сети. 

Первый шаг — выбор области на карте

Варианты решения задачи: flash или html. flash был отброшен так как во-первых необходим дополнительный плагин, во-вторых — не поддерживается на некоторых устройствах (напр. ipad, iphone).

Остается html. Области не прямоугольны, поэтому единственный способ "обозначить" область на карте при помощи html — использовать <area>. В разметке каждая из областей выглядит примерно так:
<area alt="Одесская область" coords="274,250,283,258,297,257,303,250,310,250,314,256,324,257,319,260,324,275,327,276,325,286,341,286,345,307,361,314,361,324,349,328,355,337,355,346,346,348,342,362,297,406,294,428,279,416,251,428,237,421,233,410,269,369,264,353,275,349,313,359,278,294,277,264,272,266,265,258,274,250" shape="poly" href="#area_od">

Ограниченность <area> не дает возможности «подсветить» выбранную область, поэтому делаем «пирог»:


Первый слой — фон, второй — изображения областей в активном состоянии, третий — собственно карта, разметка областей созданная при помощи <area>.

Второй шаг — выбор магазина

После выбора области через ajax-запрос получаем набор городов в которых представлены магазины сети в данной области.


Выбор города провоцирует еще один ajax-запрос, в результате которого мы получаем список адресов магазинов «Таврия В» для этого города. И, конечно, мы учитываем ситуации когда в списке всего один город или одна область и выбираем таковые по умолчанию.

Третий шаг — карта

Выбрав адрес магазина мы при помощи очередного ajax-запроса получаем набор даных о нем и вставляем их на страницу. Остается одна деталь — показать на карте.

Для того чтобы упростить заказчику управление разделом подключаем «Геокодирование».

Теперь при наличии адреса система автоматически найдет точку на карте и покажет «балун» с адресом магазина. В итоге:


Однако не все адреса работают правильно, поэтому оставляем возможность задачи координат объекта через Mart CMS в качестве запасного варианта.

Вот так непростая связка скриптов приводит в действие простую и удобную страницу.

Посмотреть в действии.

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



( Вся статья )

В рядах внештатных иллюстраторов студии «Март» пополнение. Знакомьтесь: Ариадна Сысоева и Юрий Кравчук.

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