Skip to content

fix for issue-319 #993

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.

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

Merged
merged 6 commits into from
Oct 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/mapml/layers/MapMLLayer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
79 changes: 79 additions & 0 deletions test/e2e/layers/layerLabel.html
Original file line number Diff line number Diff line change
@@ -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>
32 changes: 32 additions & 0 deletions test/e2e/layers/layerLabel.test.js
Original file line number Diff line number Diff line change
@@ -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');
});
});