Add default projection (OSMTILE) + remove use of 'createmap' events

AliyanH · prushforth · commit c039076612ff · 2023-07-20T10:44:07.000-04:00
diff --git a/src/layer.js b/src/layer.js
@@ -95,25 +95,11 @@ export class MapLayer extends HTMLElement {
     if (this.getAttribute('src') && !this.shadowRoot) {
       this.attachShadow({ mode: 'open' });
     }
-    //creates listener that waits for createmap event, this allows for delayed builds of maps
-    //this allows a safeguard for the case where loading a custom TCRS takes longer than loading mapml-viewer.js/web-map.js
-    this.parentNode.addEventListener(
-      'createmap',
-      () => {
-        this._ready();
-        // if the map has been attached, set this layer up wrt Leaflet map
-        if (this.parentNode._map) {
-          this._attachedToMap();
-        }
-        if (this._layerControl && !this.hidden) {
-          this._layerControl.addOrUpdateOverlay(this._layer, this.label);
-        }
-      },
-      { once: true }
-    ); //listener stops listening after event occurs once
-    //if map is already created then dispatch createmap event, allowing layer to be built
-    if (this.parentNode._map)
-      this.parentNode.dispatchEvent(new CustomEvent('createmap'));
+    this._ready();
+    this._attachedToMap();
+    if (this._layerControl && !this.hidden) {
+      this._layerControl.addOrUpdateOverlay(this._layer, this.label);
+    }
   }
 
   adoptedCallback() {
diff --git a/src/map-extent.js b/src/map-extent.js
@@ -78,17 +78,7 @@ export class MapExtent extends HTMLElement {
       this.parentNode.nodeName.toUpperCase() === 'LAYER-'
         ? this.parentNode
         : this.parentNode.host;
-    if (!parentLayer._layer) {
-      // for custom projection cases, the MapMLLayer has not yet created and binded with the layer- at this point,
-      // because the "createMap" event of mapml-viewer has not yet been dispatched, the map has not yet been created
-      // the event will be dispatched after defineCustomProjection > projection setter
-      // should wait until MapMLLayer is built
-      parentLayer.parentNode.addEventListener('createmap', (e) => {
-        this._layer = parentLayer._layer;
-      });
-    } else {
-      this._layer = parentLayer._layer;
-    }
+    this._layer = parentLayer._layer;
   }
   disconnectedCallback() {}
 }
diff --git a/src/map-feature.js b/src/map-feature.js
@@ -220,23 +220,12 @@ export class MapFeature extends HTMLElement {
       }
     };
 
