diff --git a/assets/js/main.js b/assets/js/main.js
index f038b6f706001e5ba0413ceceda35c049d148d22..23664784a1c2dacce1ff0a8527123d36d10f4d4c 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,3 +1,3 @@
import './vendors/lightbox';
import './vendors/carousel';
-import './theme';
+import './theme/';
diff --git a/assets/js/theme/blocks/partners.js b/assets/js/theme/blocks/partners.js
new file mode 100644
index 0000000000000000000000000000000000000000..3b3578841ac18e43192a5c878963d02679c63cff
--- /dev/null
+++ b/assets/js/theme/blocks/partners.js
@@ -0,0 +1,61 @@
+const partnersMaps = document.querySelectorAll('.block-partners--map');
+
+class BlockPartners {
+ constructor (dom) {
+ this.dom = dom;
+ this.init();
+ }
+ init() {
+ this.content = this.dom.querySelector('#map');
+ this.partnersList = this.content.querySelectorAll('.organization');
+
+ this.classPartner = 'organization';
+ this.markers = [];
+
+ let map = L.map('map', {
+ scrollWheelZoom: false
+ });
+ this.themeMarker = L.icon({
+ iconUrl: '/assets/images/map-marker.svg',
+ iconSize: [17, 26],
+ });
+ this.listen(map);
+ this.getMapBounds(map);
+ }
+
+ listen (map) {
+ L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ maxZoom: 19,
+ attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+ }).addTo(map);
+
+ this.partnersList.forEach((partner) => {
+ let latitude = parseFloat(partner.getAttribute('data-latitude')),
+ longitude = parseFloat(partner.getAttribute('data-longitude')),
+ mapLocation = [latitude, longitude];
+ if (!!latitude && !!longitude) {
+ this.newMarker(map, mapLocation, partner);
+ }
+ });
+ }
+
+ newMarker(map, mapLocation, partner) {
+ let marker = new L.marker(mapLocation, {
+ draggable: false,
+ icon: this.themeMarker
+ });
+ marker.bindPopup('<article class="' + this.classPartner + '">' + partner.innerHTML + '</article>').openPopup();
+ map.addLayer(marker);
+ this.markers.push(marker);
+ }
+
+ getMapBounds(map) {
+ this.group = L.featureGroup(this.markers).addTo(map);
+ map.fitBounds(this.group.getBounds());
+ }
+
+}
+
+partnersMaps.forEach((dom) => {
+ new BlockPartners(dom);
+});
\ No newline at end of file
diff --git a/assets/js/theme/design-system/toc.js b/assets/js/theme/design-system/toc.js
index 233156befef836edd550df532dd67abf4e655780..a2b7cc814b6a73ea002bd17dfdb372d18ad15c27 100644
--- a/assets/js/theme/design-system/toc.js
+++ b/assets/js/theme/design-system/toc.js
@@ -105,7 +105,7 @@ class TableOfContents {
}
activateLink(id) {
const currentLink = this.element.querySelector(`[href*=${ id }]`);
- // console.log(currentLink.hash)
+
this.links.forEach((link, index) => {
if (link == currentLink) {
link.classList.add(CLASSES.linkActive);
diff --git a/assets/js/theme/index.js b/assets/js/theme/index.js
index 3f053d2eb9b8a226fc13943ffcf3cbb6cf0d5dbc..3713edcc88fe802027c70865ecf55fdcb5326769 100644
--- a/assets/js/theme/index.js
+++ b/assets/js/theme/index.js
@@ -5,3 +5,4 @@ import './design-system/modal';
import './design-system/toc';
import './blocks/keyFigures';
import './blocks/timeline';
+import './blocks/partners';
diff --git a/assets/sass/_theme/blocks/partners.sass b/assets/sass/_theme/blocks/partners.sass
index 68eb9842bdc6b17e96b6be9c242725a6b3cb673f..6caa8c88dbdeccaa9baa28b4263e634555c84bc1 100644
--- a/assets/sass/_theme/blocks/partners.sass
+++ b/assets/sass/_theme/blocks/partners.sass
@@ -4,7 +4,7 @@
.top .description
max-width: col(8)
@include in-page-with-sidebar
- .organizations
+ .grid
@include grid(2, md)
@include grid(3, lg)
@include grid(4, xl)
@@ -15,3 +15,32 @@
@include icon(link-blank, after, true)
position: relative
+ .map
+ height: 600px
+ z-index: 1
+ > .organization,
+ .leaflet-popup-tip-container
+ display: none
+ .leaflet-popup
+ &-content-wrapper
+ border-radius: 0
+ box-shadow: none
+ overflow: hidden
+ padding: 0
+ width: 192px
+ .media
+ margin-bottom: 0
+ h3 a
+ @include meta
+ color: black
+ padding: half($spacing0)
+ &-content
+ margin: 0
+ width: 100%
+ z-index: 2
+ &-close-button
+ z-index: 4
+ @include in-page-without-sidebar
+ .map
+ margin-left: -$grid-gutter
+ margin-right: -$grid-gutter
\ No newline at end of file
diff --git a/layouts/partials/blocks/templates/partners.html b/layouts/partials/blocks/templates/partners.html
index 167f0bcd101e8f170a80d38ad98c557beb4c20c1..38b08c8a0888e268cba159e601551bf5e2f83346 100644
--- a/layouts/partials/blocks/templates/partners.html
+++ b/layouts/partials/blocks/templates/partners.html
@@ -1,12 +1,25 @@
{{- $template := .block.template -}}
{{- $position := .block.position -}}
{{- $title := .block.title -}}
+
+{{- $class := "block block-partners" -}}
+{{- $layout_class := "block-partners--grid" -}}
{{ $logo_index := "logo" }}
+{{ $longitude := "" }}
+{{ $latitude := "" }}
+
{{ if site.Params.organizations.dark_logo_background }}
{{ $logo_index = "logo_on_dark_background" }}
{{ end }}
+
{{- with .block.data -}}
- <section class="block block-partners{{ if $title }} block-with-title{{ end }}" id="block-{{ $position }}">
+ {{- $layout := .layout -}}
+
+ {{- if $layout -}}
+ {{- $layout_class = printf "block-partners--%s" $layout -}}
+ {{- end -}}
+
+ <section class="block block-partners{{ if $title }} block-with-title{{ end }} {{ $layout_class }}" id="block-{{ $position }}">
<div class="container">
<div class="block-content">
{{ if (or $title .description) -}}
@@ -24,33 +37,18 @@
</div>
{{- end }}
- <div class="organizations">
- {{- range .partners }}
- {{ if .slug }}
- {{ with (site.GetPage (printf "/organizations/%s" .slug )) }}
- {{ template "partner" (dict
- "title" .Title
- "url" .Permalink
- "logo" (index .Params $logo_index)
- )}}
- {{ end }}
- {{ else }}
- {{ template "partner" (dict
- "title" .name
- "url" .url
- "external" true
- "logo" .logo
- )}}
- {{ end }}
- {{ end -}}
- </div>
+ {{- partial (printf "blocks/templates/partners/%s.html" $layout) (dict
+ "partners" .partners
+ "logo_index" $logo_index
+ ) }}
</div>
</div>
</section>
{{- end -}}
+
{{- define "partner" -}}
-<article class="organization">
+<article class="organization" {{ if .longitude }}data-longitude="{{ .longitude }}"{{ end }} {{ if .latitude }}data-latitude="{{ .latitude }}"{{ end }}>
{{ $title := "" }}
{{ if .title }}
{{ $title = partial "PrepareHTML" .title -}}
diff --git a/layouts/partials/blocks/templates/partners/grid.html b/layouts/partials/blocks/templates/partners/grid.html
new file mode 100644
index 0000000000000000000000000000000000000000..c767d1827eeaf31faa1d17ab921d8e50e9967787
--- /dev/null
+++ b/layouts/partials/blocks/templates/partners/grid.html
@@ -0,0 +1,22 @@
+{{ $logo_index := .logo_index }}
+
+<div class="grid organizations">
+ {{- range .partners }}
+ {{ if .slug }}
+ {{ with (site.GetPage (printf "/organizations/%s" .slug )) }}
+ {{ template "partner" (dict
+ "title" .Title
+ "url" .Permalink
+ "logo" (index .Params $logo_index)
+ )}}
+ {{ end }}
+ {{ else }}
+ {{ template "partner" (dict
+ "title" .name
+ "url" .url
+ "external" true
+ "logo" .logo
+ )}}
+ {{ end }}
+ {{ end -}}
+</div>
\ No newline at end of file
diff --git a/layouts/partials/blocks/templates/partners/map.html b/layouts/partials/blocks/templates/partners/map.html
new file mode 100644
index 0000000000000000000000000000000000000000..41e7d15ec7d6c1dd4d94976417c829f8d481bd72
--- /dev/null
+++ b/layouts/partials/blocks/templates/partners/map.html
@@ -0,0 +1,17 @@
+{{ $logo_index := .logo_index }}
+
+<div class="map" id="map">
+ {{- range .partners }}
+ {{ if .slug }}
+ {{ with (site.GetPage (printf "/organizations/%s" .slug )) }}
+ {{ template "partner" (dict
+ "title" .Title
+ "url" .Permalink
+ "logo" (index .Params $logo_index)
+ "latitude" .Params.contact_details.geolocation.latitude
+ "longitude" .Params.contact_details.geolocation.longitude
+ )}}
+ {{ end }}
+ {{ end }}
+ {{ end -}}
+</div>
\ No newline at end of file
diff --git a/layouts/partials/footer/js.html b/layouts/partials/footer/js.html
index ae6787b91ad30feaa6afeb725c323a0f1f01abc8..52b15937b15268fa52278f9d36d3bd51942d4517 100644
--- a/layouts/partials/footer/js.html
+++ b/layouts/partials/footer/js.html
@@ -1,2 +1,25 @@
+{{ $isLeafletNeeded := false }}
+
+{{ if .Params.blocks }}
+ {{ range .Params.blocks }}
+ {{ if eq .template "partners"}}
+ {{ with .data }}
+ {{ if eq .layout "map" }}
+ {{ $isLeafletNeeded := true }}
+ {{ end }}
+ {{ end }}
+ {{ end }}
+ {{ end }}
+{{ end }}
+
+{{ if $isLeafletNeeded = true }}
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
+ integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
+ crossorigin=""/>
+ <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
+ integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
+ crossorigin=""></script>
+{{ end }}
+
{{ $js := resources.Get "js/main.js" | js.Build (dict "minify" hugo.IsProduction) | fingerprint }}
<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>
diff --git a/static/assets/images/map-marker.svg b/static/assets/images/map-marker.svg
new file mode 100644
index 0000000000000000000000000000000000000000..af0ee6abed009e8b906eb4477f6343b17fed1560
--- /dev/null
+++ b/static/assets/images/map-marker.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="26" viewBox="0 0 18 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5676 8.7551C17.5676 13.5904 8.78378 26 8.78378 26C8.78378 26 0 13.5904 0 8.7551C0 3.91979 3.93263 0 8.78378 0C13.6349 0 17.5676 3.91979 17.5676 8.7551Z" fill="black"/>
+<circle cx="9.13516" cy="8.43252" r="4.21622" fill="white"/>
+</svg>