<lm-map-embed> – Innebygd kart / Embedded map

Om komponenten

Kanonisk navn: <lm-map-embed>
Synonymer: kartutsnitt, kartforhåndsvisning, embedded map, map preview, map iframe
Kategori: medieinnhold, kart
ARIA-mønster: Ikke aktuelt - Innebygd kart via <iframe>, ikke en intern ARIA-widget komponenten selv styrer.
Parts: kart
Native-first-vurdering: Komponenten bruker den enkleste native mekanismen som finnes: en vanlig <iframe> mot kartleverandørens embed-side. HTML har ikke et innebygd kart-element som kan erstatte dette.
Nettleserstøtte: Ingen spesielle forbehold - kun bredt støttede, stabile plattform-API-er.
Design-tokens: var(--border-color, ...), var(--radius-small, ...)
Sist endret: 20. september 2026
Brukt: 1 sted

Formål

Lite, innebygd OpenStreetMap-kart for ett punkt med kjente koordinater. Komponenten er rent visuell og skjuler seg helt hvis koordinatene mangler eller er ugyldige.

Egner seg for

Et lite, read-only kartutsnitt for ett kjent punkt, f.eks. et stopp, hotell eller annen posisjon med lat og lng.
Tilfeller der man vil vise omtrent hvor noe ligger uten en egen kartpakke.

Egner seg ikke for

Interaktive kart med søk, flere markører eller justerbar zoom og utsnitt; komponenten bygger alltid én liten bbox rundt ett punkt.
Situasjoner der koordinater kan mangle og man trenger en eksplisitt fallback; komponenten skjuler seg stille når lat eller lng ikke er gyldige.

Bruk

<script type="module" src="/designsystem/komponenter/medieinnhold/map-embed/map-embed.js"></script>

<lm-map-embed lat="59.91" lng="10.75" tittel="Oslo sentralstasjon"></lm-map-embed>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`lat`	`number`		Attributt/property. Breddegrad. Må settes sammen med `lng` for at komponenten skal vises; ellers rendres ingenting (`hidden` settes automatisk).
`lng`	`number`		Attributt/property. Lengdegrad. Må settes sammen med `lat` for at komponenten skal vises; ellers rendres ingenting (`hidden` settes automatisk).
`tittel`	`string`	""	Attributt/property. Navn på stedet, brukt som iframens `title` for tilgjengelighet.

Parts

Part	Beskrivelse
`kart`	Den innebygde iframe-visningen.

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-map-embed::part(kart) {
    /* egne stiler for "Den innebygde iframe-visningen." */
}

Tilgjengelighet

Den interne <iframe>-en får title satt til Kart over ${tittel} eller bare Kart. Komponenten har ingen egen tastaturlogikk; eventuell navigasjon skjer inne i iframe-innholdet. Ugyldige koordinater skjuler hele komponenten med hidden og fjerner src. forced-colors: active endrer bare rammekanten.

Den interne <iframe>-en får title satt til Kart over ${tittel} eller bare Kart.
Komponenten har ingen egen tastaturlogikk; eventuell navigasjon skjer inne i iframe-innholdet.
Ugyldige koordinater skjuler hele komponenten med hidden og fjerner src.
forced-colors: active endrer bare rammekanten, og komponenten har ingen animasjon.

Detaljer

Komponenten bygger en fast, liten bbox rundt punktet; dette er en enkel "her er omtrent hvor"-visning, ikke et fullt interaktivt kart.
Den bruker bare nettleserens egen <iframe> mot OpenStreetMap, uten eget kartbibliotek.

Referanser

Se også:

../preview-image/index.html - bruker samme type OpenStreetMap-iframe når et bilde har en kjent posisjon som bør vises i forhåndsvisningen.

Brukes av:

turer/js/features/timeline/timeline.js - viser posisjon for tur-stopp og hoteller med kjente koordinater i tidslinjen.

Avhengigheter: Ingen