https://michi-no-eki-togo-production.up.railway.app/_next/static/chunks/834.ee1f5557555b0fd3.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[834],{3383:()=>{},5834:(e,r,t)=>{"use strict";t.r(r),t.d(r,{default:()=>i});var o=t(5155),a=t(2115),l=t(7856),n=t.n(l);t(3383);let s="pk.eyJ1Ijoia2F0aHljeXU5NDE4IiwiYSI6ImNtbHRubzVyNTAxdzIzZXM1dG9zbzJ3OW8ifQ.K4uoXx-GC5G_N2rIZE-QJA";s&&(n().accessToken=s);let c={streets:"mapbox://styles/mapbox/streets-v12",satellite:"mapbox://styles/mapbox/satellite-streets-v12"};function i(e){let{stations:r,route:l,isLoading:s,interactive:i=!0,zoom:u=10,mapStyle:d="streets",onStyleChange:m,searchLocation:f,searchRadius:h,onShowRoute:x,isPickingLocation:p=!1,onMapClick:y}=e,g=(0,a.useRef)(null),b=(0,a.useRef)(null),v=(0,a.useRef)([]),N=(0,a.useRef)(null),[k,w]=(0,a.useState)(!1);return((0,a.useEffect)(()=>{if(!g.current||b.current)return;let e="pk.eyJ1Ijoia2F0aHljeXU5NDE4IiwiYSI6ImNtbHRubzVyNTAxdzIzZXM1dG9zbzJ3OW8ifQ.K4uoXx-GC5G_N2rIZE-QJA";if(!e)return void console.error("Mapbox token is not configured. Please add NEXT_PUBLIC_MAPBOX_TOKEN to your .env.local file.");n().accessToken||(n().accessToken=e);try{let e={container:g.current,style:c[d],center:[139.6503,35.6762],zoom:u,maxBounds:[[122,24],[146,45.5]]};i?(e.minZoom=5,e.maxZoom=18):(e.minZoom=u,e.maxZoom=u,e.interactive=!1,e.scrollZoom=!1,e.boxZoom=!1,e.dragRotate=!1,e.dragPan=!1,e.keyboard=!1,e.doubleClickZoom=!1,e.touchZoomRotate=!1,e.touchPitch=!1);let r=new(n()).Map(e);return b.current=r,r.on("error",e=>{console.error("Mapbox error:",e)}),r.on("load",()=>{w(!0)}),i&&(r.addControl(new(n()).NavigationControl,"top-right"),r.addControl(new(n()).GeolocateControl({positionOptions:{enableHighAccuracy:!0},trackUserLocation:!0}),"top-right")),()=>{b.current&&(b.current.remove(),b.current=null),w(!1)}}catch(e){console.error("Error initializing map:",e)}},[i,u,d]),(0,a.useEffect)(()=>{if(!b.current||!p||!y)return;let e=b.current;e.getCanvas().style.cursor="crosshair";let r=async e=>{let{lng:r,lat:o}=e.lngLat,{reverseGeocode:a}=await Promise.resolve().then(t.bind(t,7621)),l=await a(r,o);l&&y(l)};return e.on("click",r),()=>{e.off("click",r),e.getCanvas().style.cursor=""}},[p,y]),(0,a.useEffect)(()=>{if(!b.current||!k)return;let e=b.current;w(!1),e.once("style.load",()=>{w(!0)}),e.setStyle(c[d])},[d]),(0,a.useEffect)(()=>{if(!b.current)return;let e=b.current,t=()=>{if(!e.loaded())return void e.once("load",()=>{setTimeout(t,100)});v.current.forEach(e=>e.remove()),v.current=[],r.forEach(r=>{try{let o=function(e){let r=document.createElement("div");return r.className="station-marker",r.innerHTML='\n    <div class="relative cursor-pointer transform hover:scale-110 transition-transform">\n      <svg width="32" height="40" viewBox="0 0 32 40" fill="none">\n        <path d="M16 0C7.163 0 0 7.163 0 16c0 8.837 16 24 16 24s16-15.163 16-24C32 7.163 24.837 0 16 0z" fill="#4FC3F7"/>\n        <circle cx="16" cy="16" r="8" fill="white"/>\n        <text x="16" y="20" text-anchor="middle" font-size="12" font-weight="bold" fill="#4FC3F7">道</text>\n      </svg>\n    </div>\n  ',r}(0),a=new(n()).Marker({element:o}).setLngLat([r.lng,r.lat]);if(i){var t;let e=new(n()).Popup({offset:25}).setHTML('\n              <div class="p-2">\n                <h3 class="font-bold text-base">'.concat(r.name,'</h3>\n                <p class="text-sm text-gray-600">').concat((null==(t=r.prefecture)?void 0:t.name)||"都道府県情報なし","</p>\n              </div>\n            "));a.setPopup(e),x&&o.addEventListener("click",()=>{x(r.id)})}a.addTo(e),v.current.push(a)}catch(e){console.error("Error adding marker:",e)}});let o=()=>{try{if(i){if(r.length>0){let t=new(n()).LngLatBounds,o=!1;r.forEach(e=>{null==e.lng||null==e.lat||isNaN(e.lng)||isNaN(e.lat)||(t.extend([e.lng,e.lat]),o=!0)}),!f||null==f.lng||null==f.lat||isNaN(f.lng)||isNaN(f.lat)||(t.extend([f.lng,f.lat]),o=!0),o&&!t.isEmpty()&&e.fitBounds(t,{padding:100,maxZoom:15,duration:1e3})}else if(f&&null!=f.lng&&null!=f.lat)if(e.setCenter([f.lng,f.lat]),h){let r=h>100?8:h>50?9:h>20?10:11;e.setZoom(r)}else e.setZoom(10)}else if(1===r.length){let t=r[0];null==t.lng||null==t.lat||isNaN(t.lng)||isNaN(t.lat)||(e.setCenter([t.lng,t.lat]),e.setZoom(u||15))}}catch(e){console.error("Error updating map view:",e)}};e.loaded()&&(e.once("idle",()=>{setTimeout(o,100)}),requestAnimationFrame(()=>{setTimeout(o,200)}))};t()},[r,i,f,h]),(0,a.useEffect)(()=>

