Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WIP on matchMedia experiments #140

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

WIP on matchMedia experiments #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4bec70a
WIP on matchMedia experiments
Nov 7, 2024
8cbcd7f
add dark-mode-for-reference, empty media-attribute folder for future use
Nov 12, 2024
d3bf583
Modified index.html for preferred-color-schemes
yushan-mu Nov 13, 2024
9f61883
Add event handler to map.matchMedia result, allowing map to select the
Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions styling/media-queries/match-media/features.mapml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<mapml- xmlns="http://www.w3.org/1999/xhtml">
<map-head>
<map-title>Provinces and territories of Canada</map-title>
<map-meta charset="utf-8"></map-meta>
<map-link rel="style" media="prefers-map-content=image" href="msi.mapml" title="WMS GetMap" />
<map-link rel="self style" media="prefers-map-content=feature" href="features.mapml" title="Features" />
<map-link rel="style" media="prefers-map-content=tiled-image" href="msi-tiles.mapml" title="Tiled WMS GetMap" />
</map-head>
<map-body>
<map-extent units="CBMTILE" checked="checked">
<map-input name="z" type="zoom" value="25" min="0" max="25"/>
<map-input name="xmin" type="location" rel="map" position="top-left" axis="easting" units="pcrs" min="-6105785.728719063" max="6174630.753072981"/>
<map-input name="ymin" type="location" rel="map" position="bottom-left" axis="northing" units="pcrs" min="-1692155.9568245453" max="4482681.2054050295"/>
<map-input name="xmax" type="location" rel="map" position="top-right" axis="easting" units="pcrs" min="-6105785.728719063" max="6174630.753072981"/>
<map-input name="ymax" type="location" rel="map" position="top-left" axis="northing" units="pcrs" min="-1692155.9568245453" max="4482681.2054050295"/>
<map-input name="w" type="width" min="0" max="10000"/>
<map-input name="h" type="height" min="0" max="10000"/>
<map-link media="" tref="canada.xml?zoom={z}" rel="features"/>
</map-extent>
</map-body>
</mapml->
47 changes: 47 additions & 0 deletions styling/media-queries/match-media/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>matchMedia API</title>
<script type="module" src="../../../dist/mapml.js"></script>
<link rel="stylesheet" href="../../../global.css">
</head>
<template id="layers">
<map-layer id="tiles" label="CBMT tiles" src="../../../refactoring-temporary/cbmtile-cbmt.mapml" checked></map-layer>
<map-layer id="features" label="Canada's Provinces and Territories" src="../features.mapml" checked ></map-layer>
<map-layer id="wms" label="CBMT WMS" checked>
<map-extent units="CBMTILE" checked hidden>
<map-input name="xmin" type="location" units="pcrs" position="top-left" axis="easting" min="-2.003750834E7" max="2.003750834E7" ></map-input>
<map-input name="ymin" type="location" units="pcrs" position="bottom-left" axis="northing" min="-2.003750834E7" max="2.003750834E7" ></map-input>
<map-input name="xmax" type="location" units="pcrs" position="top-right" axis="easting" min="-2.003750834E7" max="2.003750834E7" ></map-input>
<map-input name="ymax" type="location" units="pcrs" position="top-left" axis="northing" min="-2.003750834E7" max="2.003750834E7" ></map-input>
<map-input name="w" type="width"></map-input>
<map-input name="h" type="height"></map-input>
<map-link rel="image" tref="https://maps.geogratis.gc.ca/wms/CBMT?service=wms&version=1.3.0&request=GetMap&layers=CBMT&bbox={xmin},{ymin},{xmax},{ymax}&width={w}&height={h}&crs=EPSG:3978&format=image/png"></map-link>
</map-extent>
</map-layer>
<!-- fr version here: https://cartes.geogratis.gc.ca/wms/CBCT?service=wms&version=1.3.0&request=GetCapabilities&layers=CBCT&legend_format=image/png -->
</template>
<script>
document.addEventListener('DOMContentLoaded',(e)=>{
let l, map = document.querySelector('mapml-viewer'),
prefersImages = map.matchMedia('(prefers-map-content: image) and ( not (prefers-map-content: tile))').matches === 'true',
t = document.querySelector('template'),
prefersFeaturesOnly = map.matchMedia('(prefers-map-content: feature) and ( not ((prefers-map-content: image) or (prefers-map-content: tile)))').matches === 'true',
prefersTiles = map.matchMedia('(prefers-map-content: tile');
if (prefersFeaturesOnly) {
l = t.content.querySelector('#features').cloneNode(true);
} else if (prefersImages) {
l = t.content.querySelector('#wms').cloneNode(true);
} else if (prefersTiles) {
l = t.content.querySelector('#tiles').cloneNode(true);
}
map.appendChild(l);
});
</script>
<body>
<mapml-viewer projection="CBMTILE" zoom="4" lat="60" lon="-90" controls>
</mapml-viewer>
</body>
</html>
85 changes: 85 additions & 0 deletions styling/media-queries/match-media/prefers-color-scheme/dark-mode-for-reference.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="color-scheme" content="dark light">
<title>Dark mode</title>
<script type="module" src="../dist/mapml.js"></script>
<!-- <script type="module" src="../dist/web-map.js"></script>-->
<style>
body {
font-family: 'system-ui', sans-serif;
max-width: 50rem;
margin: 0 auto;
padding: 0 1rem;
overflow-wrap: break-word;
}
mapml-viewer {
width: 100%;
min-height: 50vh;
}
@media (prefers-color-scheme: dark) {
.user-preference-message {
display: none;
}
}
</style>
</head>
<body>
<p>
This document is to experiment with dark mode
(<a href="https://github.com/Maps4HTML/MapML.js/issues/551">#551</a>).
</p>

<p>
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
<code>&lt;meta name="color-scheme" content="dark light"&gt;</code>,
allowing the UA to render this document with an appropriate color scheme.
</p>

<p class="user-preference-message">
<mark>Set the preference for dark mode in your browser/OS settings or dev tools!</mark>
</p>

<mapml-viewer projection="OSMTILE" zoom="1" lat="50" lon="-100" controls>
<map-layer label="CBMT" src="../refactoring-temporary/osm.mapml" checked></map-layer>
</mapml-viewer>

<p><b>References</b></p>
<ul>
<li>
Use case: <a href="https://maps4html.org/HTML-Map-Element-UseCases-Requirements/#use-case-color-scheme">Customize the color scheme (light/dark or high contrast)</a>
</li>
<li>
HTML <code>&lt;meta name="color-scheme"&gt;</code>
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme">https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#:~:text=color-scheme">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#:~:text=color-scheme</a></li>
</ul>
</li>
<li>
CSS <code>color-scheme</code> property
<ul>
<li><a href="https://drafts.csswg.org/css-color-adjust/#color-scheme-prop">https://drafts.csswg.org/css-color-adjust/#color-scheme-prop</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme">https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme</a></li>
</ul>
</li>
<li>CSS <code>prefers-color-scheme</code> media feature
<ul>
<li><a href="https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme">https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme">https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme</a></li>
</ul>
</li>
<li>Articles
<ul>
<li><a href="https://web.dev/color-scheme/">https://web.dev/color-scheme/</a></li>
<li><a href="https://web.dev/prefers-color-scheme/">https://web.dev/prefers-color-scheme/</a></li>
</ul>
</li>
</ul>
</body>
</html>
15 changes: 15 additions & 0 deletions styling/media-queries/match-media/prefers-color-scheme/dark.mapml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<mapml- xmlns="http://www.w3.org/1999/xhtml">
<map-head>
<map-title>pmtiles - dark theme</map-title>
<map-link rel="stylesheet" type="application/pmtiles+stylesheet" href="darkTheme.js"></map-link>
<map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
<map-link rel="self style" title="Dark theme" href="dark.mapml"></map-link>
<map-link rel="style" title="Light theme" href="light.mapml"></map-link>
<map-meta name="extent" content="top-left-easting=-11625919, top-left-northing=5565456, bottom-right-easting=-11479160, bottom-right-northing=5494446"></map-meta>
</map-head>
<map-body>
<map-extent units="OSMTILE" checked="checked" hidden="hidden">
<map-link rel="tile" type="application/pmtiles" tref="https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=dark"></map-link>
</map-extent>
</map-body>
</mapml->
6 changes: 6 additions & 0 deletions styling/media-queries/match-media/prefers-color-scheme/darkTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 };
104 changes: 104 additions & 0 deletions styling/media-queries/match-media/prefers-color-scheme/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="color-scheme" content="dark light">
<title>matchMedia API</title>
<script type="module" src="../../../../dist/mapml.js"></script>
<link rel="stylesheet" href="../../../../global.css">
<style>
body {
display: flex;
}

