Skip to content

Commit 93966a2

Browse files
prushforthprushforth
committed
Close #997 Refactors src and test and / to rename the layer- element to
map-layer. Defines the window.MapML namespace containing the HTMLMap*Element classes, to be consistent with documented APIs.
1 parent 45d42f8 commit 93966a2

File tree

176 files changed

+791
-732
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

176 files changed

+791
-732
lines changed

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -18,26 +18,26 @@ See [instructions](https://maps4html.org/web-map-doc/docs/installation#install-t
1818
## Usage
1919

2020
You create a map with one or more layers via the <mapml-viewer> HTML tag. Add
21-
layers via the <layer-> tag with content OR a src attribute pointing to a
21+
layers via the <map-layer> tag with content OR a src attribute pointing to a
2222
MapML document (must be served as either `text/mapml` or `application/xml` content
2323
type):
2424

2525
```html
2626
<mapml-viewer projection="OSMTILE" zoom="0" lat="0.0" lon="0.0" controls>
27-
<layer- label="OpenStreetMap" src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" checked></layer->
27+
<map-layer label="OpenStreetMap" src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" checked></map-layer>
2828
</mapml-viewer>
2929
```
3030
OR inline content
3131
```html
3232
<mapml-viewer projection="OSMTILE" lat="10" lon="0" zoom="1" controls>
33-
<layer- label="OpenStreetMap" checked>
33+
<map-layer label="OpenStreetMap" checked>
3434
<map-extent units="OSMTILE">
3535
<map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
3636
<map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
3737
<map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
3838
<map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
3939
</map-extent>
40-
</layer->
40+
</map-layer>
4141
</mapml-viewer>
4242
```
4343

‎index.html

+12-12
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
vertical-align: middle;
3434
}
3535

36-
/* Pre-style to avoid FOUC of inline layer- and fallback content. */
36+
/* Pre-style to avoid FOUC of inline map-layer and fallback content. */
3737
mapml-viewer:not(:defined) > * {
3838
display: none;
3939
}
@@ -70,7 +70,7 @@
7070
contain-intrinsic-size: 304px 154px;
7171
}
7272

