Skip to content

Commit fdc97bc

Browse files
prushforprushfor
prushfor
authored and
prushfor
committed
Fix match-media experiments to work on maps4html.org
1 parent efcd455 commit fdc97bc

File tree

7 files changed

+253
-175
lines changed

7 files changed

+253
-175
lines changed

‎styling/media-queries/match-media/map-projection/darkTheme.js‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,19 @@
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(
11+
const pmtilesRulesReady = sheet.load().then(() => {
12+
pmtilesRules.set(
313
'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark',
4-
{ theme: { theme: 'dark' } }
5-
);
6-
export { pmtilesRules };
14+
{ theme: { theme: 'dark' } }
15+
);
16+
return pmtilesRules;
17+
});
18+
19+
export { pmtilesRules, pmtilesRulesReady };

‎styling/media-queries/match-media/map-projection/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
<map-input name="z" type="zoom" min="0" max="18"></map-input>
7575
<map-input name="y" type="location" units="tilematrix" axis="row"></map-input>
7676
<map-input name="x" type="location" units="tilematrix" axis="column"></map-input>
77-
<map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
77+
<map-link rel="tile" tref="https://maps-cartes.services.geo.ca/server2_serveur2/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
7878
</map-extent>
7979
</map-layer>
8080
</mapml-viewer>

‎styling/media-queries/match-media/map-projection/lightTheme.js‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,27 @@
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(
3-
'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
4-
{ theme: { theme: 'light' } }
5-
);
6-
pmtilesRules.set(
11+
const pmtilesRulesReady = sheet.load().then(() => {
12+
pmtilesRules.set(
13+
'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
14+
{ theme: { theme: 'light' } }
15+
);
16+
pmtilesRules.set(
717
'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=light',
8-
{ theme: { theme: 'light' } }
9-
);
10-
pmtilesRules.set(
11-
'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5',
12-
{ theme: { theme: 'light' } }
13-
);
14-
export { pmtilesRules };
18+
{ theme: { theme: 'light' } }
19+
);
20+
pmtilesRules.set(
21+
'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5',
22+
{ theme: { theme: 'light' } }
23+
);
24+
return pmtilesRules;
25+
});
26+
27+
export { pmtilesRules, pmtilesRulesReady };

‎styling/media-queries/match-media/map-projection/pmtilesRules.js‎

