Den Pfadi-Finder kann man per iFrame auf Webseiten einbetten. Kartenausschnitt, Farbe und Schrift sind individuell anpassbar. Entwickelt wurde dieses Format, damit Kantonalverbände auf ihren Webseiten eine Übersicht über die Pfadiabteilungen in ihrem Kanton darstellen können, ohne grossen Programmieraufwand und passend zu ihrem Design.
Auf der Seite, auf welcher der Finder verwendet werden soll, muss zwingend ein iFrame eingefügt werden können. Damit sich das iFrame richtig verhält, empfiehlt es sich, auch das kleine JavaScript via „<script>“ Tag einzubauen.
Einbettung
Code
<script
src="https://pfadi.swiss/static/pfadi/libs/iframe-resizer/js/iframeResizer.js"
></script>
<iframe
id="finder-embed"
style="padding: 40px 0; max-width: 1400px"
width=100% frameborder=0
src="https://pfadi.swiss/de/finder-embed/?bg=eee&init_center=46.8367988,7.5012281&init_zoom=9.8&red=8C3C4F&red_dark=64284A"
></iframe>
<script>
iFrameResize({
// log: true,
'heightCalculationMethod': 'lowestElement',
}, '#finder-embed')
</script>
Attribute
Das "style" Attribut auf dem iFrame ist optional und docu.scout.ch spezifisch, damit sich der Finder besser einfügt. In der Grundkonfiguration hat das eingefügte iFrame keine Abstände oben/unten/links/rechts. Mit der URL und den GET Parametern wird das iFrame konfiguriert:
- bg = Hintergrundfarbe
- red = Schrift/helleres Rot
- red_dark = dunkleres Rot
- init_center = Zentrum der Karte
- init_zoom = initialer Zoom
Der iFrameresizer ist fast ein Muss - wenn er nicht verwendet werden kann, muss die Höhe des iFrames fix angegeben werden. Das kann zu Schwierigkeiten führen, wenn nach dem Finder noch weitere Inhalte kommen. Wenn es nicht funktioniert, kann "log: true" aktiviert werden.