Skip to content

Commit 37d69c1

Browse files
prushforthprushforth
committed
Add backwards compatibility with <layer->, mostly.
1 parent 0d77803 commit 37d69c1

21 files changed

+554
-16
lines changed

‎src/layer-.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { BaseLayerElement } from './layer';
2+
3+
export class LayerDashElement extends BaseLayerElement {
4+
constructor() {
5+
super();
6+
// specific behavior for <map-layer>
7+
}
8+
}

‎src/layer.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Util } from './mapml/utils/Util';
22
import { MapMLLayer, mapMLLayer } from './mapml/layers/MapMLLayer';
33
import { createLayerControlHTML } from './mapml/elementSupport/layers/createLayerControlForLayer';
44

5-
export class HTMLLayerElement extends HTMLElement {
5+
export class BaseLayerElement extends HTMLElement {
66
static get observedAttributes() {
77
return ['src', 'label', 'checked', 'hidden', 'opacity'];
88
}
@@ -539,7 +539,10 @@ export class HTMLLayerElement extends HTMLElement {
539539
var i = 0,
540540
position = 1;
541541
for (var nodes = this.parentNode.children; i < nodes.length; i++) {
542-
if (this.parentNode.children[i].nodeName === 'MAP-LAYER') {
542+
if (
543+
this.parentNode.children[i].nodeName === 'MAP-LAYER' ||
544+
this.parentNode.children[i].nodeName === 'LAYER-'
545+
) {
543546
if (this.parentNode.children[i] === this) {
544547
position = i + 1;
545548
} else if (this.parentNode.children[i]._layer) {

‎src/map-extent.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ export class HTMLExtentElement extends HTMLElement {
134134
return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
135135
}
136136
getLayerEl() {
137-
return Util.getClosest(this, 'map-layer');
137+
return Util.getClosest(this, 'map-layer,layer-');
138138
}
139139
attributeChangedCallback(name, oldValue, newValue) {
140140
if (this.#hasConnected /* jshint ignore:line */) {

‎src/map-feature.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ export class HTMLFeatureElement extends HTMLElement {
137137
return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
138138
}
139139
getLayerEl() {
140-
return Util.getClosest(this, 'map-layer');
140+
return Util.getClosest(this, 'map-layer,layer-');
141141
}
142142

143143
attributeChangedCallback(name, oldValue, newValue) {
@@ -168,6 +168,7 @@ export class HTMLFeatureElement extends HTMLElement {
168168
this._initialZoom = this.getMapEl().zoom;
169169
this._parentEl =
170170
this.parentNode.nodeName.toUpperCase() === 'MAP-LAYER' ||
171+
this.parentNode.nodeName.toUpperCase() === 'LAYER-' ||
171172
this.parentNode.nodeName.toUpperCase() === 'MAP-LINK'
172173
? this.parentNode
173174
: this.parentNode.host;

‎src/map-input.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ export class HTMLInputElement extends HTMLElement {
183183
return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
184184
}
185185
getLayerEl() {
186-
return Util.getClosest(this, 'map-layer');
186+
return Util.getClosest(this, 'map-layer,layer-');
187187
}
188188
attributeChangedCallback(name, oldValue, newValue) {
189189
this.whenReady()

‎src/map-layer.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { BaseLayerElement } from './layer';
2+
3+
export class HTMLLayerElement extends BaseLayerElement {
4+
constructor() {
5+
super();
6+
// specific behavior for <map-layer>
7+
}
8+
}

‎src/map-link.js

+8-2
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ export class HTMLLinkElement extends HTMLElement {
163163
return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
164164
}
165165
getLayerEl() {
166-
return Util.getClosest(this, 'map-layer');
166+
return Util.getClosest(this, 'map-layer,layer-');
167167
}
168168

169169
attributeChangedCallback(name, oldValue, newValue) {
@@ -382,7 +382,13 @@ export class HTMLLinkElement extends HTMLElement {
382382
this.getRootNode().querySelector(':host > ' + s)
383383
: Util.getClosest(
384384
this,
385-
'map-extent:has(' + s + '),map-layer:has(' + s + ')'
385+
'map-extent:has(' +
386+
s +
387+
'),map-layer:has(' +
388+
s +
389+
'),layer-:has(' +
390+
s +
391+
')'
386392
)?.querySelector(s);
387393
let options = {
388394
zoomBounds: this.getZoomBounds(),

‎src/mapml-viewer.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { Util } from './mapml/utils/Util';
22
import { DOMTokenList } from './mapml/utils/DOMTokenList';
33

4-
import { HTMLLayerElement } from './layer.js';
4+
import { HTMLLayerElement } from './map-layer.js';
5+
import { LayerDashElement } from './layer-.js';
56
import { HTMLMapCaptionElement } from './map-caption.js';
67
import { HTMLFeatureElement } from './map-feature.js';
78
import { HTMLExtentElement } from './map-extent.js';
@@ -642,7 +643,7 @@ export class HTMLMapmlViewerElement extends HTMLElement {
642643
this.addEventListener(
643644
'change',
644645
function (e) {
645-
if (e.target.tagName === 'MAP-LAYER') {
646+
if (e.target.tagName === 'MAP-LAYER' || e.target.tagName === 'LAYER-') {
646647
this.dispatchEvent(
647648
new CustomEvent('layerchange', {
648649
details: { target: this, originalEvent: e }
@@ -1456,6 +1457,7 @@ try {
14561457
);
14571458
}
14581459
window.customElements.define('map-layer', HTMLLayerElement);
1460+
window.customElements.define('layer-', LayerDashElement);
14591461
window.customElements.define('map-caption', HTMLMapCaptionElement);
14601462
window.customElements.define('map-feature', HTMLFeatureElement);
14611463
window.customElements.define('map-extent', HTMLExtentElement);

‎src/mapml/elementSupport/layers/createLayerControlForLayer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,7 @@ export var createLayerControlHTML = async function () {
263263
layerEl.removeAttribute('data-moving');
264264
}
265265
// update zIndex of all map-layer elements
266-
let layers = mapEl.querySelectorAll('map-layer');
266+
let layers = mapEl.querySelectorAll('map-layer,layer-');
267267
for (let i = 0; i < layers.length; i++) {
268268
let layer = layers[i]._layer;
269269
if (layer.options.zIndex !== zIndex) {

‎src/mapml/features/path.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,8 @@ export var Path = L.Path.extend({
7777
while (nextLayer && onTop) {
7878
if (
7979
nextLayer.tagName &&
80-
nextLayer.tagName.toUpperCase() === 'MAP-LAYER'
80+
(nextLayer.tagName.toUpperCase() === 'MAP-LAYER' ||
81+
nextLayer.tagName.toUpperCase() === 'LAYER-')
8182
)
8283
onTop = !nextLayer.queryable();
8384
nextLayer = nextLayer.nextElementSibling;

‎src/mapml/handlers/AnnounceMovement.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ export var AnnounceMovement = L.Handler.extend({
127127
if (!e.layer._layerEl) return;
128128
let map = this.options.mapEl;
129129
map.whenLayersReady().then(() => {
130-
let layers = map.querySelectorAll('map-layer');
130+
let layers = map.querySelectorAll('map-layer,layer-');
131131
let bounds;
132132
for (let i = 0; i < layers.length; i++) {
133133
// the _layer may no longer exist if this is invoked by layerremove

‎src/mapml/layers/MapMLLayer.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,8 @@ export var MapMLLayer = L.LayerGroup.extend({
232232
return new URL(
233233
this._content.querySelector('map-base')
234234
? this._content.querySelector('map-base').getAttribute('href')
235-
: this._content.nodeName === 'MAP-LAYER'
235+
: this._content.nodeName === 'MAP-LAYER' ||
236+
this._content.nodeName === 'LAYER-'
236237
? this._content.baseURI
237238
: this._href,
238239
this._href

‎src/mapml/utils/Util.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -390,7 +390,7 @@ export const Util = {
390390
break;
391391
case '_parent':
392392
postTraversalSetup();
393-
for (let l of map.options.mapEl.querySelectorAll('map-layer'))
393+
for (let l of map.options.mapEl.querySelectorAll('map-layer,layer-'))
394394
if (l._layer !== leafletLayer) map.options.mapEl.removeChild(l);
395395
map.options.mapEl.appendChild(layer);
396396
map.options.mapEl.removeChild(leafletLayer._layerEl);

‎src/web-map.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -431,7 +431,7 @@ export class HTMLWebMapElement extends HTMLMapElement {
431431
this._map.options.projection = newValue;
432432
let layersReady = [];
433433
this._map.announceMovement.disable();
434-
for (let layer of this.querySelectorAll('map-layer')) {
434+
for (let layer of this.querySelectorAll('map-layer,layer-')) {
435435
layer.removeAttribute('disabled');
436436
let reAttach = this.removeChild(layer);
437437
this.appendChild(reAttach);
@@ -685,7 +685,7 @@ export class HTMLWebMapElement extends HTMLMapElement {
685685
this.addEventListener(
686686
'change',
687687
function (e) {
688-
if (e.target.tagName === 'MAP-LAYER') {
688+
if (e.target.tagName === 'MAP-LAYER' || e.target.tagName === 'LAYER-') {
689689
this.dispatchEvent(
690690
new CustomEvent('layerchange', {
691691
details: { target: this, originalEvent: e }

‎test/e2e/elements/layer-/dummy-cbmtile-cbmt-layer-extent.mapml

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<mapml- xmlns="http://www.w3.org/1999/xhtml">
2+
<map-head>
3+
<map-title>Canada Base Map - Transportation (CBMT)</map-title>
4+
</map-head>
5+
<map-body>
6+
<map-extent units="CBMTILE" checked="checked">
7+
<map-input name="z" type="zoom" value="17" min="0" max="17"></map-input>
8+
<map-input name="y" type="location" units="tilematrix" axis="row" min="29750" max="34475"></map-input>
9+
<map-input name="x" type="location" units="tilematrix" axis="column" min="26484" max="32463"></map-input>
10+
<map-link rel="tile" tref="dummy/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}">
11+
<!-- previously this would have been used. Now it is ignored -->
12+
<map-meta name="zoom" content="min=5,max=10"></map-meta>
13+
</map-link>
14+
</map-extent>
15+
</map-body>
16+
</mapml->

‎test/e2e/elements/layer-/layer-dash-extent.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>&lt;layer-&gt; test</title>
5+
<meta charset="UTF-8">
6+
<script type="module" src="mapml.js"></script>
7+
<style>
8+
html {
9+
height: 100%
10+
}
11+
12+
body {
13+
height: inherit
14+
}
15+
16+
* {
17+
margin: 0;
18+
padding: 0;
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<mapml-viewer data-testid="viewer" style="height: 500px;width:500px;" controls zoom="2" lat="68" lon="-87" controls projection="CBMTILE">
24+
<layer- data-testid="remote-layer" label="Remote content" src="dummy-cbmtile-cbmt-layer-extent.mapml" checked></layer->
25+
<layer- data-testid="inline-layer" label="Local content" checked>
26+
<map-extent data-testid="inline-extent" units="CBMTILE" checked="checked">
27+
<!-- the bounds and zoom bounds of the inline map-extent are different than those of the remote layer's map-extent -->
28+
<map-input name="z" type="zoom" value="17" min="3" max="17"></map-input>
29+
<map-input name="y" type="location" units="tilematrix" axis="row" min="31000" max="34000"></map-input>
30+
<map-input name="x" type="location" units="tilematrix" axis="column" min="27000" max="30000"></map-input>
31+
<map-link rel="tile" tref="dummy/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" >
32+
<!-- previously this would have been used. Now it is ignored -->
33+
<map-meta data-testid="large-zoom-bounds" name="zoom" content="min=5,max=21"></map-meta>
34+
<map-meta name="extent" content="zoom=17,top-left-column=25000,top-left-row=30500,bottom-right-column=31250,bottom-right-row=35300"></map-meta>
35+
<map-meta data-testid="large-extent" name="extent" content="top-left-easting=-5329325, top-left-northing=5643026, bottom-right-easting=5915489, bottom-right-northing=-5601788"></map-meta>
36+
<!-- this feature has the extent of the large-extent,which includes all of the inline-extent bounds -->
37+
<!-- <map-feature><map-featurecaption>test</map-featurecaption><map-geometry cs="pcrs"><map-polygon><map-coordinates>-5329325 5643026 5915489 5643026 5915489 -5601788 -5329325 -5601788 -5329325 5643026</map-coordinates></map-polygon></map-geometry></map-feature> -->
38+
</map-link>
39+
</map-extent>
40+
41+
</layer->
42+
</mapml-viewer>
43+
</body>
44+
</html>

0 commit comments

Comments
 (0)