-    if (!this._parentEl._layer) {
-      // for custom projection cases, the MapMLLayer has not yet created and binded with the layer- at this point,
-      // because the "createMap" event of mapml-viewer has not yet been dispatched, the map has not yet been created
-      // the event will be dispatched after defineCustomProjection > projection setter
-      // should wait until MapMLLayer is built
-      let parentLayer =
-        this._parentEl.nodeName.toUpperCase() === 'LAYER-'
-          ? this._parentEl
-          : this._parentEl.parentElement || this._parentEl.parentNode.host;
-      parentLayer.parentNode.addEventListener('createmap', (e) => {
-        this._layer = parentLayer._layer;
-        _attachedToMap();
-      });
-    } else {
-      this._layer = this._parentEl._layer;
-      _attachedToMap();
-    }
+    let parentLayer =
+      parentEl.nodeName.toUpperCase() === 'LAYER-'
+        ? parentEl
+        : parentEl.parentElement || parentEl.parentNode.host;
+    this._layer = parentLayer._layer;
+    _attachedToMap();
   }
 
   _updateFeature() {
diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js
@@ -74,23 +74,13 @@ export class MapViewer extends HTMLElement {
     }
   }
   get projection() {
-    return this.hasAttribute('projection')
+    return this.hasAttribute('projection') && M[this.getAttribute('projection')]
       ? this.getAttribute('projection')
-      : '';
+      : 'OSMTILE';
   }
   set projection(val) {
     if (val && M[val]) {
       this.setAttribute('projection', val);
-      if (this._map && this._map.options.projection !== val) {
-        this._map.options.crs = M[val];
-        this._map.options.projection = val;
-        for (let layer of this.querySelectorAll('layer-')) {
-          layer.removeAttribute('disabled');
-          let reAttach = this.removeChild(layer);
-          this.appendChild(reAttach);
-        }
-        if (this._debug) for (let i = 0; i < 2; i++) this.toggleDebug();
-      } else this.dispatchEvent(new CustomEvent('createmap'));
     } else throw new Error('Undefined Projection');
   }
   get zoom() {
@@ -176,7 +166,6 @@ export class MapViewer extends HTMLElement {
     // is because the mapml-viewer element has / can have a size of 0 up until after
     // something that happens between this point and the event handler executing
     // perhaps a browser rendering cycle??
-    this.addEventListener('createmap', this._createMap);
 
     let custom = !['CBMTILE', 'APSTILE', 'OSMTILE', 'WGS84'].includes(
       this.projection
@@ -185,9 +174,8 @@ export class MapViewer extends HTMLElement {
     // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
     // In particular:
     //   "All applicable event handlers are called and return before dispatchEvent() returns."
-    if (!custom) {
-      this.dispatchEvent(new CustomEvent('createmap'));
-    }
+    this._createMap();
+
     // https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/274
     this.setAttribute('role', 'application');
     this._toggleStatic();
@@ -362,6 +350,22 @@ export class MapViewer extends HTMLElement {
       case 'static':
         this._toggleStatic();
         break;
+      case 'projection':
+        if (newValue && M[newValue]) {
+          if (this._map && this._map.options.projection !== newValue) {
+            this._map.options.crs = M[newValue];
+            this._map.options.projection = newValue;
+            for (let layer of this.querySelectorAll('layer-')) {
+              layer.removeAttribute('disabled');
+              let reAttach = this.removeChild(layer);
+              this.appendChild(reAttach);
+            }
+            if (this._debug) for (let i = 0; i < 2; i++) this.toggleDebug();
+            this.zoomTo(this.lat, this.lon, this.zoom);
+            //this.dispatchEvent(new CustomEvent('projectionchange'));
+          }
+        }
+        break;
     }
   }
 
@@ -815,7 +819,7 @@ export class MapViewer extends HTMLElement {
         this._updateMapCenter();
         this._addToHistory();
         this.dispatchEvent(
-          new CustomEvent('moveend', { detail: { target: this } })
+          new CustomEvent('map-moveend', { detail: { target: this } })
         );
       },
       this
diff --git a/src/mapml/handlers/AnnounceMovement.js b/src/mapml/handlers/AnnounceMovement.js
@@ -5,7 +5,10 @@ export var AnnounceMovement = L.Handler.extend({
       layerremove: this.totalBounds
     });
 
-    this._map.options.mapEl.addEventListener('moveend', this.announceBounds);
+    this._map.options.mapEl.addEventListener(
+      'map-moveend',
+      this.announceBounds
+    );
     this._map.dragging._draggable.addEventListener('dragstart', this.dragged);
     this._map.options.mapEl.addEventListener(
       'mapfocused',
@@ -18,7 +21,10 @@ export var AnnounceMovement = L.Handler.extend({
       layerremove: this.totalBounds
     });
 
-    this._map.options.mapEl.removeEventListener('moveend', this.announceBounds);
+    this._map.options.mapEl.removeEventListener(
+      'map-moveend',
+      this.announceBounds
+    );
     this._map.dragging._draggable.removeEventListener(
       'dragstart',
       this.dragged
diff --git a/src/mapml/layers/MapMLLayer.js b/src/mapml/layers/MapMLLayer.js
@@ -1260,7 +1260,10 @@ export var MapMLLayer = L.Layer.extend({
           cs
         );
       } else {
-        extentFallback.bounds = M[projection].options.crs.pcrs.bounds;
+        // for custom projections, M[projection] may not be loaded, so uses M['OSMTILE'] as backup, this code will need to get rerun once projection is changed and M[projection] is available
+        // TODO: This is a temporary fix, _initTemplateVars (or processinitialextent) should not be called when projection of the layer and map do not match, this should be called/reinitialized once the layer projection matches with the map projection
+        let fallbackProjection = M[projection] || M.OSMTILE;
+        extentFallback.bounds = fallbackProjection.options.crs.pcrs.bounds;
       }
 
       for (var i = 0; i < tlist.length; i++) {
@@ -1491,6 +1494,7 @@ export var MapMLLayer = L.Layer.extend({
           );
           return;
         } else if (
+          // when there is only one layer with different projection from the map, change's map's projection to match layer
           !projectionMatch &&
           layer._map &&
           layer._map.options.mapEl.querySelectorAll('layer-').length === 1
diff --git a/test/e2e/core/projectionDefault.html b/test/e2e/core/projectionDefault.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<script type="module" src="mapml-viewer.js"></script>
+	<title>Default Projection</title>
+</head>
+<body>
+	<mapml-viewer>
+		<layer- label="Rectangle" checked>
+			<map-feature>
+				<map-featurecaption>Rectangle</map-featurecaption>
+				<map-geometry>
+					<map-polygon>
+						<map-coordinates>-123.216259390223 55.90361621419453 -123.216259390223 -0.5886925650467134 78.15130158758717 -0.5886925650467134 78.15130158758717 55.90361621419453 -123.216259390223 55.90361621419453
+						</map-coordinates>
+					</map-polygon>
+				</map-geometry>
+				<map-properties>Rectangle</map-properties>
+			</map-feature>
+		</layer->
+	</mapml-viewer>
+</body>
+</html>
diff --git a/test/e2e/core/projectionDefault.test.js b/test/e2e/core/projectionDefault.test.js
@@ -0,0 +1,50 @@
+import { test, expect, chromium } from '@playwright/test';
+
+test.describe('Playwright Viewer Default Projection', () => {
+  let page;
+  let context;
+  test.beforeAll(async () => {
+    context = await chromium.launchPersistentContext('');
+    page =
+      context.pages().find((page) => page.url() === 'about:blank') ||
+      (await context.newPage());
+    await page.goto('projectionDefault.html');
+  });
+
+  test.afterAll(async function () {
+    await context.close();
+  });
+
+  test.describe('Viewer with no projection attribute', () => {
+    test('Viewer defaults to OSMTILE', async () => {
+      const mapProjection = await page.$eval(
+        'body > mapml-viewer',
+        (map) => map.projection
+      );
+      const leafletProjection = await page.$eval(
+        'body > mapml-viewer',
+        (map) => map._map.options.projection
+      );
+      const leafletProjection1 = await page.$eval(
+        'body > mapml-viewer',
+        (map) => map._map.options.crs.code
+      );
+      const projectionAttribute = await page.$eval(
+        'body > mapml-viewer',
+        (map) => map.getAttribute('projection')
+      );
+      expect(mapProjection).toEqual('OSMTILE');
+      expect(leafletProjection).toEqual('OSMTILE');
+      expect(leafletProjection1).toEqual('EPSG:3857');
+      expect(projectionAttribute).toEqual(null);
+    });
+
+    test('layer renders', async () => {
+      const featureSVG = await page.$eval(
+        'body > mapml-viewer > layer- > map-feature',
+        (feature) => feature._groupEl.firstChild.getAttribute('d')
+      );
+      expect(featureSVG).toEqual('M62 27L62 75L206 75L206 27L62 27z');
+    });
+  });
+});
diff --git a/test/e2e/mapml-viewer/customTCRS.test.js b/test/e2e/mapml-viewer/customTCRS.test.js
@@ -18,8 +18,13 @@ test.describe('Playwright Custom TCRS Tests', () => {
 
   test('Simple Custom TCRS, tiles load, mismatched layer disabled', async () => {
     const misMatchedLayerDisabled = await page.$eval(
-      'body > mapml-viewer:nth-child(1) > layer-:nth-child(1)',
-      (layer) => layer.hasAttribute('disabled')
+      'body > mapml-viewer:nth-child(1)',
+      (map) => map.querySelectorAll('layer-')[0].hasAttribute('disabled')
+    );
+
+    const matchedLayerEnabled = await page.$eval(
+      'body > mapml-viewer:nth-child(1)',
+      (map) => map.querySelectorAll('layer-')[1].hasAttribute('disabled')
     );
 
     const tilesLoaded = await page.$eval(
@@ -29,6 +34,7 @@ test.describe('Playwright Custom TCRS Tests', () => {
 
     expect(tilesLoaded).toEqual(2);
     expect(misMatchedLayerDisabled).toEqual(true);
+    expect(matchedLayerEnabled).toEqual(false);
   });
   test('A projection name containing a colon is invalid', async () => {
     const message = await page.$eval(
@@ -39,13 +45,13 @@ test.describe('Playwright Custom TCRS Tests', () => {
   });
   test('Complex Custom TCRS, static features loaded, templated features loaded', async () => {
     const staticFeatures = await page.$eval(
-      'body > mapml-viewer:nth-child(3) > layer-:nth-child(1)',
-      (layer) => layer.hasAttribute('disabled')
+      'body > mapml-viewer:nth-child(3)',
+      (map) => map.querySelectorAll('layer-')[0].hasAttribute('disabled')
     );
 
     const templatedFeatures = await page.$eval(
-      'body > mapml-viewer:nth-child(3) > layer-:nth-child(2)',
-      (layer) => layer.hasAttribute('disabled')
+      'body > mapml-viewer:nth-child(3)',
+      (map) => map.querySelectorAll('layer-')[1].hasAttribute('disabled')
     );
 
     const featureOne = await page.$eval(
