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

Improve media query experiment #129

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

Improve media query experiment #129

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
da42106
Update media-queries experiment so that it uses geoserver layers,
prushforth Apr 29, 2024
647b20b
Media query experimentation
prushforth May 3, 2024
72e0d55
Change page title for media query page to what the map represents
prushforth May 29, 2024
7c31c63
Merge branch 'Maps4HTML:main' into media-query
prushforth May 29, 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
45 changes: 45 additions & 0 deletions styling/media-queries/canada.mapml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<mapml- xmlns="http://www.w3.org/1999/xhtml">
<map-head>
<map-title>Canada's Provinces and Territories</map-title>
<map-meta charset="UTF-8" />
<map-meta content="text/mapml" http-equiv="Content-Type" />
<map-meta name="extent"
content="top-left-easting=-2465257.29,top-left-northing=3952792.70,bottom-right-easting=3078646.82,bottom-right-northing=-883189.06" />
<map-meta name="cs" content="pcrs" />
<map-meta name="projection" content="CBMTILE" />
<!--

Legal values of prefers-map-content (tentatively) include:

"no-preference" User expresses no map content preference (default)
"image" whole-map images
"tiled-image" Mosaiced Tiled images compose the map
"feature" Interactive Features (accessible via keyboard, hover, whatnot)
"vector-tile" CSS-friendly Vector tiles mosaiced to compose the map
"table" One or more tables considered 'equivalent' to the map. May open in another tab tbd...
-->
<map-link rel="style" media="prefers-map-content=image" href="cbmt.mapml"
title="User Prefers WMS GetMap" />
<map-link rel="style" media="prefers-map-content=feature"
href="http://localhost:8080/geoserver/nrcan/wms?LAYERS=canada-styled-vectors&amp;BBOX=-2465257.292723763%2C-883189.0600199443%2C3078646.820419571%2C3952792.698494108&amp;HEIGHT=768&amp;WIDTH=669&amp;SRS=MapML%3ACBMTILE&amp;STYLES=provinces-sld-1&amp;FORMAT=text%2Fmapml&amp;format_options=mapml-wms-format%3Aimage%2Fpng&amp;SERVICE=WMS&amp;REQUEST=GetMap&amp;VERSION=1.3.0"
title="User Prefers Features" />
<map-link rel="style" media="prefers-map-content=vector-tile"
href="http://localhost:8080/geoserver/nrcan/wms?LAYERS=provinces&amp;BBOX=-2465257.292723763%2C-883189.0600199443%2C3078646.820419571%2C3952792.698494108&amp;HEIGHT=768&amp;WIDTH=669&amp;SRS=MapML%3ACBMTILE&amp;STYLES=provinces-sld-1&amp;FORMAT=text%2Fmapml&amp;format_options=mapml-wms-format%3Aimage%2Fpng&amp;SERVICE=WMS&amp;REQUEST=GetMap&amp;VERSION=1.3.0"
title="User Prefers Vector Tiles" />
<map-link rel="self style" media="prefers-map-content=tiled-image" href="canada.mapml" title="Tiled WMS GetMap" />
</map-head>
<map-body>
<map-extent label="CBMT - Lambert" units="CBMTILE" checked="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-input name="i" type="location" axis="i" units="tile" />
<map-input name="j" type="location" axis="j" units="tile" />
<map-link
tref="http://localhost:8080/geoserver/nrcan/gwc/service/wmts?request=GetFeatureInfo&amp;format=image/png&amp;i={i}&amp;j={j}&amp;TileCol={x}&amp;version=1.0.0&amp;layer=nrcan:provinces&amp;tilematrixset=CBMTILE&amp;tilematrix={z}&amp;TileRow={y}&amp;service=WMTS&amp;infoformat=text/mapml&amp;feature_count=50&amp;style=provinces-sld-1"
rel="query" />
</map-extent>
</map-body>
</mapml->
34 changes: 34 additions & 0 deletions styling/media-queries/cbmt.mapml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<mapml- xmlns="http://www.w3.org/1999/xhtml">
<map-head>
<map-title>Canada's Provinces and Territories</map-title>
<map-base href="http://localhost:8080/geoserver/wms" />
<map-meta charset="utf-8" />
<map-meta content="text/mapml;projection=CBMTILE" http-equiv="Content-Type" />
</map-head>
<map-body>
<map-extent units="CBMTILE" label="Canada Base Map - Transportation" checked="checked" hidden="hidden">
<map-input name="z" type="zoom" min="0" max="25" />
<map-input name="xmin" type="location" rel="map" position="top-left" axis="easting"
units="pcrs" min="-2750565.0" max="3583873.0" />
<map-input name="ymin" type="location" rel="map" position="bottom-left" axis="northing"
units="pcrs" min="-936639.0" max="4654175.0" />
<map-input name="xmax" type="location" rel="map" position="top-right" axis="easting"
units="pcrs" min="-2750565.0" max="3583873.0" />
<map-input name="ymax" type="location" rel="map" position="top-left" axis="northing"
units="pcrs" min="-936639.0" max="4654175.0" />
<map-input name="w" type="width" min="1" max="4079" />
<map-input name="h" type="height" min="1" max="4079" />
<map-link
tref="http://localhost:8080/geoserver/nrcan/wms?request=GetMap&amp;crs=MapML:CBMTILE&amp;service=WMS&amp;bbox={xmin},{ymin},{xmax},{ymax}&amp;layers=CBMT&amp;format=image/png&amp;width={w}&amp;styles=&amp;language=en&amp;version=1.3.0&amp;transparent=true&amp;height={h}"
rel="image" />
<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-input name="i" type="location" axis="i" units="tile" />
<map-input name="j" type="location" axis="j" units="tile" />
<map-link
tref="http://localhost:8080/geoserver/nrcan/gwc/service/wmts?request=GetFeatureInfo&amp;format=image/png&amp;i={i}&amp;j={j}&amp;TileCol={x}&amp;version=1.0.0&amp;layer=nrcan:provinces&amp;tilematrixset=CBMTILE&amp;tilematrix={z}&amp;TileRow={y}&amp;service=WMTS&amp;infoformat=text/mapml&amp;feature_count=50&amp;style=provinces-sld-1"
rel="query" />
</map-extent>
</map-body>
</mapml->
8 changes: 3 additions & 5 deletions styling/media-queries/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,13 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Minimum Snow and Ice</title>
<title>Provinces and Territories of Canada</title>
<script type="module" src="../../dist/mapml-viewer.js"></script>
<link rel="stylesheet" href="../../global.css">
</head>
<body>
<mapml-viewer projection="CBMTILE" zoom="4" lat="60" lon="-90" controls>
<layer- label="CBMT" src="../../refactoring-temporary/cbmtile-cbmt.mapml" checked hidden></layer->
<layer- label="Minimum Snow and Ice" src="msi.mapml" checked></layer->
<layer- label="Permanent snow and ice (prob. 94% or more) WMS GetMap" src="msi-94-plus.mapml" checked></layer->
<mapml-viewer projection="CBMTILE" zoom="3" lat="62.9" lon="-88.8" controls>
<layer- label="Canada's Provinces and Territories" checked src="canada.mapml"></layer->
</mapml-viewer>
</body>
</html>
182 changes: 182 additions & 0 deletions styling/media-queries/table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
<!DOCTYPE html>
<html>
<head>
<title>mapml-viewer feature table mockup - try 1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="https://mdn.github.io/learning-area/html/tables/assessment-finished/minimal-table.css">-->
<style>
html {
font-family: sans-serif;
}

