Skip to content

Commit d335eaa

Browse files
Merge pull request #20 from geoadmin/feat-PB-1798-add-iframe-example-with-swisssearch
PB-1798 Add section on how to use swisssearch
2 parents 3cc9521 + 4aac21b commit d335eaa

File tree

1 file changed

+77
-0
lines changed

1 file changed

+77
-0
lines changed

docs/iframe.md

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,83 @@ we did the following:
8484

8585
Of course that works with any KML, not just the ones created in the map viewer.
8686

87+
## Center on a search result
88+
89+
Instead of hardcoding coordinates, you can specify a search term and have the map viewer center on the first search result.
90+
The search used is the same as if you would enter it in the search bar on [map.geo.admin.ch](https://map.geo.admin.ch/).
91+
92+
For example, to center on address "Holzikofenweg 36, 3007 Bern" like in
93+
94+
<iframe
95+
src="https://map.geo.admin.ch/#/embed?
96+
&swisssearch=Holzikofenweg 36, 3007 Bern"
97+
style="border: 0;
98+
width: 400px;
99+
height: 300px;
100+
max-width: 100%;
101+
max-height: 100%;"
102+
allow="geolocation">
103+
</iframe>
104+
105+
you would create an iframe like this:
106+
107+
```html
108+
<iframe
109+
src="https://map.geo.admin.ch/#/embed?
110+
&swisssearch=Holzikofenweg 36, 3007 Bern"
111+
style="border: 0;
112+
width: 400px;
113+
height: 300px;
114+
max-width: 100%;
115+
max-height: 100%;"
116+
allow="geolocation">
117+
</iframe>
118+
```
119+
120+
Note that if there is more than one search result, you have to pass the additional parameter `swisssearch_autoselect=true` to select the first search result.
121+
For example, if we search for the ambiguous "Holzikofenweg, 3007 Bern" and don't set the `swisssearch_autoselect=true`, the map does not center on anything:
122+
123+
<iframe
124+
src="https://map.geo.admin.ch/#/embed?
125+
&swisssearch=Holzikofenweg, 3007 Bern"
126+
style="border: 0;
127+
width: 400px;
128+
height: 300px;
129+
max-width: 100%;
130+
max-height: 100%;"
131+
allow="geolocation">
132+
</iframe>
133+
134+
By appending the `swisssearch_autoselect=true` like in
135+
136+
```html
137+
<iframe
138+
src="https://map.geo.admin.ch/#/embed?
139+
&swisssearch=Holzikofenweg, 3007 Bern
140+
&swisssearch_autoselect=true"
141+
style="border: 0;
142+
width: 400px;
143+
height: 300px;
144+
max-width: 100%;
145+
max-height: 100%;"
146+
allow="geolocation">
147+
</iframe>
148+
```
149+
150+
we get a map centered on the first search result (Holzikofenweg 1, 3007 Bern):
151+
152+
<iframe
153+
src="https://map.geo.admin.ch/#/embed?
154+
&swisssearch=Holzikofenweg, 3007 Bern
155+
&swisssearch_autoselect=true"
156+
style="border: 0;
157+
width: 400px;
158+
height: 300px;
159+
max-width: 100%;
160+
max-height: 100%;"
161+
allow="geolocation">
162+
</iframe>
163+
87164
## Embed the complete map viewer
88165

89166
To embed the map viewer including the search bar and other menus, you need to replace the `#/embed?` with `#/map?` in the iframe snippet.

0 commit comments

Comments
 (0)