← →

Map

A thin iframe wrapper over a map provider embed that resolves a location from a full src URL, a place query string, or lat/lon coordinates and renders an OpenStreetMap embed.

Preview

Attributes

Attribute	Type	Default	Description
`src`	string	—	Full embed URL used verbatim
`q`	string	—	Place or query string; builds an OpenStreetMap export embed
`lat`	number	—	Latitude coordinate for the map center
`lon`	number	—	Longitude coordinate for the map center
`zoom`	number	14	Zoom level for q or lat/lon based embeds
`height`	string	400	Viewer height (number in px or any CSS length)
`title`	string	—	Iframe title for accessibility

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/map.js"></script>

JavaScript

import "./pura/lib/map.js";