{"id":39373,"date":"2026-01-01T16:28:25","date_gmt":"2026-01-01T16:28:25","guid":{"rendered":"https:\/\/thisismadeiraisland.com\/?page_id=39373"},"modified":"2026-01-19T22:36:37","modified_gmt":"2026-01-19T22:36:37","slug":"madeira-sun-hunter","status":"publish","type":"page","link":"https:\/\/thisismadeiraisland.com\/sv\/madeira-sun-hunter\/","title":{"rendered":"Madeira Solj\u00e4gare: V\u00e4derkarta i realtid och soliga platser"},"content":{"rendered":"\n<script>\nconsole.log(\n  \"%cSTOP! %cThis code is the property of This is Madeira Island (https:\/\/thisismadeiraisland.com\/). Theft or unauthorized use will be prosecuted.\", \n  \"color: red; font-size: 20px; font-weight: bold;\", \n  \"color: #333; font-size: 14px;\"\n);\n\n\/\/ ... rest of your code ...\n<\/script>\n\n\n\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" integrity=\"sha256-p4NxAoJBhIIN+hmNHrzRCf9tD\/miZyoHS5obTRR9BMY=\" crossorigin=\"\"\/>\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\" integrity=\"sha256-20nQCchB9co0qIjJZRGuk2\/Z9VM+kNiyxNV1lvTlZBo=\" crossorigin=\"\"><\/script>\n\n<style>\n  \/* --- MAIN CONTAINER --- *\/\n  .sh-wrapper {\n    font-family: 'Segoe UI', system-ui, sans-serif;\n    background: linear-gradient(145deg, #ffffff, #f8f9fa);\n    border: 1px solid #e1e4e8;\n    border-radius: 20px;\n    padding: 20px;\n    max-width: 1200px;\n    margin: 88px auto 40px auto; \n    box-shadow: 0 15px 40px rgba(0,0,0,0.08);\n    position: relative;\n    z-index: 10; \n  }\n\n  .sh-header { text-align: center; margin-bottom: 20px; }\n  .sh-title { font-size: 26px; font-weight: 800; color: #2d3436; margin: 0; }\n  .sh-subtitle { color: #636e72; margin-top: 5px; font-size: 14px; }\n\n  \/* --- MAP CONTAINER --- *\/\n  #weather-map {\n    height: 300px;\n    width: 100%;\n    border-radius: 16px;\n    border: 2px solid #fff;\n    box-shadow: 0 5px 15px rgba(0,0,0,0.08);\n    margin-bottom: 25px;\n    z-index: 1;\n  }\n\n  \/* Map Markers *\/\n  .weather-marker {\n    font-size: 24px; text-align: center; line-height: 1;\n    text-shadow: 0 2px 4px rgba(0,0,0,0.3); transition: transform 0.3s ease;\n  }\n  .weather-marker:hover { transform: scale(1.3); }\n\n  .winner-marker {\n    font-size: 32px; z-index: 1000 !important;\n    animation: bounce 2s infinite;\n  }\n  @keyframes bounce {\n    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}\n    40% {transform: translateY(-10px);}\n    60% {transform: translateY(-5px);}\n  }\n\n  \/* --- TOGGLE BAR --- *\/\n  .vibe-bar-container { text-align: center; margin-bottom: 30px; }\n  .vibe-grid {\n    display: inline-flex; justify-content: center; background: #eef1f5;\n    padding: 6px; border-radius: 50px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);\n    gap: 5px; flex-wrap: wrap;\n  }\n  .vibe-card {\n    background: transparent; border: none; padding: 10px 20px;\n    border-radius: 40px; cursor: pointer; font-weight: 600;\n    color: #95a5a6; transition: all 0.3s ease; display: flex; align-items: center;\n    gap: 6px; font-size: 13px; margin: 0;\n  }\n  .vibe-card:hover { color: #555; }\n  .vibe-card.active-sun { background: white; color: #d35400; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }\n  .vibe-card.active-hike { background: white; color: #27ae60; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }\n  .vibe-card.active-photo { background: white; color: #6c5ce7; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }\n\n  @media (max-width: 600px) {\n    .vibe-grid { display: flex; width: 100%; }\n    .vibe-card { justify-content: center; flex: 1; padding: 10px 5px; font-size: 12px; }\n    #weather-map { height: 250px; }\n    .sh-wrapper { margin-top: 88px; padding: 15px;}\n  }\n\n  \/* --- 3D FLIP CARD SYSTEM --- *\/\n  .sh-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n    gap: 20px;\n    padding-bottom: 20px;\n  }\n\n  .sh-card-container {\n    background-color: transparent;\n    perspective: 1000px; \n    min-height: 400px; \/* Increased height for mobile too *\/\n  }\n\n  \/* --- DESKTOP SIZE OVERRIDE --- *\/\n  @media (min-width: 900px) {\n    .sh-grid {\n        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); \n        gap: 25px;\n    }\n    .sh-card-container {\n        min-height: 420px; \n    }\n    .sh-temp { font-size: 32px; }\n  }\n\n  .sh-card-inner {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    text-align: center;\n    transition: transform 0.8s;\n    transform-style: preserve-3d;\n    border-radius: 16px;\n    box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n  }\n\n  .sh-card-container.flipped .sh-card-inner {\n    transform: rotateY(180deg);\n  }\n\n  .sh-card-front, .sh-card-back {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    border-radius: 16px;\n    background: white;\n    border: 2px solid transparent;\n    padding: 15px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between; \n    align-items: center;\n  }\n\n  .sh-card-front { z-index: 2; }\n\n  .sh-card-back {\n    transform: rotateY(180deg);\n    background: #000;\n    padding: 0;\n    overflow: hidden; \n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n   \n  .sh-card-back iframe {\n      width: 100% !important;\n      height: 100% !important;\n      border: none;\n      border-radius: 14px;\n      object-fit: cover;\n  }\n\n  .sh-card-back iframe.nm-scale {\n      width: 208px !important; \n      height: 156px !important;\n      min-width: 208px !important; \n      min-height: 156px !important;\n      transform: scale(2.3); \n      transform-origin: center center;\n  }\n\n  .sh-card-container.winner .sh-card-front {\n    border-color: #f1c40f;\n    box-shadow: 0 0 20px rgba(241, 196, 15, 0.2);\n  }\n\n  .sh-badge {\n    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);\n    background: #f1c40f; color: #000; font-size: 9px; font-weight: 800;\n    padding: 3px 8px; border-radius: 20px; display: none;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  }\n  .sh-card-container.winner .sh-badge { display: block; }\n\n  .sh-zone-name { font-size: 13px; font-weight: 700; color: #b2bec3; text-transform: uppercase; margin-bottom: 5px; margin-top: 5px; }\n  .sh-temp-box { display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 0px; }\n  .sh-icon { width: 40px; height: 40px; }\n  .sh-temp { font-size: 24px; font-weight: 800; color: #2d3436; transition: font-size 0.3s;}\n  .sh-desc { font-size: 11px; color: #888; text-transform: capitalize; margin-bottom: 15px; }\n\n  \/* --- STATS SECTION --- *\/\n  .sh-wow-container {\n    width: 100%;\n    background: #fdfdfd;\n    border-radius: 12px;\n    padding: 10px;\n    border: 1px solid #f0f0f0;\n    margin-bottom: auto; \n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  \/* Generic Label Style *\/\n  .sh-stat-label { font-size: 10px; color: #636e72; font-weight: 700; display: flex; justify-content: space-between; margin-bottom: 3px; }\n\n  \/* 1. Score Bar *\/\n  .sh-score-wrap { text-align: left; }\n  .sh-score-bg { height: 6px; width: 100%; background: #dfe6e9; border-radius: 10px; overflow: hidden; }\n  .sh-score-fill { height: 100%; border-radius: 10px; width: 0%; transition: width 1s ease; }\n\n  \/* 2. Dashboard Grid *\/\n  .sh-dash-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 5px;\n    text-align: center;\n    border-top: 1px dashed #eee;\n    border-bottom: 1px dashed #eee;\n    padding: 8px 0;\n  }\n  .sh-dash-item { display: flex; flex-direction: column; align-items: center; }\n  .sh-dash-icon { font-size: 14px; margin-bottom: 2px; }\n  .sh-dash-val { font-size: 12px; font-weight: 800; color: #2d3436; }\n  .sh-dash-lbl { font-size: 9px; color: #b2bec3; }\n\n  \/* 3. Timeline *\/\n  .sh-time-wrap { width: 100%; }\n  .sh-time-bar-box { display: flex; align-items: center; gap: 5px; }\n  .sh-time-bar { flex: 1; height: 4px; background: #dfe6e9; border-radius: 2px; position: relative; overflow: hidden; }\n  .sh-time-progress { height: 100%; background: linear-gradient(90deg, #ff9f43, #54a0ff); width: 0%; }\n  .sh-time-lbl { font-size: 9px; color: #aaa; white-space: nowrap;}\n   \n  \/* Timeline Labels *\/\n  .sh-time-text { display: flex; justify-content: space-between; font-size: 9px; color: #b2bec3; margin-top: 2px; font-weight: 600;}\n\n  \/* Buttons *\/\n  .sh-cam-btn, .sh-flip-btn {\n    display: block; width: 100%; padding: 8px 0;\n    font-size: 11px; font-weight: 600;\n    border-radius: 6px; text-decoration: none; transition: 0.2s;\n    cursor: pointer; margin-top: 10px;\n  }\n   \n  .sh-cam-btn { color: #0984e3; background: rgba(9, 132, 227, 0.1); }\n  .sh-cam-btn:hover { background: #0984e3; color: white; }\n\n  .sh-flip-btn { color: white; background: #e17055; border: none; }\n  .sh-flip-btn:hover { background: #d35400; }\n   \n  .sh-back-btn {\n    position: absolute; top: 10px; right: 10px;\n    background: rgba(255, 255, 255, 0.2); color: white;\n    border: 1px solid rgba(255,255,255,0.5);\n    border-radius: 50%; width: 25px; height: 25px;\n    cursor: pointer; z-index: 100; font-size: 12px;\n    display: flex; align-items: center; justify-content: center;\n  }\n  .sh-back-btn:hover { background: rgba(255, 255, 255, 0.4); }\n\n  .sh-footer { margin-top: 30px; text-align: center; border-top: 1px solid #eee; padding-top: 20px; }\n  .sh-upsell {\n    display: inline-block; background: #00b894; color: white;\n    padding: 12px 30px; border-radius: 50px; font-weight: bold;\n    text-decoration: none; box-shadow: 0 5px 15px rgba(0, 184, 148, 0.4);\n    transition: transform 0.2s;\n  }\n  .sh-upsell:hover { transform: scale(1.03); background: #00a383; }\n<\/style>\n\n<div class=\"sh-wrapper\">\n  <div class=\"sh-header\">\n    <h2 class=\"sh-title\">\u2600\ufe0f Madeira Sun Hunter<\/h2>\n    <div class=\"sh-subtitle\">Live Strategic Map &#038; Weather Dashboard<\/div>\n  <\/div>\n\n  <div id=\"weather-map\"><\/div>\n    \n  <div class=\"vibe-bar-container\">\n    <div class=\"vibe-grid\">\n      <div class=\"vibe-card active-sun\" id=\"btn-sun\" onclick=\"setVibe('sun')\">\ud83c\udfd6\ufe0f Sun &#038; Beach<\/div>\n      <div class=\"vibe-card\" id=\"btn-hike\" onclick=\"setVibe('hiking')\">\ud83e\udd7e Hiking<\/div>\n      <div class=\"vibe-card\" id=\"btn-photo\" onclick=\"setVibe('dramatic')\">\ud83d\udcf8 Photography<\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"sh-grid\" id=\"sh-grid\">\n    <div style=\"text-align:center; grid-column: 1\/-1; padding: 40px; color: #b2bec3;\">\n      \ud83d\udce1 Connecting to Satellites&#8230;\n    <\/div>\n  <\/div>\n\n  <div class=\"sh-footer\">\n    <div style=\"margin-bottom:15px; color:#636e72; font-size:13px;\" id=\"recommendation-text\">\n      \ud83d\udca1 <b>Strategy:<\/b> Use the map to spot the clear sky zones.\n    <\/div>\n    <a href=\"https:\/\/thisismadeiraisland.com\/rent-a-car\" class=\"sh-upsell\">\ud83d\ude97 Rent a Car &#038; Chase the Sun<\/a>\n  <\/div>\n<\/div>\n\n<script>\nconst API_KEY = \"dabff32f63864cedf543f7b42eb50983\"; \nlet currentVibe = 'sun';\nlet map, markers = {}; \n\nconst ZONES = [\n  { \n    id: 'achada', name: 'Achada Teixeira', lat: 32.7653, lon: -16.9209, type: 'peak', \n    camSrc: 'https:\/\/www.netmadeira.com\/webcams\/show\/netmadeira\/achada-do-teixeira',\n    isNetMadeira: true\n  },\n  { \n    id: 'calheta', name: 'Calheta', lat: 32.7210, lon: -17.1740, type: 'beach', \n    camSrc: 'https:\/\/www.youtube-nocookie.com\/embed\/t4x0u0ARLwo?autoplay=1&mute=1&controls=0&playsinline=1&loop=1&playlist=t4x0u0ARLwo',\n    isNetMadeira: false\n  },\n  { \n    id: 'eira', name: 'Eira do Serrado', lat: 32.7103, lon: -16.9657, type: 'nature', \n    camSrc: 'https:\/\/www.netmadeira.com\/webcams\/show\/netmadeira\/eira-do-serrado',\n    isNetMadeira: true\n  },\n  { \n    id: 'funchal', name: 'Funchal', lat: 32.6469, lon: -16.9085, type: 'city', \n    camSrc: 'https:\/\/www.netmadeira.com\/webcams\/show\/netmadeira\/funchal-baia-do-funchal',\n    isNetMadeira: true\n  },\n  { \n    id: 'machico', name: 'Machico', lat: 32.7167, lon: -16.7667, type: 'beach', \n    camSrc: 'https:\/\/www.netmadeira.com\/webcams\/show\/netmadeira\/machico',\n    isNetMadeira: true\n  },\n  { \n    id: 'pauldomar', name: 'Paul do Mar', lat: 32.7588, lon: -17.2302, type: 'beach', \n    camSrc: 'https:\/\/www.youtube-nocookie.com\/embed\/faR8yLHyyzw?autoplay=1&mute=1&controls=0&playsinline=1&loop=1&playlist=faR8yLHyyzw',\n    isNetMadeira: false\n  },\n  { \n    id: 'arieiro', name: 'Pico Arieiro', lat: 32.7356, lon: -16.9287, type: 'peak', \n    camSrc: 'https:\/\/www.netmadeira.com\/webcams\/show\/netmadeira\/pico-do-arieiro',\n    isNetMadeira: true\n  },\n  { \n    id: 'pontadosol', name: 'Ponta do Sol', lat: 32.6719, lon: -17.1030, type: 'beach', \n    camSrc: 'https:\/\/www.netmadeira.com\/webcams\/show\/netmadeira\/ponta-do-sol',\n    isNetMadeira: true\n  },\n  { \n    id: 'portomoniz', name: 'Porto Moniz', lat: 32.8679, lon: -17.1666, type: 'pool', \n    camSrc: 'https:\/\/www.youtube-nocookie.com\/embed\/cLxcBSxBuBY?autoplay=1&mute=1&controls=0&playsinline=1&loop=1&playlist=cLxcBSxBuBY',\n    isNetMadeira: false\n  },\n  { \n    id: 'rabacal', name: 'Raba\u00e7al', lat: 32.7540, lon: -17.1330, type: 'nature', \n    camSrc: 'https:\/\/www.netmadeira.com\/webcams\/show\/netmadeira\/rabacal-madeira',\n    isNetMadeira: true\n  }\n];\n\nfunction initMap() {\n  if (map) return; \n  map = L.map('weather-map').setView([32.7607, -16.9595], 10); \n  L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/light_all\/{z}\/{x}\/{y}{r}.png', {\n    attribution: '\u00a9OpenStreetMap, \u00a9CartoDB',\n    maxZoom: 19\n  }).addTo(map);\n}\n\nfunction setVibe(vibe) {\n  currentVibe = vibe;\n  document.querySelectorAll('.vibe-card').forEach(btn => btn.className = 'vibe-card');\n  if(vibe === 'sun') document.getElementById('btn-sun').classList.add('active-sun');\n  if(vibe === 'hiking') document.getElementById('btn-hike').classList.add('active-hike');\n  if(vibe === 'dramatic') document.getElementById('btn-photo').classList.add('active-photo');\n  fetchWeather(); \n}\n\nfunction toggleFlip(id, src) {\n  const card = document.getElementById(id);\n  const iframe = card.querySelector('iframe');\n   \n  if (!card.classList.contains('flipped')) {\n      if (iframe && src) {\n          iframe.src = src; \n      }\n  } else {\n      if (iframe) {\n          iframe.src = \"\"; \n      }\n  }\n   \n  card.classList.toggle('flipped');\n}\n\nasync function fetchWeather() {\n  initMap(); \n  const container = document.getElementById('sh-grid');\n  const recText = document.getElementById('recommendation-text');\n\n  if(!API_KEY) return;\n  if(container.children.length > 0 && !container.innerHTML.includes('Scanning')) {\n      container.innerHTML = \"\"; \n  }\n\n  let bestZoneId = \"\";\n  let highestScore = -1000;\n\n  for (const zone of ZONES) {\n    try {\n      const res = await fetch(`https:\/\/api.openweathermap.org\/data\/2.5\/weather?lat=${zone.lat}&lon=${zone.lon}&units=metric&appid=${API_KEY}`);\n      if (!res.ok) continue; \n      const data = await res.json();\n\n      if(container.innerHTML.includes('Scanning')) container.innerHTML = \"\";\n\n      \/\/ --- DATA EXTRACTION ---\n      let score = 0;\n      const temp = data.main.temp;\n      const clouds = data.clouds.all;\n      const isRain = data.weather[0].main.toLowerCase().includes('rain');\n      const windKmh = Math.round(data.wind.speed * 3.6); \n      const humidity = data.main.humidity;\n      const visibilityKm = (data.visibility \/ 1000).toFixed(1);\n       \n      const now = Date.now() \/ 1000;\n      const sunrise = data.sys.sunrise;\n      const sunset = data.sys.sunset;\n      let dayProgress = ((now - sunrise) \/ (sunset - sunrise)) * 100;\n      if (dayProgress < 0) dayProgress = 0; \n      if (dayProgress > 100) dayProgress = 100; \n\n      \/\/ Format Times (Madeira is UTC+0 in Winter, UTC+1 Summer, but for simple display we use browser local or standard)\n      \/\/ Note: This uses standard browser formatting for simplicity\n      const sunriseTime = new Date(sunrise * 1000).toLocaleTimeString('en-GB', {timeZone: 'Atlantic\/Madeira', hour: '2-digit', minute:'2-digit'});\n      const sunsetTime = new Date(sunset * 1000).toLocaleTimeString('en-GB', {timeZone: 'Atlantic\/Madeira', hour: '2-digit', minute:'2-digit'});\n\n      let rawScore = 0;\n      if (currentVibe === 'sun') {\n        rawScore = temp + (100 - clouds) * 0.5;\n        if(isRain) rawScore -= 50;\n        if(zone.type === 'beach') rawScore += 10;\n      } else if (currentVibe === 'hiking') {\n        rawScore = (20 - Math.abs(18 - temp)) * 2 + (100 - clouds)*0.3;\n        if(windKmh > 20) rawScore -= 20; \n        if(zone.type === 'peak') rawScore += 10;\n      } else {\n        rawScore = clouds + (isRain ? 20 : 0); \n      }\n       \n      let displayScore = Math.min(100, Math.max(0, Math.round(rawScore)));\n      let scoreColor = '#ff7675'; \n      if(displayScore > 40) scoreColor = '#fdcb6e'; \n      if(displayScore > 70) scoreColor = '#00b894'; \n\n      if (rawScore > highestScore) {\n        highestScore = rawScore;\n        bestZoneId = zone.id;\n      }\n\n      let emoji = '\u26c5';\n      if(isRain) emoji = '\ud83c\udf27\ufe0f';\n      else if(clouds < 20) emoji = '\u2600\ufe0f';\n      else if(clouds > 80) emoji = '\u2601\ufe0f';\n\n      \/\/ --- RENDER LOGIC ---\n      let el = document.createElement('div');\n      el.className = 'sh-card-container';\n      el.id = `card-${zone.id}`;\n       \n      const scaleClass = zone.isNetMadeira ? 'nm-scale' : '';\n      const flipBtn = `<button class=\"sh-flip-btn\" onclick=\"toggleFlip('card-${zone.id}', '${zone.camSrc}')\">\ud83d\udcf7 View Live Player<\/button>`;\n       \n      const backContent = `\n         <button class=\"sh-back-btn\" onclick=\"toggleFlip('card-${zone.id}', '')\">\u2715<\/button>\n         <iframe class=\"${scaleClass}\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"><\/iframe>\n      `;\n\n      const wowContent = `\n        <div class=\"sh-wow-container\">\n          <div class=\"sh-score-wrap\">\n             <div class=\"sh-stat-label\">\n                <span>Sun Score<\/span>\n                <span>${displayScore}%<\/span>\n             <\/div>\n             <div class=\"sh-score-bg\">\n                <div class=\"sh-score-fill\" style=\"width:${displayScore}%; background:${scoreColor};\"><\/div>\n             <\/div>\n          <\/div>\n\n          <div class=\"sh-dash-grid\">\n             <div class=\"sh-dash-item\">\n                <div class=\"sh-dash-icon\">\ud83d\udca8<\/div>\n                <div class=\"sh-dash-val\">${windKmh}<\/div>\n                <div class=\"sh-dash-lbl\">km\/h<\/div>\n             <\/div>\n             <div class=\"sh-dash-item\">\n                <div class=\"sh-dash-icon\">\ud83d\udca7<\/div>\n                <div class=\"sh-dash-val\">${humidity}%<\/div>\n                <div class=\"sh-dash-lbl\">Hum<\/div>\n             <\/div>\n             <div class=\"sh-dash-item\">\n                <div class=\"sh-dash-icon\">\ud83d\udc41\ufe0f<\/div>\n                <div class=\"sh-dash-val\">${visibilityKm}<\/div>\n                <div class=\"sh-dash-lbl\">Vis\/km<\/div>\n             <\/div>\n          <\/div>\n\n          <div class=\"sh-time-wrap\">\n             <div class=\"sh-stat-label\">\n                <span>Daylight Schedule<\/span>\n             <\/div>\n             <div class=\"sh-time-bar-box\">\n               <div class=\"sh-time-lbl\">\ud83c\udf05<\/div>\n               <div class=\"sh-time-bar\">\n                  <div class=\"sh-time-progress\" style=\"width:${dayProgress}%\"><\/div>\n               <\/div>\n               <div class=\"sh-time-lbl\">\ud83c\udf07<\/div>\n             <\/div>\n             <div class=\"sh-time-text\">\n                <span>${sunriseTime}<\/span>\n                <span>${sunsetTime}<\/span>\n             <\/div>\n          <\/div>\n        <\/div>\n      `;\n\n      el.innerHTML = `\n        <div class=\"sh-card-inner\">\n          <div class=\"sh-card-front\">\n            <div class=\"sh-badge\">BEST CHOICE<\/div>\n            <div class=\"sh-zone-name\">${zone.name}<\/div>\n            <div class=\"sh-temp-box\">\n              <img decoding=\"async\" src=\"https:\/\/openweathermap.org\/img\/wn\/${data.weather[0].icon}.png\" class=\"sh-icon\">\n              <div class=\"sh-temp\">${Math.round(temp)}\u00b0<\/div>\n            <\/div>\n            <div class=\"sh-desc\">${data.weather[0].description}<\/div>\n            \n            ${wowContent}\n\n            ${flipBtn}\n          <\/div>\n          <div class=\"sh-card-back\">\n            ${backContent}\n          <\/div>\n        <\/div>\n      `;\n      container.appendChild(el);\n\n      const iconHtml = `<div class=\"weather-marker\" id=\"mark-${zone.id}\">${emoji}<\/div>`;\n      const customIcon = L.divIcon({\n        html: iconHtml,\n        className: 'custom-div-icon', \n        iconSize: [30, 30],\n        iconAnchor: [15, 15]\n      });\n\n      if (markers[zone.id]) {\n        markers[zone.id].setIcon(customIcon);\n      } else {\n        const m = L.marker([zone.lat, zone.lon], {icon: customIcon}).addTo(map);\n        m.on('click', () => {\n          document.getElementById(`card-${zone.id}`).scrollIntoView({ behavior: 'smooth', block: 'center' });\n        });\n        markers[zone.id] = m;\n      }\n\n    } catch (e) {\n      console.log(e);\n    }\n  }\n\n  if(bestZoneId) {\n    const winnerCard = document.getElementById(`card-${bestZoneId}`);\n    if(winnerCard) {\n        winnerCard.classList.add('winner');\n        let color = '#f1c40f'; \n        if(currentVibe === 'hiking') color = '#27ae60';\n        if(currentVibe === 'dramatic') color = '#6c5ce7';\n        \n        const front = winnerCard.querySelector('.sh-card-front');\n        if(front) front.style.borderColor = color;\n        \n        if(currentVibe === 'sun') recText.innerHTML = \"\ud83d\udca1 <b>Sun Strategy:<\/b> Look for the Golden Circle on the map.\";\n        if(currentVibe === 'hiking') recText.innerHTML = \"\ud83d\udca1 <b>Hiker Tip:<\/b> The highlighted mountain zone has the best visibility.\";\n        if(currentVibe === 'dramatic') recText.innerHTML = \"\ud83d\udca1 <b>Photo Tip:<\/b> Head to the purple highlighted zone for mood.\";\n    }\n    \n    Object.values(markers).forEach(m => {\n       const el = m.getElement();\n       if(el) {\n         const inner = el.querySelector('.weather-marker');\n         if(inner) inner.classList.remove('winner-marker');\n       }\n    });\n    \n    if(markers[bestZoneId]) {\n      const el = markers[bestZoneId].getElement();\n      if(el) {\n         const inner = el.querySelector('.weather-marker');\n         if(inner) inner.classList.add('winner-marker');\n      }\n    }\n  }\n}\n\nfetchWeather();\n<\/script>\n\n\n\n<div style=\"\n    text-align: center; \n    font-size: 11px; \n    color: #94a3b8; \n    padding: 20px; \n    border-top: 1px solid #e2e8f0; \n    margin-top: 20px;\n    opacity: 0.8;\">\n    \n    Madeira Sun Hunter \u00a9 2026 <a href=\"https:\/\/thisismadeiraisland.com\/\" style=\"color: inherit; text-decoration: none; font-weight: 600;\">This is Madeira Island<\/a>. \n    <br>Unauthorized copying of this tool&#8217;s code or logic is prohibited.\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"\u2600\ufe0f Madeira Sun Hunter Live Strategic Map &amp; Weather Dashboard \ud83c\udfd6\ufe0f Sol och strand \ud83e\udd7e Vandring \ud83d\udcf8 Fotografi \ud83d\udce1 Ansluter till satelliter ... \ud83d\udca1 Strategi: Anv\u00e4nd kartan f\u00f6r att hitta zoner med klar himmel. \ud83d\ude97 Hyr en bil och jaga solen Madeira Sun Hunter \u00a9 2026 This is Madeira Island. Obeh\u00f6rig kopiering av detta verktygs kod eller logik \u00e4r f\u00f6rbjuden.","protected":false},"author":63,"featured_media":35339,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-39373","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/thisismadeiraisland.com\/sv\/wp-json\/wp\/v2\/pages\/39373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thisismadeiraisland.com\/sv\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thisismadeiraisland.com\/sv\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thisismadeiraisland.com\/sv\/wp-json\/wp\/v2\/users\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/thisismadeiraisland.com\/sv\/wp-json\/wp\/v2\/comments?post=39373"}],"version-history":[{"count":0,"href":"https:\/\/thisismadeiraisland.com\/sv\/wp-json\/wp\/v2\/pages\/39373\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thisismadeiraisland.com\/sv\/wp-json\/wp\/v2\/media\/35339"}],"wp:attachment":[{"href":"https:\/\/thisismadeiraisland.com\/sv\/wp-json\/wp\/v2\/media?parent=39373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}