-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add map-projectionchange event. (#911)
* Add map-projectionchange event. Delete map projection attrChgCallbk from triggering map-change event. Allow map-extent to react to map-projectionchange event, enable/disable according to projection match. * Change initialization logic for opacity, so that layer- and map-extent opacity value is maintained through map-projectionchange event. * Remove MapMLLayer.validProjection attribute and flawed logic. * Prettier formatting change only in multipleExtents.test.js * Remove use of validProjection by layer context menu, was wrong anyway(?) * Add waitfortimeout of 500ms in customTCRS.test.js (100ms was not enough) * Add test for simple projection change. * Add test for empty map history after map-projectionchange event * Add test for opacity on layer and map-extent after map-projectionchange * Bump timeout after map-projectionchange as opacity value wasn't updating in time. Skip test of history after map-projectionchange, pending full rewrite of history api tbd. * Add await for mapEl.whenProjectionDefined(this.units) to map-extent, so that invalid / undefined projections e.g. 'foo' will throw. * Add test of map-extent units attribute set to undefined projection * Optimize map-extent.test.js to speed it up a little --------- Co-authored by: aliyanh <@AliyanH> Co-authored by: Hanyu Y <@yhy0217> Co-authored-by: prushfor <[email protected]>
- Loading branch information
1 parent
fde273c
commit 5150ba3
Showing
12 changed files
with
277 additions
and
152 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>map-projectionchange event</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="/mapml-viewer.js"></script> | ||
| </head> | ||
| <body> | ||
| <mapml-viewer zoom="2" lon="-75.703611" lat="45.411105" width="500" height="500" 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="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="/tiles/cbmt/{z}/c{x}_r{y}.png" ></map-link> | ||
| </map-extent> | ||
| </layer-> | ||
| </mapml-viewer> | ||
| <script> | ||
| function changeProjection() { | ||
| const prj = document.body.querySelector('mapml-viewer').projection; | ||
| if (document.body.querySelector('mapml-viewer').projection === "OSMTILE") { | ||
| document.body.querySelector('mapml-viewer').projection = "CBMTILE"; | ||
| } else { | ||
| document.body.querySelector('mapml-viewer').projection = "OSMTILE"; | ||
| } | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import { test, expect, chromium } from '@playwright/test'; | ||
|
|
||
| test.describe('map-projectionchange test ', () => { | ||
| let page; | ||
| let context; | ||
| test.beforeAll(async () => { | ||
| context = await chromium.launchPersistentContext(''); | ||
| page = | ||
| context.pages().find((page) => page.url() === 'about:blank') || | ||
| (await context.newPage()); | ||
| }); | ||
|
|
||
| test.beforeEach(async function () { | ||
| await page.goto('events/map-projectionchange.html'); | ||
| await page.waitForTimeout(1000); | ||
| }); | ||
|
|
||
| test.afterAll(async function () { | ||
| await context.close(); | ||
| }); | ||
|
|
||
| test('Multiple map-extents in different projections adapt to map-projectionchange', async () => { | ||
| const viewer = await page.locator('mapml-viewer'); | ||
| expect(await viewer.evaluate((v) => v.projection)).toEqual('OSMTILE'); | ||
| expect( | ||
| await viewer.evaluate((v) => { | ||
| return v.querySelector('map-extent[units=OSMTILE]').disabled; | ||
| }) | ||
| ).toBe(false); | ||
| expect( | ||
| await viewer.evaluate((v) => { | ||
| return v.querySelector('map-extent[units=CBMTILE]').disabled; | ||
| }) | ||
| ).toBe(true); | ||
| await viewer.evaluate(() => changeProjection()); | ||
| await page.waitForTimeout(500); | ||
| expect(await viewer.evaluate((v) => v.projection)).toEqual('CBMTILE'); | ||
| expect( | ||
| await viewer.evaluate((v) => { | ||
| return v.querySelector('map-extent[units=OSMTILE]').disabled; | ||
| }) | ||
| ).toBe(true); | ||
| expect( | ||
| await viewer.evaluate((v) => { | ||
| return v.querySelector('map-extent[units=CBMTILE]').disabled; | ||
| }) | ||
| ).toBe(false); | ||
| }); | ||
| test.skip('History is empty after map-projectionchange', async () => { | ||
| // history api needs a complete review; test can't pass without many | ||
| // odd hacks, so skip for now. | ||
| const viewer = await page.locator('mapml-viewer'); | ||
| expect(await viewer.evaluate((v) => v.projection)).toEqual('OSMTILE'); | ||
| await viewer.evaluate(() => changeProjection()); | ||
| await page.waitForTimeout(500); | ||
| expect(await viewer.evaluate((v) => v.projection)).toEqual('CBMTILE'); | ||
| const reload = await page.getByLabel('Reload'); | ||
| expect(await reload.evaluate((button) => button.ariaDisabled)).toBe('true'); | ||
| }); | ||
| test('Opacity is maintained on layer- and map-extent after map-projectionchange', async () => { | ||
| const viewer = await page.locator('mapml-viewer'); | ||
| const layer = await page.locator('layer-'); | ||
| await page.pause(); | ||
| await layer.evaluate((layer) => (layer.opacity = 0.5)); | ||
| expect( | ||
| await layer.evaluate((layer) => { | ||
| return layer.opacity; | ||
| }) | ||
| ).toBe(0.5); | ||
| const osmtileExtent = await page.locator('map-extent[units=OSMTILE]'); | ||
| await osmtileExtent.evaluate((e) => (e.opacity = 0.4)); | ||
| const cbmtileExtent = await page.locator('map-extent[units=CBMTILE]'); | ||
| await cbmtileExtent.evaluate((e) => (e.opacity = 0.3)); | ||
| await viewer.evaluate(() => changeProjection()); | ||
| await page.waitForTimeout(1000); | ||
| expect(await osmtileExtent.evaluate((e) => e.opacity)).toBe(0.4); | ||
| expect(await cbmtileExtent.evaluate((e) => e.opacity)).toBe(0.3); | ||
| expect( | ||
| await layer.evaluate((layer) => { | ||
| return layer.opacity; | ||
| }) | ||
| ).toBe(0.5); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.