leaflet.js обновить карту onclick

Question

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

<input type="checkbox" name="switch" class="switch-checkbox"onclick="change();" checked> 

Для функции в JS:

function change() 
{ 
    var map = L.map('map').setView([37.8, -96], 4); 

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
     maxZoom: 18 
    }).addTo(map); 

    if (document.querySelector('.onoffswitch-checkbox').checked) { 
     data = statesData; 
     L.geoJson(statesData).addTo(map); 
    } else { 
     L.geoJson(statesDataTwo).addTo(map); 
    } 

Затем я получил сообщение об ошибке, что карта уже инициализирована. Я попытался добавить map.remove(); перед добавлением новой карты. Как предложено here. Но карта не определена. Каков способ сделать это? Thanks

Answer 1

Почему вы добавляете новую карту? Вероятно, вы уже имеете его в глобальной переменной map, которая инициализируется при загрузке. Поработайте с этим и измените только слои на изменение/клик. Что-то вроде этого:

var map = L.map('map').setView([37.8, -96], 4); 
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
    maxZoom: 18 
}).addTo(map); 

var geojsonLayers = { 
    'states': L.geoJson(statesData), 
    'statesTwo': L.geoJson(statesDataTwo) 
}; 

function change() 
{ 
    if (document.querySelector('.onoffswitch-checkbox').checked) { 
     map.addLayer(geojsonLayers.states); 
     if (map.hasLayer(geojsonLayers.statesTwo)) { 
      map.removeLayer(geojsonLayers.statesTwo); 
     } 
    } else { 
     map.addLayer(geojsonLayers.statesTwo); 
     if (map.hasLayer(geojsonLayers.states)) { 
      map.removeLayer(geojsonLayers.states); 
     } 
    } 
}