From fdc97bcf743ae7149ef3e95a094f4320e98e0827 Mon Sep 17 00:00:00 2001 From: prushfor Date: Fri, 15 Nov 2024 20:29:16 -0500 Subject: [PATCH] Fix match-media experiments to work on maps4html.org --- .../match-media/map-projection/darkTheme.js | 21 ++- .../match-media/map-projection/index.html | 2 +- .../match-media/map-projection/lightTheme.js | 37 +++-- .../map-projection/pmtilesRules.js | 157 ++++++++++-------- .../prefers-color-scheme/darkTheme.js | 21 ++- .../prefers-color-scheme/lightTheme.js | 37 +++-- .../prefers-color-scheme/pmtilesRules.js | 153 +++++++++-------- 7 files changed, 253 insertions(+), 175 deletions(-) diff --git a/styling/media-queries/match-media/map-projection/darkTheme.js b/styling/media-queries/match-media/map-projection/darkTheme.js index 830e7f5..556c7dc 100644 --- a/styling/media-queries/match-media/map-projection/darkTheme.js +++ b/styling/media-queries/match-media/map-projection/darkTheme.js @@ -1,6 +1,19 @@ +const sheet = new protomapsL.Sheet(` + + + + + + + +`); const pmtilesRules = new Map(); -pmtilesRules.set( +const pmtilesRulesReady = sheet.load().then(() => { + pmtilesRules.set( 'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark', - { theme: { theme: 'dark' } } -); -export { pmtilesRules }; + { theme: { theme: 'dark' } } + ); + return pmtilesRules; +}); + +export { pmtilesRules, pmtilesRulesReady }; \ No newline at end of file diff --git a/styling/media-queries/match-media/map-projection/index.html b/styling/media-queries/match-media/map-projection/index.html index bdd5f7b..e0eb408 100644 --- a/styling/media-queries/match-media/map-projection/index.html +++ b/styling/media-queries/match-media/map-projection/index.html @@ -74,7 +74,7 @@ - + diff --git a/styling/media-queries/match-media/map-projection/lightTheme.js b/styling/media-queries/match-media/map-projection/lightTheme.js index fbca40c..a4b8842 100644 --- a/styling/media-queries/match-media/map-projection/lightTheme.js +++ b/styling/media-queries/match-media/map-projection/lightTheme.js @@ -1,14 +1,27 @@ +const sheet = new protomapsL.Sheet(` + + + + + + + +`); const pmtilesRules = new Map(); -pmtilesRules.set( - 'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles', - { theme: { theme: 'light' } } -); -pmtilesRules.set( +const pmtilesRulesReady = sheet.load().then(() => { + pmtilesRules.set( + 'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles', + { theme: { theme: 'light' } } + ); + pmtilesRules.set( 'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=light', - { theme: { theme: 'light' } } -); -pmtilesRules.set( - 'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5', - { theme: { theme: 'light' } } -); -export { pmtilesRules }; + { theme: { theme: 'light' } } + ); + pmtilesRules.set( + 'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5', + { theme: { theme: 'light' } } + ); + return pmtilesRules; +}); + +export { pmtilesRules, pmtilesRulesReady }; diff --git a/styling/media-queries/match-media/map-projection/pmtilesRules.js b/styling/media-queries/match-media/map-projection/pmtilesRules.js index 63df832..88e90c8 100644 --- a/styling/media-queries/match-media/map-projection/pmtilesRules.js +++ b/styling/media-queries/match-media/map-projection/pmtilesRules.js @@ -17,77 +17,90 @@ class SpearfishSymbolizer { context.fill(); } } +const sheet = new protomapsL.Sheet(` + + + + + + + +`); const pmtilesRules = new Map(); -pmtilesRules.set( - 'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles', - { theme: { theme: 'light' } } -); -pmtilesRules.set( - 'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=light', - { theme: { theme: 'light' } } -); -pmtilesRules.set( - 'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark', - { theme: { theme: 'dark' } } -); -pmtilesRules.set( - 'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5', - { theme: { theme: 'light' } } -); -pmtilesRules.set( - 'http://localhost:8080/geoserver/gwc/service/wmts/rest/spearfish/OSMTILE/{z}/{y}/{x}?format=application/vnd.mapbox-vector-tile', - { - rules: { - PAINT_RULES: [ - { - dataLayer: 'streams', - symbolizer: new protomapsL.LineSymbolizer({ color: 'steelblue', width: 2 }) - }, - { - dataLayer: 'roads', - symbolizer: new protomapsL.LineSymbolizer({ color: 'maroon', width: 2 }) - }, - { - dataLayer: 'restricted', - symbolizer: new protomapsL.PolygonSymbolizer({ - fill: 'red', - opacity: 0.5 - }) - }, - { - dataLayer: 'restricted', - symbolizer: new protomapsL.LineSymbolizer({ color: 'red', width: 2 }) - }, - { - dataLayer: 'archsites', - symbolizer: new SpearfishSymbolizer({ - color: 'red', - shape: 'square' - }) - }, - { - dataLayer: 'bugsites', - symbolizer: new SpearfishSymbolizer({ - color: 'black', - shape: 'circle' - }) - } - ], - LABEL_RULES: [ - { - dataLayer: 'archsites', - symbolizer: new protomapsL.CenteredTextSymbolizer({ - labelProps: ['str1'], - fill:'white', - width:2, - stroke:'black', - font:"600 16px sans-serif" - }), - // note that filter is a property of a rule, not an option to a symbolizer - filter: (z,f) => { return f.props['str1'].trim().toLowerCase() !== 'no name'; } - } - ] +const pmtilesRulesReady = sheet.load().then(() => { + pmtilesRules.set( + 'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles', + { theme: { theme: 'light' } } + ); + pmtilesRules.set( + 'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=light', + { theme: { theme: 'light' } } + ); + pmtilesRules.set( + 'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark', + { theme: { theme: 'dark' } } + ); + pmtilesRules.set( + 'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5', + { theme: { theme: 'light' } } + ); + pmtilesRules.set( + 'https://maps4html.org/experiments/vector-tiles/pmtiles/tiles/{z}/{y}/{x}.mvt?format=application/vnd.mapbox-vector-tile', + { + rules: { + PAINT_RULES: [ + { + dataLayer: 'streams', + symbolizer: new protomapsL.LineSymbolizer({ color: 'steelblue', width: 2 }) + }, + { + dataLayer: 'roads', + symbolizer: new protomapsL.LineSymbolizer({ color: 'maroon', width: 2 }) + }, + { + dataLayer: 'restricted', + symbolizer: new protomapsL.PolygonSymbolizer({ + fill: 'red', + opacity: 0.5 + }) + }, + { + dataLayer: 'restricted', + symbolizer: new protomapsL.LineSymbolizer({ color: 'red', width: 2 }) + }, + { + dataLayer: 'archsites', + symbolizer: new SpearfishSymbolizer({ + color: 'red', + shape: 'square' + }) + }, + { + dataLayer: 'bugsites', + symbolizer: new SpearfishSymbolizer({ + color: 'black', + shape: 'circle' + }) + } + ], + LABEL_RULES: [ + { + dataLayer: 'archsites', + symbolizer: new protomapsL.CenteredTextSymbolizer({ + labelProps: ['str1'], + fill:'white', + width:2, + stroke:'black', + font:"600 16px sans-serif" + }), + // note that filter is a property of a rule, not an option to a symbolizer + filter: (z,f) => { return f.props['str1'].trim().toLowerCase() !== 'no name'; } + } + ] + } } - } -); -export { pmtilesRules }; + ); + return pmtilesRules; +}); + +export { pmtilesRules, pmtilesRulesReady }; diff --git a/styling/media-queries/match-media/prefers-color-scheme/darkTheme.js b/styling/media-queries/match-media/prefers-color-scheme/darkTheme.js index 830e7f5..bdeff58 100644 --- a/styling/media-queries/match-media/prefers-color-scheme/darkTheme.js +++ b/styling/media-queries/match-media/prefers-color-scheme/darkTheme.js @@ -1,6 +1,19 @@ +const sheet = new protomapsL.Sheet(` + + + + + + + +`); const pmtilesRules = new Map(); -pmtilesRules.set( +const pmtilesRulesReady = sheet.load().then(() => { + pmtilesRules.set( 'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark', - { theme: { theme: 'dark' } } -); -export { pmtilesRules }; + { theme: { theme: 'dark' } } + ); + return pmtilesRules; +}); + +export { pmtilesRules, pmtilesRulesReady }; diff --git a/styling/media-queries/match-media/prefers-color-scheme/lightTheme.js b/styling/media-queries/match-media/prefers-color-scheme/lightTheme.js index fbca40c..c7000ca 100644 --- a/styling/media-queries/match-media/prefers-color-scheme/lightTheme.js +++ b/styling/media-queries/match-media/prefers-color-scheme/lightTheme.js @@ -1,14 +1,27 @@ +const sheet = new protomapsL.Sheet(` + + + + + + + +`); const pmtilesRules = new Map(); -pmtilesRules.set( - 'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles', - { theme: { theme: 'light' } } -); -pmtilesRules.set( +const pmtilesRulesReady = sheet.load().then(() => { + pmtilesRules.set( + 'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles', + { theme: { theme: 'light' } } + ); + pmtilesRules.set( 'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=light', - { theme: { theme: 'light' } } -); -pmtilesRules.set( - 'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5', - { theme: { theme: 'light' } } -); -export { pmtilesRules }; + { theme: { theme: 'light' } } + ); + pmtilesRules.set( + 'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5', + { theme: { theme: 'light' } } + ); + return pmtilesRules; +}); + +export { pmtilesRules, pmtilesRulesReady }; \ No newline at end of file diff --git a/styling/media-queries/match-media/prefers-color-scheme/pmtilesRules.js b/styling/media-queries/match-media/prefers-color-scheme/pmtilesRules.js index 63df832..2f84fa2 100644 --- a/styling/media-queries/match-media/prefers-color-scheme/pmtilesRules.js +++ b/styling/media-queries/match-media/prefers-color-scheme/pmtilesRules.js @@ -17,77 +17,90 @@ class SpearfishSymbolizer { context.fill(); } } +const sheet = new protomapsL.Sheet(` + + + + + + + +`); const pmtilesRules = new Map(); -pmtilesRules.set( - 'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles', - { theme: { theme: 'light' } } -); -pmtilesRules.set( +const pmtilesRulesReady = sheet.load().then(() => { + pmtilesRules.set( + 'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles', + { theme: { theme: 'light' } } + ); + pmtilesRules.set( 'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=light', - { theme: { theme: 'light' } } -); -pmtilesRules.set( + { theme: { theme: 'light' } } + ); + pmtilesRules.set( 'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark', - { theme: { theme: 'dark' } } -); -pmtilesRules.set( - 'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5', - { theme: { theme: 'light' } } -); -pmtilesRules.set( - 'http://localhost:8080/geoserver/gwc/service/wmts/rest/spearfish/OSMTILE/{z}/{y}/{x}?format=application/vnd.mapbox-vector-tile', - { - rules: { - PAINT_RULES: [ - { - dataLayer: 'streams', - symbolizer: new protomapsL.LineSymbolizer({ color: 'steelblue', width: 2 }) - }, - { - dataLayer: 'roads', - symbolizer: new protomapsL.LineSymbolizer({ color: 'maroon', width: 2 }) - }, - { - dataLayer: 'restricted', - symbolizer: new protomapsL.PolygonSymbolizer({ - fill: 'red', - opacity: 0.5 - }) - }, - { - dataLayer: 'restricted', - symbolizer: new protomapsL.LineSymbolizer({ color: 'red', width: 2 }) - }, - { - dataLayer: 'archsites', - symbolizer: new SpearfishSymbolizer({ - color: 'red', - shape: 'square' - }) - }, - { - dataLayer: 'bugsites', - symbolizer: new SpearfishSymbolizer({ - color: 'black', - shape: 'circle' - }) - } - ], - LABEL_RULES: [ - { - dataLayer: 'archsites', - symbolizer: new protomapsL.CenteredTextSymbolizer({ - labelProps: ['str1'], - fill:'white', - width:2, - stroke:'black', - font:"600 16px sans-serif" - }), - // note that filter is a property of a rule, not an option to a symbolizer - filter: (z,f) => { return f.props['str1'].trim().toLowerCase() !== 'no name'; } - } - ] + { theme: { theme: 'dark' } } + ); + pmtilesRules.set( + 'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5', + { theme: { theme: 'light' } } + ); + pmtilesRules.set( + 'https://maps4html.org/experiments/vector-tiles/pmtiles/tiles/{z}/{y}/{x}.mvt?format=application/vnd.mapbox-vector-tile', + { + rules: { + PAINT_RULES: [ + { + dataLayer: 'streams', + symbolizer: new protomapsL.LineSymbolizer({ color: 'steelblue', width: 2 }) + }, + { + dataLayer: 'roads', + symbolizer: new protomapsL.LineSymbolizer({ color: 'maroon', width: 2 }) + }, + { + dataLayer: 'restricted', + symbolizer: new protomapsL.PolygonSymbolizer({ + fill: 'red', + opacity: 0.5 + }) + }, + { + dataLayer: 'restricted', + symbolizer: new protomapsL.LineSymbolizer({ color: 'red', width: 2 }) + }, + { + dataLayer: 'archsites', + symbolizer: new SpearfishSymbolizer({ + color: 'red', + shape: 'square' + }) + }, + { + dataLayer: 'bugsites', + symbolizer: new SpearfishSymbolizer({ + color: 'black', + shape: 'circle' + }) + } + ], + LABEL_RULES: [ + { + dataLayer: 'archsites', + symbolizer: new protomapsL.CenteredTextSymbolizer({ + labelProps: ['str1'], + fill:'white', + width:2, + stroke:'black', + font:"600 16px sans-serif" + }), + // note that filter is a property of a rule, not an option to a symbolizer + filter: (z,f) => { return f.props['str1'].trim().toLowerCase() !== 'no name'; } + } + ] + } } - } -); -export { pmtilesRules }; + ); + return pmtilesRules; +}); + +export { pmtilesRules, pmtilesRulesReady }; \ No newline at end of file