Leaflet で地図を切り替えたい

Question

###やりたいこと
ズームや地域によって表示する地図を切り替えたい

###ためしたこと

var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);
    var drawControl = new L.Control.Draw({
     edit: {
       featureGroup: drawnItems
     }
   });
    map.addControl(drawControl);

ここまでで初期化がおわった段階で

    var map = L.map('map').setView([51.505, -0.09], 13);

と単純に初期化をやりなおしただけでは
Map.js:1057 Uncaught Error: Map container is already initialized.
というエラーが出ます

    map.remove();
    var map = L.map('map').setView([51.505, -0.09], 13);

で地図を消して作り直すと draw-control を追加するまではうまくいってたのですが
map.addControl(drawControl)後に地図を切り替えるとマウスをドラッグしたときに
DomUtil.js:242 Uncaught TypeError: Cannot read property '_leaflet_pos' of undefined
というエラーが出ます
map.remove() だけでもでるので何かコントローラー制御だけが残ってしまうようです

どうすれば初期化後にタイルレイヤーのプロトコルを変更することができるのでしょうか

Answer 1

タイルレイヤーを覚えておいて
タイルレイヤーだけを消して追加しなおせばエラー無しで切り替えられるようになりました

const map = L.map('map').setView([34.7468,136.5248], 15);
    let current_tile;
    let current_map_id = 0;

    const setMap = (map_id) => {
      switch(map_id) {
        case 0:
        current_tile = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'
        });
        break;

        case 1:
        current_tile = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        });
        break;
      }
      current_tile.addTo(map);
    }

    setMap(current_map_id);
    const drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);
    const drawControl = new L.Control.Draw({
      edit: {
        featureGroup: drawnItems
      }
    });
    map.addControl(drawControl);
    
    $('#change').on('click', () => {
      map.removeLayer(current_tile);
      current_map_id = 1 - current_map_id;
      setMap(current_map_id);
    });