Lines changed: 85 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -17,77 +17,90 @@ class SpearfishSymbolizer {
1717
context.fill();
1818
}
1919
}
20+
const sheet = new protomapsL.Sheet(`
21+
<html>
22+
<body>
23+
<svg id="icon_0" width="99px" height="97px" xmlns="http://www.w3.org/2000/svg">
24+
<image href="data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbl82NCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgPGltYWdlIGhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQkFBQUFBUUNBWUFBQUFmOC85aEFBQUFDWEJJV1hNQUFBN0VBQUFPeEFHVkt3NGJBQUFBMlVsRVFWUjRuTldQTVdvQ1lSQ0Z2MElDZ2xZaFZnRUwzZmNyZGlsczBteVJUdkFLa2xaSXdKM2ZpTjE2aGhoeUFCRkVjZ2J2WUtFbmtCUkpiNWtFSlRheXNNdFd5WVBYRFBPOW1RZC9YcjVHSlRkc1Rhb21wdm12TzBZbVB1T1FRcjRQeE5yRXR3L29wQzdITFM1TVRFd3NEdmFPdHdOOERCRGIwenh5eklkMWJoSkQraTFLWHN4T1lJSjN2a0dZM2ozZ1BnRmVqUnRjWnVvK2ROeWVCM2l4Skt0TXZQeUNtMGc4bS9neXNYOXlsRlBoT0tUZ3hZYzVYZ2ZYRkkrVnhKMkpkeE85MUlDQmFFZU83dm44b2M2VkQzak1YT1AvNkFmS0Ywd3dXeU9Oc3dBQUFBQkpSVTVFcmtKZ2dnPT0iIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPgogICAgPC9zdmc+" width="99" height="97" />
25+
</svg>
26+
</body>
27+
</html>
28+
`);
2029
const pmtilesRules = new Map();
21-
pmtilesRules.set(
22-
'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
23-
{ theme: { theme: 'light' } }
24-
);
25-
pmtilesRules.set(
26-
'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=light',
27-
{ theme: { theme: 'light' } }
28-
);
29-
pmtilesRules.set(
30-
'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark',
31-
{ theme: { theme: 'dark' } }
32-
);
33-
pmtilesRules.set(
34-
'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5',
35-
{ theme: { theme: 'light' } }
36-
);
37-
pmtilesRules.set(
38-
'http://localhost:8080/geoserver/gwc/service/wmts/rest/spearfish/OSMTILE/{z}/{y}/{x}?format=application/vnd.mapbox-vector-tile',
39-
{
40-
rules: {
41-
PAINT_RULES: [
42-
{
43-
dataLayer: 'streams',
44-
symbolizer: new protomapsL.LineSymbolizer({ color: 'steelblue', width: 2 })
45-
},
46-
{
47-
dataLayer: 'roads',
48-
symbolizer: new protomapsL.LineSymbolizer({ color: 'maroon', width: 2 })
49-
},
50-
{
51-
dataLayer: 'restricted',
52-
symbolizer: new protomapsL.PolygonSymbolizer({
53-
fill: 'red',
54-
opacity: 0.5
55-
})
56-
},
57-
{
58-
dataLayer: 'restricted',
59-
symbolizer: new protomapsL.LineSymbolizer({ color: 'red', width: 2 })
60-
},
61-
{
62-
dataLayer: 'archsites',
63-
symbolizer: new SpearfishSymbolizer({
64-
color: 'red',
65-
shape: 'square'
66-
})
67-
},
68-
{
69-
dataLayer: 'bugsites',
70-
symbolizer: new SpearfishSymbolizer({
71-
color: 'black',
72-
shape: 'circle'
73-
})
74-
}
75-
],
76-
LABEL_RULES: [
77-
{
78-
dataLayer: 'archsites',
79-
symbolizer: new protomapsL.CenteredTextSymbolizer({
80-
labelProps: ['str1'],
81-
fill:'white',
82-
width:2,
83-
stroke:'black',
84-
font:"600 16px sans-serif"
85-
}),
86-
// note that filter is a property of a rule, not an option to a symbolizer
87-
filter: (z,f) => { return f.props['str1'].trim().toLowerCase() !== 'no name'; }
88-
}
89-
]
30+
const pmtilesRulesReady = sheet.load().then(() => {
31+
pmtilesRules.set(
32+
'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
33+
{ theme: { theme: 'light' } }
34+
);
35+
pmtilesRules.set(
36+
'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=light',
37+
{ theme: { theme: 'light' } }
38+
);
39+
pmtilesRules.set(
40+
'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark',
41+
{ theme: { theme: 'dark' } }
42+
);
43+
pmtilesRules.set(
44+
'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5',
45+
{ theme: { theme: 'light' } }
46+
);
47+
pmtilesRules.set(
48+
'https://maps4html.org/experiments/vector-tiles/pmtiles/tiles/{z}/{y}/{x}.mvt?format=application/vnd.mapbox-vector-tile',
49+
{
50+
rules: {
51+
PAINT_RULES: [
52+
{
53+
dataLayer: 'streams',
54+
symbolizer: new protomapsL.LineSymbolizer({ color: 'steelblue', width: 2 })
55+
},
56+
{
57+
dataLayer: 'roads',
58+
symbolizer: new protomapsL.LineSymbolizer({ color: 'maroon', width: 2 })
59+
},
60+
{
61+
dataLayer: 'restricted',
62+
symbolizer: new protomapsL.PolygonSymbolizer({
63+
fill: 'red',
64+
opacity: 0.5
65+
})
66+
},
67+
{
68+
dataLayer: 'restricted',
69+
symbolizer: new protomapsL.LineSymbolizer({ color: 'red', width: 2 })
70+
},
71+
{
72+
dataLayer: 'archsites',
73+
symbolizer: new SpearfishSymbolizer({
74+
color: 'red',
75+
shape: 'square'
76+
})
77+
},
78+
{
79+
dataLayer: 'bugsites',
80+
symbolizer: new SpearfishSymbolizer({
81+
color: 'black',
82+
shape: 'circle'
83+
})
84+
}
85+
],
86+
LABEL_RULES: [
87+
{
88+
dataLayer: 'archsites',
89+
symbolizer: new protomapsL.CenteredTextSymbolizer({
90+
labelProps: ['str1'],
91+
fill:'white',
92+
width:2,
93+
stroke:'black',
94+
font:"600 16px sans-serif"
95+
}),
96+
// note that filter is a property of a rule, not an option to a symbolizer
97+
filter: (z,f) => { return f.props['str1'].trim().toLowerCase() !== 'no name'; }
98+
}
99+
]
100+
}
90101
}
91-
}
92-
);
93-
export { pmtilesRules };
102+
);
103+
return pmtilesRules;
104+
});
105+
106+
export { pmtilesRules, pmtilesRulesReady };

‎styling/media-queries/match-media/prefers-color-scheme/darkTheme.js‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,19 @@
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(
11+
const pmtilesRulesReady = sheet.load().then(() => {
12+
pmtilesRules.set(
313
'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark',
4-
{ theme: { theme: 'dark' } }
5-
);
6-
export { pmtilesRules };
14+
{ theme: { theme: 'dark' } }
15+
);
16+
return pmtilesRules;
17+
});
18+
19+
export { pmtilesRules, pmtilesRulesReady };

‎styling/media-queries/match-media/prefers-color-scheme/lightTheme.js‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,27 @@
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(
3-
'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
4-
{ theme: { theme: 'light' } }
5-
);
6-
pmtilesRules.set(
11+
const pmtilesRulesReady = sheet.load().then(() => {
12+
pmtilesRules.set(
13+
'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',
14+
{ theme: { theme: 'light' } }
15+
);
16+
pmtilesRules.set(
717
'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=light',
8-
{ theme: { theme: 'light' } }
9-
);
10-
pmtilesRules.set(
11-
'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5',
12-
{ theme: { theme: 'light' } }
13-
);
14-
export { pmtilesRules };
18+
{ theme: { theme: 'light' } }
19+
);
20+
pmtilesRules.set(
21+
'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5',
22+
{ theme: { theme: 'light' } }
23+
);
24+
return pmtilesRules;
25+
});
26+
27+
export { pmtilesRules, pmtilesRulesReady };

0 commit comments

Comments
 (0)