Skip to content

Commit 8997079

Browse files
prushforthprushforth
committed
[AUTO] Sync MapML Build
1 parent cd689d5 commit 8997079

11 files changed

Lines changed: 463 additions & 0 deletions

File tree

‎dist/MapML.js/dist/images/layers-2x.png‎

1.23 KB
Loading

‎dist/MapML.js/dist/images/layers.png‎

696 Bytes
Loading

‎dist/MapML.js/dist/images/marker-icon-2x.png‎

2.41 KB
Loading

‎dist/MapML.js/dist/images/marker-icon.png‎

1.43 KB
Loading

‎dist/MapML.js/dist/images/marker-shadow.png‎

618 Bytes
Loading

‎dist/MapML.js/dist/images/w3community.ico‎

1.12 KB
Binary file not shown.

‎dist/MapML.js/dist/index.html‎

Lines changed: 268 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
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>index-map.html</title>
7+
<script type="module" src="./mapml.js"></script>
8+
<style>
9+
html,
10+
body {
11+
height: 100%;
12+
}
13+
* {
14+
margin: 0;
15+
padding: 0;
16+
}
17+
18+
/* Specifying the `:defined` selector is recommended to style the map
19+
element, such that styles don't apply when fallback content is in use
20+
(e.g. when scripting is disabled or when custom/built-in elements isn't
21+
supported in the browser). */
22+
mapml-viewer:defined {
23+
/* Responsive map. */
24+
max-width: 100%;
25+
26+
/* Full viewport. */
27+
width: 100%;
28+
height: 50%;
29+
30+
/* Remove default (native-like) border. */
31+
border: none;
32+
33+
vertical-align: middle;
34+
}
35+
36+
/* Pre-style to avoid FOUC of inline map-layer and fallback content. */
37+
mapml-viewer:not(:defined) > * {
38+
display: none;
39+
}
40+
41+
/* Pre-style to avoid Layout Shift. */
42+
mapml-viewer:not(:defined) {
43+
display: inline-block;
44+
contain: size;
45+
contain-intrinsic-size: 304px 154px;
46+
}
47+
48+
/* Specifying the `:defined` selector is recommended to style the map
49+
element, such that styles don't apply when fallback content is in use
50+
(e.g. when scripting is disabled or when custom/built-in elements isn't
51+
supported in the browser). */
52+
map[is="web-map"]:defined {
53+
/* Responsive map. */
54+
max-width: 100%;
55+
56+
/* Full viewport. */
57+
width: 100%;
58+
height: 50%;
59+
60+
/* Remove default (native-like) border. */
61+
border: none;
62+
63+
vertical-align: middle;
64+
}
65+
66+
/* Pre-style to avoid Layout Shift. */
67+
map[is="web-map"]:not(:defined) {
68+
display: inline-block;
69+
contain: size;
70+
contain-intrinsic-size: 304px 154px;
71+
}
72+
73+
/* Pre-style to avoid FOUC of inline map-layer and fallback content. */
74+
map[is="web-map"]:not(:defined) + img[usemap],
75+
map[is="web-map"]:not(:defined) > :not(area):not(.mapml-web-map) {
76+
display: none;
77+
}
78+
79+
/* Ensure inline layer content is hidden if custom/built-in elements isn't
80+
supported, or if javascript is disabled. This needs to be defined separately
81+
from the above, because the `:not(:defined)` selector invalidates the entire
82+
declaration in browsers that do not support it. */
83+
map-layer {
84+
display: none;
85+
}
86+
</style>
87+
<noscript>
88+
<style>
89+
/* Ensure fallback content (children of the map element) is displayed if
90+
custom/built-in elements is supported but javascript is disabled. */
91+
mapml-viewer:not(:defined) > :not(map-layer) {
92+
display: initial;
93+
}
94+
95+
/* "Reset" the properties used to pre-style (to avoid Layout Shift) if
96+
custom/built-in elements is supported but javascript is disabled. */
97+
mapml-viewer:not(:defined) {
98+
display: initial;
99+
contain: initial;
100+
contain-intrinsic-size: initial;
101+
}
102+
/* Ensure client-side image map fallbacks are displayed if custom/built-in
103+
elements is supported but javascript is disabled. */
104+
map[is="web-map"]:not(:defined) + img[usemap] {
105+
display: initial;
106+
}
107+
108+
/* "Reset" the properties used to pre-style (to avoid Layout Shift) if
109+
custom/built-in elements is supported but javascript is disabled. */
110+
map[is="web-map"]:not(:defined) {
111+
display: initial;
112+
contain: initial;
113+
contain-intrinsic-size: initial;
114+
}
115+
</style>
116+
</noscript>
117+
</head>
118+
<body>
119+
<!-- this map defines > 1 searchable layer each with different results format,
120+
so it requires a custom search handler (see below) to render the results -->
121+
<mapml-viewer lang="en" projection="CBMTILE" controls controlslist="geolocation search" zoom="16" lat="45.406314" lon="-75.6883335">
122+
<map-layer label="Canada Base Map - Transportation" checked>
123+
<map-link rel="suggestions" tref="https://geogratis.gc.ca/services/geoname/en/geonames.json?q={searchTerms}*&num=20"></map-link>
124+
<map-link rel="search" tref="https://geogratis.gc.ca/services/geoname/en/geonames.json?q={searchTerms}&num=20"></map-link>
125+
<map-extent checked units="CBMTILE">
126+
<map-meta name="extent" content="top-left-easting=-5388605, top-left-northing=7005413, bottom-right-easting=3895643, bottom-right-northing=-4427255"></map-meta>
127+
<map-link rel="license" href="https://open.canada.ca/en/open-government-licence-canada" title="Open Government Licence - Canada"></map-link>
128+
<map-input name="z" type="zoom" min="0" max="17" value="17"></map-input>
129+
<map-input name="y" type="location" units="tilematrix" axis="row"></map-input>
130+
<map-input name="x" type="location" units="tilematrix" axis="column"></map-input>
131+
<map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}?m4h=t"></map-link>
132+
</map-extent>
133+
</map-layer>
134+
<map-layer label="Current Conditions" checked>
135+
<map-link rel="license" href="https://csw.open.canada.ca/geonetwork/srv/csw?service=CSW&version=2.0.2&request=GetRecordById&outputschema=csw:IsoRecord&elementsetname=full&id=1f864766-7f7f-4be7-8292-295065c65c78" title="TC211 Metadata for Current Conditions"></map-link>
136+
<map-link rel="legend" href="https://geo.weather.gc.ca/geomet?version=1.3.0&service=WMS&request=GetLegendGraphic&sld_version=1.1.0&layer=CURRENT_CONDITIONS&format=image/png&STYLE=default" title="default" width="35" height="5"></map-link>
137+
<map-extent units="CBMTILE" checked="">
138+
<map-input name="xmin" type="location" position="top-left" axis="easting" units="pcrs"></map-input>
139+
<map-input name="ymin" type="location" position="bottom-left" axis="northing" units="pcrs"></map-input>
140+
<map-input name="xmax" type="location" position="bottom-right" axis="easting" units="pcrs"></map-input>
141+
<map-input name="ymax" type="location" position="top-right" axis="northing" units="pcrs"></map-input>
142+
<map-input name="w" type="width" min="1" max="10000"></map-input>
143+
<map-input name="h" type="height" min="1" max="10000"></map-input>
144+
<map-input name="i" type="location" axis="i" units="map"></map-input>
145+
<map-input name="j" type="location" axis="j" units="map"></map-input>
146+
<map-select id="style-selector" name="style">
147+
<map-option value="default" selected="">default</map-option>
148+
</map-select>
149+
<map-link rel="image" tref="https://geo.weather.gc.ca/geomet/?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&LAYERS=CURRENT_CONDITIONS&WIDTH={w}&HEIGHT={h}&FORMAT=image%2Fpng&TRANSPARENT=TRUE&STYLES={style}&CRS=EPSG:3978&BBOX={xmin},{ymin},{xmax},{ymax}"></map-link>
150+
<map-link rel="query" data-query-link="true" tref="https://geo.weather.gc.ca/geomet/?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetFeatureInfo&LAYERS=CURRENT_CONDITIONS&QUERY_LAYERS=CURRENT_CONDITIONS&WIDTH={w}&HEIGHT={h}&FORMAT=image%2Fpng&TRANSPARENT=TRUE&INFO_FORMAT=application%2Fjson&STYLES={style}&CRS=EPSG:3978&BBOX={xmin},{ymin},{xmax},{ymax}&I={i}&J={j}"></map-link>
151+
</map-extent>
152+
</map-layer>
153+
<map-layer label="Photon Search" checked>
154+
<map-meta name="projection" content="CBMTILE"></map-meta>
155+
<map-link rel="suggestions" tref="https://photon.komoot.io/api?q={searchTerms}"></map-link>
156+
<map-link rel="search" tref="https://photon.komoot.io/api?q={searchTerms}"></map-link>
157+
</map-layer>
158+
</mapml-viewer>
159+
<!-- this map uses the default search handler (supports GeoJSON search results only) -->
160+
<map lang="fr" is="web-map" projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation search">
161+
<map-layer data-testid="osm-layer" label="OpenStreetMap" checked >
162+
163+
<map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
164+
<!-- Register your own geonames.org account at https://www.geonames.org/login
165+
and enable web services at https://www.geonames.org/manageaccount
166+
then replace username=demo with your username
167+
<map-link rel="search" tref="https://secure.geonames.org/searchJSON?q={searchTerms}&maxRows=25&inclBbox=true&username=prushforth"></map-link>
168+
<map-link rel="suggestions" tref="https://secure.geonames.org/searchJSON?name_startsWith={searchTerms}&maxRows=25&inclBbox=true&orderby=relevance&username=prushforth"></map-link>
169+
-->
170+
<!-- default search handler uses GeoJSON responses that have a quasi-standard 'schema' -->
171+
<map-link rel="suggestions" tref="https://photon.komoot.io/api?q={searchTerms}"></map-link>
172+
<map-link rel="search" tref="https://photon.komoot.io/api?q={searchTerms}"></map-link>
173+
<map-extent units="OSMTILE" checked="checked">
174+
<map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
175+
<map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
176+
<map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
177+
<map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
178+
</map-extent>
179+
</map-layer>
180+
<map-layer label="Restaurants" checked="">
181+
<map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
182+
<map-extent units="OSMTILE" checked="">
183+
<map-select id="restaurants" name="cusine">
184+
<map-option value="restaurants" selected="selected">All cuisines</map-option>
185+
<map-option value="african">African</map-option>
186+
<map-option value="asian">Asian</map-option>
187+
<map-option value="cajun">Cajun</map-option>
188+
<map-option value="indian">Indian</map-option>
189+
<map-option value="italian">Italian</map-option>
190+
<map-option value="mexican">Mexican</map-option>
191+
</map-select>
192+
<map-link tref="https://maps4html.org/experiments/shared/restaurants/{cusine}.mapml" rel="features"></map-link>
193+
</map-extent>
194+
</map-layer>
195+
</map>
196+
<script>
197+
document.addEventListener('DOMContentLoaded', () => {
198+
const viewer = document.querySelector('mapml-viewer');
199+
200+
function toItems(responses, includeValue) {
201+
const items = [];
202+
for (const r of responses) {
203+
const data = r.data;
204+
if (!data) continue;
205+
// geogratis format (items array)
206+
if (data.items) {
207+
for (const item of data.items) {
208+
const entry = {
209+
text: item.name
210+
+ (item.concise ? ' (' + item.concise.code + ')' : '')
211+
+ (item.province ? ', ' + item.province.code : ''),
212+
lat: item.latitude,
213+
lng: item.longitude,
214+
bbox: item.bbox || undefined
215+
};
216+
if (includeValue) entry.value = item.name;
217+
items.push(entry);
218+
}
219+
}
220+
// GeoJSON format (Photon etc.)
221+
if (data.features) {
222+
for (const feature of data.features) {
223+
const props = feature.properties || {};
224+
const parts = [props.name];
225+
for (const key of ['city', 'county', 'state', 'country']) {
226+
if (props[key] && props[key] !== props.name) parts.push(props[key]);
227+
}
228+
const coords = feature.geometry?.coordinates || [];
229+
const bbox = feature.bbox
230+
|| (props.extent?.length === 4 ? props.extent : undefined);
231+
const entry = {
232+
text: parts.filter(Boolean).join(', ') || 'Unnamed',
233+
lat: coords[1],
234+
lng: coords[0],
235+
bbox: bbox || undefined
236+
};
237+
if (includeValue) entry.value = props.name || entry.text;
238+
items.push(entry);
239+
}
240+
}
241+
}
242+
return items;
243+
}
244+
245+
viewer.addEventListener('mapsuggestions', (e) => {
246+
e.preventDefault();
247+
e.detail.setResults(toItems(e.detail.responses, true));
248+
});
249+
250+
viewer.addEventListener('mapsearch', (e) => {
251+
e.preventDefault();
252+
const items = toItems(e.detail.responses, false);
253+
e.detail.setResults(items);
254+
// Auto-navigate to the first result (matches default handler behaviour)
255+
if (items.length > 0) {
256+
const first = items[0];
257+
if (first.bbox && first.bbox.length === 4) {
258+
viewer.zoomToExtent(...first.bbox);
259+
} else if (first.lat != null && first.lng != null) {
260+
viewer.zoomTo(first.lat, first.lng, 14);
261+
}
262+
}
263+
});
264+
265+
});
266+
</script>
267+
</body>
268+
</html>

‎dist/MapML.js/dist/mapml.css‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/MapML.js/dist/mapml.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/MapML.js/dist/mapml.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)