Update Meetup Map (#155)

Benutzt die Meetup-Daten aus dem Portal und enhält nun auch mobil eine Ansicht der Karte.
2025-12-14 00:36:48 +00:00 · 2023-01-20 18:15:41 +01:00
parent 475e2a9802
commit 143f5b522d
18 changed files with 2543 additions and 705 deletions
--- a/src/css/base/variables.css
+++ b/src/css/base/variables.css
@@ -19,6 +19,9 @@
  --color-border-light: var(--color-neutral-10);
  --color-border-medium: var(--color-neutral-25);

+  --color-map-region: var(--color-border-light);
+  --color-map-outline: var(--color-neutral-50);
+
  --color-overlay-bg: rgba(230, 230, 230, .95);
  --color-body-text: var(--color-neutral-90);
  --color-body-bg: var(--color-neutral-0);
--- a/src/css/sections/meetups.css
+++ b/src/css/sections/meetups.css
@@ -4,6 +4,12 @@
  3% { transform: scale(.75);  }
 }

+.vectorMap {
+  width: 100%;
+  height: 60vh;
+  margin-top: var(--space-xxl);
+}
+
 #map {
  @media (--up_to_L) {
    margin-top: var(--space-xl);
--- a/src/gesundes-geld.pug
+++ b/src/gesundes-geld.pug
@@ -6,11 +6,20 @@ block vars
  - const pageCard = "/img/card/gesundes-geld.jpg"
  - const cardType = "summary_large_image"

+block pageScripts
+  script(src=assetPath("/vendor/jvectormap/jquery.min.js"))
+  script(src=assetPath("/vendor/jvectormap/jquery-jvectormap.js"))
+  script(src=assetPath("/vendor/jvectormap/maps/europe_mill.js"))
+  script(src=assetPath("/vendor/jvectormap/maps/de_mill.js"))
+  script(src=assetPath("/vendor/jvectormap/maps/at_mill.js"))
+  script(src=assetPath("/vendor/jvectormap/maps/ch_mill.js"))
+  link(href=assetPath("/vendor/jvectormap/jquery-jvectormap.css") rel="stylesheet")
+  link(href=assetPath("/css/gesundes-geld.css") rel="stylesheet")
+
 <!DOCTYPE html>
 html(lang="de" data-theme="custom")
  head
    include includes/_head
-    link(href=assetPath("/css/gesundes-geld.css") rel="stylesheet")
  body#gesundes-geld
    main.main
      .wrap
@@ -62,8 +71,8 @@ html(lang="de" data-theme="custom")
                Daher auch der Name "[Einundzwanzig](/)" 😉
            img#mcgenesis-1(src=assetPath("/img/gesundes-geld/mcgenesis-2.svg"))

-        section
-          +map(meetups, true)
+      section
+        +meetupMap()

-        section
-          a.button(href="/") Zur Einundzwanzig Website
+      section
+        a.button(href="/") Zur Einundzwanzig Website
--- a/src/includes/_head.pug
+++ b/src/includes/_head.pug
@@ -32,6 +32,7 @@ link(rel="stylesheet" href=assetPath("/css/main.css"))
 link(rel="alternate" type="application/rss+xml" title="Podcast Feed" href=site.meta.publicFeedUrl)
 script(src=assetPath("/js/player.js") defer)
 script(src=assetPath("/js/main.js"))
+block pageScripts
 title= pageTitle
 noscript
  style.
--- a/src/includes/mixins.pug
+++ b/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)
--- a/src/meetups.pug
+++ b/src/meetups.pug
@@ -5,6 +5,15 @@ block vars
  - const description = 'Eine Liste von Bitcoin-Meetups und Einundzwanzig-Treffen im D/A/CH/S/LI/LU-Raum.'
  - const cardImage = '/img/card/meetups.png'

+block pageScripts
+  script(src=assetPath("/vendor/jvectormap/jquery.min.js"))
+  script(src=assetPath("/vendor/jvectormap/jquery-jvectormap.js"))
+  script(src=assetPath("/vendor/jvectormap/maps/europe_mill.js"))
+  script(src=assetPath("/vendor/jvectormap/maps/de_mill.js"))
+  script(src=assetPath("/vendor/jvectormap/maps/at_mill.js"))
+  script(src=assetPath("/vendor/jvectormap/maps/ch_mill.js"))
+  link(href=assetPath("/vendor/jvectormap/jquery-jvectormap.css") rel="stylesheet")
+
 block main
  #meetups.wrap
    section
@@ -12,14 +21,10 @@ block main
      p= description

      :markdown-it(html linkify typographer)
-        Neue Meetups können gerne [per Pull Request](https://github.com/Einundzwanzig-Podcast/einundzwanzig.space/edit/master/content/meetups.json) hinzugefügt werden.
-        Hier gibt es ein [Video-Tutorial](https://www.youtube.com/watch?v=BNJc9LExEzU), wie ein neuer Pull Request erstellt werden kann.
-        Die Werte für `top/left` geben prozentual die Position des Ortes auf der Karte an.
+        Neue Meetups können gerne [im Portal](https://portal.einundzwanzig.space/de/meetup/overview) hinzugefügt werden.

-        Wir können auch die Anzahl der Gruppenmitglieder hier anzeigen lassen.
-        Voraussetzung dafür ist, dass die Gruppe öffentlich ist und einen Linknamen hat (a la `t.me/Einundzwanzig_ORT`, kann nur vom Ersteller der Gruppe angepasst werden).
+        Telegram: Die Vorlage für das Gruppenbild findest du im [Media Kit](/media).
        Tipp: Mit Bots wie [Shieldy](https://t.me/shieldy_bot) kann man die Spammer draußen halten.

-        Die Vorlage für das Telegram-Gruppenbild findest du im [Media Kit](/media).
-
-      +map(meetups)
+  div(style="margin-bottom: calc(var(--space-xxl) * -1)")
+    +meetupMap()