Skip to content

Commit

Permalink
Update map-projection media query experiment.
Browse files Browse the repository at this point in the history 
Revert change to color-scheme experiment.
  • Loading branch information
prushfor authored and prushfor committed Nov 15, 2024
1 parent 36e98f5 commit 417783e
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 45 deletions.
9 changes: 3 additions & 6 deletions styling/media-queries/match-media/map-projection/dark.mapml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,8 @@
<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 label="CBMT - Lambert" units="CBMTILE" checked >
<map-input name="z" type="zoom" min="0" max="18"></map-input>
<map-input name="y" type="location" units="tilematrix" axis="row"></map-input>
<map-input name="x" type="location" units="tilematrix" axis="column"></map-input>
<map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
<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->
</mapml->
61 changes: 32 additions & 29 deletions styling/media-queries/match-media/map-projection/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<title>Map Projection Toggle</title>
<script type="module" src="../../../../dist/mapml.js"></script>
<link rel="stylesheet" href="../../../../global.css">
<style>
<style media="">
body {
display: flex;
}
Expand Down Expand Up @@ -36,44 +36,47 @@
</head>

<body>
<template id="layers">
<map-layer id="OSMTILE" src="light.mapml" checked></map-layer>
<map-layer id="CBMTILE" checked>
<map-extent label="CBMT - Lambert" units="CBMTILE" checked >
<map-input name="z" type="zoom" min="0" max="18"></map-input>
<map-input name="y" type="location" units="tilematrix" axis="row"></map-input>
<map-input name="x" type="location" units="tilematrix" axis="column"></map-input>
<map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
</map-extent>
</map-layer>
</template>

<script>
document.addEventListener('DOMContentLoaded', () => {
const map = document.querySelector('mapml-viewer');
const template = document.querySelector('#layers');

const OSM = template.content.querySelector('#OSMTILE').cloneNode(true);
const CBMT = template.content.querySelector('#CBMTILE').cloneNode(true);

const loadLayer = (projection) => {
map.innerHTML = '';
map.setAttribute('projection', projection);
let projectionMatcher = map.matchMedia('(map-projection: OSMTILE)'),
osmtile = map.querySelector('#OSMTILE'),
cbmtile = map.querySelector('#CBMTILE');

const layer = projection === 'OSMTILE'
? OSM.cloneNode(true)
: CBMT.cloneNode(true);
map.appendChild(layer);
const hideLayer = (matchesOSMTILE) => {
map.whenLayersReady().then(() => {
if (matchesOSMTILE) {
cbmtile.setAttribute('hidden','hidden');
osmtile.removeAttribute('hidden');
} else {
osmtile.setAttribute('hidden','hidden');
cbmtile.removeAttribute('hidden');
}
});
};

loadLayer('OSMTILE');

document.querySelector('.switchOSM').addEventListener('click', () => loadLayer('OSMTILE'));
document.querySelector('.switchCBMT').addEventListener('click', () => loadLayer('CBMTILE'));
hideLayer(projectionMatcher.matches === 'true');
document.querySelector('.switchOSM').addEventListener('click', () => map.projection='OSMTILE');
document.querySelector('.switchCBMT').addEventListener('click', () => map.projection='CBMTILE');

const changeHandler = (e) => {
let matchesOSMTILE = projectionMatcher.matches === 'true';
hideLayer(matchesOSMTILE);
};
projectionMatcher.addEventListener('change', changeHandler);
});
</script>

<mapml-viewer projection="OSMTILE" zoom="9" lat="44.630550504861795" lon="-103.86611938476564" controls>
<map-layer media="(map-projection: OSMTILE)" id="OSMTILE" src="light.mapml" checked></map-layer>
<map-layer media="(map-projection: CBMTILE)" id="CBMTILE" checked>
<map-extent label="CBMT - Lambert" units="CBMTILE" checked >
<map-input name="z" type="zoom" min="0" max="18"></map-input>
<map-input name="y" type="location" units="tilematrix" axis="row"></map-input>
<map-input name="x" type="location" units="tilematrix" axis="column"></map-input>
<map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" ></map-link>
</map-extent>
</map-layer>
</mapml-viewer>

<div class="description">
Expand Down
19 changes: 9 additions & 10 deletions styling/media-queries/match-media/prefers-color-scheme/dark.mapml
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
<mapml- xmlns="http://www.w3.org/1999/xhtml">
<map-head>
<map-title>Canada Base Map - Transportation (CBMT)</map-title>
<map-meta http-equiv="Content-Type" content="text/mapml;projection=CBMTILE"></map-meta>
<map-meta charset="utf-8"></map-meta>
<map-link rel="license" href="https://www.nrcan.gc.ca/earth-sciences/geography/topographic-information/free-data-geogratis/licence/17285" map-title="Canada Base Map © Natural Resources Canada"/>
<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="CBMTILE" checked="checked" hidden="hidden">
<map-input name="z" type="zoom" value="17" min="0" max="17"></map-input>
<map-input name="y" type="location" units="tilematrix" axis="row" min="29750" max="34475"></map-input>
<map-input name="x" type="location" units="tilematrix" axis="column" min="26484" max="32463"></map-input>
<map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t" />
<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->
</mapml->

0 comments on commit 417783e

Please sign in to comment.