Skip to content

Commit 2ed3dca

Browse files
prushforthprushforth
committed
Add sheet parameter to TemplatedPMTilesLayer.js
Remove grunt-rollup grunt plugin, replace with customRollup task, config done via external rollup.config.js. Remove uglify grunt plugin, replace with terser rollup plugin (does a better job with source maps and chained minification) Add nrcan-basemap grunt task for sibling project to get nrcan vector tile basemap working with pmtiles. Change the required structure of pmtilesRules.js - requires a sheet that gets loaded via sheet.load(), after which all the style rules are set and returned. This allows style label rules to use IconSymbolizers, however it requires a slightly awkward structure to be imposed on a pmtiles stylesheet module. See pmtilesRules.js, and corresponding test stylesheet modules for more info. Add await on loading the pmtilesRules.js stylesheet module Add script 'test-serve' to package.json to run the test web server to debug test HTML pages as required, removing the need to drop into a console Update pmtiles test that was not testing rendering, only a blank map canvas. Add test mvt tiles to validate that protomapsL is available to stylesheet modules upon import. Add test for custom styled mvt data, with win32 capture only Restructure test style modules to conform to new promise-returning expected structure Adjuust timeout limit on map-link whenReady() Conditionally await on map-link.whenReady() for stylesheet module associated to pmtiles / mvt layer (if omitted, don't want exceptions, prefer to reject in whenReady(), although it's slow. Add linux image for custom styles. Loosen pixel comparison to 200 pixels
1 parent ac6dde9 commit 2ed3dca

File tree

20 files changed

+329
-121
lines changed

20 files changed

+329
-121
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
}
3333
],
3434
"scripts": {
35+
"test-serve": "node test/server.js",
3536
"postinstall": "npx playwright install --with-deps",
3637
"test": "npx playwright test --retries=3 --workers=1"
3738
},

