Using streetview in Xaringan Presentations • streetview

htmlwidgets work in Xaringan slides with no special configuration: the widget JavaScript is inlined into the slide HTML, so a streetview() call in a code chunk just works. This vignette covers sizing, layout, and a few Xaringan-specific gotchas.

Minimal slide deck

---
title: "Field Sites"
output: xaringan::moon_reader
---

Set echo=FALSE to show only the panorama, not the code.

Sizing

Xaringan slides have a fixed viewport (default 908 × 681 px with the default theme). A widget at width = "100%" and height = "450px" fills most of the slide, leaving room for a title:

streetview(lat = 48.8584, lng = 2.2945, width = "100%", height = "450px")

For a full-bleed panorama with no title, go taller:

streetview(lat = 48.8584, lng = 2.2945, width = "100%", height = "550px")

You can also suppress the Google UI chrome to maximise the image area:

streetview(
  lat                = 48.8584,
  lng                = 2.2945,
  address_control    = FALSE,
  fullscreen_control = FALSE,
  link_control       = FALSE,
  pan_control        = FALSE,
  zoom_control       = FALSE,
  height             = "550px"
)

Side-by-side panoramas

Use a two-column layout by wrapping widgets in .pull-left / .pull-right divs. Because both widgets share one Maps API script load there is no performance penalty for multiple widgets per slide:

.pull-left[

]

.pull-right[

]

Presenter notes

Panoramas work in the presenter view too. Add notes with ???:



???
This is the view from the Champ de Mars looking north toward the tower.
Collected in April 2023.

Offline presentations

The Maps JavaScript API is fetched at view time from maps.googleapis.com. If you need to present without internet access, replace streetview() with sv_static_img(). The image is downloaded once at knit time and embedded as a base64 URI:

Static images are not interactive, but they are fully self-contained.

Mixing interactive and static

You can combine both on the same slide — interactive widget for the live demo, static image as a fallback caption or thumbnail:

xaringanExtra integration

If you use xaringanExtra, widgets work alongside all xaringanExtra features. For the tile view (xaringanExtra::use_tile_view()), widgets on non-visible slides are not initialised until the slide is shown, so there is no performance cost from embedding many panoramas in a long deck.

The use_panelset() feature also works — put a streetview() call inside a panel:



.panelset[
.panel[.panel-name[Paris]

]
.panel[.panel-name[London]

]
]