Интеграция интерактивной карты с формой с checkbox’ами

19.03.2015

В этом примере показан вариант взаимодействия карты с элементами формы в виде списка регионов с чекбоксами. При отметке названия региона подсвечивается соответствующий регион на карте, при клике на регион карты название соответствующего региона отмечается флажком. При повторном клике выделение снимется. Для реализации взаимодействия используется JavaScript API карты.

















































































Подсветка регионов при выделении элемента формы: checkbox

Для задания подсветки региона при отметке флажка необходимо назначить каждому элементу формы id соответствующего региона

Рязанская обл.

и задать функцию для смены цвета региона в зависимости от состояния элемента формы. Это делается с помощью методов: map.stateHighlightOn(stateId, fillColor, borderColor) и map.stateHighlightOff(stateId) где первым арументом является id региона, вторым — цвет подсветки региона, третьим — цвет границы региона. У метода map.stateHighlightOn(stateId) второй и третий параметры являются необязательными, если оставить поля пустыми, будет установлен цвет, указанный по умолчанию в файле settings.js.

$('input:checkbox').click(function() {
        if(this.checked == false) {
            map.stateHighlightOff(this.id);
            return;
        }
        map.stateHighlightOn(this.id, '#366CA3', '#ffffff');
    });

Выделение элементов формы: checkbox, при клике на регионы карты

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

map.on('click', function(ev, sid, map) { 
    console.log(sid); 
});

в котором возможные события: click, mousein, mouseout;
параметры функции: ev — событие, sidid региона, map — объект javascript.
Для реализации этой функции элементы формы должны иметь id региона карты, при клике на который, он должен отмечаться, а также нужно задать функцию для постановки/снятия флажка. Выделение карты делается с помощью описанных выше методов: map.stateHighlightOn(stateId) и map.stateHighlightOff(stateId).
Пример использования:

map.on('click', function(ev, sid, map) { 
    if(document.getElementById(sid).checked) {
        document.getElementById(sid).checked = false;
        map.stateHighlightOff(sid);
        return;
    } 
    document.getElementById(sid).checked = true;
    map.stateHighlightOn(sid, '#366CA3', '#ffffff');
});

Область применения

Данное решение может быть полезно для сайтов, использующих поиск или расширенный поиск с фильтрацией по выбранным регионам, например это могут быть сайты вакансий, недвижимости, частных объявлений и т.п.
В этом уроке используется продукт «HTML5 карта России. Субъекты Федерации«.