Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Layer control throws when layers are repeatedly removed and added #1016

Open
prushforth opened this issue Nov 15, 2024 · 0 comments
Open

Layer control throws when layers are repeatedly removed and added #1016

prushforth opened this issue Nov 15, 2024 · 0 comments
Labels
bug

Comments

@prushforth
Copy link
Member

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>
@prushforth prushforth added the bug label Nov 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@prushforth