73-
/* Pre-style to avoid FOUC of inline layer- and fallback content. */
73+
/* Pre-style to avoid FOUC of inline map-layer and fallback content. */
7474
map[is="web-map"]:not(:defined) + img[usemap],
7575
map[is="web-map"]:not(:defined) > :not(area):not(.mapml-web-map) {
7676
display: none;
@@ -80,15 +80,15 @@
8080
supported, or if javascript is disabled. This needs to be defined separately
8181
from the above, because the `:not(:defined)` selector invalidates the entire
8282
declaration in browsers that do not support it. */
83-
layer- {
83+
map-layer {
8484
display: none;
8585
}
8686
</style>
8787
<noscript>
8888
<style>
8989
/* Ensure fallback content (children of the map element) is displayed if
9090
custom/built-in elements is supported but javascript is disabled. */
91-
mapml-viewer:not(:defined) > :not(layer-) {
91+
mapml-viewer:not(:defined) > :not(map-layer) {
9292
display: initial;
9393
}
9494

@@ -118,16 +118,16 @@
118118
<body>
119119

120120
<mapml-viewer projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation">
121-
<layer- data-testid="osm-layer" label="OpenStreetMap" checked >
121+
<map-layer data-testid="osm-layer" label="OpenStreetMap" checked >
122122
<map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
123123
<map-extent units="OSMTILE" checked="checked">
124124
<map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
125125
<map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
126126
<map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
127127
<map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
128128
</map-extent>
129-
</layer->
130-
<layer- label="Restaurants" checked="">
129+
</map-layer>
130+
<map-layer label="Restaurants" checked="">
131131
<map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
132132
<map-extent units="OSMTILE" checked="">
133133
<map-select id="restaurants" name="cusine">
@@ -141,19 +141,19 @@
141141
</map-select>
142142
<map-link tref="https://maps4html.org/experiments/shared/restaurants/{cusine}.mapml" rel="features"></map-link>
143143
</map-extent>
144-
</layer->
144+
</map-layer>
145145
</mapml-viewer>
146146
<map is="web-map" projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation">
147-
<layer- data-testid="osm-layer" label="OpenStreetMap" checked >
147+
<map-layer data-testid="osm-layer" label="OpenStreetMap" checked >
148148
<map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
149149
<map-extent units="OSMTILE" checked="checked">
150150
<map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
151151
<map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
152152
<map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
153153
<map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
154154
</map-extent>
155-
</layer->
156-
<layer- label="Restaurants" checked="">
155+
</map-layer>
156+
<map-layer label="Restaurants" checked="">
157157
<map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
158158
<map-extent units="OSMTILE" checked="">
159159
<map-select id="restaurants" name="cusine">
@@ -167,7 +167,7 @@
167167
</map-select>
168168
<map-link tref="https://maps4html.org/experiments/shared/restaurants/{cusine}.mapml" rel="features"></map-link>
169169
</map-extent>
170-
</layer->
170+
</map-layer>
171171
</map>
172172
</body>
173173
</html>

‎src/layer.js

+6-6
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 MapLayer extends HTMLElement {
5+
export class HTMLMapLayerElement extends HTMLElement {
66
static get observedAttributes() {
77
return ['src', 'label', 'checked', 'hidden', 'opacity'];
88
}
@@ -429,7 +429,7 @@ export class MapLayer extends HTMLElement {
429429
/*
430430
* Runs the effects of the mutation observer, which is to add map-features' and
431431
* map-extents' leaflet layer implementations to the appropriate container in
432-
* the layer-._layer: either as a sub-layer directly in the L.LayerGroup
432+
* the map-layer._layer: either as a sub-layer directly in the L.LayerGroup
433433
* (MapMLLayer._layer) or as a sub-layer in the MapMLLayer._mapmlvectors
434434
* L.FeatureGroup
435435
*/
@@ -516,8 +516,8 @@ export class MapLayer extends HTMLElement {
516516
}
517517
}
518518
/*
519-
* Set up a function to watch additions of child elements of layer- or
520-
* layer-.shadowRoot and to invoke desired side effects of those additions
519+
* Set up a function to watch additions of child elements of map-layer or
520+
* map-layer.shadowRoot and to invoke desired side effects of those additions
521521
* via _runMutationObserver
522522
*/
523523
_bindMutationObserver() {
@@ -539,7 +539,7 @@ export class MapLayer 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 === 'LAYER-') {
542+
if (this.parentNode.children[i].nodeName === 'MAP-LAYER') {
543543
if (this.parentNode.children[i] === this) {
544544
position = i + 1;
545545
} else if (this.parentNode.children[i]._layer) {
@@ -681,7 +681,7 @@ export class MapLayer extends HTMLElement {
681681
}
682682
}
683683
}
684-
// disable/italicize layer control elements based on the layer-.disabled property
684+
// disable/italicize layer control elements based on the map-layer.disabled property
685685
toggleLayerControlDisabled() {
686686
let input = this._layerControlCheckbox,
687687
label = this._layerControlLabel,

‎src/map-a.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export class MapA extends HTMLElement {
1+
export class HTMLMapAnchorElement extends HTMLElement {
22
static get observedAttributes() {
33
return ['href', 'target', 'type', 'inplace'];
44
}

‎src/map-area.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export class MapArea extends HTMLAreaElement {
1+
export class HTMLMapAreaElement extends HTMLAreaElement {
22
static get observedAttributes() {
33
return ['coords', 'alt', 'href', 'shape', 'rel', 'type', 'target'];
44
}

‎src/map-caption.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
implemented for both mapml-viewer and web-map; however web-map does not focus on map element in the browser resulting in NVDA
33
not being able to read out map-caption and stating that it's an interactive map region
44
*/
5-
export class MapCaption extends HTMLElement {
5+
export class HTMLMapCaptionElement extends HTMLElement {
66
constructor() {
77
super();
88
}

‎src/map-extent.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { extentLayer } from './mapml/layers/ExtentLayer';
33
import { createLayerControlExtentHTML } from './mapml/elementSupport/extents/createLayerControlForExtent';
44

55
/* global M */
6-
export class MapExtent extends HTMLElement {
6+
export class HTMLMapExtentElement extends HTMLElement {
77
static get observedAttributes() {
88
return ['checked', 'label', 'opacity', 'hidden'];
99
}
@@ -134,7 +134,7 @@ export class MapExtent extends HTMLElement {
134134
return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
135135
}
136136
getLayerEl() {
137-
return Util.getClosest(this, 'layer-');
137+
return Util.getClosest(this, 'map-layer');
138138
}
139139
attributeChangedCallback(name, oldValue, newValue) {
140140
if (this.#hasConnected /* jshint ignore:line */) {
@@ -234,7 +234,7 @@ export class MapExtent extends HTMLElement {
234234
this._changeHandler = this._handleChange.bind(this);
235235
}
236236
async connectedCallback() {
237-
// this.parentNode.host returns the layer- element when parentNode is
237+
// this.parentNode.host returns the map-layer element when parentNode is
238238
// the shadow root
239239
this.parentLayer = this.getLayerEl();
240240
if (
@@ -246,8 +246,8 @@ export class MapExtent extends HTMLElement {
246246
await this.mapEl.whenProjectionDefined(this.units).catch(() => {
247247
throw new Error('Undefined projection:' + this.units);
248248
});
249-
// when projection is changed, the parent layer-._layer is created (so whenReady is fulfilled) but then removed,
250-
// then the map-extent disconnectedCallback will be triggered by layer-._onRemove() (clear the shadowRoot)
249+
// when projection is changed, the parent map-layer._layer is created (so whenReady is fulfilled) but then removed,
250+
// then the map-extent disconnectedCallback will be triggered by map-layer._onRemove() (clear the shadowRoot)
251251
// even before connectedCallback is finished
252252
// in this case, the microtasks triggered by the fulfillment of the removed MapMLLayer should be stopped as well
253253
// !this.isConnected <=> the disconnectedCallback has run before
@@ -430,7 +430,7 @@ export class MapExtent extends HTMLElement {
430430
_handleChange() {
431431
// add _extentLayer to map if map-extent is checked, otherwise remove it
432432
if (this.checked && !this.disabled) {
433-
// can be added to mapmllayer layerGroup no matter layer- is checked or not
433+
// can be added to mapmllayer layerGroup no matter map-layer is checked or not
434434
this._extentLayer.addTo(this.parentLayer._layer);
435435
this._extentLayer.setZIndex(
436436
Array.from(
@@ -462,8 +462,8 @@ export class MapExtent extends HTMLElement {
462462
}
463463
}
464464
disconnectedCallback() {
465-
// in case of projection change, the disconnectedcallback will be triggered by removing layer-._layer even before
466-
// map-extent.connectedcallback is finished (because it will wait for the layer- to be ready)
465+
// in case of projection change, the disconnectedcallback will be triggered by removing map-layer._layer even before
466+
// map-extent.connectedcallback is finished (because it will wait for the map-layer to be ready)
467467
// !this._extentLayer <=> this.connectedCallback has not yet been finished before disconnectedCallback is triggered
468468
if (
469469
this.hasAttribute('data-moving') ||

‎src/map-feature.js

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

3-
export class MapFeature extends HTMLElement {
3+
export class HTMLMapFeatureElement extends HTMLElement {
44
static get observedAttributes() {
55
return ['zoom', 'min', 'max'];
66
}
@@ -137,7 +137,7 @@ export class MapFeature extends HTMLElement {
137137
return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
138138
}
139139
getLayerEl() {
140-
return Util.getClosest(this, 'layer-');
140+
return Util.getClosest(this, 'map-layer');
141141
}
142142

143143
attributeChangedCallback(name, oldValue, newValue) {
@@ -167,7 +167,7 @@ export class MapFeature extends HTMLElement {
167167
// used for fallback zoom getter for static features
168168
this._initialZoom = this.getMapEl().zoom;
169169
this._parentEl =
170-
this.parentNode.nodeName.toUpperCase() === 'LAYER-' ||
170+
this.parentNode.nodeName.toUpperCase() === 'MAP-LAYER' ||
171171
this.parentNode.nodeName.toUpperCase() === 'MAP-LINK'
172172
? this.parentNode
173173
: this.parentNode.host;
@@ -569,7 +569,7 @@ export class MapFeature extends HTMLElement {
569569
let clickEv = new PointerEvent('click', { cancelable: true });
570570
clickEv.originalEvent = event;
571571
this.dispatchEvent(clickEv);
572-
// for custom projection, layer- element may disconnect and re-attach to the map after the click
572+
// for custom projection, map-layer element may disconnect and re-attach to the map after the click
573573
// so check whether map-feature element is still connected before any further operations
574574
if (properties && this.isConnected) {
575575
let geometry = this._geometry,

‎src/map-geometry.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export class MapGeometry extends HTMLElement {
1+
export class HTMLMapGeometryElement extends HTMLElement {
22
static get observedAttributes() {
33
return ['cs'];
44
}

‎src/map-input.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { HeightInput } from './mapml/elementSupport/inputs/heightInput';
66
import { LocationInput } from './mapml/elementSupport/inputs/locationInput';
77

88
/* global M */
9-
export class MapInput extends HTMLElement {
9+
export class HTMLMapInputElement extends HTMLElement {
1010
static get observedAttributes() {
1111
return [
1212
'name',
@@ -183,7 +183,7 @@ export class MapInput extends HTMLElement {
183183
return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
184184
}
185185
getLayerEl() {
186-
return Util.getClosest(this, 'layer-');
186+
return Util.getClosest(this, 'map-layer');
187187
}
188188
attributeChangedCallback(name, oldValue, newValue) {
189189
this.whenReady()

‎src/map-link.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { templatedFeaturesLayer } from './mapml/layers/TemplatedFeaturesLayer';
55
import { templatedPMTilesLayer } from './mapml/layers/TemplatedPMTilesLayer';
66
/* global M */
77

8-
export class MapLink extends HTMLElement {
8+
export class HTMLMapLinkElement extends HTMLElement {
99
static get observedAttributes() {
1010
return [
1111
'type',
@@ -163,7 +163,7 @@ export class MapLink extends HTMLElement {
163163
return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
164164
}
165165
getLayerEl() {
166-
return Util.getClosest(this, 'layer-');
166+
return Util.getClosest(this, 'map-layer');
167167
}
168168

169169
attributeChangedCallback(name, oldValue, newValue) {
@@ -296,7 +296,7 @@ export class MapLink extends HTMLElement {
296296
// create the type of templated leaflet layer appropriate to the rel value
297297
// image/map/features = templated(Image/Feature), tile=templatedTile,
298298
// this._tempatedTileLayer = Util.templatedTile(pane: this.extentElement._leafletLayer._container)
299-
// add to viewer._map dependant on map-extent.checked, layer-.checked
299+
// add to viewer._map dependant on map-extent.checked, map-layer.checked
300300
// what else?
301301
}
302302
disconnectedCallback() {
@@ -320,7 +320,7 @@ export class MapLink extends HTMLElement {
320320
// in the parent <map-link>._templatedLayer.container root node if
321321
// the _templatedLayer is an instance of TemplatedTileLayer or TemplatedFeaturesLayer
322322
//
323-
// if the parent node (or the host of the shadow root parent node) is layer-, the link should be created in the _layer
323+
// if the parent node (or the host of the shadow root parent node) is map-layer, the link should be created in the _layer
324324
// container
325325
this._stylesheetHost =
326326
this.getRootNode() instanceof ShadowRoot
@@ -382,7 +382,7 @@ export class MapLink extends HTMLElement {
382382
this.getRootNode().querySelector(':host > ' + s)
383383
: Util.getClosest(
384384
this,
385-
'map-extent:has(' + s + '),layer-:has(' + s + ')'
385+
'map-extent:has(' + s + '),map-layer:has(' + s + ')'
386386
)?.querySelector(s);
387387
let options = {
388388
zoomBounds: this.getZoomBounds(),
@@ -640,7 +640,7 @@ export class MapLink extends HTMLElement {
640640
* TODO: review getBounds for sanity, also getFallbackBounds, perhaps integrate
641641
* there is no other kind of bounds but native....
642642
* each rectangle must be established and valid and converted to PCRS coordinates...
643-
// "native" bounds = input type=location min max || map-extent/map-meta name=extent min,max || layer-/map-meta name=extent min,max || layer projection min/max
643+
// "native" bounds = input type=location min max || map-extent/map-meta name=extent min,max || map-layer/map-meta name=extent min,max || layer projection min/max
644644
*/
645645
getBounds() {
646646
let template = this._templateVars;
@@ -772,7 +772,7 @@ export class MapLink extends HTMLElement {
772772
? /* use the baseURI algorithm which takes into account any <base> */
773773
this.getRootNode().querySelector('map-base')?.getAttribute('href') ||
774774
this.baseURI
775-
: /* else use the resolved <layer- src="..."> value */ new URL(
775+
: /* else use the resolved <map-layer src="..."> value */ new URL(
776776
layer.src,
777777
layer.baseURI
778778
).href;

‎src/map-meta.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export class MapMeta extends HTMLElement {
1+
export class HTMLMapMetaElement extends HTMLElement {
22
static get observedAttributes() {
33
return ['name', 'content'];
44
}

‎src/map-properties.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export class MapProperties extends HTMLElement {
1+
export class HTMLMapPropertiesElement extends HTMLElement {
22
static get observedAttributes() {
33
return;
44
}

‎src/map-select.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export class MapSelect extends HTMLElement {
1+
export class HTMLMapSelectElement extends HTMLElement {
22
static get observedAttributes() {
33
return ['name', 'id'];
44
}

‎src/map-span.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export class MapSpan extends HTMLElement {
1+
export class HTMLMapSpanElement extends HTMLElement {
22
static get observedAttributes() {
33
return;
44
}

0 commit comments

Comments
 (0)