mapml-viewer {
flex: 2;
height: 50vh;
}

.description {
padding: 20px;
flex: 1;
}

@media (max-width: 768px) {
.desktop-only {
display: none;
}

body {
flex-direction: column;
}
}
</style>
</head>
<body>
<template id="layers">
<map-layer id="light" src="light.mapml" checked></map-layer>
<map-layer id="dark" src="dark.mapml" checked></map-layer>
</template>

<script>
document.addEventListener('DOMContentLoaded',(e)=>{
let l, map = document.querySelector('mapml-viewer'),
preferenceMatcher = map.matchMedia('(prefers-color-scheme: dark)'),
prefersDark = preferenceMatcher.matches === 'true',
t = document.querySelector('template'),
light = t.content.querySelector('#light').cloneNode(true),
dark = t.content.querySelector('#dark').cloneNode(true);
light.removeAttribute('id');
dark.removeAttribute('id');

const changePreference = (prefersDark) => {
if (prefersDark) {
map.appendChild(dark);
} else {
map.appendChild(light);
}
if (map.layers.length > 1) {
map.querySelector('map-layer').remove();
}
};
changePreference(prefersDark);
const changeHandler = (e) => {
let prefersDark = preferenceMatcher.matches === 'true';
changePreference(prefersDark);
};
preferenceMatcher.addEventListener('change', changeHandler);

});
</script>

