01
Load the component
Add the module once to your page. The component loads its own stylesheet.
<script type="module" src="https://knowmapped.com/embed/v1/knowmapped-embed.js"></script>See the embed in action.
This is a live public KnowMapped map rendered with the same Web Component available below.
Add a map with two lines of markup.
02
Add a map
Use the public map ID from the KnowMapped map you want to display.
<knowmapped-map
map-id="27aca0fe-ea08-4a15-97ee-b0ade9ae4dff"
show-title
height="650px">
</knowmapped-map>Configure the embed.
| Attribute | Required | Description |
|---|---|---|
map-id | Yes | UUID of the public KnowMapped map to display. |
show-title | No | Displays the map title above the visualization. Defaults to shown. |
height | No | Sets an explicit CSS height such as 650px. Otherwise the embed uses responsive sizing. |
Designed for public, read-only maps.
The v1 embed is intended for publishing and exploring public KnowMapped maps only. Embedded maps must be set to public in the KnowMapped app. Visitors can interact with the visualization without gaining editing access or loading the full KnowMapped application.
Interactive
Pan, zoom, and explore map relationships.
Responsive
Fits the available width and adapts to different screen sizes.
Framework-independent
Use it from ordinary HTML, Astro, WordPress themes, React applications, or other web environments.
Public by design
The embed retrieves only KnowMapped's public-safe map representation. Private maps are not exposed through the component.
Prefer a publishing plugin?
KnowMapped also provides integrations for publishing platforms that handle the embed setup for you.