table {
border-collapse: collapse;
border: 2px solid rgb(200,200,200);
letter-spacing: 1px;
font-size: 0.8rem;
}

td, th {
border: 1px solid rgb(190,190,190);
padding: 10px 20px;
}

th {
background-color: rgb(235,235,235);
}

td {
text-align: center;
}

tr:nth-child(even) td {
background-color: rgb(250,250,250);
}

tr:nth-child(odd) td {
background-color: rgb(245,245,245);
}

caption {
padding: 10px;
}
</style>
</head>
<body>
<!-- the following content is based on https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html -->
<table>
<caption>A map of the provinces and territories of Canada, 2024</caption>
<!-- the colgroup structures the table https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup#usage_notes -->
<colgroup>
<!-- the first column is optionally subdivided into two compartments left and right (?) -->
<col>
<!-- the second column has an inline style specifiying the border style -->
<col style="border: 2px solid black">
<!-- this groups the remaining 9 columns into one related block of columns -->
<!-- column groups can be styled via some css properties, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col#usage_notes -->
<col span="4">
</colgroup>
<thead>
<tr>
<th scope="col">Feature Name</th><!-- map-featurecaption is the accessible name -->
<th scope="col">Feature Properties</th>
<th scope="col">Geometry details</th> <!-- geom. type, any links from the geom to elsewhere are presented as a list here -->
<th scope="col">Zoom to here link</th> <!-- set the map extent to the bounds of the feature, regenerate table -->
<th scope="col">Layer</th>
<th scope="col">Rank by: Least distance from map center</th>
</tr>
</thead>
<tbody>
<!-- one row (tr) for each layer, whether it has features or not -->
<tr>
<!-- the rowspan attribute value should be set to the count of features from this layer -->
<!-- the colspan attribute -->
<th scope="row">Manitoba</th>
<td>
</td>
<td>Details of the geometry: identify its type, and list any links in it</td>
<td><a href="Zoom to here link">Filter map contents by bounds</a></td>
<td rowspan="13">Canada's Provinces and Territories</td>
<td>1</td>
</tr>
<tr>
<th scope="row">Saskatchewan</th>
<td>
</td>
<td>Details of the geometry: identify its type, and list any links in it</td>
<td><a href="Zoom to here link">Filter map contents by bounds</a></td>
<td>2</td>
</tr>
<tr>
<th scope="row">Nunavut</th>
<td>
</td>
<td>Details of the geometry: identify its type, and list any links in it</td>
<td><a href="Zoom to here link">Filter map contents by bounds</a></td>
<td>3</td>
</tr>
<tr>
<th scope="row">Alberta</th>
<td>
</td>
<td>Details of the geometry: identify its type, and list any links in it</td>
<td><a href="Zoom to here link">Filter map contents by bounds</a></td>
<td>4</td>
</tr>
<tr>
<th scope="row">Quebec</th>
<td>
</td>
<td>Details of the geometry: identify its type, and list any links in it</td>
<td><a href="Zoom to here link">Filter map contents by bounds</a></td>
<td>5</td>
</tr>
<tr>
<th scope="row">Ontario</th>
<td>
</td>
<td>Details of the geometry: identify its type, and list any links in it</td>
<td><a href="Zoom to here link">Filter map contents by bounds</a></td>
<td>6</td>
</tr>
<tr>
<th scope="row">Northwest Territories</th>
<td>
</td>
<td>Details of the geometry: identify its type, and list any links in it</td>
<td><a href="Zoom to here link">Filter map contents by bounds</a></td>
<td>7</td>
</tr>
<tr>
<th scope="row">Newfoundland and Labrador</th>
<td>
</td>
<td>Details of the geometry: identify its type, and list any links in it</td>
<td><a href="Zoom to here link">Filter map contents by bounds</a></td>
<td>8</td>
</tr>
<tr>
<th scope="row">British Columbia</th>
<td>
</td>
<td>Details of the geometry: identify its type, and list any links in it</td>
<td><a href="Zoom to here link">Filter map contents by bounds</a></td>
<td>9</td>
</tr>
<tr>
<th scope="row">Yukon</th>
<td>
</td>
<td>Details of the geometry: identify its type, and list any links in it</td>
<td><a href="Zoom to here link">Filter map contents by bounds</a></td>
<td>10</td>
</tr>
<tr>
<th scope="row">New Brunswick</th>
<td>
</td>
<td>Details of the geometry: identify its type, and list any links in it</td>
<td><a href="Zoom to here link">Filter map contents by bounds</a></td>
<td>11</td>
</tr>
<tr>
<th scope="row">Prince Edward Island</th>
<td>
</td>
<td>Details of the geometry: identify its type, and list any links in it</td>
<td><a href="Zoom to here link">Filter map contents by bounds</a></td>
<td>12</td>
</tr>
<tr>
<th scope="row">Nova Scotia</th>
<td>
</td>
<td>Details of the geometry: identify its type, and list any links in it</td>
<td><a href="Zoom to here link">Filter map contents by bounds</a></td>
<td>13</td>
</tr>
</tbody>
</table>
</body>
</html>
Loading