<mapml-viewer projection="OSMTILE" zoom="9" lat="44.630550504861795" lon="-103.86611938476564" controls>
</mapml-viewer>
<div class="description">
<h2>Introduction to Adaptive Color Scheme for <code>mapml-viewer</code></h2>
<p>This experiment demonstrates the integration of adaptive color schemes for the <code>mapml-viewer</code> 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.</p>
<p>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 <code>&lt;meta name="color-scheme" content="dark light"&gt;</code> attribute to signal to the browser the compatibility with both modes, ensuring a responsive and user-friendly experience.</p>
<h3 class="desktop-only">How to Emulate OS Preferred Color Scheme in Browsers</h3>
<ul class="desktop-only">
<li><strong>Google Chrome:</strong>
<ul>
<li>Go to <code>chrome://settings/appearance</code> and toggle the "Theme" to "System default" or "Dark."</li>
yushan-mu marked this conversation as resolved.
Show resolved Hide resolved
<li>Alternatively, open DevTools (<code>F12</code> or right-click > Inspect) > click on the "More Tools" menu (three dots) > "Rendering" > "Emulate CSS prefers-color-scheme" > select "light" or "dark."</li>
</ul>
</li>
<li><strong>Mozilla Firefox:</strong>
<ul>
<li>Go to <code>about:addons</code>, select "Themes," and set it to "System Theme" for automatic adjustment.</li>
<li>In DevTools, go to the "Settings" icon, scroll to the "Developer Tools" section, and under "Preferences," find "Emulate CSS prefers-color-scheme" to choose light or dark mode.</li>
</ul>
</li>
<li><strong>Microsoft Edge:</strong>
<ul>
<li>Open <code>edge://settings/appearance</code> and set the theme to "System default" or "Dark."</li>
<li>In DevTools, go to "More Tools" > "Rendering" and select the preferred color scheme under "Emulate CSS prefers-color-scheme."</li>
</ul>
</li>
</ul>
<p>These settings will allow you to see how the <code>mapml-viewer</code> element adapts to different color schemes in real-time, providing an intuitive user experience that aligns with system preferences.</p>
</div>

</body>
</html>
15 changes: 15 additions & 0 deletions styling/media-queries/match-media/prefers-color-scheme/light.mapml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<mapml- xmlns="http://www.w3.org/1999/xhtml">
<map-head>
<map-title>pmtiles - light theme</map-title>
<map-link rel="stylesheet" type="application/pmtiles+stylesheet" href="lightTheme.js"></map-link>
<map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
<map-link rel="style" title="Dark theme" href="dark.mapml"></map-link>
<map-link rel="self style" title="Light theme" href="light.mapml"></map-link>
<map-meta name="extent" content="top-left-easting=-11625919, top-left-northing=5565456, bottom-right-easting=-11479160, bottom-right-northing=5494446"></map-meta>
</map-head>
<map-body>
<map-extent units="OSMTILE" checked="checked" hidden="hidden">
<map-link rel="tile" type="application/pmtiles" tref="https://maps4html.org/experiments/vector-tiles/pmtiles/spearfish.pmtiles?theme=light"></map-link>
</map-extent>
</map-body>
</mapml->
14 changes: 14 additions & 0 deletions styling/media-queries/match-media/prefers-color-scheme/lightTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 };
Loading