Skip to main content

Static iframe

The simplest integration is an iframe and nothing else. The URL sets what the map shows on load, and the visitor takes it from there. No package is installed, and no script runs on your page.

Examples use a demonstration campus. Every snippet on this site addresses ucba, a publicly available campus with the building muntz-hall and the room 170. Substitute your own campus slug once you have one. Slugs for your campus are listed in your Waylocate console, and the addressing rules are in the reference grammar.

Markup​

<iframe
  src="https://waylocate.com/ucba/muntz-hall/170?embed=1"
  style="width: 100%; height: 600px; border: 0"
  title="Campus map"
  allow="clipboard-write; geolocation"
  loading="lazy"
></iframe>

Three attributes are worth setting deliberately.

title is the accessible name for the frame. Screen readers announce it, and without one the frame is announced as unlabelled.

allow="clipboard-write; geolocation" grants two optional capabilities inside the frame. clipboard-write lets the Share control copy a link to the visitor's clipboard. geolocation lets the map offer to show the visitor's position. Omit either token if you do not want that behavior; the map degrades rather than failing.

loading="lazy" defers loading until the frame approaches the viewport, which is usually worth it for a map below the fold.

Setting the initial view​

The path selects a place, and query parameters adjust the rest.

https://waylocate.com/{campus}
https://waylocate.com/{campus}/{building}
https://waylocate.com/{campus}/{building}/{room}
<!-- A campus overview with the search bar and events list hidden -->
<iframe src="https://waylocate.com/ucba?embed=1&ui=-search,-events"></iframe>

<!-- A route drawn on load -->
<iframe src="https://waylocate.com/ucba?embed=1&from=here&to=muntz-hall/170"></iframe>

The embed=1 parameter is what puts the map in embed mode. Without it the map renders as its own standalone page, and ui is ignored. The complete list is in URL parameters.

What you give up​

Your page holds no handle, so it cannot command the map, cannot read what the visitor selected, and cannot be notified of anything. If you later want any of that, you do not have to change the markup structure: add a host parameter naming your origin and call connect() on the element. See existing iframe.

Content Security Policy​

If your page sends a Content-Security-Policy header, the map's origin must be allowed as a frame source:

Content-Security-Policy: frame-src https://waylocate.com;

Next​