Волгоград Москва (8442) 36-79-77 (495) 215-29-73

info@magwai.ru

разработка и продвижение сайтов


Автоматизация разметки областей

09.04.2010

Делали мы недавно сайт. Местный. Корпоративный. Про недвижимость. Все ничего, но заказчику нужны интерактивные планы поселков. Вот как-то так:

cu_1

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

Решения тут 2 (ну если не усложнять):

- Флэшер. Либо дилетант, который зафигачит карту и зашьет туда все данные по участкам. Либо профи, который организует ajax подгрузку контента.

- Карта на javascript/css/html с подгрузкой контента с сервера.

Проблема в обоих случаях будет одна и та же. Как наносить на карту участки? Я думаю существует немало решений этого вопроса. Хочу рассказать как его решали мы.

Писали мы для одного сайта такой контрол в админку, который позволяет отмечать на картинке точки и сохранять координаты в БД. Вот так, например:

cu_2

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

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

cu_3

После завершения фигуры с сервера подгружается пнгшка, отрисованная по коодинатам точек

cu_4

Ну я не отличаюсь аккуратностью выделения объектов, как это видно из картинки, однако идея я думаю понятна, тем более участки на плане поселка несколько «поквадратнее» и их легче обозначить.

Все, объект сохранен в базе. Осталось его показать посетителям сайта.

Для этого делаем прозрачную картинку, размером с фотографию, которую размечали. К этой картинке прикрепляем MAP cкучей AREA типа POLY. Координаты берем из базы. Для красоты на движения мыши навешиваем подгрузку прозрачной пнгшки, где цветом залита выделенная область и получаем что-то типа вот этого:

http://zdemo.magwai.ru/point

Вот так еще один флэшер остался без обеда, а мы пополнили свою копилу еще одним полезным контролом и техникой подсветки областей нестандартной формы.

Весь исходный код этого и других примеров доступен с http://github.com/magwai/. Также на скорую руку сделан сайт о zkernel — ядре, на котором основан код наших сайтов: http://zdemo.magwai.ru/. Он будет пополняться новыми примерами и описаниями работы zkernel. Исходный код этого сайта также доступен в репозитории на github.