block partners map

assets/js/theme/blocks/partners-map.js

+const partnersMap = document.querySelectorAll('.block-partners--map');
+
+class BlockPartners {
+    constructor (block) {
+        this.block = block;
+        this.content = this.block.querySelector('#map');
+        this.partnersList = this.content.querySelectorAll('.organization')
+        
+        this.themeMarker = L.icon({
+            iconUrl: '/assets/images/map-marker.svg',
+            iconSize: [26, 17],
+        });
+
+        this.listen();
+    }
+
+    listen () {
+        console.log("lalala")
+        this.map = L.map('map').setView([2.3246629, 48.8862136], 13);
+
+        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution: '&copy; <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'));
+            
+            if (!!latitude && !!longitude) {
+                setLocation = [latitude, longitude];
+                console.log(setLocation)
+            }
+            newMarker(setLocation);
+        });
+    }
+    newMarker(setLocation) {
+        var marker = new L.marker(setLocation, {
+            draggable: false
+        });
+        map.addLayer(marker);
+    }
+
+}
+
+partnersMap.forEach((partners) => {
+    new BlockPartners(partners);
+});

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,7 @@
             @include icon(link-blank, after, true)
                 position: relative
 
+    .map
+        height: 600px
+        .organization
+            display: none
\ No newline at end of file

layouts/partials/blocks/templates/partners.html

 {{- $template := .block.template -}}
 {{- $position := .block.position -}}
 {{- $title := .block.title -}}
+
+{{- $layout_class := "block-pages--grid" -}}
 {{ $logo_index := "logo" }}
+{{ $longitude := "longitude" }}
+{{ $latitude := "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 +36,20 @@
           </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
+            "longitude" $longitude
+            "latitude" $latitude
+          ) }}
       </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 -}}

layouts/partials/blocks/templates/partners/grid.html

+{{ $logo_index := .logo_index }}
+
+<div class="grid">
+  {{- 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

layouts/partials/blocks/templates/partners/map.html

+{{ $logo_index := .logo_index }}
+{{ $latitude := .latitude }}
+{{ $longitude := .longitude }}
+
+<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" (index .Params $latitude)
+            "longitude" (index .Params $longitude)
+          )}}
+      {{ end }}
+    {{ else }}
+      {{ template "partner" (dict 
+          "title" .name
+          "url" .url
+          "external" true
+          "logo" .logo
+          "latitude" .latitude
+          "longitude" .longitude
+        )}}
+    {{ end }}
+  {{ end -}}
+</div>
+
+<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>
+
+<script>
+  var dom = document.querySelector('#map'),
+      map = L.map('map').setView([44.833328, -0.56667], 13);
+  let partners = dom.querySelectorAll('.organization')
+  
+  const themeMarker = L.icon({
+    iconUrl: '/assets/images/map-marker.svg',
+    iconSize: [26, 17],
+  });
+
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+  }).addTo(map);
+  
+  partners.forEach((partner) => {
+    let latitude = parseFloat(partner.getAttribute('data-latitude')),
+        longitude = parseFloat(partner.getAttribute('data-longitude'));
+        
+    if (!!latitude && !!longitude) {
+      setLocation = [latitude, longitude];
+      
+      function newMarker (setLocation) {
+        var marker = new L.marker(setLocation, {
+          draggable: false
+        });
+        map.addLayer(marker);
+      }   
+      newMarker(setLocation)
+    }
+  });
+
+
+</script>
\ No newline at end of file