Layer control throws when layers are repeatedly removed and added

Open prushforth opened this issue 1 year ago • 0 comments

Steps to reproduce:

Save the html (below) in built dist folder as index.html

Load in browser Click on 'Change projection to CBMTILE' Click on 'Change projection to OSMTILE'

look at devtools console, will see:

mapmlviewer.js:40179 Uncaught TypeError: Cannot read properties of undefined (reading 'querySelector')
    at e._addItem (mapmlviewer.js:40179:31)
    at e._update (mapmlviewer.js:40158:12)
    at e.removeLayer (mapmlviewer.js:5168:29)
    at e.removeLayer (mapmlviewer.js:40108:42)
    at HTMLElement._onRemove (mapmlviewer.js:30722:10)
    at HTMLElement.disconnectedCallback (mapmlviewer.js:30695:10)
    at loadLayer (index.html:60:23)
    at HTMLButtonElement.<anonymous> (index.html:71:76)
_addItem @ mapmlviewer.js:40179
_update @ mapmlviewer.js:40158
removeLayer @ mapmlviewer.js:5168
removeLayer @ mapmlviewer.js:40108
_onRemove @ mapmlviewer.js:30722
disconnectedCallback @ mapmlviewer.js:30695
loadLayer @ index.html:60
(anonymous) @ index.html:71Understand this errorAI
2mapmlviewer.js:30892 TypeError: Cannot read properties of undefined (reading 'querySelector')
    at e._addItem (mapmlviewer.js:40179:31)
    at e._update (mapmlviewer.js:40158:12)
    at e.addOverlay (mapmlviewer.js:5156:29)
    at e.addOrUpdateOverlay (mapmlviewer.js:40099:12)
    at HTMLElement._attachedToMap (mapmlviewer.js:31145:26)
    at mapmlviewer.js:30813:18

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="color-scheme" content="dark light">
  <title>Layer control bug</title>
  <script type="module" src="./mapml.js"></script>
  <style>
    body {
      display: flex;
    }

    mapml-viewer {
      flex: 2;
      height: 50vh;
    }

    .description {
      padding: 20px;
      flex: 1;
    }

    @media (max-width: 768px) {
      .desktop-only {
        display: none;
      }

      body {
        flex-direction: column;
      }
    }
  </style>
</head>

<body>
  <template id="layers">
    <map-layer id="OSMTILE" src="light.mapml" checked></map-layer>
    <map-layer id="CBMTILE" checked>
      <map-extent label="CBMT - Lambert" units="CBMTILE" checked >
        <map-input name="z" type="zoom" min="0" max="18"></map-input>
        <map-input name="y" type="location" units="tilematrix" axis="row"></map-input>
        <map-input name="x" type="location" units="tilematrix" axis="column"></map-input>
        <map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
      </map-extent>
    </map-layer>
  </template>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const map = document.querySelector('mapml-viewer');
      const template = document.querySelector('#layers');

      const OSM = template.content.querySelector('#OSMTILE').cloneNode(true);
      const CBMT = template.content.querySelector('#CBMTILE').cloneNode(true);

      const loadLayer = (projection) => {
        map.innerHTML = '';
        map.setAttribute('projection', projection);

        const layer = projection === 'OSMTILE' 
          ? OSM.cloneNode(true)
          : CBMT.cloneNode(true);
        map.appendChild(layer);
      };

      loadLayer('OSMTILE');

      document.querySelector('.switchOSM').addEventListener('click', () => loadLayer('OSMTILE'));
      document.querySelector('.switchCBMT').addEventListener('click', () => loadLayer('CBMTILE'));
    });
  </script>

  <mapml-viewer projection="OSMTILE" zoom="9" lat="44.630550504861795" lon="-103.86611938476564" controls>
  </mapml-viewer>

  <div class="description">
    <h2>Descriptions</h2>
    <button class="switchOSM">Change projection to OSMTILE</button>
    <button class="switchCBMT">Change projection to CBMTILE</button>
  </div>
</body>

</html>

Nov 15 '24 16:11 prushforth