https://yle.fi/ukko/assets/build/798.d01c44428daee7273540.js

1"use strict";(globalThis.webpackChunkukko||=[]).push([[798],{93798(e,t,o){o.r(t),o.d(t,{default:()=>ge});var n=o(11684),i=o(90549),a=o(62234),r=o.n(a),l=o(79628),s=o(12888),c=o(65116),d=o(18798),p=o(82331),u=o(53504),h=o(41916),m=o(44832),g=o(31556),f=o(38905),x=o(66972),b=o(32609),y=o(39012),C=o(85063),v=o(74338),w=o(19429);const I=m.I4.div.withConfig({displayName:"LightningControl__LightningControlContainer",componentId:"sc-1ca30b98-0"})(["position:absolute;right:","px;bottom:","px;z-index:",";@media (min-width:","px){right:","px;}"],16,88,y.fw.leaflet,y.aq.tablet,24),k=m.I4.img.withConfig({displayName:"LightningControl__LightningIcon",componentId:"sc-1ca30b98-1"})(["width:","px;"],20),j=(0,m.I4)(v.$).withConfig({displayName:"LightningControl__ControlButton",componentId:"sc-1ca30b98-2"})(["background-color:rgb(0,0,0,70%);&:hover{background-color:rgb(0,0,0,70%);}"]);function _(e){let{onClick:t,lightningsEnabled:o}=e;const i=(0,f.h)(),a=o?(0,n.jsx)(k,{"data-testid":"lightning-control-lightnings-enabled",src:i("img/salama-on.svg"),alt:"Piilota salamat"}):(0,n.jsx)(k,{"data-testid":"lightning-control-lightnings-disabled",src:i("img/salama-off.svg"),alt:"Näytä salamat"});return(0,n.jsx)(I,{"data-testid":"lightning-control",children:(0,n.jsx)(w.n,{theme:"light",unit:"px",children:(0,n.jsx)(j,{iconOnly:!0,size:"sm",iconBefore:a,onClick:t,"aria-label":"Näytä/piilota salamat"})})})}var W=o(35973),z=o(87647),S=o(71952),F=o(21327),B=o(84222),N=o(32879),M=o(19823),Z=o(9830),$=o(46885),A=o(25775),L=o(89722),O=o(44256);const T=m.I4.div.withConfig({displayName:"Slider",componentId:"sc-4f7fc1c5-0"})(["display:flex;"]),E=m.I4.div.withConfig({displayName:"Slider__Track",componentId:"sc-4f7fc1c5-1"})(["height:32px;width:100%;position:relative;cursor:grab;&::before{content:'';display:block;position:absolute;background:#949697;height:2px;width:100%;top:50%;transform:translateY(-50%);}"]),P=m.I4.div.withConfig({displayName:"Slider__Thumb",componentId:"sc-4f7fc1c5-2"})(["margin:16px 0;width:16px;height:16px;border-radius:50%;background:#29ccde;position:relative;z-index:1;outline:",";outline-offset:",";"],e=>e.$isFocusVisible?"3px solid #29ccde":"",e=>(e.$isFocusVisible,"2px")),R=m.I4.div.withConfig({displayName:"Slider__ThumbProgress",componentId:"sc-4f7fc1c5-3"})(["position:absolute;height:2px;width:",";left:0;top:15px;background:#29ccde;"],e=>e.$progress);function K(e){const t=(0,s.useRef)(null),{tooltip:o}=e,i=(0,N.J)(),a=(0,O.S)({...e,numberFormatter:i}),{groupProps:r,trackProps:l}=(0,M.P)(e,a,t),c=(0,s.useRef)(null),{thumbProps:d,inputProps:p}=(0,Z.x)({index:0,trackRef:t,inputRef:c},a),{focusProps:u,isFocusVisible:h}=(0,$.o)();return(0,n.jsx)(T,{...r,children:(0,n.jsxs)(E,{...l,ref:t,children:[(0,n.jsxs)(P,{...d,$isFocusVisible:h,children:[o,(0,n.jsx)(A.s,{children:(0,n.jsx)("input",{ref:c,...(0,L.v)(p,u)})})]}),(0,n.jsx)(R,{$progress:d.style?.left})]})})}const D=m.I4.div.withConfig({displayName:"WeatherMapControls__WeatherMapControlsWrapper",componentId:"sc-8b2f97f1-0"})(["display:flex;position:absolute;left:0;bottom:0;height:","px;width:100%;background:rgb(0,0,0,60%);z-index:",";padding:0 ","px;@media (min-width:","px){padding:0 ","px;}"],64,y.fw.leaflet,16,y.aq.tablet,24),H=m.I4.div.withConfig({displayName:"WeatherMapControls__WeatherMapControlsContainer",componentId:"sc-8b2f97f1-1"})(["display:flex;width:100%;gap:","px;flex-direction:row;align-items:center;user-select:none;"],16),q=m.I4.div.withConfig({displayName:"WeatherMapControls__SeekBarContainer",componentId:"sc-8b2f97f1-2"})(["flex:1;"]),U=m.I4.div.withConfig({displayName:"WeatherMapControls__Tooltip",componentId:"sc-8b2f97f1-3"})(["position:absolute;right:","px;bottom:52px;transform:translate3d(50%,0,0);padding:","px;border-radius:4px;font-size:14px;text-align:center;line-height:21px;z-index:2;background:",";color:",";&::after{content:'';z-index:1;display:block;position:absolute;bottom:-","px;left:50%;width:0;height:0;border-left:","px solid transparent;border-right:","px solid transparent;border-top:","px solid ",";transform:translate3d(-","px,0,0);}"],8,8,e=>e.$type===W.vp.Forecast?"#fff":"#000",e=>e.$type===W.vp.Forecast?"#000":"#fff",8,8,8,8,e=>e.$type===W.vp.Forecast?"#fff":"#000",8),G=m.I4.p.withConfig({displayName:"WeatherMapControl

1s__TooltipDate",componentId:"sc-8b2f97f1-4"})(["font-weight:bold;white-space:nowrap;font-size:12px;"]),V=m.I4.p.withConfig({displayName:"WeatherMapControls__TooltipType",componentId:"sc-8b2f97f1-5"})(["white-space:nowrap;> a{margin-left:4px;top:3px;padding:0;border:0;min-width:0;min-height:0;}"]),J=m.I4.span.withConfig({displayName:"WeatherMapControls__Time",componentId:"sc-8b2f97f1-6"})(["color:#fff;line-height:32px;font-size:14px;"]),Q=(0,m.I4)(v.$).withConfig({displayName:"WeatherMapControls__FullscreenButton",componentId:"sc-8b2f97f1-7"})(["background-color:transparent;color:rgb(248,249,250);padding:0;margin:0 -","px;&:hover{background-color:transparent;color:rgb(248,249,250);padding:0;}"],12);function Y(e){let{mapType:t,playback:o,slices:i,currentSlice:a,onSeek:r,onPlay:l,containerRef:c}=e;const{translate:d}=(0,C.xy)(),{isIOS:p}=(0,B._W)(),[u,h]=(0,s.useState)(!1),m=(0,s.useCallback)(()=>{document.fullscreenElement?(document.exitFullscreen(),h(!1)):(c.current?.requestFullscreen(),h(!0))},[c]);return(0,n.jsx)(D,{"data-testid":"controls-wrapper",children:(0,n.jsx)(w.n,{theme:"dark",unit:"px",children:(0,n.jsxs)(H,{children:[(0,n.jsx)(v.$,{iconOnly:!0,size:"xs",iconBefore:o?(0,n.jsx)(z.vRz,{}):(0,n.jsx)(z.jGG,{}),"aria-label":d(o?"weather.map.stopAnimation":"weather.map.startAnimation"),onClick:l}),(0,n.jsx)(J,{children:(0,S.GP)(i[0].date,"HH:mm")}),(0,n.jsx)(q,{children:(0,n.jsx)(K,{label:"slider","aria-label":d("weather.map.timeline"),maxValue:i.length-1,step:1,value:a,onChange:r,tooltip:(0,n.jsxs)(U,{$type:i[a].type,children:[(0,n.jsx)(G,{children:(0,S.GP)(i[a].date,"iiiiii HH:mm",{locale:F.fi})}),(0,n.jsxs)(V,{children:[i[a].type===W.vp.Forecast?d("weather.map.forecast"):d("weather.map.observation"),i[a].type===W.vp.Observation&&t===W.d1.Rain&&(0,n.jsx)(v.$,{as:"a",size:"xs",variant:"text",iconOnly:!0,removePadding:!0,href:d("weather.map.rain.infoUrl"),iconBefore:(0,n.jsx)(z.R2D,{}),accessibleText:d("weather.map.rain.infoUrlText")})]})]})})}),(0,n.jsx)(J,{children:(0,S.GP)(i[i.length-1].date,"HH:mm")}),!p&&(0,n.jsx)(Q,{iconOnly:!0,size:"md",iconBefore:u?(0,n.jsx)(z.QDu,{}):(0,n.jsx)(z.glU,{}),"aria-label":d("weather.map.fullscreen"),onClick:m})]})})})}var X=o(79971);const ee=m.I4.div.withConfig({displayName:"WeatherMapIntensity__IntensityContainer",componentId:"sc-d00a63b6-0"})(["display:flex;flex-direction:row;width:100%;"]),te=m.I4.div.withConfig({displayName:"WeatherMapIntensity__Intensity",componentId:"sc-d00a63b6-1"})(["flex:1;height:","px;line-height:","px;font-size:12px;text-align:center;color:",";background-color:",";"],24,24,e=>e.$color||X.yW.WHITE,e=>e.$background||X.yW.BLACK),oe=(0,m.I4)(te).withConfig({displayName:"WeatherMapIntensity__IntensityUnit",componentId:"sc-d00a63b6-2"})(["flex-grow:0;padding:0 ","px;background:",";"],8,X.yW.BLACK),ne={[W.d1.Rain]:{unit:"mm/h",steps:[{value:.1,background:"#84F3F4",color:X.yW.BLACK},{value:.2,background:"#56BBF9",color:X.yW.BLACK},{value:.5,background:"#4294F7",color:X.yW.BLACK},{value:1,background:"#2C68CC"},{value:2,background:"#2D2DB5"},{value:5,background:"#9D1FB5"},{value:10,background:"#6914BB"},{value:">10",background:"#D51A0D"}]},[W.d1.Wind]:{unit:"m/s",steps:[{value:3,background:"#68E2FB",color:X.yW.BLACK},{value:5,background:"#58C0F9",color:X.yW.BLACK},{value:7,background:"#2E6CF6",color:X.yW.BLACK},{value:10,background:"#0619F5"},{value:14,background:"#C229F6"},{value:17,background:"#A42191"},{value:21,background:"#EA3323"},{value:26,background:"#EC622B"},{value:32,background:"#F3AE3D"}]}};function ie(e){let{type:t}=e;return(0,n.jsxs)(ee,{children:[(0,n.jsx)(oe,{children:ne[t].unit}),ne[t].steps.map(e=>(0,n.jsx)(te,{$color:e.color?e.color:X.yW.WHITE,$background:e.background,children:e.value},`${t}-${e.value}`))]})}const ae=m.I4.div.withConfig({displayName:"ZoomControls__ZoomControlContainer",componentId:"sc-21af1e18-0"})(["position:absolute;right:","px;top:","px;z-index:",";display:flex;flex-direction:column;gap:","px;@media (min-width:","px){right:","px;top:","px;}"],16,40,y.fw.leaflet,8,y.aq.tablet,24,48),re=(0,m.I4)(v.$).withConfig({displayName:"ZoomControls__Zoom",componentId:"sc-21af1e18-1"})(["background-color:rgb(0,0,0,70%);&:hover{background-color:rgb(0,0,0,70%);}",""],e=>!e.$active&&"\n    background-color: rgb(54, 54, 54, 60%);\n\n    &:hover {\n      background-color: rgb(54, 54, 54, 60%);\n    }\n  ");function le(e){let{handler:t,zoomOpts:o,currentLevel:i}=e;

1return(0,n.jsx)(ae,{"data-testid":"zoom-controls",children:(0,n.jsxs)(w.n,{theme:"light",unit:"px",children:[(0,n.jsx)(re,{iconOnly:!0,size:"sm",iconBefore:(0,n.jsx)(z.FWt,{}),onClick:()=>t(!0),"aria-label":"Lähennä",$active:i<o.maxZoom}),(0,n.jsx)(re,{iconOnly:!0,size:"sm",iconBefore:(0,n.jsx)(z.Hsy,{}),onClick:()=>t(!1),"aria-label":"Loitonna",$active:i>o.minZoom})]})})}const se=r().divIcon({html:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#131415" fill-rule="evenodd" d="M12.556 23.831h-1.111l-.003-.001-.007-.005-.023-.015a28.518 28.518 0 0 1-1.441-1.074 31.428 31.428 0 0 1-3.197-2.923C4.484 17.396 2 13.902 2 10a10 10 0 0 1 20 0c0 3.902-2.484 7.396-4.774 9.813a31.433 31.433 0 0 1-4.254 3.726 18.887 18.887 0 0 1-.384.27l-.023.016-.007.005-.002.001Zm-.001.001a1 1 0 0 1-1.11 0h1.11ZM12 14a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" clip-rule="evenodd"/></svg>',className:"",iconSize:[24,40],iconAnchor:[11.8,24]}),ce=m.I4.div.withConfig({displayName:"WeatherMap__WeatherMapWrapper",componentId:"sc-3376a970-0"})(["",";position:relative;"],l),de=(0,m.I4)(c.W).withConfig({displayName:"WeatherMap__StyledMapContainer",componentId:"sc-3376a970-1"})(["height:100%;min-height:302px;@media (min-width:","px){min-height:318px;}"],y.aq.tablet),pe=new(r().LatLngBounds)([54.65,4.3],[73.1,49.1]),ue={minZoom:5,maxZoom:8,defaultZoom:6};function he(e,t,o){e[t]?.forEach(e=>{var t;(t=e,r().circleMarker(r().latLng([t.latitude,t.longitude]),{radius:4,fillColor:"#FFC400",fillOpacity:1,color:"#131415",weight:1})).addTo(o)})}function me(e){e?.eachLayer(e=>{e instanceof r().CircleMarker&&e.remove()})}function ge(e){let{type:t,location:o,time:a}=e;const l=(0,f.h)(),[c,m]=(0,s.useState)(!1),[y,v]=(0,s.useState)(ue.defaultZoom),{config:{weatherMapTileUrl:w,weatherApiUrl:I,weatherApiAppId:k,weatherApiAppKey:j}}=(0,C.xy)(),z=(0,s.useRef)(null),S=(0,s.useRef)(null),{slices:F,firstSlice:B}=(0,x.Ay)(a),N=(0,b.A)(),M=(0,i.I)({queryKey:["lightnings",{time:F[B].date.toISOString()}],queryFn:()=>(0,g.k5)(I,k,j),refetchOnWindowFocus:!0,refetchOnMount:!0}),[Z,$]=(0,s.useState)(B),[A,L]=(0,s.useState)(!1);(0,s.useEffect)(()=>{let e;return c&&(e=setInterval(()=>{me(S.current),$(e=>{if(A&&M.data&&S.current){const t=F[(e+1)%F.length].date.toISOString();he(M.data,t,S.current)}return(e+1)%F.length})},500)),()=>clearInterval(e)},[c,F,Z,A,M.data]);const O=(0,s.useMemo)(()=>r().latLng([o.lat,o.lon]),[o]);return(0,s.useEffect)(()=>{S?.current?.flyTo(O)},[O]),(0,s.useEffect)(()=>{if(A&&M.data&&S?.current){const e=F[Z].date.toISOString();he(M.data,e,S.current)}else S?.current&&me(S.current)},[A,M.data,F,Z]),(0,n.jsxs)(ce,{ref:z,"data-testid":"weather-map",children:[(0,n.jsx)(ie,{type:t}),(0,n.jsxs)(de,{center:O,zoom:ue.defaultZoom,minZoom:ue.minZoom,maxZoom:ue.maxZoom,scrollWheelZoom:!1,attributionControl:!1,maxBounds:pe,touchZoom:!0,zoomControl:!1,ref:S,preferCanvas:!0,children:[(0,n.jsx)(d.e,{bounds:pe,url:`${w}/{z}/{x}/{y}.png`}),(0,n.jsx)(p.p,{icon:se,position:O,keyboard:!1}),F.map((e,o)=>(0,n.jsx)(u.a,{url:N(t,e),bounds:pe,opacity:o===Z?.8:0,zIndex:10},e.date.toISOString())),(0,n.jsx)(u.a,{url:l("img/border-mask.png"),bounds:pe,opacity:1,zIndex:10}),t===W.d1.Rain&&(0,n.jsx)(u.a,{url:l("img/radar-mask-2200.png"),bounds:pe,opacity:Z<B?1:0,zIndex:10})]}),(0,n.jsx)(le,{handler:e=>{e?S.current?.zoomIn():S.current?.zoomOut();const t=S.current?.getZoom()??ue.defaultZoom;v((0,h.q)(e?t+1:t-1,{min:ue.minZoom,max:ue.maxZoom}))},zoomOpts:ue,currentLevel:y}),t===W.d1.Rain&&(0,n.jsx)(_,{onClick:()=>L(e=>!e),lightningsEnabled:A}),(0,n.jsx)(Y,{mapType:t,playback:c,slices:F,currentSlice:Z,onSeek:e=>{if(me(S.current),$(e),m(!1),A&&M.data&&S.current){const t=F[e].date.toISOString();he(M.data,t,S.current)}},onPlay:()=>m(!c),containerRef:z})]})}}}]);