-
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.
Browse files
Browse the repository at this point in the history
* opacity attribute for map extent * Add experiments grunt task, for convenience (#785) Co-authored-by: prushfor <prushfor@L-BSC-A146390.nrn.nrcan.gc.ca> * opacity attribute for map extent * Move extent opacity attribute handling into extentload event handler. * Improve readability of opacity code a little bit, maybe. * small fixes --------- Co-authored-by: Peter Rushforth <peter.rushforth@gmail.com> Co-authored-by: prushfor <prushfor@L-BSC-A146390.nrn.nrcan.gc.ca>
- Loading branch information
3 people
authored
Mar 13, 2023
1 parent
e5bf068
commit 636bce1
Showing
3 changed files
with
148 additions
and
3 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | ||
| <title>index-map.html</title> | ||
| <script type="module" src="./mapml-viewer.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; | ||
|
|
||
| vertical-align: middle; | ||
| } | ||
|
|
||
| /* Pre-style to avoid FOUC of inline layer- and fallback content. */ | ||
| mapml-viewer:not(:defined) > * { | ||
| display: none; | ||
| } | ||
|
|
||
| /* Pre-style to avoid Layout Shift. */ | ||
| mapml-viewer:not(:defined) { | ||
| display: inline-block; | ||
| contain: size; | ||
| contain-intrinsic-size: 304px 154px; | ||
| } | ||
|
|
||
| /* 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; | ||
| } | ||
|
|
||
| /* "Reset" the properties used to pre-style (to avoid Layout Shift) if | ||
| custom/built-in elements is supported but javascript is disabled. */ | ||
| mapml-viewer:not(:defined) { | ||
| display: initial; | ||
| contain: initial; | ||
| contain-intrinsic-size: initial; | ||
| } | ||
| </style> | ||
| </noscript> | ||
| </head> | ||
| <body> | ||
| <mapml-viewer zoom="15" lon="-75.703611" lat="45.411105" controls="" projection="OSMTILE" role="application"> | ||
| <layer- opacity = "0.5" label="National Geographic" checked=""> | ||
| <map-extent opacity = "0.9" label="National Geographic" units="OSMTILE"> | ||
| <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 opacity = "0.3" label="Labelled Imagery" units="OSMTILE"> | ||
| <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/World_Imagery/MapServer/WMTS/tile/1.0.0/World_Imagery/default/default028mm/{TileMatrix}/{TileRow}/{TileCol}.jpg"></map-link> | ||
| <map-link rel="tile" tref="https://services.arcgisonline.com/arcgis/rest/services/Reference/World_Boundaries_and_Places/MapServer/WMTS/tile/1.0.0/Reference_World_Boundaries_and_Places/default/default028mm/{TileMatrix}/{TileRow}/{TileCol}.png"></map-link> | ||
| </map-extent> | ||
| <map-extent opacity = "0.2" label="Imagery" units="OSMTILE"> | ||
| <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/World_Imagery/MapServer/WMTS/tile/1.0.0/World_Imagery/default/default028mm/{TileMatrix}/{TileRow}/{TileCol}.jpg"></map-link> | ||
| </map-extent> | ||
| </layer-> | ||
| </mapml-viewer> | ||
| </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,39 @@ | ||
| import { test, expect, chromium } from '@playwright/test'; | ||
|
|
||
| test.describe("Adding Opacity Attribute to the <map-extent> Element", () => { | ||
| 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("multipleExtentsOpacity.html"); | ||
| }); | ||
| test.afterAll(async function () { | ||
| await context.close(); | ||
| }); | ||
|
|
||
| test("Setting Opacity Attibute Value to map-extent Element", async () => { | ||
| let extent_opacity1 = await page.$eval("body > mapml-viewer > layer- > map-extent:nth-child(1)", (extent) => extent.templatedLayer._container.style.opacity); | ||
| expect(extent_opacity1).toEqual('0.9'); | ||
| let extent_opacity2 = await page.$eval("body > mapml-viewer > layer- > map-extent:nth-child(2)", (extent) => extent.templatedLayer._container.style.opacity); | ||
| expect(extent_opacity2).toEqual('0.3'); | ||
| let extent_opacity3 = await page.$eval("body > mapml-viewer > layer- > map-extent:nth-child(3)", (extent) => extent.templatedLayer._container.style.opacity); | ||
| expect(extent_opacity3).toEqual('0.2'); | ||
| }); | ||
|
|
||
| test("Opacity Slider Value Matches the Extent Opacity", async () => { | ||
| let opacity_slider_value1 = await page.$eval("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div.mapml-layer-item-settings > fieldset > fieldset:nth-child(1) > div.mapml-layer-item-settings > details > input[type=range]", (opacity) => opacity.value); | ||
| let extent_opacity1 = await page.$eval("body > mapml-viewer > layer- > map-extent:nth-child(1)", (extent) => extent.templatedLayer._container.style.opacity); | ||
| let opacity_slider_value2 = await page.$eval("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div.mapml-layer-item-settings > fieldset > fieldset:nth-child(2) > div.mapml-layer-item-settings > details > input[type=range]", (opacity) => opacity.value); | ||
| let extent_opacity2 = await page.$eval("body > mapml-viewer > layer- > map-extent:nth-child(2)", (extent) => extent.templatedLayer._container.style.opacity); | ||
| let opacity_slider_value3 = await page.$eval("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div.mapml-layer-item-settings > fieldset > fieldset:nth-child(3) > div.mapml-layer-item-settings > details > input[type=range]", (opacity) => opacity.value); | ||
| let extent_opacity3 = await page.$eval("body > mapml-viewer > layer- > map-extent:nth-child(3)", (extent) => extent.templatedLayer._container.style.opacity); | ||
| expect(extent_opacity1).toEqual(opacity_slider_value1); | ||
| expect(extent_opacity2).toEqual(opacity_slider_value2); | ||
| expect(extent_opacity3).toEqual(opacity_slider_value3); | ||
| }); | ||
| }); | ||
|
|
||
|
|
||
|
|
||
|
|