Маркеры, которые выделяются флажком, и активируют флажки при нажатии - PullRequest
Новая
       20

Маркеры, которые выделяются флажком, и активируют флажки при нажатии

0 голосов
/ 14 апреля 2019

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

Я хочу создать маркеры карты, которые устанавливают флажки, и позволяют флажкам открывать всплывающие окна на маркерах. Пока у меня есть карта с несколькими маркерами в нужных местах, всплывающие окна остаются открытыми при нажатии, я связал маркеры с флажками, но не могу заставить всплывающие окна открываться при нажатии флажка.

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

Любые указатели будут высоко оценены. Код для подражания (если это необходимо.) 

let checkboxStates

const locations = {"type": "FeatureCollection",
"features": [
{
 "type": "Feature",
 "geometry": {
    "type": "Point",
    "coordinates":  [ .575073660294429,50.8544412478922 ]
 },
 "properties": {
 "job":"J-33-V-1"
 }
},
{
 "type": "Feature",
 "geometry": {
    "type": "Point",
    "coordinates":  [.774006815158524, 50.9443943686903 ]
 },
 "properties": {
 "job":"J-33-V-2"
 }
}
]};

var map = L.map('map').setView([51.5074, 0.1278], 8)

        mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18,}).addTo(map)


var geojsonLayer = L.geoJSON(null,{
onEachFeature: 
 function (f, l) { 
 l.bindPopup(f.properties.job,{autoClose:false,closeOnClick:false})
    if ( document.getElementById(f.properties.job).checked) l.openPopup(geojsonLayer);
       else if( document.getElementById(f.properties.job).unchecked) l.closePopup(geojsonLayer);}
}).addTo(map)

function updateCheckboxStates() {
    checkboxStates = {
    jobs: []
  }

    for (let input of document.querySelectorAll('input')) {
    if(input.checked) {
        switch (input.className) {
        case 'job': checkboxStates.jobs.push(input.value); break
      }
    }
  }
}


for (let input of document.querySelectorAll('input')) {
  //Listen to 'change' event of all inputs
  input.onchange = (e) => {
    geojsonLayer.addData(locations)   
  }
}


/****** INIT ******/
updateCheckboxStates()
geojsonLayer.addData(locations)
...