Skip to content

Commit 7f32b1a

Browse files
AliyanHAliyanH
committed
Merge branch 'main' of https://github.com/Maps4HTML/Web-Map-Custom-Element into default-map-projection
2 parents 56186e8 + b48d26d commit 7f32b1a

File tree

13 files changed

+218
-82
lines changed

13 files changed

+218
-82
lines changed

‎index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@
7676
<map-caption>A pleasing map of Canada</map-caption>
7777
<layer- label="CBMT" src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked></layer->
7878
<layer- label="Hat Guy" checked>
79-
<map-meta name="projection" content="CBMTILE"></map-meta>
8079
<map-feature id="twohats" zoom="15" class="twohats">
8180
<map-properties>
8281
<table>
@@ -117,7 +116,7 @@
117116
</tr>
118117
</table>
119118
</map-properties>
120-
<map-geometry cs="gcrs">
119+
<map-geometry>
121120
<map-point>
122121
<map-coordinates>-75.705278 45.397778</map-coordinates>
123122
</map-point>

‎src/map-feature.js

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -280,14 +280,32 @@ export class MapFeature extends HTMLElement {
280280
_getNativeZoomAndCS(content) {
281281
// content: referred to <layer- > if the <layer- > has inline <map-extent>, <map-feature> or <map-tile>
282282
// referred to remote mapml if the <layer- > has a src attribute, and the fetched mapml contains <map-feature>
283+
// referred to [map-meta, ...] if it is query
283284
// referred to null otherwise (i.e. <layer- > has fetched <map-extent> in shadow, the <map-feature> attaches to <map-extent>'s shadow)
284285
let nativeZoom, nativeCS;
285286
if (this._extentEl) {
286287
// feature attaches to extent's shadow
287288
if (this._extentEl.querySelector('map-link[rel=query]')) {
288289
// for query, fallback zoom is the current map zoom level that the query is returned
289-
nativeZoom = this._map.getZoom();
290-
nativeCS = 'pcrs';
290+
let metaZoom, metaCS;
291+
if (content) {
292+
metaZoom = M._metaContentToObject(
293+
Array.prototype.filter
294+
.call(content, function (elem) {
295+
return elem.matches('map-meta[name=zoom]');
296+
})[0]
297+
?.getAttribute('content')
298+
).content;
299+
metaCS = M._metaContentToObject(
300+
Array.prototype.filter
301+
.call(content, function (elem) {
302+
return elem.matches('map-meta[name=cs]');
303+
})[0]
304+
?.getAttribute('content')
305+
).content;
306+
}
307+
nativeZoom = metaZoom || this._map.getZoom();
308+
nativeCS = metaCS || 'gcrs';
291309
} else if (this._extentEl.querySelector('map-link[rel=features]')) {
292310
// for templated feature, read fallback from the fetched mapml's map-meta[name=zoom / cs]
293311
nativeZoom = this._extentEl._nativeZoom;
@@ -315,7 +333,7 @@ export class MapFeature extends HTMLElement {
315333
csLength = csMeta?.length;
316334
nativeCS = csLength
317335
? csMeta[csLength - 1].getAttribute('content')
318-
: 'pcrs';
336+
: 'gcrs';
319337
return { zoom: nativeZoom, cs: nativeCS };
320338
}
321339
}
@@ -336,7 +354,9 @@ export class MapFeature extends HTMLElement {
336354
// calculate feature extent
337355
let map = this._map,
338356
geometry = this.querySelector('map-geometry'),
339-
native = this._getNativeZoomAndCS(this._layer._content),
357+
native = this._getNativeZoomAndCS(
358+
this._layer._content || this._layer.metas
359+
),
340360
cs = geometry.getAttribute('cs') || native.cs,
341361
// zoom level that the feature rendered at
342362
zoom = this.zoom || native.zoom,

‎src/mapml/handlers/QueryHandler.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,12 @@ export var QueryHandler = L.Handler.extend({
109109
features = Array.prototype.slice.call(
110110
mapmldoc.querySelectorAll('map-feature')
111111
);
112+
// <map-meta> elements
113+
layer.metas = Array.prototype.slice.call(
114+
mapmldoc.querySelectorAll(
115+
'map-meta[name=cs], map-meta[name=zoom], map-meta[name=projection]'
116+
)
117+
);
112118
if (features.length)
113119
layer._mapmlFeatures = layer._mapmlFeatures.concat(features);
114120
} else {
@@ -246,6 +252,7 @@ export var QueryHandler = L.Handler.extend({
246252
}
247253
}
248254
function displayFeaturesPopup(features, loc) {
255+
if (features.length === 0) return;
249256
let f = M.featureLayer(features, {
250257
// pass the vector layer a renderer of its own, otherwise leaflet
251258
// puts everything into the overlayPane
@@ -279,7 +286,7 @@ export var QueryHandler = L.Handler.extend({
279286
layer.on('popupclose', function () {
280287
map.removeLayer(f);
281288
});
282-
f.showPaginationFeature({ i: 0, popup: layer._popup });
289+
f.showPaginationFeature({ i: 0, popup: layer._popup, meta: layer.metas });
283290
}
284291
}
285292
});

‎src/mapml/layers/FeatureLayer.js

Lines changed: 58 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -88,14 +88,26 @@ export var FeatureLayer = L.FeatureGroup.extend({
8888
showPaginationFeature: function (e) {
8989
if (this.options.query && this._mapmlFeatures[e.i]) {
9090
let feature = this._mapmlFeatures[e.i];
91-
// remove the prev / next one <map-feature> from shadow if there is any
92-
feature._extentEl.shadowRoot.firstChild?.remove();
91+
if (e.type === 'featurepagination') {
92+
// remove map-feature only (keep meta's) when paginating
93+
feature._extentEl.shadowRoot.querySelector('map-feature')?.remove();
94+
} else {
95+
// empty the map-extent shadowRoot
96+
// remove the prev / next one <map-feature> and <map-meta>'s from shadow if there is any
97+
feature._extentEl.shadowRoot.replaceChildren();
98+
}
9399
this.clearLayers();
94100
feature._featureGroup = this.addData(
95101
feature,
96102
this.options.nativeCS,
97103
this.options.nativeZoom
98104
);
105+
// append all map-meta from mapml document
106+
if (e.meta) {
107+
for (let i = 0; i < e.meta.length; i++) {
108+
feature._extentEl.shadowRoot.appendChild(e.meta[i]);
109+
}
110+
}
99111
feature._extentEl.shadowRoot.appendChild(feature);
100112
e.popup._navigationBar.querySelector('p').innerText =
101113
e.i + 1 + '/' + this.options._leafletLayer._totalFeatureCount;
@@ -116,21 +128,51 @@ export var FeatureLayer = L.FeatureGroup.extend({
116128
}
117129
},
118130

131+
// _getNativeVariables: returns an object with the native zoom and CS,
132+
// based on the map-metas that are available within
133+
// the layer or the fallback default values.
134+
// _getNativeVariables: mapml-||layer-||null||[map-feature,...] -> {zoom: _, val: _}
135+
// mapml can be a mapml- element, layer- element, null, or an array of map-features
119136
_getNativeVariables: function (mapml) {
120-
let nativeZoom =
121-
(mapml.querySelector &&
122-
mapml.querySelector('map-meta[name=zoom]') &&
123-
+M._metaContentToObject(
124-
mapml.querySelector('map-meta[name=zoom]').getAttribute('content')
125-
).value) ||
126-
0;
127-
let nativeCS =
128-
(mapml.querySelector &&
129-
mapml.querySelector('map-meta[name=cs]') &&
130-
M._metaContentToObject(
131-
mapml.querySelector('map-meta[name=cs]').getAttribute('content')
132-
).content) ||
133-
'PCRS';
137+
let nativeZoom, nativeCS;
138+
// when mapml is an array of features provided by the query
139+
if (
140+
mapml.length &&
141+
mapml[0].parentElement.parentElement &&
142+
mapml[0].parentElement.parentElement.tagName === 'mapml-'
143+
) {
144+
let mapmlEl = mapml[0].parentElement.parentElement;
145+
nativeZoom =
146+
(mapmlEl.querySelector &&
147+
mapmlEl.querySelector('map-meta[name=zoom]') &&
148+
+M._metaContentToObject(
149+
mapmlEl.querySelector('map-meta[name=zoom]').getAttribute('content')
150+
).value) ||
151+
0;
152+
nativeCS =
153+
(mapmlEl.querySelector &&
154+
mapmlEl.querySelector('map-meta[name=cs]') &&
155+
M._metaContentToObject(
156+
mapmlEl.querySelector('map-meta[name=cs]').getAttribute('content')
157+
).content) ||
158+
'GCRS';
159+
} else {
160+
// when mapml is null or a layer-/mapml- element
161+
nativeZoom =
162+
(mapml.querySelector &&
163+
mapml.querySelector('map-meta[name=zoom]') &&
164+
+M._metaContentToObject(
165+
mapml.querySelector('map-meta[name=zoom]').getAttribute('content')
166+
).value) ||
167+
0;
168+
nativeCS =
169+
(mapml.querySelector &&
170+
mapml.querySelector('map-meta[name=cs]') &&
171+
M._metaContentToObject(
172+
mapml.querySelector('map-meta[name=cs]').getAttribute('content')
173+
).content) ||
174+
'GCRS';
175+
}
134176
return { zoom: nativeZoom, cs: nativeCS };
135177
},
136178

‎src/mapml/layers/MapMLLayer.js

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1404,11 +1404,21 @@ export var MapMLLayer = L.Layer.extend({
14041404
layer._content = mapml;
14051405
if (!this.responseXML && this.responseText)
14061406
mapml = new DOMParser().parseFromString(this.responseText, 'text/xml');
1407+
1408+
// if everything is ok, continue with the processing
14071409
if (
14081410
this.readyState === this.DONE &&
14091411
mapml.querySelector &&
14101412
!mapml.querySelector('parsererror')
14111413
) {
1414+
// Get layer's title/label
1415+
if (mapml.querySelector('map-title')) {
1416+
layer._title = mapml.querySelector('map-title').textContent.trim();
1417+
layer._titleIsReadOnly = true;
1418+
} else if (mapml instanceof Element && mapml.hasAttribute('label')) {
1419+
layer._title = mapml.getAttribute('label').trim();
1420+
}
1421+
14121422
var serverExtent = mapml.querySelectorAll('map-extent'),
14131423
projection,
14141424
projectionMatch,
@@ -1444,6 +1454,15 @@ export var MapMLLayer = L.Layer.extend({
14441454
projectionMatch =
14451455
projection && projection === layer.options.mapprojection;
14461456
}
1457+
} else {
1458+
// default projection set to parent projection when no map-meta projection element present
1459+
projection = layer.options.mapprojection;
1460+
projectionMatch = true;
1461+
serverMeta = projection;
1462+
console.log(
1463+
`A projection was not assigned to the '${layer._title}' Layer. Please specify a projection for that layer using a map-meta element. See more here - https://maps4html.org/web-map-doc/docs/elements/meta/`
1464+
);
1465+
// TODO: Add a more obvious warning.
14471466
}
14481467

14491468
var metaExtent = mapml.querySelector('map-meta[name=extent]'),
@@ -1513,7 +1532,13 @@ export var MapMLLayer = L.Layer.extend({
15131532
}
15141533
}
15151534
} else {
1516-
layer._extent = serverMeta;
1535+
if (typeof serverMeta === 'string') {
1536+
// when map-meta projection not present for layer
1537+
layer._extent = { serverMeta };
1538+
} else {
1539+
// when map-meta projection present for layer
1540+
layer._extent = serverMeta;
1541+
}
15171542
}
15181543
layer._parseLicenseAndLegend(mapml, layer, projection);
15191544

@@ -1630,12 +1655,6 @@ export var MapMLLayer = L.Layer.extend({
16301655
layer._styles = stylesControl;
16311656
}
16321657

1633-
if (mapml.querySelector('map-title')) {
1634-
layer._title = mapml.querySelector('map-title').textContent.trim();
1635-
layer._titleIsReadOnly = true;
1636-
} else if (mapml instanceof Element && mapml.hasAttribute('label')) {
1637-
layer._title = mapml.getAttribute('label').trim();
1638-
}
16391658
if (layer._map) {
16401659
layer._validateExtent();
16411660
// if the layer is checked in the layer control, force the addition
@@ -1746,7 +1765,7 @@ export var MapMLLayer = L.Layer.extend({
17461765
let extent = this._extent._mapExtents
17471766
? this._extent._mapExtents[0]
17481767
: this._extent; // the projections for each extent eould be the same (as) validated in _validProjection, so can use mapExtents[0]
1749-
if (!extent) return FALLBACK_PROJECTION;
1768+
if (extent.serverMeta) return extent.serverMeta;
17501769
switch (extent.tagName.toUpperCase()) {
17511770
case 'MAP-EXTENT':
17521771
if (extent.hasAttribute('units'))

‎src/mapml/layers/TemplatedFeaturesLayer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ export var TemplatedFeaturesLayer = L.Layer.extend({
159159
.querySelector('map-meta[name=cs]')
160160
.getAttribute('content')
161161
).content) ||
162-
'PCRS');
162+
'GCRS');
163163
features.addData(mapml, nativeCS, nativeZoom);
164164
// "migrate" to extent's shadow
165165
// make a clone, prevent the elements from being removed from mapml file

‎test/e2e/core/metaDefault.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,16 @@
3434
tref="http://maps.geogratis.gc.ca/wms/toporama_en?SERVICE=WMS&REQUEST=GetMap&FORMAT=image/jpeg&TRANSPARENT=FALSE&STYLES=&VERSION=1.3.0&LAYERS=WMS-Toporama&WIDTH={w}&HEIGHT={h}&CRS=EPSG:3978&BBOX={xmin},{ymin},{xmax},{ymax}&m4h=t" ></map-link>
3535
</map-extent>
3636
</layer->
37+
<layer- label="Default meta" checked>
38+
<map-feature>
39+
<map-geometry>
40+
<map-point>
41+
<map-coordinates>-79.477626 43.764814</map-coordinates>
42+
</map-point>
43+
</map-geometry>
44+
</map-feature>
45+
</layer->
46+
<layer- src="data/noMapMeta" checked></layer->
3747
</mapml-viewer>
3848

3949
</body>

‎test/e2e/core/metaDefault.test.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,4 +90,40 @@ test.describe('Playwright Missing Min Max Attribute, Meta Default Tests', () =>
9090
expectedGCRSSecondLayer.bottomRight
9191
);
9292
});
93+
test("Layer with no map-meta's is rendered on map", async () => {
94+
const viewer = await page.evaluateHandle(() =>
95+
document.querySelector('mapml-viewer')
96+
);
97+
const layerSVG = await (
98+
await page.evaluateHandle(
99+
(map) =>
100+
map.shadowRoot
101+
.querySelectorAll('.mapml-layer')[2]
102+
.querySelector('path')
103+
.getAttribute('d'),
104+
viewer
105+
)
106+
).jsonValue();
107+
expect(layerSVG).toEqual(
108+
'M190 311 L177.5 281 C177.5 261, 202.5 261, 202.5 281 L190 311z'
109+
);
110+
});
111+
test("Fetched layer with no map-meta's is rendered on map", async () => {
112+
const viewer = await page.evaluateHandle(() =>
113+
document.querySelector('mapml-viewer')
114+
);
115+
const layerSVG = await (
116+
await page.evaluateHandle(
117+
(map) =>
118+
map.shadowRoot
119+
.querySelectorAll('.mapml-layer')[3]
120+
.querySelector('path')
121+
.getAttribute('d'),
122+
viewer
123+
)
124+
).jsonValue();
125+
expect(layerSVG).toEqual(
126+
'M243 255 L230.5 225 C230.5 205, 255.5 205, 255.5 225 L243 255z'
127+
);
128+
});
93129
});

‎test/e2e/data/noMapMeta.mapml

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<mapml- xmlns="http://www.w3.org/1999/xhtml">
2+
<map-head>
3+
<map-title>Capital of Canada</map-title>
4+
<map-meta charset="utf-8" ></map-meta>
5+
<map-meta content="text/mapml" http-equiv="Content-Type" ></map-meta>
6+
</map-head>
7+
<map-body>
8+
<map-feature zoom="12">
9+
<map-featurecaption>Ottawa</map-featurecaption>
10+
<map-properties><h2 style="text-align:center">Ottawa</h2></map-properties>
11+
<map-geometry>
12+
<map-point>
13+
<map-coordinates>-75.715027 45.424721</map-coordinates>
14+
</map-point>
15+
</map-geometry>
16+
</map-feature>
17+
</map-body>
18+
</mapml->

0 commit comments

Comments
 (0)