https://trains.fyi/_next/static/chunks/8831.4ebfe0781b0dcb73.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8831],{4402:()=>{},98831:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>g});var o=r(37876),n=r(28168),a=r(14232);r(4402);var l=r(5876),s=r(74880),i=r(78240),c=r(91482),d=r(59025),u=r(59531),p=r(10714),f=r(21691);let g=({segmentShape:e,stops:t,activeTrains:r=[],networkSlug:g,networkColor:h="FFCB06",originName:y="",destinationName:m="",height:v=450})=>{let[x,_]=(0,a.useState)(!1),w=(0,a.useRef)(null),L=(0,a.useRef)(null),M=`#${h.replace("#","")}`,{trains:k}=(0,i.nC)(),C=(0,a.useMemo)(()=>e?.coordinates?.length>1?e:t?.length>1?{type:"LineString",coordinates:t.map(e=>[e.stop_lon,e.stop_lat])}:null,[e,t]),b=(C?.coordinates?.length||0)>1,N=(0,a.useMemo)(()=>t?.length?t.map((e,r)=>({type:"Feature",geometry:{type:"Point",coordinates:[e.stop_lon,e.stop_lat]},properties:{name:e.stop_name,stop_id:e.stop_id,isTerminal:0===r||r===t.length-1}})):[],[t]),j=(0,a.useMemo)(()=>r.filter(e=>e.lat&&e.lng).map(e=>{let t=k?.trains?.find(t=>t.agency===g&&t.vid===e.vehicle_id);return{type:"Feature",geometry:{type:"Point",coordinates:[e.lng,e.lat]},properties:{id:e.vehicle_id,vid:e.vehicle_id,name:e.name||e.vehicle_id,agency:g,spd:null!=e.speed?`${Math.round(e.speed)} km/h`:"N/A",org:y,dst:m,updated_ago:e.updated?function(e){try{let t=Date.now()-new Date(e).getTime(),r=Math.floor(t/1e3);if(r<60)return`${r}s ago`;let o=Math.floor(r/60);if(o<60)return`${o}m ago`;return`${Math.floor(o/60)}h ago`}catch{return"N/A"}}(e.updated):"N/A",direction:"number"==typeof t?.dir?t.dir:"",vehicleClassificationText:"Train"}}}),[r,k,g,y,m]);return((0,a.useEffect)(()=>{if(!w.current||L.current||!b&&!t?.length)return;let e=new n.A.LngLatBounds;return C?.coordinates?.length?C.coordinates.forEach(([t,r])=>e.extend([t,r])):t?.length&&t.forEach(t=>e.extend([t.stop_lon,t.stop_lat])),L.current=new n.A.Map({container:w.current,style:(0,u.pI)(),bounds:e,fitBoundsOptions:{padding:60},antialias:!0}),L.current.on("load",()=>{(0,u.z7)(L.current),(0,d.E)(L.current,()=>{},{initialMode:"2d",interactiveOnDemand:!0}),C&&(L.current.addSource("od-route",{type:"geojson",data:{type:"Feature",geometry:C,properties:{}}}),L.current.addLayer({id:"od-route-line",type:"line",source:"od-route",layout:{"line-join":"round","line-cap":"round"},paint:{"line-color":M,"line-width":3,"line-opacity":.7}})),N.length&&(L.current.addSource("od-stops",{type:"geojson",data:{type:"FeatureCollection",features:N}}),L.current.addLayer({id:"od-stops-circles",type:"circle",source:"od-stops",paint:{"circle-radius":["case",["get","isTerminal"],8,5],"circle-color":M,"circle-stroke-color":"#ffffff","circle-stroke-width":2}}),L.current.addLayer({id:"od-stops-labels",type:"symbol",source:"od-stops",layout:{"text-field":["get","name"],"text-font":["Open Sans Regular","Arial Unicode MS Regular"],"text-variable-anchor":["top","bottom","left","right"],"text-radial-offset":.8,"text-justify":"auto","text-size":["case",["get","isTerminal"],14,12],"text-optional":!0},paint:{"text-color":"#000000","text-halo-color":"#ffffff","text-halo-width":3,"text-halo-blur":1}}),L.current.on("mouseenter","od-stops-circles",()=>{L.current.getCanvas().style.cursor="pointer"}),L.current.on("mouseleave","od-stops-circles",()=>{L.current.getCanvas().style.cursor=""}),L.current.on("click","od-stops-circles",e=>{let t=e.lngLat,r=e.features[0].properties;new n.A.Popup({closeButton:!1,closeOnClick:!0,className:"stop-popup"}).setLngLat(t).setHTML(`<div class="p-2"><h3 class="font-bold text-gray-900">${r.name}</h3></div>`).addTo(L.current)}));let e=s.Y.getNetwork(g);(0,c.TL)(L.current,e?[e]:[{slug:g,color:M,darkerColor:M}],p.A),(0,f.MB)(L.current),_(!0)}),()=>{L.current&&(L.current.remove(),L.current=null)}},[b,t,C,g,M,N]),(0,a.useEffect)(()=>{if(!x||!L.current)return;let e=L.current.getSource("trains");e&&(e.setData({type:"FeatureCollection",features:j}),(0,f.pt)(j))},[x,j]),b||t?.length)?(0,o.jsx)("div",{ref:w,className:"rounded-xl overflow-hidden shadow-lg",style:{height:v,width:"100%"}}):(0,o.jsx)("div",{className:"relative rounded-xl overflow-hidden shadow-lg",style:{height:v},children:(0,o.jsx)("div",{className:"absolute inset-0 flex items-center justify-center",children:(0,o.jsx)(l.A,{text:"Loading map..."})})})}}}]);