Skip to content

Commit 1387642

Browse files
prushforthprushforth
committed
Update search docs, add demo
1 parent b48c47b commit 1387642

2 files changed

Lines changed: 75 additions & 15 deletions

File tree

‎docs/user-guide/search.md‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,24 @@ The search control lets users search by place name and navigate
88
the map to it. You add the `search` token to the viewer
99
[`controlslist`](../elements/mapml-viewer/#controlslist) attribute to show the search button.
1010

11+
<iframe src="../../demo/search-demo/" title="MapML Demo" height="410" width="100%" scrolling="no" frameBorder="0"></iframe>
12+
1113
## Enabling the Search Control
1214

1315
```html
1416
<mapml-viewer projection="OSMTILE" zoom="3" lat="45" lon="-75"
1517
controls controlslist="search">
1618
<map-layer label="OpenStreetMap" checked>
1719
<map-link rel="search"
18-
tref="https://photon.komoot.io/api?q={searchTerms}&limit=5" />
20+
tref="https://photon.komoot.io/api?q={searchTerms}&limit=5" ></map-link>
1921
<map-link rel="suggestions"
20-
tref="https://photon.komoot.io/api?q={searchTerms}&limit=5" />
22+
tref="https://photon.komoot.io/api?q={searchTerms}&limit=5" ></map-link>
2123
<map-extent units="OSMTILE" checked hidden>
22-
<map-input name="z" type="zoom" min="0" max="18" value="3" />
23-
<map-input name="x" type="location" axis="column" units="tilematrix" />
24-
<map-input name="y" type="location" axis="row" units="tilematrix" />
24+
<map-input name="z" type="zoom" min="0" max="18" value="3" ></map-input>
25+
<map-input name="x" type="location" axis="column" units="tilematrix" ></map-input>
26+
<map-input name="y" type="location" axis="row" units="tilematrix" ></map-input>
2527
<map-link rel="tile"
26-
tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png" />
28+
tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png" ></map-link>
2729
</map-extent>
2830
</map-layer>
2931
</mapml-viewer>
@@ -41,7 +43,7 @@ substitutes the user's query for the `{searchTerms}` variable and fetches the re
4143

4244
| `rel` value | Purpose | Required? |
4345
|---------------|---------|-----------|
44-
| `search` | Text search link, fetched when the user presses **Enter** | Yes |
46+
| `search` | Text search link, fetched when the user presses **Enter**, or selects a suggestion from the list | Yes |
4547
| `suggestions` | Typeahead search term suggestion values link, fetched and ([debounced](https://developer.mozilla.org/en-US/docs/Glossary/Debounce) as the user types , minimum 2 characters) | No, but recommended |
4648

4749
### In a MapML document
@@ -52,9 +54,9 @@ When the layer content is fetched from a remote MapML document
5254
```xml
5355
<map-head>
5456
<map-link rel="search"
55-
tref="https://photon.komoot.io/api?q={searchTerms}&limit=5" />
57+
tref="https://photon.komoot.io/api?q={searchTerms}&limit=5" ></map-link>
5658
<map-link rel="suggestions"
57-
tref="https://photon.komoot.io/api?q={searchTerms}&limit=5" />
59+
tref="https://photon.komoot.io/api?q={searchTerms}&limit=5" ></map-link>
5860
</map-head>
5961
```
6062

@@ -127,15 +129,15 @@ custom `mapsearch` handler:
127129
style="width:100%;height:50vh;">
128130
<map-layer label="OpenStreetMap" checked>
129131
<map-link rel="search"
130-
tref="https://photon.komoot.io/api?q={searchTerms}&limit=5" />
132+
tref="https://photon.komoot.io/api?q={searchTerms}&limit=5" ></map-link>
131133
<map-link rel="suggestions"
132-
tref="https://photon.komoot.io/api?q={searchTerms}&limit=5" />
134+
tref="https://photon.komoot.io/api?q={searchTerms}&limit=5" ></map-link>
133135
<map-extent units="OSMTILE" checked hidden>
134-
<map-input name="z" type="zoom" min="0" max="18" value="3" />
135-
<map-input name="x" type="location" axis="column" units="tilematrix" />
136-
<map-input name="y" type="location" axis="row" units="tilematrix" />
136+
<map-input name="z" type="zoom" min="0" max="18" value="3" ></map-input>
137+
<map-input name="x" type="location" axis="column" units="tilematrix" ></map-input>
138+
<map-input name="y" type="location" axis="row" units="tilematrix" ></map-input>
137139
<map-link rel="tile"
138-
tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png" />
140+
tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png" ></map-link>
139141
</map-extent>
140142
</map-layer>
141143
</mapml-viewer>

‎static/demo/search-demo/index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Demo</title>
8+
<script type="module" src="../../dist/mapml.js"></script>
9+
<link rel="stylesheet" href="../embeded-demo-style.css"/>
10+
11+
<link rel="stylesheet" href="../codemirror-5.64.0/lib/codemirror.css">
12+
<script src="../codemirror-5.64.0/lib/codemirror.js"></script>
13+
<script src="../codemirror-5.64.0/mode/xml/xml.js"></script>
14+
<script src="../codemirror-5.64.0/mode/css/css.js"></script>
15+
<script src="../codemirror-5.64.0/mode/javascript/javascript.js"></script>
16+
<script src="../codemirror-5.64.0/addon/edit/closetag.js"></script>
17+
18+
</head>
19+
<body>
20+
<div style="text-align: center;">
21+
<h2>MapML Demo: Search Control</h2>
22+
<button class="run" onclick="plot()" aria-label="run code"><span aria-hidden="true">▶</span></button>
23+
</div>
24+
25+
<div class="tab">
26+
<button id="default" class="tablinks" onclick="switchTab(event, 'HTML')">HTML</button>
27+
<button class="tablinks" onclick="switchTab(event, 'CSS')">CSS</button>
28+
</div>
29+
30+
<div class="tabcontent" id="HTML">
31+
<textarea rows="10" style="width:100%" id="htmlEditor">
32+
<mapml-viewer projection="OSMTILE" zoom="3" lat="45" lon="-75"
33+
controls controlslist="search">
34+
<map-layer label="OpenStreetMap" checked>
35+
<map-link rel="search"
36+
tref="https://photon.komoot.io/api?q={searchTerms}&limit=5"></map-link>
37+
<map-link rel="suggestions"
38+
tref="https://photon.komoot.io/api?q={searchTerms}&limit=5"></map-link>
39+
<map-extent units="OSMTILE" checked hidden>
40+
<map-input name="z" type="zoom" min="0" max="18" value="3"></map-input>
41+
<map-input name="x" type="location" axis="column" units="tilematrix"></map-input>
42+
<map-input name="y" type="location" axis="row" units="tilematrix"></map-input>
43+
<map-link rel="tile"
44+
tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
45+
</map-extent>
46+
</map-layer>
47+
</mapml-viewer></textarea>
48+
</div>
49+
<div class="tabcontent" id="CSS">
50+
<textarea rows="10" style="width:100%" id="cssEditor">
51+
</textarea>
52+
</div>
53+
54+
<div id="output"></div>
55+
56+
<script src="../embeded-demo.js"></script>
57+
</body>
58+
</html>

0 commit comments

Comments
 (0)