1{if(!b.current||!l||!k)return;let e=b.current,r=()=>{try{if(!e.isStyleLoaded())return void setTimeout(r,100);e.getLayer("route")&&e.removeLayer("route"),e.getSource("route")&&e.removeSource("route"),e.addSource("route",{type:"geojson",data:{type:"Feature",properties:{},geometry:{type:"LineString",coordinates:l.geometry}}}),e.addLayer({id:"route",type:"line",source:"route",layout:{"line-join":"round","line-cap":"round"},paint:{"line-color":"#10B981","line-width":5,"line-opacity":.9}})}catch(e){console.error("Error adding route:",e)}};if(!e.loaded()||!e.isStyleLoaded()){let t=()=>{setTimeout(r,100)};return e.once("style.load",t),()=>{e.off("style.load",t)}}r()},[l,k]),(0,a.useEffect)(()=>{if(!b.current){N.current&&(N.current.remove(),N.current=null);return}let e=b.current;if(!f){N.current&&(N.current.remove(),N.current=null);return}let r=()=>{try{N.current&&N.current.remove();let r=document.createElement("div");r.className="search-location-marker",r.style.width="20px",r.style.height="20px",r.style.borderRadius="50%",r.style.backgroundColor="#4FC3F7",r.style.border="3px solid white",r.style.boxShadow="0 2px 8px rgba(0,0,0,0.3)",r.style.cursor="pointer",N.current=new(n()).Marker({element:r}).setLngLat([f.lng,f.lat]).setPopup(new(n()).Popup({offset:25}).setHTML('\n              <div class="p-2">\n                <h3 class="font-bold text-sm mb-1">検索地点</h3>\n                <p class="text-xs text-gray-600">緯度: '.concat(f.lat.toFixed(6),'</p>\n                <p class="text-xs text-gray-600">経度: ').concat(f.lng.toFixed(6),"</p>\n              </div>\n            "))).addTo(e)}catch(e){console.error("Error adding search location marker:",e)}};return e.loaded()?r():e.once("load",r),()=>{N.current&&(N.current.remove(),N.current=null)}},[f]),(0,a.useEffect)(()=>{if(!b.current||!f||!h||!k)return;let e=b.current,r=()=>{try{if(!e.isStyleLoaded())return void setTimeout(r,100);if(e.getLayer("search-radius")&&e.removeLayer("search-radius"),e.getLayer("search-radius-fill")&&e.removeLayer("search-radius-fill"),e.getSource("search-radius")&&e.removeSource("search-radius"),!f||!h)return;let t=1e3*h,o=[];for(let e=0;e<=64;e++){let r=e/64*2*Math.PI,a=t/111e3*Math.cos(r),l=t/(111e3*Math.cos(f.lat*Math.PI/180))*Math.sin(r);o.push([f.lng+l,f.lat+a])}e.addSource("search-radius",{type:"geojson",data:{type:"Feature",properties:{},geometry:{type:"Polygon",coordinates:[o]}}}),e.addLayer({id:"search-radius",type:"line",source:"search-radius",paint:{"line-color":"#4FC3F7","line-width":2,"line-opacity":.6,"line-dasharray":[2,2]}}),e.addLayer({id:"search-radius-fill",type:"fill",source:"search-radius",paint:{"fill-color":"#4FC3F7","fill-opacity":.1}},"search-radius")}catch(e){console.error("Error adding search radius circle:",e)}};if(!e.loaded()||!e.isStyleLoaded()){let t=()=>{setTimeout(r,50)};return e.once("style.load",t),()=>{e.off("style.load",t)}}return r(),()=>{try{if(b.current){let e=b.current;e.getLayer("search-radius")&&e.removeLayer("search-radius"),e.getLayer("search-radius-fill")&&e.removeLayer("search-radius-fill"),e.getSource("search-radius")&&e.removeSource("search-radius")}}catch(e){}}},[f,h,k]),n().accessToken&&"your_mapbox_token_here"!==n().accessToken)?(0,o.jsxs)("div",{className:"relative h-full w-full",children:[(0,o.jsx)("div",{ref:g,className:"h-full w-full"}),s&&(0,o.jsx)("div",{className:"absolute inset-0 bg-white/60 backdrop-blur-sm flex items-center justify-center z-30",children:(0,o.jsx)("div",{className:"bg-white/95 backdrop-blur-lg p-8 rounded-3xl shadow-cute border border-blue-100",children:(0,o.jsxs)("div",{className:"flex flex-col items-center gap-4",children:[(0,o.jsx)("div",{className:"animate-spin rounded-full h-14 w-14 border-4 border-blue-200 border-t-sakura"}),(0,o.jsx)("p",{className:"text-gray-700 font-medium",children:"検索中..."})]})})})]}):(0,o.jsx)("div",{className:"relative h-full w-full bg-gradient-to-br from-momo to-cha flex items-center justify-center",children:(0,o.jsxs)("div",{className:"bg-white/95 backdrop-blur-lg p-6 sm:p-8 rounded-2xl sm:rounded-3xl shadow-cute border border-blue-100 max-w-md mx-4 text-center",children:[(0,o.jsx)("div",{className:"text-4xl mb-4",children:"\uD83D\uDDFA️"}),(0,o.jsx)("h3",{className:"text-lg sm:text-xl font-bold text-gray-800 mb

1-2",children:"Mapbox Token Required"}),(0,o.jsxs)("p",{className:"text-sm sm:text-base text-gray-600 mb-4",children:["Please add your Mapbox access token to ",(0,o.jsx)("code",{className:"bg-gray-100 px-2 py-1 rounded",children:".env.local"})]}),(0,o.jsx)("div",{className:"text-left bg-gray-50 p-3 rounded-lg mb-4 text-xs sm:text-sm",children:(0,o.jsx)("code",{className:"text-gray-700",children:"NEXT_PUBLIC_MAPBOX_TOKEN=pk.your_token_here"})}),(0,o.jsx)("a",{href:"https://account.mapbox.com/access-tokens/",target:"_blank",rel:"noopener noreferrer",className:"inline-block bg-sakura hover:bg-sakuraHover text-white px-4 py-2 rounded-xl text-sm font-medium transition-colors",children:"Get Mapbox Token →"})]})})}}}]);