Skip to content

Commit dd0c672

Browse files
author
Peter Rushforth
committed
Add inputs section to "Shared Primitives" section, add map-select/map-option
example based on territorial evolution map as one example of a shared primitive (elements select and option in this case)
1 parent 0b49fbc commit dd0c672

File tree

2 files changed

+67
-0
lines changed

2 files changed

+67
-0
lines changed

‎index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,17 @@ <h2>Custom Projections aka the Georeferencing API</h2>
7171

7272
<section id="client-api">
7373
<h2>Shared primitives</h2>
74+
<section id="inputs">
75+
<h3>Inputs</h3>
76+
<ul class="example">
77+
<li><a href="inputs/map-select/">(map-)select / (map-)option</a>
78+
</ul>
79+
</section>
7480
<ul class="example">
7581
<li><a href="api/custom-map-ui/">Custom Map UI</a>
7682
<li><a href="progressive-enhancement/">Progressive Enhancement / Graceful Degradation</a>
7783
</ul>
84+
7885
<h2>DOM API</h2>
7986
<ul class="example">
8087
<li><a href="api/map-feature/">HTMLFeatureElement</a>

‎inputs/map-select/index.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
<title>&lt;map-select&gt; / &lt;map-option&gt; </title>
7+
<script type="module" src="../../dist/mapml.js"></script>
8+
<link rel="stylesheet" href="../../global.css">
9+
</head>
10+
<body>
11+
<mapml-viewer projection="CBMTILE" zoom="3" lat="60.4" lon="-82.6" controls>
12+
<map-layer checked>
13+
<map-title>Territorial Evolution</map-title>
14+
<map-link rel="license" href="https://geoappext.nrcan.gc.ca/arcgis/rest/services/FGP/TE/MapServer" title="Open Government Licence - Canada"></map-link>
15+
<map-link rel="legend" href="https://geoappext.nrcan.gc.ca/arcgis/rest/services/FGP/TE/MapServer/legend"></map-link>
16+
<map-extent label="WMS" units="CBMTILE" checked>
17+
<map-input name="z" type="zoom" value="7" min="2" max="7"></map-input>
18+
<map-input name="xmin" type="location" units="pcrs" position="top-left" axis="easting" min="-7786477.0" max="7148753.0"></map-input>
19+
<map-input name="ymin" type="location" units="pcrs" position="bottom-left" axis="northing" min="-927808.0" max="7928344.0"></map-input>
20+
<map-input name="xmax" type="location" units="pcrs" position="top-right" axis="easting" min="-7786477.0" max="7148753.0"></map-input>
21+
<map-input name="ymax" type="location" units="pcrs" position="top-left" axis="northing" min="-927808.0" max="7928344.0"></map-input>
22+
<map-input name="w" type="width"></map-input>
23+
<map-input name="h" type="height"></map-input>
24+
<map-select name="year">
25+
<!-- the server in this case is organized with particular group
26+
of layers to render a particular year. These layers are
27+
provided to the WMS LAYERS parameter according to that
28+
standard's convention, as a comma-separated list of layer
29+
names (in the case of this server implementation, the layer
30+
names are integer numbers) -->
31+
<map-option label="1867">226,227,228,230,232,233,234</map-option>
32+
<map-option label="1870">216,217,218,220,222,223,224</map-option>
33+
<map-option label="1871">206,207,208,210,212,213,214</map-option>
34+
<map-option label="1873">196,197,198,200,202,203,204</map-option>
35+
<map-option label="1874">186,187,188,190,192,193,194</map-option>
36+
<map-option label="1876">176,177,178,180,182,183,184</map-option>
37+
<map-option label="1880">166,167,168,170,172,173,174</map-option>
38+
<map-option label="1881">156,157,158,160,162,163,164</map-option>
39+
<map-option label="1882">146,147,148,150,152,153,154</map-option>
40+
<map-option label="1886">136,137,138,140,142,143,144</map-option>
41+
<map-option label="1889">126,127,128,130,132,133,134</map-option>
42+
<map-option label="1895">115,116,117,118,120,122,123,124</map-option>
43+
<map-option label="1897">104,105,106,107,109,111,112,113</map-option>
44+
<map-option label="1898">93,94,95,96,98,100,101,102</map-option>
45+
<map-option label="1901">82,83,84,85,87,89,90,91</map-option>
46+
<map-option label="1905">71,72,73,74,76,78,79,80</map-option>
47+
<map-option label="1912">60,61,62,63,65,67,68,69</map-option>
48+
<map-option label="1920">49,50,51,52,54,56,57,58</map-option>
49+
<map-option label="1927">38,39,40,41,43,45,46,47</map-option>
50+
<map-option label="1949">28,29,30,32,34,35,36</map-option>
51+
<map-option label="1999">19,20,22,24,25,26</map-option>
52+
<map-option label="2001">10,11,13,15,16,17</map-option>
53+
<map-option label="2003">1,2,4,6,7,8</map-option>
54+
</map-select>
55+
<map-link rel="image" tref="https://geoappext.nrcan.gc.ca/arcgis/services/FGP/TE/MapServer/WMSServer?SERVICE=WMS&amp;VERSION=1.3.0&amp;CRS=EPSG:3978&amp;LAYERS={year}&amp;BBOX={xmin},{ymin},{xmax},{ymax}&amp;REQUEST=GetMap&amp;FORMAT=image/png&amp;TRANSPARENT=FALSE&amp;WIDTH={w}&amp;HEIGHT={h}&amp;STYLES="></map-link>
56+
</map-extent>
57+
</map-layer>
58+
</mapml-viewer>
59+
</body>
60+
</html>

0 commit comments

Comments
 (0)