Update Meetup Map (#155)

Benutzt die Meetup-Daten aus dem Portal und enhält nun auch mobil eine Ansicht der Karte.

src/includes/mixins.pug

@@ -32,52 +32,52 @@ mixin member(m)
     if m.text
       !=markdown(m.text)
 
-mixin map(meetups, hideTooltip)
-  - const filterOfficial = (list, official) => list.filter(meetup => (meetup.name.startsWith('Einundzwanzig') || meetup.name.startsWith('Einezwänzg')) === official)
-  - const filterUnmapped = (list) => list.filter(meetup => !meetup.top || !meetup.left)
-  - const style = m => m.top && m.left ? `top:${m.top}%;left:${m.left}%;` : null
-  - const clss = m => m.top && m.left ? null : 'unmapped'
-  - let j = 0
-  #map
-    h2 Einundzwanzig Meetups
-    ul.meetups
-      each m in filterOfficial(meetups, true)
-        li.official(class=clss(m) style=style(m))
-          a(href=m.url target="_blank" rel="nofollow noopener")
-            .dot(style=`animation-delay:${((j*2000) + random(3000))}ms;animation-duration:${meetups.length*2}s;`)
-            = m.name.replace('Einundzwanzig ', '').replace('Einezwänzg ', '')
-          if m.members
-            = ' '
-            small.members= `(${m.members})`
-          - j++
+mixin map(id, markers)
+  .vectorMap(id=id)
+  script.
+    const markers = [!{markers}];
+    // https://jvectormap.com/documentation/javascript-api/jvm-map/
+    new jvm.MultiMap({
+      container: $(`#!{id}`),
+      maxLevel: 1,
+      main: {
+        map: 'europe_mill',
+        backgroundColor: 'transparent',
+        markers,
+        focusOn: ['DE', 'AT', 'CH', 'LI', 'LU'],
+        regionStyle: {
+          initial: {
+            'fill': 'var(--color-map-region)',
+            'stroke': 'var(--color-map-outline)',
+            'stroke-width': .25
+          },
+          hover: {
+            'fill-opacity': .8,
+            cursor: 'pointer'
+          }
+        },
+        onMarkerClick(event, index) {
+          const marker = markers[index]
+          if (marker.url) window.open(marker.url, '_blank');
+        }
+      },
+      mapUrlByCode(code, multiMap) {
+        return `/vendor/jvectormap/maps/${code.toLowerCase()}_${multiMap.defaultProjection}.js`;
+      },
+      mapNameByCode(code, multiMap) {
+        return `${code.toLowerCase()}_${multiMap.defaultProjection}`;
+      }
+    });
 
-    h2 Weitere Meetups
-    ul.meetups
-      each m in filterOfficial(meetups, false)
-        li(class=clss(m) style=style(m))
-          a(href=m.url target="_blank" rel="nofollow noopener")
-            .dot(style=`animation-delay:${((j*2000) + random(3000))}ms;animation-duration:${meetups.length*2}s;`)
-            = m.name.replace('Bitcoin ', '')
-          if m.members
-            = ' '
-            small.members= `(${m.members})`
-          - j++
-
-    img#dach(src=assetPath('/img/dach.svg') alt="DE, AT, CH")
-    if !hideTooltip
-      #tooltip.tooltip(hidden)
-  #unmapped
-    h2 Weitere Meetups
-    ul.meetups
-      each m in filterUnmapped(meetups)
-        li(class=clss(m) style=style(m))
-          a(href=m.url target="_blank" rel="nofollow noopener")
-            = m.name
-          if m.members
-            = ' '
-            small.members= `(${m.members})`
-      li.unmapped
-        a(href="https://twentyone.world/" target="_blank" rel="nofollow noopener") Einundzwanzig in der ganzen Welt
+mixin meetupMap()
+  +map('meetupMap', meetups.map(m => JSON.stringify({
+        name: m.name,
+        latLng: [m.latitude, m.longitude],
+        url: m.url,
+        style: {
+          fill: m.name.startsWith('Einundzwanzig') || m.name.includes('Einezwänzg') || m.name.includes('Eenanzwanzeg') || m.name.includes('Yirmibir') ? 'var(--color-accent)' : 'var(--color-neutral-50)'
+        }
+      })).join(','))
 
 mixin spende(d, trunc = false)
   .spende(id=d.id)&attributes(attributes)