https://trains.fyi/_next/static/chunks/8647.b44ae02c3971d5ae.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8647],{4402:()=>{},8647:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>m});var a=r(37876),o=r(28168),n=r(14232);r(4402);var l=r(5876),s=r(74880),i=r(78240),u=r(91482),c=r(59025),d=r(59531),p=r(10714),f=r(21691),g=r(99098);let m=({networkSlug:e,routeId:t,routeShape:r,routeStops:m,routeColor:y,textColor:x,selectedStop:h,height:v=600})=>{let L=(0,n.useMemo)(()=>(0,g.gO)(r),[r]),[_,F]=(0,n.useState)(!1),[,M]=(0,n.useState)(!1),w=(0,n.useRef)(null),S=(0,n.useRef)(null),b=(0,n.useRef)(null),{trains:C}=(0,i.nC)(),T=(0,n.useMemo)(()=>C?.trains?.filter(r=>r.agency===e&&r.gtfs?.route_id===t)||[],[C,e,t]),j=(0,n.useMemo)(()=>(L||[]).map(e=>e.filter(e=>e&&isFinite(parseFloat(e.lat))&&isFinite(parseFloat(e.lon)))).filter(e=>e.length>=2),[L]),A=(0,n.useMemo)(()=>j.flat(),[j]),$=(0,n.useMemo)(()=>m?.map(e=>({...e,_lat:parseFloat(e.lat??e.stop_lat),_lon:parseFloat(e.lon??e.stop_lon),_name:e.name??e.stop_name??"Stop"})).filter(e=>e&&isFinite(e._lat)&&isFinite(e._lon)),[m]),k=(0,n.useMemo)(()=>`route-${t}`,[t]),z=(0,n.useMemo)(()=>`route-line-${t}`,[t]),N=(0,n.useMemo)(()=>`stops-${t}`,[t]),R=(0,n.useMemo)(()=>`stops-${t}`,[t]),E=(0,n.useMemo)(()=>`stop-labels-${t}`,[t]),O=(0,n.useMemo)(()=>($||[]).map((e,t)=>({type:"Feature",geometry:{type:"Point",coordinates:[e._lon,e._lat]},properties:{name:e._name,stop_id:e.stop_id,isTerminal:0===t||t===($||[]).length-1}})),[$]),B=(0,n.useCallback)(e=>{e&&e.isStyleLoaded()&&[z,R,E,"train-points"].forEach(t=>{e.getLayer(t)&&e.moveLayer(t)})},[z,R,E]);return((0,n.useEffect)(()=>{if(!w.current||S.current||!A?.length)return;let t=A.reduce((e,t)=>e.extend([parseFloat(t.lon),parseFloat(t.lat)]),new o.A.LngLatBounds);return S.current=new o.A.Map({container:w.current,style:(0,d.pI)(),bounds:t,padding:50,antialias:!0}),S.current.on("load",()=>{(0,d.z7)(S.current),b.current=(0,c.E)(S.current,M,{initialMode:"2d",interactiveOnDemand:!0});let t=s.Y.getNetwork(e);(0,u.TL)(S.current,[t],p.A),S.current.getSource(k)||S.current.addSource(k,{type:"geojson",data:{type:"Feature",properties:{name:"",color:y},geometry:{type:"MultiLineString",coordinates:j.map(e=>e.map(e=>[parseFloat(e.lon),parseFloat(e.lat)]))}}}),S.current.getLayer(z)||S.current.addLayer({id:z,type:"line",source:k,layout:{"line-join":"round","line-cap":"round"},paint:{"line-color":y,"line-width":3,"line-opacity":.7}}),$?.length&&(S.current.getSource(N)||S.current.addSource(N,{type:"geojson",data:{type:"FeatureCollection",features:O}}),S.current.getLayer(R)||S.current.addLayer({id:R,type:"symbol",source:N,layout:{"text-field":"■","text-font":["Arial Unicode MS Regular"],"text-size":["case",["get","isTerminal"],14,12],"text-allow-overlap":!0,"text-ignore-placement":!0},paint:{"text-color":y,"text-halo-color":x,"text-halo-width":1.5}}),S.current.getLayer(E)||S.current.addLayer({id:E,type:"symbol",source:N,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}}),S.current.on("mouseenter",R,()=>{S.current.getCanvas().style.cursor="pointer"}),S.current.on("mouseleave",R,()=>{S.current.getCanvas().style.cursor=""}),S.current.on("click",R,e=>{let t=e.lngLat,r=e.features[0].properties;new o.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(S.current)})),B(S.current),(0,f.MB)(S.current),F(!0)}),()=>{S.current&&(S.current.remove(),S.current=null)}},[A,$,j,y,x,e,k,z,N,R,E,O,B]),(0,n.useEffect)(()=>{if(!_||!S.current||!$?.length)return;let e={type:"FeatureCollection",features:O},t=S.current.getSource(N);t?t.setData(e):S.current.addSource(N,{type:"geojson",data:e}),S.current.getLayer(R)||(S.current.addLayer({id:R,type:"symbol",source:N,layout:{"text-field":"■","text-font":["Arial Unicode MS Regular"],"text-size":["case",["get","isTerminal"],14,12],"text-allow-overlap":!0,"text-ignore-placement":!0},paint:{"text-color":y,"text-halo-color":x,"text-halo-width":1.5}}),S.current.on("mouseenter",R,()=>{S.current.getCanvas().style.cursor="pointer"}),S.current.on("mouseleave",R,()=>{S.current.getCanvas().style.cursor=""}),S.current.on("click",R,e=>{let t=e.lngLat,r=e.features[0].properties;new o.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(S.current)})),S.current.getLayer(E)||S.current.addLayer({id:E,type:"symbol",source:N,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}}),B(S.current)},[_,$,y,x,N,R,E,O,B]),(0,n.useEffect)(()=>

1{if(!_||!S.current)return;let e=S.current.getSource("trains");if(!e)return;let t=T.map(e=>({type:"Feature",geometry:{type:"Point",coordinates:[e.lng,e.lat]},properties:{id:e.id,vid:e.vid,name:e.name,agency:e.agency,spd:e.normalized.speed.has_speed?`${e.normalized.speed.value} ${e.normalized.speed.unit}`:"N/A",org:e.org,dst:e.dst,updated_ago:e.updated_ago,gtfs:JSON.stringify(e.gtfs),direction:e.dir,vehicleClassificationText:e.normalized.vehicle.type.name||"Train"}}));e.setData({type:"FeatureCollection",features:t}),B(S.current),(0,f.pt)(t)},[_,T,B]),(0,n.useEffect)(()=>{if(!_||!S.current||!h)return;let e=parseFloat(h.lon??h.stop_lon),t=parseFloat(h.lat??h.stop_lat);isFinite(e)&&isFinite(t)&&S.current.easeTo({center:[e,t],zoom:15,duration:1e3})},[_,h]),L)?(0,a.jsx)("div",{ref:w,className:"rounded-xl overflow-hidden shadow-lg",style:{height:`${v}px`,width:"100%"}}):(0,a.jsx)("div",{className:"relative rounded-xl overflow-hidden shadow-lg",style:{height:`${v}px`,width:"100%"},children:(0,a.jsx)("div",{className:"absolute inset-0 flex items-center justify-center",children:(0,a.jsx)(l.A,{text:"Loading map..."})})})}}}]);