Lens design system

Embedded Media Map

Embedded media - Maps

An embedded OpenStreetMap file.

The wrapping <div class="embedded-media"> forces the embedded item into a 16:9 ratio. This wrapper also forces the embedded item to scale responsively within the viewport.

<!-- COMPONENT: Embedded media - Map -->
<div class="embedded-media">
    <iframe scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=-2.331386804580689%2C51.37818286327943%2C-2.324563264846802%2C51.381614790395275&amp;layer=mapnik&amp;marker=51.37989718489204%2C-2.327975034713745" style="border: 1px solid black" width="425" height="350" frameborder="0"></iframe><br><small><a href="http://www.openstreetmap.org/?mlat=51.37990&amp;mlon=-2.32798#map=18/51.37990/-2.32798">View Larger Map</a></small>
</div>
<!-- End component: Embedded media - Map -->
  • Handle: @embedded-media-map
  • Preview:
  • Filesystem Path: components/ingredients/common-ingredients/embedded-media/embedded-media-map/embedded-media-map.hbs
  • Referenced by (1): @about-us