Merge branch 'Maps4HTML:main' into cleaned-issue-992

Maps4HTML · Oct 11, 2024 · 5ba4539 · 5ba4539
2 parents 2093117 + 9a5a03c
commit 5ba4539
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 0 deletions.
diff --git a/src/mapml/layers/MapMLLayer.js b/src/mapml/layers/MapMLLayer.js
@@ -345,6 +345,8 @@ export var MapMLLayer = L.LayerGroup.extend({
         layer._titleIsReadOnly = true;
       } else if (layer._layerEl && layer._layerEl.hasAttribute('label')) {
         layer._title = layer._layerEl.getAttribute('label').trim();
+      } else {
+        layer._title = M.options.locale.dfLayer;
       }
     }
     function parseLicenseAndLegend() {

diff --git a/test/e2e/layers/layerLabel.html b/test/e2e/layers/layerLabel.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Layer Control Tests</title>
+  <script type="module" src="mapml.js"></script>
+  <style>
+    html,
+    body {
+      height: 100%;
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    /* Specifying the `:defined` selector is recommended to style the map 
+       element, such that styles don't apply when fallback content is in use 
+       (e.g. when scripting is disabled or when custom/built-in elements isn't 
+       supported in the browser). */
+    mapml-viewer:defined {
+      /* Responsive map. */
+      max-width: 100%;
+
+      /* Full viewport. */
+      width: 100%;
+      height: 100%;
+
+      /* Remove default (native-like) border. */
+      /* border: none; */
+    }
+
+    /* Pre-style to avoid FOUC of inline layer- and fallback content. */
+    mapml-viewer:not(:defined)>* {
+      display: none;
+    }
+
+    /* Ensure inline layer content is hidden if custom/built-in elements isn't 
+       supported, or if javascript is disabled. This needs to be defined separately 
+       from the above, because the `:not(:defined)` selector invalidates the entire 
+       declaration in browsers that do not support it. */
+    layer- {
+      display: none;
+    }
+  </style>
+  <noscript>
+    <style>
+      /* Ensure fallback content (children of the map element) is displayed if 
+         custom/built-in elements is supported but javascript is disabled. */
+      mapml-viewer:not(:defined)> :not(layer-) {
+        display: initial;
+      }
+    </style>
+  </noscript>
+</head>
+
+<body>
+  <mapml-viewer projection="CBMTILE" zoom="3" lat="37.176710163979834" lon="-62.070013924549045" controls>
+
+	<!-- Layer without a label -->
+	<layer- checked>
+        <map-meta name="projection" content="CBMTILE"></map-meta>
+		<map-feature zoom="10">
+			<map-properties>Layer with no label</map-properties>
+			<map-geometry cs="gcrs">
+				<map-point>
+					<map-coordinates>-75.866089 45.463020</map-coordinates>
+				</map-point>
+			</map-geometry>
+        </map-feature>
+	</layer->
+
+  </mapml-viewer>
+</body>
+
+</html>
diff --git a/test/e2e/layers/layerLabel.test.js b/test/e2e/layers/layerLabel.test.js
@@ -0,0 +1,32 @@
+import { test, expect, chromium } from '@playwright/test';
+
+test.describe('Layer Label Tests', () => {
+  let page;
+  let context;
+  test.beforeAll(async function () {
+    context = await chromium.launchPersistentContext('');
+    page =
+      context.pages().find((page) => page.url() === 'about:blank') ||
+      (await context.newPage());
+    await page.goto('layerLabel.html');
+  });
+
+  test.afterAll(async function () {
+    await context.close();
+  });
+
+  test('Name of unnamed layer is Layer', async () => {
+    await page.waitForTimeout(500);
+    const label = await page
+      .locator('body > mapml-viewer > layer-')
+      .evaluate((elem) => elem.label);
+    expect(label).toEqual('Layer');
+  });
+
+  test('Unnamed layer shows up as Layer in layer control', async () => {
+    const text = await page
+      .locator('body > mapml-viewer >> css=div > label.mapml-layer-item-toggle')
+      .evaluate((text) => text.textContent);
+    expect(text).toEqual('Layer');
+  });
+});