Maps4HTML / Web-Map-Custom-Element

A custom <mapml-viewer> and <layer-> element suite
https://maps4html.org/Web-Map-Custom-Element/
Other
54 stars 15 forks source link

Changing projection on a map, a layer with 2 map-extents does not adapt to new projection #910

Closed prushforth closed 9 months ago

prushforth commented 9 months ago

This is more of a new use case than a bug, but it should probably work. Seems like quite a good opportunity to improve map usability.

When you create a map using the following markup and then you change the projection="OSMTILE", via $0.projection = "CBMTILE", the layer should continue to be displayed, with the different content from the CBMTILE extent. It doesn't throw errors, but it doesn't work.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Variable projection layers</title>
    <!-- the layer in this map should continue to be visible when you change
    the viewer projection from OSMTILE to CBMTILE.  -->
    <script type="module" src="../../dist/mapml-viewer.js"></script>
    <link rel="stylesheet" href="../../global.css">
  </head>
  <body>
    <mapml-viewer zoom="15" lon="-75.703611" lat="45.411105" controls projection="OSMTILE">
      <layer- label="Projection changer"  checked>
        <map-extent label="National Geographic" units="OSMTILE" checked >
          <map-input name="TileMatrix" type="zoom" value="18" min="0" max="18"></map-input>
          <map-input name="TileCol" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
          <map-input name="TileRow" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
          <map-link rel="tile" tref="https://server.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer/WMTS/tile/1.0.0/NatGeo_World_Map/default/default028mm/{TileMatrix}/{TileRow}/{TileCol}.jpg"></map-link>
        </map-extent>
        <map-extent label="Canada Base Map - Transportation" units="CBMTILE" checked >
          <map-input name="z" type="zoom" min="6" max="8"></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>    
      </layer->
    </mapml-viewer>
  </body>
</html>
yhy0217 commented 9 months ago
              // in attributechangecallback of mapml-viewer.js
              this.querySelectorAll('layer-').forEach((layer) => {
                layer.dispatchEvent(new CustomEvent('map-change'));
              });

We currently dispatch the map-change event in the projection attributeChangeCallback, maybe it should dispatch a new map-projectionChange event to notify layer- / map-extent that the projection is changed, instead of map-change? The map-change event should only be used when the checked attribute of layer- is changed.

prushforth commented 9 months ago

When complete, don't forget to improve (and link to index.html) the experiment that shows how this works