Skip to content

Commit 9ebeeb4

Browse files
prushforthprushforth
committed
[AUTO] Sync MapML Build
1 parent 04fc6ae commit 9ebeeb4

4 files changed

Lines changed: 122 additions & 27 deletions

File tree

‎dist/index.html‎

Lines changed: 118 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -116,36 +116,60 @@
116116
</noscript>
117117
</head>
118118
<body>
119-
120-
<mapml-viewer projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation">
121-
<map-layer data-testid="osm-layer" label="OpenStreetMap" checked >
122-
<map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
123-
<map-extent units="OSMTILE" checked="checked">
124-
<map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
125-
<map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
126-
<map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
127-
<map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
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>
128132
</map-extent>
129133
</map-layer>
130-
<map-layer label="Restaurants" checked="">
131-
<map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
132-
<map-extent units="OSMTILE" checked="">
133-
<map-select id="restaurants" name="cusine">
134-
<map-option value="restaurants" selected="selected">All cuisines</map-option>
135-
<map-option value="african">African</map-option>
136-
<map-option value="asian">Asian</map-option>
137-
<map-option value="cajun">Cajun</map-option>
138-
<map-option value="indian">Indian</map-option>
139-
<map-option value="italian">Italian</map-option>
140-
<map-option value="mexican">Mexican</map-option>
141-
</map-select>
142-
<map-link media="(11 < map-zoom <= 18)" tref="https://maps4html.org/experiments/shared/restaurants/{cusine}.mapml" rel="features"></map-link>
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>
143151
</map-extent>
144152
</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>
145158
</mapml-viewer>
146-
<map is="web-map" projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation">
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">
147161
<map-layer data-testid="osm-layer" label="OpenStreetMap" checked >
162+
148163
<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>
149173
<map-extent units="OSMTILE" checked="checked">
150174
<map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
151175
<map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
@@ -169,5 +193,76 @@
169193
</map-extent>
170194
</map-layer>
171195
</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>
172267
</body>
173268
</html>

0 commit comments

Comments
 (0)