diff --git a/styling/media-queries/match-media/features.mapml b/styling/media-queries/match-media/features.mapml new file mode 100644 index 0000000..b46314e --- /dev/null +++ b/styling/media-queries/match-media/features.mapml @@ -0,0 +1,21 @@ + + + Provinces and territories of Canada + + + + + + + + + + + + + + + + + + diff --git a/styling/media-queries/match-media/index.html b/styling/media-queries/match-media/index.html new file mode 100644 index 0000000..3efe43b --- /dev/null +++ b/styling/media-queries/match-media/index.html @@ -0,0 +1,47 @@ + + + + + + matchMedia API + + + + + + + + + + diff --git a/styling/media-queries/match-media/prefers-color-scheme/dark-mode-for-reference.html b/styling/media-queries/match-media/prefers-color-scheme/dark-mode-for-reference.html new file mode 100644 index 0000000..8e4127b --- /dev/null +++ b/styling/media-queries/match-media/prefers-color-scheme/dark-mode-for-reference.html @@ -0,0 +1,85 @@ + + + + + + + Dark mode + + + + + +

+ This document is to experiment with dark mode + (#551). +

+ +

+ The author of this document has indicated to UAs it is compatible with + dark mode as well as light mode + (with a preference for dark mode) + using + <meta name="color-scheme" content="dark light">, + allowing the UA to render this document with an appropriate color scheme. +

+ +

+ Set the preference for dark mode in your browser/OS settings or dev tools! +

+ + + + + +

References

+ + + diff --git a/styling/media-queries/match-media/prefers-color-scheme/dark.mapml b/styling/media-queries/match-media/prefers-color-scheme/dark.mapml new file mode 100644 index 0000000..34820a8 --- /dev/null +++ b/styling/media-queries/match-media/prefers-color-scheme/dark.mapml @@ -0,0 +1,15 @@ + + + pmtiles - dark theme + + + + + + + + + + \ No newline at end of file diff --git a/styling/media-queries/match-media/prefers-color-scheme/darkTheme.js b/styling/media-queries/match-media/prefers-color-scheme/darkTheme.js new file mode 100644 index 0000000..830e7f5 --- /dev/null +++ b/styling/media-queries/match-media/prefers-color-scheme/darkTheme.js @@ -0,0 +1,6 @@ +const pmtilesRules = new Map(); +pmtilesRules.set( + 'https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark', + { theme: { theme: 'dark' } } +); +export { pmtilesRules }; diff --git a/styling/media-queries/match-media/prefers-color-scheme/index.html b/styling/media-queries/match-media/prefers-color-scheme/index.html new file mode 100644 index 0000000..aae0e02 --- /dev/null +++ b/styling/media-queries/match-media/prefers-color-scheme/index.html @@ -0,0 +1,104 @@ + + + + + + + matchMedia API + + + + + + + + + + + +
+

Introduction to Adaptive Color Scheme for mapml-viewer

+

This experiment demonstrates the integration of adaptive color schemes for the mapml-viewer custom element, enabling it to adjust between light and dark modes based on the user’s system preferences. By implementing a color scheme that responds to the OS or browser’s preferred settings, we aim to enhance visual comfort and accessibility across different environments.

+

The page automatically detects and applies the appropriate theme, allowing users to experience the map viewer seamlessly in both light and dark modes. This implementation uses the <meta name="color-scheme" content="dark light"> attribute to signal to the browser the compatibility with both modes, ensuring a responsive and user-friendly experience.

+

How to Emulate OS Preferred Color Scheme in Browsers

+ +

These settings will allow you to see how the mapml-viewer element adapts to different color schemes in real-time, providing an intuitive user experience that aligns with system preferences.

+
+ + + diff --git a/styling/media-queries/match-media/prefers-color-scheme/light.mapml b/styling/media-queries/match-media/prefers-color-scheme/light.mapml new file mode 100644 index 0000000..20ce139 --- /dev/null +++ b/styling/media-queries/match-media/prefers-color-scheme/light.mapml @@ -0,0 +1,15 @@ + + + pmtiles - light theme + + + + + + + + + + diff --git a/styling/media-queries/match-media/prefers-color-scheme/lightTheme.js b/styling/media-queries/match-media/prefers-color-scheme/lightTheme.js new file mode 100644 index 0000000..fbca40c --- /dev/null +++ b/styling/media-queries/match-media/prefers-color-scheme/lightTheme.js @@ -0,0 +1,14 @@ +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://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=41392fb7515533a5', + { theme: { theme: 'light' } } +); +export { pmtilesRules }; diff --git a/styling/media-queries/match-media/prefers-color-scheme/pmtilesRules.js b/styling/media-queries/match-media/prefers-color-scheme/pmtilesRules.js new file mode 100644 index 0000000..63df832 --- /dev/null +++ b/styling/media-queries/match-media/prefers-color-scheme/pmtilesRules.js @@ -0,0 +1,93 @@ +class SpearfishSymbolizer { + constructor(options) { + this.color = options.color; + this.shape = options.shape; + } + draw(context, geom, z, feature) { + let pt = geom[0][0]; + context.fillStyle = this.color; + context.strokeStyle = this.color; + context.beginPath(); + if (this.shape === 'circle') { + context.arc(pt.x, pt.y, 3, 0, 2 * Math.PI); + } else { + context.rect(pt.x - 2, pt.y - 2, 4, 4); + } + context.stroke(); + context.fill(); + } +} +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'; } + } + ] + } + } +); +export { pmtilesRules };