Настройка ползунка слоя

Вопрос-ответ JavaScript
1

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

<input class="push" value="Push me" onclick="Swipe()" type="button">

а это функция что делает шторку

var ctrl = new ol.control.Swipe();
        function Swipe()
        {
       if(window.isSwipe) 
       {
        window.isSwipe = false;
        map.removeControl(ctrl);
        ctrl.removeLayer(osm, true);
        ctrl.removeLayer(stamen);
      }
      else 
      {
        window.isSwipe = true;
        map.addControl(ctrl);
        ctrl.addLayer(osm, true);
        ctrl.addLayer(stamen);
      }
    }
2

В чем собственно вопрос? Как показать форму при клике на кнопку?

3

Уже немножко переделал форму но еще не до конца

<form name="layer_slider" >
<input list="list_layer" type="text" >
<datalist id="list_layer">
	<option value="first">Первая позиция</option>
	<option selected="selected" value="second">Вторая позиция</option>
	<option value="third">Третья позиция</option>
	<option value="fourth">Четвертая позиция</option>
</datalist>

Вопрос в том как передать те данные которые выберет человек в js функцию
Тоесть он нажимает на кнопку, открываеться форма с двох списком выбырает значение и эти значения передаются в мою js функцию

            ctrl.addLayer("Значения 1");
            ctrl.addLayer("Значения 2");
4

Трудно помочь, не понимая, как отрабатывает у тебя все целиком. Что за Swipe? Что за map? Ты показываешь куски кода, оставляя допущения. Если несложно, приведи пример на codepen, jsbin или подобной песочнице.

5

Просто у меня много чего локального не думаю что будет работать в таких песочницах
map это переменная что обьявляет карту

image
image.jpg1359×628 435 KB

вот так она выглядит

6

image
image.jpg1359×623 462 KB

А вот так выглядит результат роботы функции Swipe

7

Я попробую обьясниты максимально подробно что мне нужно
Прошлый код немного доработал, но не до конца еще

<a href="#win1" class="btn btn-default btn-lg" role="button">Open</a>
<!-- <button value="Push me" onclick="layer_slider"> -->
  <a href="#x" class="overlay" id="win1"></a>
  <div class="popup">

    <form id="layer_slid" name="layer_slider" >
      <p>Left</p>
      <input list="list_lay" type="text" >
      <datalist id="list_lay">
        <option value="rasd" >First</option>
        <option value="cadastre" >Second</option>
        <option value="dqwddwqd" >Third</option>
        <option value="fourth">Fourth</option>
      </datalist><br>
      <p>Right</p>
      <input list="list_lay" type="text" >
    </form> 
    <a class="close"title="Close" href="#close"></a>
  </div>

Это выглядит так
qazwsx
Мне нужно что бы значение переменной которой выберут в списках
“Cadastre” - слева
“Dqwddwqd” - дело
после нажатия кнопки Ok (которую я еще добавлю в модульное окно)
передалось в функцию в таком виде

function Swipe(){
if(window.isSwipe) 
{
    window.isSwipe = false;
    map.removeControl(ctrl);
    ctrl.removeLayer(cadastre);     
    ctrl.removeLayer(dqwddwqd);  
}
else 
{   
    window.isSwipe = true;
    map.addControl(ctrl);
    ctrl.addLayer(cadastre);
    ctrl.addLayer(dqwddwqd);
}

}
Вот все, дальше функция должна сделать свое дело

8

По нажатию на кнопку OK в переменные field_1_value и field_2_value буду записаны значения инпутов. Дальше делай с ними что нужно. Это требовалось?

9

Да, большое спасибо