4.1 Реализация отображения информации

При загрузке главной страницы main.php отображается карта проблем, на которой метками отмечены проблемные городские объекты, добавленные пользователями. Процесс загрузки карты можно условно разделить на два основных этапа:

? Инициализация карты и передача параметров загрузки по умолчанию javascript-файлам map.js (инициализации карты и обработчиков событий на ней) и placemarks.js (файл работы с отображением меток на карте, создание списка меток под картой, подсветка меток на карте при наведении мыши на элемент списка)

? Загрузка меток, удовлетворяющих заданным критериям по средствам HTTP-запроса AJAX-обработчику (контроллер ajax.php)

Этап инициализации включает в себя:

? Создание карты и, в зависимости от передаваемых параметров, выполнение привязки различных обработчиков событий на карте. (Пример: если установлен параметр mapOpts[addEnable], то необходимо назначить обработчик по двойному клику на карте - добавление информации)

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

? Если передается параметр mapOpts[filter], то выполнить инициализацию фильтра под картой (рис. 4.1).

Рисунок 4.1 - Отображение информации. Алгоритм

В целом, массив параметров mapOpts содержит настройки для загрузки карты и проблем, таких как количество загружаемых проблем на карту, количество элементов списка под картой, id пользователя (для отображения проблем, добавленных отдельным пользователем, на странице его профиля) и др.

Этап загрузки меток подразумевает выполнение HTTP-запроса с передачей выбранных параметров к контроллеру ajax.php и получение массива точек (рис. 4.2), для последующего отображения их на карте. Функция loadPlacemarks(mapOpts) в файле placemarks.js обрабатывает полученные данные, отображает метки на карте (функция showPlacemark (issue)), при необходимости создает список под картой (функция addItemToList(issue)).

Если вместе с картой проблем используется фильтр (на главной странице), то при изменении параметров в фильтре - выполняется аналогичный асинхронный запрос к контроллеру ajax.php (рис. 4.2) и последующее отображение проблем, удовлетворяющих новым критериям.

Рисунок 4.2 - Обработка AJAX-запросов