internetforkids/layouts/shortcodes/world-map.html

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css" />
<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; background: #f0f4f8; }
.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); }
@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:#4d7c0f"></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:#059669"></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:#86efac"></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:#d1fae5"></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="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var LANG = "{{ $lang }}";
  var STATUS_COLORS = { enforced: '#4d7c0f', passed: '#059669', progress: '#86efac', guidelines: '#d1fae5' };
  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 }};
  var byIsoNum = {};
  countries.forEach(function(c) { byIsoNum[c.isoNum] = c; });

  var map = L.map('ifk-world-map', {
    center: [25, 10], zoom: 2, minZoom: 2, maxZoom: 6,
    scrollWheelZoom: false, zoomControl: true
  });

  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>',
    maxZoom: 6
  }).addTo(map);

  fetch('https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-110m.json')
    .then(function(r) { return r.json(); })
    .then(function(topo) {
      var geo = topojson.feature(topo, topo.objects.countries);
      L.geoJSON(geo, {
        style: function(feature) {
          var id = String(feature.id).padStart(3, '0');
          var c = byIsoNum[id];
          return {
            fillColor: c ? STATUS_COLORS[c.status] : '#e2e8f0',
            weight: 0.8,
            color: '#94a3b8',
            fillOpacity: c ? 0.75 : 0.3
          };
        },
        onEachFeature: function(feature, layer) {
          var id = String(feature.id).padStart(3, '0');
          var c = byIsoNum[id];
          if (!c) return;
          var loc = c[LANG] || c.en;
          var labels = STATUS_LABELS[LANG] || STATUS_LABELS.en;
          layer.bindPopup(
            '<strong>' + c.flag + ' ' + loc.name + '</strong><br>' +
            '<em>' + loc.law + '</em><br>' +
            '<span style="color:' + STATUS_COLORS[c.status] + ';font-weight:600">' + labels[c.status] + '</span> (' + c.year + ')<br>' +
            loc.detail
          );
          layer.on('mouseover', function(e) { e.target.setStyle({ weight: 2, color: '#1e293b' }); });
          layer.on('mouseout', function(e) { e.target.setStyle({ weight: 0.8, color: '#94a3b8' }); });
        }
      }).addTo(map);
    });
});
</script>