Open Street Map
Basic map
<div class="c-openstreetmap c-openstreetmap--size-sm" data-js-map-pin-data="[{"lat":"56.036647","lng":"12.713098"},{"lat":"56.046029","lng":"12.693904"}]" data-js-map-start-position="{"lat":"56.046029","lng":"12.693904","zoom":14}" data-js-map-style="default" data-js-map-id="673ed34398f47" data-observe-resizes="" id="673ed34398f47" data-uid="673ed34398f47">
<div class="c-openstreetmap__map" style="height:60vh;" id="openstreetmap__map-673ed34398f47" tabindex="0">
</div>
<template class="c-openstreetmap__pin-icon">
<!-- icon.blade.php -->
<span class="c-icon c-openstreetmap__marker c-icon--{icon-name} c-icon--material c-icon--material-{ICON_NAME} material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--color-white c-icon--size-md" style="background-color:{ICON_BACKGROUND_COLOR};" tabindex="-1" material-symbol="{ICON_NAME}" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673ed34399078">
</span>
</template>
<template class="c-openstreetmap__pin-tooltip">
<div class="c-openstreetmap__tooltip">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-openstreetmap__tooltip-title c-typography__variant--h5" data-js-osm-id="{TOOLTIP_ID}" data-uid="673ed34399110">
{TOOLTIP_HEADING}
</h2> <!-- typography.blade.php original: p -->
<p class="c-typography u-margin__y--1 c-openstreetmap__tooltip-excerpt c-typography__variant--p" data-uid="673ed34399145">
{TOOLTIP_EXCERPT}
</p> <!-- image.blade.php -->
<figure class="c-image c-openstreetmap__tooltip-image u-margin__top--1" rel="nofollow" data-uid="673ed343991a0">
<img src="{TOOLTIP_IMAGE_SRC}" alt="{TOOLTIP_IMAGE_ALT}" class="c-image__image" />
</figure>
<a class="c-link c-openstreetmap__tooltip-directions" id="" rel="nofollow" href="{TOOLTIP_DIRECTIONS_URL}" target="_top" data-uid="673ed343991e4">
{TOOLTIP_DIRECTIONS_LABEL}
</a>
</div>
</template></div>@openStreetMap([
'pins' => [
[
'lat' => '56.036647',
'lng' => '12.713098',
],
[
'lat' => '56.046029',
'lng' => '12.693904',
]
],
'startPosition' => ['lat' => '56.046029', 'lng' => '12.693904', 'zoom' => 14],
'height' => '60vh',
'containerAware' => true,
'mapStyle' => 'default'
])
@endopenStreetMapBetter tooltips
<div class="c-openstreetmap c-openstreetmap--size-sm" data-js-map-pin-data="[{"lat":"56.036647","lng":"12.713098","tooltip":{"title":"Marker 1 clickable","excerpt":"This is an excerpt.","image":{"src":"https:\/\/images.unsplash.com\/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80","alt":"The alt text"},"directions":{"label":"The directions label","url":"#directionsUrl"}}},{"lat":"56.046029","lng":"12.693904","tooltip":{"title":"Marker 2 clickable","excerpt":"This is an excerpt.","image":{"src":"https:\/\/images.unsplash.com\/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80","alt":"The alt text"},"directions":{"label":"The directions label","url":"#directionsUrl"}}}]" data-js-map-start-position="{"lat":"56.046029","lng":"12.693904","zoom":14}" data-js-map-style="dark" data-js-map-id="673ed34399257" data-observe-resizes="" id="673ed34399257" data-uid="673ed34399257">
<div class="c-openstreetmap__map" style="height:60vh;" id="openstreetmap__map-673ed34399257" tabindex="0">
</div>
<template class="c-openstreetmap__pin-icon">
<!-- icon.blade.php -->
<span class="c-icon c-openstreetmap__marker c-icon--{icon-name} c-icon--material c-icon--material-{ICON_NAME} material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--color-white c-icon--size-md" style="background-color:{ICON_BACKGROUND_COLOR};" tabindex="-1" material-symbol="{ICON_NAME}" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673ed343992de">
</span>
</template>
<template class="c-openstreetmap__pin-tooltip">
<div class="c-openstreetmap__tooltip">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-openstreetmap__tooltip-title c-typography__variant--h5" data-js-osm-id="{TOOLTIP_ID}" data-uid="673ed3439932a">
{TOOLTIP_HEADING}
</h2> <!-- typography.blade.php original: p -->
<p class="c-typography u-margin__y--1 c-openstreetmap__tooltip-excerpt c-typography__variant--p" data-uid="673ed34399357">
{TOOLTIP_EXCERPT}
</p> <!-- image.blade.php -->
<figure class="c-image c-openstreetmap__tooltip-image u-margin__top--1" rel="nofollow" data-uid="673ed34399387">
<img src="{TOOLTIP_IMAGE_SRC}" alt="{TOOLTIP_IMAGE_ALT}" class="c-image__image" />
</figure>
<a class="c-link c-openstreetmap__tooltip-directions" id="" rel="nofollow" href="{TOOLTIP_DIRECTIONS_URL}" target="_top" data-uid="673ed343993b3">
{TOOLTIP_DIRECTIONS_LABEL}
</a>
</div>
</template></div>@openStreetMap([
'pins' => [
[
'lat' => '56.036647',
'lng' => '12.713098',
'tooltip' => [
'title' => 'Marker 1 clickable',
'excerpt' => 'This is an excerpt.',
'image' => [
'src' => 'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
'alt' => 'The alt text'
],
'directions' => [
'label' => 'The directions label',
'url' => '#directionsUrl'
]
],
],
[
'lat' => '56.046029',
'lng' => '12.693904',
'tooltip' => [
'title' => 'Marker 2 clickable',
'excerpt' => 'This is an excerpt.',
'image' => [
'src' => 'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
'alt' => 'The alt text'
],
'directions' => [
'label' => 'The directions label',
'url' => '#directionsUrl'
]
],
]
],
'startPosition' => ['lat' => '56.046029', 'lng' => '12.693904', 'zoom' => 14],
'height' => '60vh',
'containerAware' => true,
'mapStyle' => 'dark'
])
@endopenStreetMapUsing sidebar
<div class="c-openstreetmap c-openstreetmap--size-sm c-openstreetmap--sidebar" data-js-map-start-position="{"lat":"56.046029","lng":"12.693904","zoom":14}" data-js-map-style="pale" data-js-map-id="673ed343995c0" data-observe-resizes="" id="673ed343995c0" data-uid="673ed343995c0">
<div class="c-openstreetmap__map" style="height:100vh;" id="openstreetmap__map-673ed343995c0" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-openstreetmap__expand-icon-desktop c-icon--keyboard-arrow-up c-icon--material c-icon--material-keyboard_arrow_up material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-lg" material-symbol="keyboard_arrow_up" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673ed343995f9">
</span>
</div>
<div class="c-openstreetmap__sidebar u-display--none" data-observe-resizes>
<div class="c-openstreetmap__expand-icon-container">
<!-- icon.blade.php -->
<span class="c-icon c-openstreetmap__expand-icon-mobile c-icon--keyboard-arrow-up c-icon--material c-icon--material-keyboard_arrow_up material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-lg" material-symbol="keyboard_arrow_up" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673ed3439964a">
</span>
</div>
<div class="c-openstreetmap__container">
<div class="c-openstreetmap__inner-blocks u-hide-empty"><InnerBlocks /></div>
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography u-margin__top--0 u-margin__bottom--4 c-typography__variant--h2" data-uid="673ed34399420">
Info
</h2> <!-- card.blade.php -->
<div class="c-card u-padding--2 u-margin__bottom--2 c-card--default c-card--image-first c-card--ratio-4-3" data-js-map-location="{"lat":"56.032075356631","lng":"12.70340666113"}" data-uid="673ed343994f3">
<!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-typography__variant--h3" data-uid="673ed3439944d">
#Read me
</h3> <!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="673ed343994a6">
This element contains an attribute that automatically creates a pin and adds it to the map.
</p>
</div>
<!-- card.blade.php -->
<div class="c-card u-padding--2 c-card--default c-card--image-first c-card--ratio-4-3" data-js-map-location="{"lat":"56.052075356631","lng":"12.70340666113","tooltip":{"title":"Tooltip title","excerpt":"Tooltip excerpt","directions":{"label":"Directions label","url":"https:\/\/www.google.com\/maps\/dir\/?api=1&destination=56.052075356631,12.70340666113&travelmode=transit"}}}" data-uid="673ed34399575">
<!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-typography__variant--h3" data-uid="673ed34399529">
#Click me
</h3> <!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="673ed3439954d">
A tooltip can also be added which has the same structure as a "pin" in the "pins" array. This tooltip will open when clicking on the connected element in the sidebar.
</p>
</div>
</div>
</div> <template class="c-openstreetmap__pin-icon">
<!-- icon.blade.php -->
<span class="c-icon c-openstreetmap__marker c-icon--{icon-name} c-icon--material c-icon--material-{ICON_NAME} material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--color-white c-icon--size-md" style="background-color:{ICON_BACKGROUND_COLOR};" tabindex="-1" material-symbol="{ICON_NAME}" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673ed3439969b">
</span>
</template>
<template class="c-openstreetmap__pin-tooltip">
<div class="c-openstreetmap__tooltip">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-openstreetmap__tooltip-title c-typography__variant--h5" data-js-osm-id="{TOOLTIP_ID}" data-uid="673ed343996db">
{TOOLTIP_HEADING}
</h2> <!-- typography.blade.php original: p -->
<p class="c-typography u-margin__y--1 c-openstreetmap__tooltip-excerpt c-typography__variant--p" data-uid="673ed34399701">
{TOOLTIP_EXCERPT}
</p> <!-- image.blade.php -->
<figure class="c-image c-openstreetmap__tooltip-image u-margin__top--1" rel="nofollow" data-uid="673ed3439972c">
<img src="{TOOLTIP_IMAGE_SRC}" alt="{TOOLTIP_IMAGE_ALT}" class="c-image__image" />
</figure>
<a class="c-link c-openstreetmap__tooltip-directions" id="" rel="nofollow" href="{TOOLTIP_DIRECTIONS_URL}" target="_top" data-uid="673ed34399753">
{TOOLTIP_DIRECTIONS_LABEL}
</a>
</div>
</template></div>@openStreetMap([
'startPosition' => ['lat' => '56.046029', 'lng' => '12.693904', 'zoom' => 14],
'height' => '100vh',
'containerAware' => true,
'mapStyle' => 'pale'
])
@slot('sidebarContent')
@typography([
'element' => 'h2',
'classList' => ['u-margin__top--0', 'u-margin__bottom--4']
])
Info
@endtypography
@card([
'attributeList' => [
'data-js-map-location' => json_encode(
array('lat' => '56.032075356631', 'lng' => '12.70340666113')
),
],
'classList' => [
'u-padding--2',
'u-margin__bottom--2'
]
])
@typography([
'element' => 'h3'
])
#Read me
@endtypography
@typography([
])
This element contains an attribute that automatically creates a pin and adds it to the map.
@endtypography
@endcard
@card([
'attributeList' => [
'data-js-map-location' => json_encode(
array(
'lat' => '56.052075356631',
'lng' => '12.70340666113',
'tooltip' => [
'title' => 'Tooltip title',
'excerpt' => 'Tooltip excerpt',
'directions' => [
'label' => 'Directions label',
'url' => 'https://www.google.com/maps/dir/?api=1&destination=56.052075356631,12.70340666113&travelmode=transit',
]
],
)
),
],
'classList' => [
'u-padding--2',
]
])
@typography([
'element' => 'h3'
])
#Click me
@endtypography
@typography([
])
A tooltip can also be added which has the same structure as a "pin" in the "pins" array. This tooltip will open when clicking on the connected element in the sidebar.
@endtypography
@endcard
@endslot
@endopenStreetMapBlade component parameters
| Key | Default value | Type | Available values | Description |
| pins | [] | array | - | An array containing one array for each location marked on the map. Must contain latitude (lat) and longitude (lng). Can contain a tooltip and an icon. |
| startPosition | [] | array | - | Sets the start location of the map. Must contain latitude (lat), longitude (lng) and a zoom value between 5-20 |
| mapStyle | default | string | - | Theming of the map (pale, dark, color, default) |
| height | 100vh | string | - | A css height value including unit (px, vh, %) |
| fullWidth | false | boolean | - | True or false, sets the width of the element. |
| expanded | false | boolean | - | True or false, sets the default expanded value of the sidebar. |
| id | string | - | The DOM id of the component. | |
| classList | [] | array | - | Array containing wrapping classes array |
| attributeList | [] | array | - | Array containing keys and values rendered as attributes |
| containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |