https://www.hipcamp.com/_next/static/chunks/1546.724aa5cc4e1a6063.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1546],{12602:(e,t,a)=>{"use strict";a.d(t,{N:()=>i});var l=a(37876);a(14232);let r={upcoming:{body:"fill-surface",innerCircle:{fill:"fill-primary",r:12},tent:"fill-surface"},past:{body:"fill-emphasis",innerCircle:{fill:"fill-raised/15",r:11},tent:"fill-surface"}};function i({"aria-label":e,className:t,variant:a}){let i=r["upcoming"===a?"upcoming":"past"];return(0,l.jsx)("div",{className:t,style:{width:34,height:39},children:(0,l.jsxs)("svg",{width:34,height:39,viewBox:"-2 -2 34 39",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"drop-shadow-[0_2px_4px_rgba(0,0,0,0.25)]",...e?{role:"img","aria-label":e}:{"aria-hidden":!0},children:[(0,l.jsx)("path",{d:"M15 0C23.2843 0 30 6.71573 30 15C30 21.4941 25.8729 27.0235 20.0986 29.1104C20.0731 29.1379 20.0473 29.1656 20.0205 29.1924L17.1924 32.0215C16.0209 33.1927 14.1217 33.1925 12.9502 32.0215L10.1211 29.1924C10.1187 29.1899 10.1167 29.187 10.1143 29.1846C4.22897 27.1578 0 21.5735 0 15C0 6.71573 6.71573 0 15 0Z",className:i.body}),i.innerCircle&&(0,l.jsx)("circle",{cx:"15",cy:"15",r:i.innerCircle.r,className:i.innerCircle.fill}),(0,l.jsx)("g",{transform:"translate(15 15) scale(0.045) translate(-250 -250)",children:(0,l.jsx)("path",{d:"M175.851 138.01C193.943 110.705 212.54 83.7409 230.849 56.5875C237.963 46.0216 251.829 46.4003 260.207 58.2917C279.707 85.8995 298.738 113.848 317.913 141.721C336.691 169.026 355.397 196.331 374.066 223.711C394.325 253.44 414.511 283.206 434.661 313.048C450.803 336.945 466.872 360.879 482.725 384.927C484.423 387.502 488.395 393.637 492.909 400.606C500.998 413.065 492.259 429.766 477.742 429.615C438.814 429.236 377.352 428.857 351.93 429.804C342.577 430.145 337.233 426.774 332.358 418.708C308.271 378.83 283.535 339.331 258.871 299.831C253.093 290.591 246.196 290.742 240.057 300.437C222.868 327.477 205.932 354.706 189.104 381.973C180.509 395.872 172.565 410.149 163.79 423.934C162.057 426.623 157.976 429.463 154.943 429.463C112.44 429.918 69.9365 430.031 27.4695 429.993C7.7527 429.993 -2.32235 412.611 8.29438 395.985C31.6584 359.364 144.037 186.143 175.887 138.048L175.851 138.01ZM221.207 296.499C223.121 293.28 223.41 287.486 221.712 284.38C220.629 282.411 213.696 281.653 210.699 283.093C202.393 287.031 194.701 292.333 186.865 297.256C157.687 315.472 126.27 328.878 93.8783 340.24C82.2504 344.33 80.1199 347.397 86.8366 357.168C98.3922 374.02 111.212 390.229 125.115 405.188C134.901 415.754 140.137 414.769 148.081 402.916C161.334 383.147 211.493 313.01 221.207 296.461V296.499Z",className:i.tent,transform:"translate(85 60) scale(0.65)"})})]})})}i.displayName="PublicCampgroundPinMarker"},59352:()=>{},61964:(e,t,a)=>{"use strict";a.d(t,{Qy:()=>i,g2:()=>r,m8:()=>l});let l=180;function r({map:e,longitude:t,latitude:a,cardWidth:r=l,cardHeight:i=280,margin:s=20}){let n=e.getContainer(),o=e.project([t,a]),c=o.x-s>=r/2&&n.clientWidth-o.x-s>=r/2;return o.y-s>=i&&c?"top":n.clientHeight-o.y-s>=i&&c?"bottom":n.clientWidth-o.x-s>=r?"right":o.x-s>=r?"left":"top"}function i(e,{pinHeight:t=28,gapTB:a=24,gapLR:l=32}={}){let r=t/2+a,s=t/2+l;switch(e){case"top":return{bottom:r,left:"50%",transform:"translateX(-50%)"};case"bottom":return{top:r,left:"50%",transform:"translateX(-50%)"};case"left":return{right:s,top:"50%",transform:"translateY(-50%)"};case"right":return{left:s,top:"50%",transform:"translateY(-50%)"}}}},81546:(e,t,a)=>{"use strict";a.r(t),a.d(t,{default:()=>j});var l=a(37876);a(59352);var r=a(14232),i=a(47030),s=a(163),n=a(39813),o=a(61964),c=a(55267),d=a(12602);function u({listing:e,onClose:t}){let a=(0,n.UE)(e,{w:600,h:360}),r=(0,n.si)(e.award);return(0,l.jsxs)("div",{className:"fav-listing-card",role:"dialog","aria-label":`${e.name} details`,children:[(0,l.jsxs)("div",{className:"fav-card-photo",children:[r&&(0,l.jsx)("span",{className:"fav-award-pill",children:r}),a?(0,l.jsx)(s.A,{src:a,eager:!0}):(0,l.jsx)("div",{className:"fav-card-photo-empty","aria-hidden":"true"}),(0,l.jsx)("button",{type:"button",onClick:e=>{e.preventDefault(),e.stopPropagation(),t()},className:"fav-listing-card-close","aria-label":`Close ${e.name} card`,children:(0,l.jsx)("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round","aria-hidden":"true",children:(0,l.jsx)("path",{d:"M1 1l8 8M9 1l-8 8"})})})]}),(0,l.jsxs)("div",{className:"fav-listing-card-body",children:[(0,l.jsx)("span",{className:"text-base-emphasis text-content leading-tight",children:e.name}),(0,l.jsx)("span",{className:"fav-card-loc mt-0.5",children:(0,n.GE)(e)}),e.blurb&&(0,l.jsx)("p",{className:"text-small text-muted mt-1.5",children:e.blurb}),(0,l.jsx)(c.$,{href:e.url,target:"_blank",rel:"noopener",color:"emphasis",className:"fav-card-cta",children:(0,n.hk)(e)})]}),(0,l.jsx)("a",{href:e.url,target:"_blank",rel:"noopener",className:"fav-card-cover","aria-label":`View ${e.name} in ${(0,n.GE)(e)} on Hipcamp (opens in a new tab)`})]})}let m=({listings:e,activeRegion:t,mapRef:a,dismissRef:s,hoveredId:c})=>{let[m,p]=(0,r.useState)(null),[f,h]=(0,r.useState)("top"),[v,g]=(0,r.useState)(!1);(0,r.useEffect)(()=>{let e=()=>g(window.innerWidth<768);return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),(0,r.useEffect)(()=>(s&&(s.current=()=>p(null)),()=>{s&&(s.current=null)}),[s]),(0,r.useEffect)(()=>{p(null)},[t]),(0,r.useEffect)(()=>{let e=document.querySelector(".story-50-favorites");return m?e?.classList.add("has-listing-card"):e?.classList.remove("has-listing-card"),()=>e?.classList.remove("has-listing-card")},[m]),(0,r.useEffect)(()=>

1{if(!m)return;let e=e=>{let t=e.target;t.closest(".fav-listing-pin")||t.closest(".fav-listing-card")||p(null)},t=()=>p(null);return document.addEventListener("click",e),window.addEventListener("scroll",t,{passive:!0}),()=>{document.removeEventListener("click",e),window.removeEventListener("scroll",t)}},[m]);let b=(0,r.useCallback)(e=>{let t=a.current;return t&&e.coordinate?(0,o.g2)({map:t,longitude:e.coordinate.lng,latitude:e.coordinate.lat,cardWidth:296,cardHeight:340}):"top"},[a]),x=(0,r.useCallback)(e=>{h(b(e)),p(e.id)},[b]),y=(0,r.useCallback)(e=>{m===e.id?p(null):x(e)},[m,x]),C=e.filter(e=>e.coordinate),w=m?C.find(e=>e.id===m)??null:null;return C.length?(0,l.jsxs)("div",{role:"group","aria-label":"Map of all fifty places",children:[C.map(e=>{let{coordinate:a}=e;if(!a)return null;let r=m===e.id,s=c===e.id&&!r,h=null==t||e.region===t;return(0,l.jsx)(i.pH,{longitude:a.lng,latitude:a.lat,anchor:"center",style:{zIndex:r?100:s?90:h?3:1},children:(0,l.jsxs)("div",{className:"relative",children:[(0,l.jsx)("button",{type:"button",onClick:t=>{t.stopPropagation(),y(e)},onMouseEnter:()=>!v&&x(e),"aria-label":`${r?"Close":"View"} ${e.name}, ${(0,n.GE)(e)}`,"aria-pressed":r,"aria-expanded":r,className:`fav-listing-pin${h?" is-emphasized":" is-dimmed"}${s?" is-hovered":""}`,"data-active":r||void 0,children:(0,l.jsx)(d.N,{"aria-label":e.name})}),s&&(0,l.jsx)("div",{className:"fav-pin-pill","aria-hidden":"true",children:e.name}),r&&!v&&w&&(0,l.jsx)("div",{className:"absolute",style:{...(0,o.Qy)(f,{pinHeight:34}),width:296,zIndex:50},role:"dialog","aria-label":`${w.name} details`,children:(0,l.jsx)("div",{className:"fav-listing-card-anim",children:(0,l.jsx)(u,{listing:w,onClose:()=>p(null)})})})]})},e.id)}),v&&w&&(0,l.jsx)("div",{className:"fav-listing-sheet",children:(0,l.jsx)(u,{listing:w,onClose:()=>p(null)})})]}):null};var p=a(7349),f=a(37792),h=a(54701),v=a(34873),g=a(80105);let b=h.l[0],x=h.l.filter(e=>"region"===e.type),y=Object.fromEntries(v.i.map(e=>[e.id,e.shortLabel]));function C(e){return window.innerWidth<768?{top:30,bottom:280,left:24,right:24}:{top:60,bottom:60,left:Math.round(.4*e.getContainer().clientWidth),right:60}}function w(){return window.innerWidth<768?7.2:8.6}function j({onReady:e,activeChapterId:t,listings:a,hoveredListingId:s}){let n,o,c=(0,r.useRef)(null),d=(0,r.useRef)(!1),u=(0,r.useRef)(null),v=(0,r.useRef)(!1),j=(0,r.useRef)(null),[N,E]=(0,r.useState)(!1),[k,L]=(0,r.useState)(!1),[M,S]=(0,r.useState)(!1),[$,R]=(0,r.useState)(!1),{theme:W}=(0,g.W4)();(0,r.useEffect)(()=>{let e=c.current?.getMap();e&&N&&e.setStyle(p.u8[W])},[W,N]);let Z=t?h.l.find(e=>e.id===t)??null:null,I=Z?.region??null;(0,r.useEffect)(()=>{let e=document.getElementById("scrolly-map");if(!e)return;let t=new IntersectionObserver(([e])=>{e.intersectionRatio>=.5&&(R(!0),t.disconnect())},{threshold:.5});return t.observe(e),()=>t.disconnect()},[]),(0,r.useEffect)(()=>{let e=document.querySelector(".story-50-favorites");return k?e?.classList.add("scrolly-hidden"):e?.classList.remove("scrolly-hidden"),()=>e?.classList.remove("scrolly-hidden")},[k]),(0,r.useEffect)(()=>{let e=document.querySelector(".story-50-favorites");return M?e?.classList.add("user-exploring"):e?.classList.remove("user-exploring"),()=>e?.classList.remove("user-exploring")},[M]),(0,r.useEffect)(()=>{if(L(!1),S(!1),document.body.style.overflow="",window.innerWidth<768){let e=c.current?.getMap();if(e){e.dragPan.disable();let t=document.getElementById("scrolly-map");t&&t.style.removeProperty("touch-action")}}},[t]);let P=(0,r.useCallback)(()=>{let e=c.current?.getMap();if(e&&Z&&(v.current=!0,e.fitBounds(Z.bounds,{duration:1600,essential:!0,maxZoom:w(),padding:C(e)}),S(!1),L(!1),document.body.style.overflow="",window.innerWidth<768)){e.dragPan.disable();let t=document.getElementById("scrolly-map");t&&t.style.removeProperty("touch-action")}},[Z]),B=(0,r.useCallback)(()=>{let t=c.current?.getMap();t&&(window.innerWidth<768&&t.dragPan.disable(),t.touchZoomRotate.disableRotation(),v.current=!0,t.fitBounds(b.bounds,{padding:C(t),duration:0,maxZoom:w()}),e&&!d.current&&(d.current=!0,e({fitRegion:e=>{v.current=!0,t.fitBounds(e,{duration:2200,essential:!0,maxZoom:w(),padding:C(t)})}})),E(!0),document.querySelector(".story-50-favorites")?.classList.add("map-ready"),u.current=setTimeout(()=>c.current?.getMap()?.resize(),600))},[e]);return(0,r.useEffect)(()=>()=>{u.current&&clearTimeout(u.current)},[]),(0,l.jsxs)("div",{id:"scrolly-map",className:N?"is-loaded":"",role:"application","aria-label":"Interactive map of our 50 favorite places to camp",onClick:e=>{let t=e.target;t.closest(".fav-listing-pin")||t.closest(".fav-listing-card")||t.closest(".fav-stepper")||t.closest(".fav-return-pill")||t.closest(".mapboxgl-ctrl")||document.querySelector(".story-50-favorites")?.classList.contains("has-listing-card")||M||(S(!0),L(!0))},children:[(0,l.jsxs)(i.Ay,{ref:c,mapboxAccessToken:f.bG,mapStyle:p.u8[W],initialViewState:{longitude:b.center[0],latitude:b.center[1],zoom:b.zoom},projection:{name:"mercator"},minZoom:2.5,maxZoom:12,scrollZoom:M,boxZoom:!1,dragRotate:!1,dragPan:!0,keyboard:!1,doubleClickZoom:!0,touchZoomRotate:!0,touchPitch:!1,attributionControl:!1,interactiveLayerIds:[],onLoad:B,onMoveStart:()=>{if(!v.current&&(S(!0),L(!0),document.body.style.overflow="hidden",

1window.innerWidth<768)){let e=c.current?.getMap();e&&e.dragPan.enable();let t=document.getElementById("scrolly-map");t&&(t.style.touchAction="none")}},onMoveEnd:()=>{v.current=!1,document.body.style.overflow=""},style:{width:"100%",height:"100%"},children:[(0,l.jsx)(i.ov,{position:"top-right",showCompass:!1}),(0,l.jsx)("div",{style:{opacity:+!!N,transition:"opacity 0.4s ease-out"},children:(0,l.jsx)(m,{listings:a,activeRegion:I,mapRef:c,dismissRef:j,hoveredId:s})})]}),(0,l.jsx)("button",{type:"button",className:`fav-return-pill${M?" is-visible":""}`,onClick:P,"aria-label":"Return to the guided region view",children:"Back to the tour"}),t&&(n=x.findIndex(e=>e.id===t),o=$&&"full"!==t,(0,l.jsx)("nav",{className:`fav-stepper${o?" is-visible":""}`,"aria-label":"Jump to a region",children:x.map((e,a)=>{let r=e.id===t,i=n>=0&&a<=n;return(0,l.jsxs)("div",{className:"fav-stepper-item",children:[a>0&&(0,l.jsx)("span",{className:`fav-stepper-seg${i?" is-filled":""}`}),(0,l.jsxs)("button",{type:"button",className:`fav-stepper-point${r?" is-active":""}${i?" is-past":""}`,onClick:()=>{let t=window.innerWidth<768,a=document.querySelector(`[data-chapter-id="${e.id}"] .step-card`);a&&a.scrollIntoView({behavior:"instant",block:t?"end":"center"})},"aria-label":e.title,"aria-current":r?"step":void 0,children:[(0,l.jsx)("span",{className:"fav-stepper-dot"}),(0,l.jsx)("span",{className:"fav-stepper-label",children:e.region?y[e.region]:e.title})]})]},e.id)})}))]})}}}]);
2//# sourceMappingURL=1546.724aa5cc4e1a6063.js.map