‎src/map-link.js‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -283,8 +283,9 @@ export class HTMLLinkElement extends HTMLElement {
283283
if (this.type === 'application/pmtiles+stylesheet') {
284284
const pmtilesStyles = new URL(this.href, this.getBase()).href;
285285
import(pmtilesStyles)
286-
.then((module) => {
287-
this._pmtilesRules = module.pmtilesRules;
286+
.then((module) => module.pmtilesRulesReady)
287+
.then((initializedRules) => {
288+
this._pmtilesRules = initializedRules;
288289
})
289290
.catch((reason) => {
290291
console.error(
@@ -399,19 +400,24 @@ export class HTMLLinkElement extends HTMLElement {
399400
s +
400401
')'
401402
)?.querySelector(s);
402-
let options = {
403-
zoomBounds: this.getZoomBounds(),
404-
extentBounds: this.getBounds(),
405-
crs: M[this.parentExtent.units],
406-
zIndex: this.zIndex,
407-
pane: this.parentExtent._extentLayer.getContainer(),
408-
linkEl: this,
409-
pmtilesRules: pmtilesStylesheetLink?._pmtilesRules
410-
};
411-
this._templatedLayer = templatedPMTilesLayer(
412-
this._templateVars,
413-
options
414-
).addTo(this.parentExtent._extentLayer);
403+
if (pmtilesStylesheetLink) {
404+
await pmtilesStylesheetLink.whenReady();
405+
let options = {
406+
zoomBounds: this.getZoomBounds(),
407+
extentBounds: this.getBounds(),
408+
crs: M[this.parentExtent.units],
409+
zIndex: this.zIndex,
410+
pane: this.parentExtent._extentLayer.getContainer(),
411+
linkEl: this,
412+
pmtilesRules: pmtilesStylesheetLink?._pmtilesRules
413+
};
414+
this._templatedLayer = templatedPMTilesLayer(
415+
this._templateVars,
416+
options
417+
).addTo(this.parentExtent._extentLayer);
418+
} else {
419+
console.warn('Stylesheet not found for ' + this._templateVars.template);
420+
}
415421
} else if (this.rel === 'tile') {
416422
this._templatedLayer = templatedTileLayer(this._templateVars, {
417423
zoomBounds: this.getZoomBounds(),
@@ -967,7 +973,7 @@ export class HTMLLinkElement extends HTMLElement {
967973
break;
968974
case 'stylesheet':
969975
if (this.type === 'application/pmtiles+stylesheet') {
970-
ready = _pmtilesRules;
976+
ready = '_pmtilesRules';
971977
} else {
972978
resolve();
973979
}
@@ -986,7 +992,7 @@ export class HTMLLinkElement extends HTMLElement {
986992
resolve();
987993
}
988994
interval = setInterval(testForLinkReady, 300, this);
989-
failureTimer = setTimeout(linkNotDefined, 10000);
995+
failureTimer = setTimeout(linkNotDefined, 1000);
990996
function testForLinkReady(linkElement) {
991997
if (linkElement[ready]) {
992998
clearInterval(interval);

‎src/mapml/layers/TemplatedPMTilesLayer.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ window.L = Leaflet;
55

66
import { Util } from '../utils/Util.js';
77
import * as protomapsL from 'protomaps-leaflet';
8+
window.protomapsL = protomapsL;
89

910
export var TemplatedPMTilesLayer = Layer.extend({
1011
initialize: function (template, options) {
@@ -42,6 +43,9 @@ export var TemplatedPMTilesLayer = Layer.extend({
4243
extend(this._pmtilesOptions, {
4344
labelRules: paintRules.rules.LABEL_RULES
4445
});
46+
if (paintRules.sheet) {
47+
extend(this._pmtilesOptions, { tasks: [paintRules.sheet.load()] });
48+
}
4549
} else if (paintRules?.theme?.theme) {
4650
extend(this._pmtilesOptions, { theme: paintRules.theme.theme });
4751
} else {

‎src/pmtilesRules.js‎

Lines changed: 95 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,15 @@
5858
* as described here: https://docs.protomaps.com/pmtiles/leaflet, and as
5959
* exemplified below.
6060
*/
61+
const sheet = new protomapsL.Sheet(`
62+
<html>
63+
<body>
64+
<svg id="icon_0" width="99px" height="97px" xmlns="http://www.w3.org/2000/svg">
65+
<image href="data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbl82NCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgPGltYWdlIGhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQkFBQUFBUUNBWUFBQUFmOC85aEFBQUFDWEJJV1hNQUFBN0VBQUFPeEFHVkt3NGJBQUFBMlVsRVFWUjRuTldQTVdvQ1lSQ0Z2MElDZ2xZaFZnRUwzZmNyZGlsczBteVJUdkFLa2xaSXdKM2ZpTjE2aGhoeUFCRkVjZ2J2WUtFbmtCUkpiNWtFSlRheXNNdFd5WVBYRFBPOW1RZC9YcjVHSlRkc1Rhb21wdm12TzBZbVB1T1FRcjRQeE5yRXR3L29wQzdITFM1TVRFd3NEdmFPdHdOOERCRGIwenh5eklkMWJoSkQraTFLWHN4T1lJSjN2a0dZM2ozZ1BnRmVqUnRjWnVvK2ROeWVCM2l4Skt0TXZQeUNtMGc4bS9neXNYOXlsRlBoT0tUZ3hZYzVYZ2ZYRkkrVnhKMkpkeE85MUlDQmFFZU83dm44b2M2VkQzak1YT1AvNkFmS0Ywd3dXeU9Oc3dBQUFBQkpSVTVFcmtKZ2dnPT0iIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPgogICAgPC9zdmc+" width="99" height="97" />
66+
</svg>
67+
</body>
68+
</html>
69+
`);
6170

6271
class SpearfishSymbolizer {
6372
constructor(options) {
@@ -88,87 +97,91 @@ class SpearfishSymbolizer {
8897
8998
*/
9099
const pmtilesRules = new Map();
91-
pmtilesRules.set(
92-
'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
93-
{ theme: { theme: 'light' } }
94-
);
95-
pmtilesRules.set(
96-
'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles?theme=light',
97-
{ theme: { theme: 'light' } }
98-
);
99-
pmtilesRules.set(
100-
'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles?theme=dark',
101-
{ theme: { theme: 'dark' } }
102-
);
103-
pmtilesRules.set(
104-
'https://api.protomaps.com/tiles/v3/{bing}/{bong}/{bang}.mvt?key=41392fb7515533a5',
105-
{ theme: { theme: 'light' } }
106-
);
107-
pmtilesRules.set(
108-
'http://localhost:8080/geoserver/gwc/service/wmts/rest/spearfish/OSMTILE/{foo}/{baz}/{bar}?format=application/vnd.mapbox-vector-tile',
109-
{
110-
rules: {
111-
PAINT_RULES: [
112-
{
113-
dataLayer: 'streams',
114-
symbolizer: new protomapsL.LineSymbolizer({
115-
color: 'steelblue',
116-
width: 2
117-
})
118-
},
119-
{
120-
dataLayer: 'roads',
121-
symbolizer: new protomapsL.LineSymbolizer({
122-
color: 'maroon',
123-
width: 2
124-
})
125-
},
126-
{
127-
dataLayer: 'restricted',
128-
symbolizer: new protomapsL.PolygonSymbolizer({
129-
fill: 'red',
130-
opacity: 0.5
131-
})
132-
},
133-
{
134-
dataLayer: 'restricted',
135-
symbolizer: new protomapsL.LineSymbolizer({
136-
color: 'red',
137-
width: 2
138-
})
139-
},
140-
{
141-
dataLayer: 'archsites',
142-
symbolizer: new SpearfishSymbolizer({
143-
color: 'red',
144-
shape: 'square'
145-
})
146-
},
147-
{
148-
dataLayer: 'bugsites',
149-
symbolizer: new SpearfishSymbolizer({
150-
color: 'black',
151-
shape: 'circle'
152-
})
153-
}
154-
],
155-
LABEL_RULES: [
156-
{
157-
dataLayer: 'archsites',
158-
symbolizer: new protomapsL.CenteredTextSymbolizer({
159-
labelProps: ['str1'],
160-
fill: 'white',
161-
width: 2,
162-
stroke: 'black',
163-
font: '600 16px sans-serif'
164-
}),
165-
// note that filter is a property of a rule, not an option to a symbolizer
166-
filter: (z, f) => {
167-
return f.props.str1.trim().toLowerCase() !== 'no name';
100+
const pmtilesRulesReady = sheet.load().then(() => {
101+
pmtilesRules.set(
102+
'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
103+
{ theme: { theme: 'light' } }
104+
);
105+
pmtilesRules.set(
106+
'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles?theme=light',
107+
{ theme: { theme: 'light' } }
108+
);
109+
pmtilesRules.set(
110+
'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles?theme=dark',
111+
{ theme: { theme: 'dark' } }
112+
);
113+
pmtilesRules.set(
114+
'https://api.protomaps.com/tiles/v3/{bing}/{bong}/{bang}.mvt?key=41392fb7515533a5',
115+
{ theme: { theme: 'light' } }
116+
);
117+
pmtilesRules.set(
118+
'http://localhost:8080/geoserver/gwc/service/wmts/rest/spearfish/OSMTILE/{foo}/{baz}/{bar}?format=application/vnd.mapbox-vector-tile',
119+
{
120+
rules: {
121+
PAINT_RULES: [
122+
{
123+
dataLayer: 'streams',
124+
symbolizer: new protomapsL.LineSymbolizer({
125+
color: 'steelblue',
126+
width: 2
127+
})
128+
},
129+
{
130+
dataLayer: 'roads',
131+
symbolizer: new protomapsL.LineSymbolizer({
132+
color: 'maroon',
133+
width: 2
134+
})
135+
},
136+
{
137+
dataLayer: 'restricted',
138+
symbolizer: new protomapsL.PolygonSymbolizer({
139+
fill: 'red',
140+
opacity: 0.5
141+
})
142+
},
143+
{
144+
dataLayer: 'restricted',
145+
symbolizer: new protomapsL.LineSymbolizer({
146+
color: 'red',
147+
width: 2
148+
})
149+
},
150+
{
151+
dataLayer: 'archsites',
152+
symbolizer: new SpearfishSymbolizer({
153+
color: 'red',
154+
shape: 'square'
155+
})
156+
},
157+
{
158+
dataLayer: 'bugsites',
159+
symbolizer: new SpearfishSymbolizer({
160+
color: 'black',
161+
shape: 'circle'
162+
})
168163
}
169-
}
170-
]
164+
],
165+
LABEL_RULES: [
166+
{
167+
dataLayer: 'archsites',
168+
symbolizer: new protomapsL.CenteredTextSymbolizer({
169+
labelProps: ['str1'],
170+
fill: 'white',
171+
width: 2,
172+
stroke: 'black',
173+
font: '600 16px sans-serif'
174+
}),
175+
// note that filter is a property of a rule, not an option to a symbolizer
176+
filter: (z, f) => {
177+
return f.props.str1.trim().toLowerCase() !== 'no name';
178+
}
179+
}
180+
]
181+
}
171182
}
172-
}
173-
);
174-
export { pmtilesRules };
183+
);
184+
return pmtilesRules;
185+
});
186+
187+
export { pmtilesRules, pmtilesRulesReady };

‎test/e2e/data/tiles/osmtile/11/740/433.mvt‎

14.7 KB
Binary file not shown.

‎test/e2e/data/tiles/osmtile/11/740/434.mvt‎

3.9 KB
Binary file not shown.

‎test/e2e/data/tiles/osmtile/11/741/433.mvt‎

16.4 KB
Binary file not shown.

‎test/e2e/data/tiles/osmtile/11/741/434.mvt‎

7.15 KB
Binary file not shown.

‎test/e2e/elements/map-link/pmtiles/darkTheme.js‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
1+
const sheet = new protomapsL.Sheet(`
2+
<html>
3+
<body>
4+
<svg id="icon_0" width="99px" height="97px" xmlns="http://www.w3.org/2000/svg">
5+
<image href="data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbl82NCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgPGltYWdlIGhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQkFBQUFBUUNBWUFBQUFmOC85aEFBQUFDWEJJV1hNQUFBN0VBQUFPeEFHVkt3NGJBQUFBMlVsRVFWUjRuTldQTVdvQ1lSQ0Z2MElDZ2xZaFZnRUwzZmNyZGlsczBteVJUdkFLa2xaSXdKM2ZpTjE2aGhoeUFCRkVjZ2J2WUtFbmtCUkpiNWtFSlRheXNNdFd5WVBYRFBPOW1RZC9YcjVHSlRkc1Rhb21wdm12TzBZbVB1T1FRcjRQeE5yRXR3L29wQzdITFM1TVRFd3NEdmFPdHdOOERCRGIwenh5eklkMWJoSkQraTFLWHN4T1lJSjN2a0dZM2ozZ1BnRmVqUnRjWnVvK2ROeWVCM2l4Skt0TXZQeUNtMGc4bS9neXNYOXlsRlBoT0tUZ3hZYzVYZ2ZYRkkrVnhKMkpkeE85MUlDQmFFZU83dm44b2M2VkQzak1YT1AvNkFmS0Ywd3dXeU9Oc3dBQUFBQkpSVTVFcmtKZ2dnPT0iIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPgogICAgPC9zdmc+" width="99" height="97" />
6+
</svg>
7+
</body>
8+
</html>
9+
`);
110
const pmtilesRules = new Map();
2-
pmtilesRules.set('http://localhost:30001/spearfish.pmtiles?theme=dark', {
3-
theme: { theme: 'dark' }
11+
const pmtilesRulesReady = sheet.load().then(() => {
12+
pmtilesRules.set('http://localhost:30001/spearfish.pmtiles?theme=dark', {
13+
theme: { theme: 'dark' }
14+
});
15+
return pmtilesRules;
416
});
5-
export { pmtilesRules };
17+
18+
export { pmtilesRules, pmtilesRulesReady };

‎test/e2e/elements/map-link/pmtiles/lightTheme.js‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
1+
const sheet = new protomapsL.Sheet(`
2+
<html>
3+
<body>
4+
<svg id="icon_0" width="99px" height="97px" xmlns="http://www.w3.org/2000/svg">
5+
<image href="data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbl82NCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgPGltYWdlIGhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQkFBQUFBUUNBWUFBQUFmOC85aEFBQUFDWEJJV1hNQUFBN0VBQUFPeEFHVkt3NGJBQUFBMlVsRVFWUjRuTldQTVdvQ1lSQ0Z2MElDZ2xZaFZnRUwzZmNyZGlsczBteVJUdkFLa2xaSXdKM2ZpTjE2aGhoeUFCRkVjZ2J2WUtFbmtCUkpiNWtFSlRheXNNdFd5WVBYRFBPOW1RZC9YcjVHSlRkc1Rhb21wdm12TzBZbVB1T1FRcjRQeE5yRXR3L29wQzdITFM1TVRFd3NEdmFPdHdOOERCRGIwenh5eklkMWJoSkQraTFLWHN4T1lJSjN2a0dZM2ozZ1BnRmVqUnRjWnVvK2ROeWVCM2l4Skt0TXZQeUNtMGc4bS9neXNYOXlsRlBoT0tUZ3hZYzVYZ2ZYRkkrVnhKMkpkeE85MUlDQmFFZU83dm44b2M2VkQzak1YT1AvNkFmS0Ywd3dXeU9Oc3dBQUFBQkpSVTVFcmtKZ2dnPT0iIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPgogICAgPC9zdmc+" width="99" height="97" />
6+
</svg>
7+
</body>
8+
</html>
9+
`);
110
const pmtilesRules = new Map();
2-
pmtilesRules.set('http://localhost:30001/spearfish.pmtiles?theme=light', {
3-
theme: { theme: 'light' }
11+
const pmtilesRulesReady = sheet.load().then(() => {
12+
pmtilesRules.set('http://localhost:30001/spearfish.pmtiles?theme=light', {
13+
theme: { theme: 'light' }
14+
});
15+
return pmtilesRules;
416
});
5-
export { pmtilesRules };
17+
18+
export { pmtilesRules, pmtilesRulesReady };

0 commit comments

Comments
 (0)