internetforkids/layouts/shortcodes/world-map.html

{{ $lang := .Page.Language.Lang }}
{{ $countries := hugo.Data.countries }}

<link rel="stylesheet" href="{{ "css/maplibre-gl.min.css" | relURL }}" />
<style>
.ifk-map-wrap { max-width: 100%; margin: 2rem 0; }
.ifk-map-wrap h3 { text-align: center; margin-bottom: 0.5rem; font-size: 1.25rem; }
.ifk-map-subtitle { text-align: center; color: #666; font-size: 0.85rem; margin-bottom: 1rem; }
#ifk-world-map { width: 100%; height: 420px; border-radius: 8px; }
.ifk-map-legend {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
  margin-top: 1rem; font-size: 0.8rem;
}
.ifk-map-legend-item { display: flex; align-items: center; gap: 0.35rem; }
.ifk-map-legend-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }
.maplibregl-popup-content { font-size: 0.85rem; max-width: 280px; line-height: 1.4; padding: 0.75rem; }
.maplibregl-popup-content strong { font-size: 0.95rem; }
.ifk-popup-status { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-weight: 600; font-size: 0.8rem; color: white; margin: 0.3rem 0; }
.ifk-popup-age { display: flex; align-items: center; gap: 0.35rem; margin: 0.3rem 0; font-size: 0.8rem; color: #555; }
.ifk-popup-detail { margin: 0.4rem 0; font-size: 0.82rem; color: #444; }
.ifk-popup-link { display: inline-block; margin-top: 0.4rem; font-size: 0.8rem; color: #667eea; text-decoration: none; font-weight: 600; }
.ifk-popup-link:hover { text-decoration: underline; }
@media (max-width: 640px) { #ifk-world-map { height: 280px; } }
</style>

<div class="ifk-map-wrap">
  <h3>{{ if eq $lang "de" }}Interaktive Weltkarte: Kinderschutzgesetze{{ else if eq $lang "fr" }}Carte interactive : lois de protection de l'enfance{{ else }}Interactive Map: Child Protection Laws{{ end }}</h3>
  <p class="ifk-map-subtitle">{{ if eq $lang "de" }}Klicken Sie auf ein Land für Details{{ else if eq $lang "fr" }}Cliquez sur un pays pour plus de détails{{ else }}Click a country for details{{ end }}</p>
  <div id="ifk-world-map"></div>
  <div class="ifk-map-legend">
    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#667eea"></div>{{ if eq $lang "de" }}In Kraft{{ else if eq $lang "fr" }}En vigueur{{ else }}Enforced{{ end }}</div>
    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#764ba2"></div>{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adopté{{ else }}Passed{{ end }}</div>
    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#a5b4fc"></div>{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}</div>
    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#e0e7ff"></div>{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}</div>
    <div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#e2e8f0"></div>{{ if eq $lang "de" }}Keine Daten{{ else if eq $lang "fr" }}Pas de données{{ else }}No Data{{ end }}</div>
  </div>
</div>

<script src="{{ "js/maplibre-gl.min.js" | relURL }}"></script>
<script src="{{ "js/topojson-client.min.js" | relURL }}"></script>
<script>
function ifkInitMap() {
  if (typeof maplibregl === 'undefined' || typeof topojson === 'undefined') {
    setTimeout(ifkInitMap, 100);
    return;
  }
  var LANG = "{{ $lang }}";
  var STATUS_COLORS = { enforced: '#667eea', passed: '#764ba2', progress: '#a5b4fc', guidelines: '#e0e7ff' };
  // Pre-blended colors (over white bg) to avoid tile-seam artifacts from partial opacity
  var FILL_COLORS = { enforced: '#9cabf1', passed: '#a68ac3', progress: '#c5cefd', guidelines: '#ebefff' };
  var NO_DATA_FILL = '#f0f1f4';
  var STATUS_LABELS = {
    en: { enforced: 'Enforced', passed: 'Passed', progress: 'In Progress', guidelines: 'Guidelines' },
    de: { enforced: 'In Kraft', passed: 'Verabschiedet', progress: 'In Bearbeitung', guidelines: 'Richtlinien' },
    fr: { enforced: 'En vigueur', passed: 'Adopté', progress: 'En cours', guidelines: 'Directives' }
  };

  var countries = {{ $countries | jsonify | safeJS }};
  var byIsoNum = {};
  countries.forEach(function(c) { byIsoNum[c.isoNum] = c; });

  window._ifkMap = new maplibregl.Map({
    container: 'ifk-world-map',
    style: {
      version: 8,
      sources: {
        openmaptiles: {
          type: 'vector',
          url: 'https://maps.clicksports.de/data/v3.json'
        }
      },
      glyphs: 'https://maps.clicksports.de/fonts/{fontstack}/{range}.pbf',
      layers: [
        { id: 'background', type: 'background', paint: { 'background-color': '#ffffff' } },
        { id: 'water', type: 'fill', source: 'openmaptiles', 'source-layer': 'water', paint: { 'fill-color': '#c8d3df' } },
        { id: 'country-labels', type: 'symbol', source: 'openmaptiles', 'source-layer': 'place', minzoom: 3, filter: ['==', 'class', 'country'], layout: { 'text-field': '{name:latin}', 'text-font': ['Open Sans Regular'], 'text-size': 12, 'text-transform': 'uppercase', 'text-letter-spacing': 0.05 }, paint: { 'text-color': '#6b7280', 'text-halo-color': '#ffffff', 'text-halo-width': 1.5 } }
      ]
    },
    center: [20, 20],
    zoom: 2,
    minZoom: 1,
    maxZoom: 6,
    scrollZoom: false,
    attributionControl: false
  });

  window._ifkMap.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right');
  window._ifkMap.addControl(new maplibregl.FullscreenControl(), 'top-right');

  // Enable scroll zoom in fullscreen
  document.addEventListener('fullscreenchange', function() {
    if (document.fullscreenElement) {
      window._ifkMap.scrollZoom.enable();
    } else {
      window._ifkMap.scrollZoom.disable();
    }
  });

  window._ifkMap.on('load', function() {
    fetch('{{ "data/countries-50m.json" | relURL }}')
      .then(function(r) { return r.json(); })
      .then(function(topo) {
        var geo = topojson.feature(topo, topo.objects.countries);

        geo.features.forEach(function(f) {
          var id = String(f.id).padStart(3, '0');
          var c = byIsoNum[id];
          f.properties.fillColor = c ? FILL_COLORS[c.status] : NO_DATA_FILL;
          f.properties.isoNum = id;
        });

        window._ifkMap.addSource('countries-choropleth', { type: 'geojson', data: geo });

        window._ifkMap.addLayer({
          id: 'choropleth-fill',
          type: 'fill',
          source: 'countries-choropleth',
          paint: {
            'fill-color': ['get', 'fillColor'],
            'fill-opacity': 1
          }
        });

        window._ifkMap.addLayer({
          id: 'choropleth-outline',
          type: 'line',
          source: 'countries-choropleth',
          paint: {
            'line-color': '#94a3b8',
            'line-width': 0.5
          }
        });

        var popup = new maplibregl.Popup({ closeButton: true, closeOnClick: false, maxWidth: '280px' });

        // Hover highlight layer
        window._ifkMap.addLayer({
          id: 'choropleth-hover',
          type: 'line',
          source: 'countries-choropleth',
          paint: { 'line-color': '#667eea', 'line-width': 2 },
          filter: ['==', 'isoNum', '']
        });

        window._ifkMap.on('mousemove', 'choropleth-fill', function(e) {
          var id = e.features[0].properties.isoNum;
          var c = byIsoNum[id];
          window._ifkMap.getCanvas().style.cursor = c ? 'pointer' : '';
          window._ifkMap.setFilter('choropleth-hover', c ? ['==', 'isoNum', id] : ['==', 'isoNum', '']);
        });

        window._ifkMap.on('mouseleave', 'choropleth-fill', function() {
          window._ifkMap.getCanvas().style.cursor = '';
          window._ifkMap.setFilter('choropleth-hover', ['==', 'isoNum', '']);
        });

        // Anchor map: country ISO3 → article heading slug
        var ARTICLE_ANCHORS = {
          AUS: 'australia', GBR: '', DEU: 'germany', USA: 'the-united-states',
          FRA: 'france', BRA: 'brazil', IND: '', ITA: '', ESP: '', NOR: '',
          CHN: '', KOR: '', IRL: '', NLD: '', SWE: '', CAN: '', JPN: ''
        };
        if (LANG === 'de') {
          ARTICLE_ANCHORS.AUS = 'australien';
          ARTICLE_ANCHORS.USA = 'die-vereinigten-staaten';
          ARTICLE_ANCHORS.DEU = 'deutschland';
          ARTICLE_ANCHORS.BRA = 'brasilien';
        }

        var AGE_LABELS = { en: 'Min. social media age', de: 'Min. Social-Media-Alter', fr: 'Âge min. réseaux sociaux' };

        window._ifkMap.on('click', 'choropleth-fill', function(e) {
          var id = e.features[0].properties.isoNum;
          var c = byIsoNum[id];
          if (!c) return;
          var loc = c[LANG] || c.en;
          var labels = STATUS_LABELS[LANG] || STATUS_LABELS.en;
          var ageLabel = AGE_LABELS[LANG] || AGE_LABELS.en;
          var statusBg = STATUS_COLORS[c.status];
          var html = '<strong>' + c.flag + ' ' + loc.name + '</strong><br>' +
            '<em>' + loc.law + '</em><br>' +
            '<span class="ifk-popup-status" style="background:' + statusBg + '">' + labels[c.status] + ' (' + c.year + ')</span>' +
            '<div class="ifk-popup-age">👤 ' + ageLabel + ': <strong>' + c.ageLimitSocial + '+</strong></div>' +
            '<div class="ifk-popup-detail">' + loc.detail + '</div>';
          var anchor = ARTICLE_ANCHORS[c.iso3];
          if (anchor) {
            var readMore = { en: 'Read more ↓', de: 'Weiterlesen ↓', fr: 'En savoir plus ↓' };
            html += '<a class="ifk-popup-link" href="#' + anchor + '">' + (readMore[LANG] || readMore.en) + '</a>';
          }
          popup.setLngLat(e.lngLat).setHTML(html).addTo(window._ifkMap);
        });
      });
  });
}
ifkInitMap();
</script>