LONDON LIVE COMMAND CENTER

—

LIVE DATA

MAP LAYERS

CITY LIFE

CAMERA

BOROUGH

NEIGHBORHOOD

Loading cameras…

⚠ Favorites are not saved for guests. You'll lose them when you close this tab. Register

📰 NYC LOCAL NEWS

Loading…

👥 NYC POPULATION & ACTIVITY 2020 Census + annual projection · Time-of-day model

8,550,971

Estimated NYC residents today,

New Yorkers are currently:

How this is calculated: The resident count projects forward from the 2020 U.S. Census baseline of 8,336,817 at 0.4% annual compound growth — consistent with NYC Department of City Planning post-pandemic recovery estimates — to produce today's figure. The seven activity bars divide that population using a time-of-day behavioral model with nine distinct hourly windows: midnight–5 AM, 5–7 AM, 7–9 AM, 9 AM–noon, noon–2 PM, 2–5 PM, 5–7 PM, 7–10 PM, and 10 PM–midnight. Each window draws on three calibration sources: MTA hourly turnstile data drives the Commuting share, which peaks at 26.5% during the 7–9 AM subway rush and 27.7% during the 5–7 PM outbound surge; American Time Use Survey microdata for NYC metro workers anchors Sleeping (76% at midnight, under 1% at 5–7 PM), Working, and Eating distributions; and NYC DOT pedestrian counts combined with BLS Consumer Expenditure data inform Walking and Shopping. Shopping is held below 2.5% from midnight through 7 AM — when the overwhelming majority of NYC retail is closed and only 24-hour bodegas and pharmacies operate — rising to a peak of 13.2% in the 2–5 PM afternoon retail window. Every time window assigns a distinct percentage to each activity: no two behaviors share the same value within any block.

📅 TODAY'S NYC EVENTS Up to 15 events · Traffic-disruptive first

Loading…

🚌 TRANSPORTATION

🚇 MTA SUBWAY Live · Subway Now

Loading…

⛴ NYC FERRY NYC Ferry · nyc.gov/ferry

Loading…

🏆 ACHIEVEMENTS 0 / 0 unlocked Mute achievement notification sound

Every achievement you unlock earns you points. The more points you earn, the higher your rank — advancing from Intern all the way up to Director. Your rank badge appears next to your comments and on your profile throughout the Command Center. Register free to start tracking your progress, and earn additional camera collection tabs as you advance.

🏅 LEADERBOARD Global · Top 100

Every achievement you unlock earns points, and your rank on the global board updates automatically as you explore. Link a social account below to claim your spot and let others find you. — Register a free account to set a custom display name and save your progress permanently.

Loading rankings…

COMMUNITY COMMENTS

Rules? What rules?! This is the wild east!

Share your thoughts on New York City and our command center. You can add camera-specific comments in single-camera view.

Loading…

Welcome

I woke up one morning wanting to see New York in real time. I couldn't find anything that showed the whole city at once but discovered the live traffic cameras were publicly accessible. So I put all 960+ of them together and combined it with useful features. If you find it cool, or just believe NYC is the greatest city in the world, share it with your friends and enemies.”

— Your Founder

What began as a passion project has quickly become a go-to tool for New Yorkers in-the-know and visitors from around the globe. Camera images refresh every 2 seconds, the Department of Transportation's live interval rate. We pull every update on the dot, from the DOT.

📷 Do you have a camera and a good view of New York City? Stream live to our website and get paid. Contact us →

💬 Found a bug, have feedback, or want to share some praise? Tag us on X @NWExplained →

🏢 Want us to feature your business? Contact us →

We're Continuously Improving New York City Live Command Center is always evolving.

✅ Recently Released

NYC Life panels — Restaurants, Boutique Hotels, Nightclubs, Retail, Attractions, Small Business, and Conferences
NYC Cafes — curated picks from the city's best independent coffee spots

🔜 Coming Soon

Camera pause and timelapse function
Secret easter eggs
Expanded language options — Spanish, Mandarin, French, German, Russian, Vietnamese, Tagalog, Arabic, Japanese, and Portuguese
Live food truck locations on the map
Live Citi Bike rental availability
Luxury view mode
Enhanced live trend map

Mix View — arrange cameras and content in split-screen zones
Achievements — 50+ unlockable milestones for power users
Global Leaderboard — earn points for exploring and engaging
Community Comments — site-wide discussion open to all visitors
Camera-specific comments — share what you see at any live camera
Styling enhancements

Jobs

NetWorth Explained is actively hiring independent contractors. Flexible hours — work whenever you want, from wherever you want.

Do you love tech? Do you love using new and interesting tools? Have you created projects with Claude? Then you'll fit right in.

Open Roles

Content Specialist
Web Operations Manager
Social Media Specialist

Minimum Requirements

Well versed in tech
Fluent in English
Reliable high speed internet
Attention to detail

Apply Now →

CREDITS

NYC DOT NYC Open Data SomaFM Musopen CARTO RainViewer Subway Now GoodService Open-Meteo OpenStreetMap AQICN ⚓ MarineTraffic 🌿 Leaflet.js

🍽️ TOP TRENDING RESTAURANTS IN NYC Updated weekly · Monday 8AM

✨ TOP TRENDING BOUTIQUE HOTELS IN NYC Updated weekly · Monday 8AM

🎵 TOP TRENDING NIGHTCLUBS IN NYC Updated weekly · Monday 8AM

🛍️ TOP TRENDING RETAIL STORES IN NYC Updated weekly · Monday 8AM

🎡 TOP TRENDING ATTRACTIONS IN NYC Updated weekly · Monday 8AM

💡 TRENDING SMALL BUSINESSES IN NYC Updated weekly · Monday 8AM

☕ TOP TRENDING CAFES IN NYC Updated weekly · Monday 8AM

12 trending picks · serious coffee, serious city

🎤 CONFERENCES IN NYC Ranked by estimated attendance · Updated weekly

Loading…

🚀 NYC STARTUP HQs Updated weekly · Monday 8AM

CAMERA COMMENTS

Cameras with Comments

Loading…

⊞ Mix View

Click a zone, then click any toggle above to load content

NYC live camera feeds are temporarily down This is an outage on New York City's public camera network (NYC DOT), not on our end. The live feeds usually come back on their own — please check back soon.

IMAGE Bright 100% Saturation 100% Sharpen 0%

⠿

About the NYC Live Command Center

Watch more than 900 live NYC DOT traffic cameras across all five boroughs on one screen, refreshing every two seconds — free, and with no account required. Switch between grid and map views, filter by borough or neighborhood, search any street, set how many columns you see, and save your favorites.

Popular views include the Brooklyn Bridge, Times Square, the FDR Drive, Central Park, the Holland Tunnel, and the BQE. Browse by borough — Manhattan, Brooklyn, Queens, the Bronx, and Staten Island — explore all our NYC camera guides, or read more about the Command Center.

`).join(''); } /* ── NEIGHBORHOOD SELECT ── */ function buildNbSel(){ const sel=document.getElementById('nb-sel'); // For favorites mode, show neighborhoods of all favorited cameras const isFavs=boro==='favorites'; const isHid=boro==='hidden'; const boros=boro==='all'||isFavs||isHid?Object.keys(NB):[boro]; let h=''; boros.forEach(b=>{ const avail=(NB[b]||[]).filter(([n])=>allCams.some(c=>{ if(c.neighborhood!==n)return false; if(isFavs){const _at=_tabsActiveTab();return _at?_at.cameraIds.includes(c.id):false;} if(isHid)return hiddenCams.has(c.id); return boro==='all'||c.area===b; })); if(!avail.length)return; if(boros.length>1)h+=``; avail.forEach(([n])=>h+=``); if(boros.length>1)h+=''; }); sel.innerHTML=h;sel.value=nbhd; } /* ── FILTERS ── */ function _normSrch(s){return(s||'').toLowerCase().replace(/\b(\d+)(st|nd|rd|th)\b/gi,'$1');} function applyFilters(){ const q=_normSrch(searchQ); filtered=allCams.filter(c=>{ if(boro==='hidden'){if(!hiddenCams.has(c.id))return false;} else if(hiddenCams.has(c.id))return false; if(boro==='favorites'){const _at=_tabsActiveTab();if(!_at||!_at.cameraIds.includes(c.id))return false;} if(boro!=='all'&&boro!=='favorites'&&boro!=='hidden'&&c.area!==boro)return false; if(nbhd!=='all'&&c.neighborhood!==nbhd)return false; if(q&&!_normSrch(cleanName(c.name)).includes(q)&&!_normSrch(c.area).includes(q) &&!_normSrch(c.neighborhood).includes(q))return false; return true; }); // Sort favorites by user-defined order if(boro==='favorites'&&favOrder.length){ filtered.sort((a,b)=>{ const ai=favOrder.indexOf(a.id),bi=favOrder.indexOf(b.id); if(ai===-1&&bi===-1)return 0; if(ai===-1)return 1; if(bi===-1)return -1; return ai-bi; }); } shown=0;renderGrid();updateStats();updateMapMarkers(); } /* ── IMAGE LOADER ────────────────────────────────────── Cameras within LAZY_MARGIN of the viewport download now, the rest once the visitor scrolls toward them. One rolling queue, MAX_INFLIGHT at a time, DOM order. Re-render drops whatever is still queued. ────────────────────────────────────────────────────── */ const ImgSeq=(()=>{ const MAX_INFLIGHT=8; const LAZY_MARGIN=1500; let lazyIO=null,queue=[],inflight=0; function loadOne(el,onDone){ // data-active is NOT set here — tick must not touch images mid-batch-load // (tick resets src every 2s, which would cancel in-flight downloads forever) // data-active is set by imgOk/imgErr after the first response arrives. let settled=false; const finish=()=>{if(settled)return;settled=true;onDone();}; el.addEventListener('load',finish,{once:true}); el.addEventListener('error',finish,{once:true}); setTimeout(finish,8000); // Writing src below aborts the placeholder GIF's still-pending load, so its load // event may never fire. If the flag were left set, imgOk would consume the FIRST // REAL response as "the placeholder" and skip data-active — and tick() refreshes // only [data-active] cams, leaving the card permanently frozen. Consume it here. delete el.dataset.placeholder; (()=>{const u=el.dataset.src||'';el.src=u+(u.indexOf('?')>=0?'&':'?')+'t='+Date.now();})(); } // Slots are independent: a camera that is slow or dead holds only its own slot // until the 8s timeout in loadOne, and the queue keeps draining past it. function pump(){ while(inflight{inflight--;pump();}); } } // data-queued means "spoken for" — set on entry so a card sitting in the queue is // never enqueued a second time by the observer or by addAll. function enqueue(imgs){ for(const el of imgs){ if(el.dataset.queued)continue; el.dataset.queued='1'; queue.push(el); } pump(); } // A phone at the 2-column default stacks the 48 cards ~6.7 screens deep, so // downloading all of them up front spends most of the connection on cameras the // visitor may never reach while the handful on screen wait their turn. Anything // beyond LAZY_MARGIN therefore waits to be scrolled toward. The margin is wide // enough that a desktop grid sits inside it and still loads in one go. function lazyObserve(imgs){ if(!imgs.length)return; if(!lazyIO){ lazyIO=new IntersectionObserver(entries=>{ const hit=[]; entries.forEach(e=>{ if(!e.isIntersecting)return; lazyIO.unobserve(e.target); hit.push(e.target); }); enqueue(hit); },{rootMargin:LAZY_MARGIN+'px'}); } imgs.forEach(el=>lazyIO.observe(el)); } // A grid that has not been laid out yet reports all-zero rects, which puts every // card in near and reproduces the plain load-everything path. function split(imgs){ const limit=(window.innerHeight||0)+LAZY_MARGIN; const near=[],far=[]; for(const el of imgs)(el.getBoundingClientRect().top{delete el.dataset.queued;}); const{near,far}=split(imgs); enqueue(near); lazyObserve(far); }, addAll(imgs){ const{near,far}=split(imgs.filter(el=>!el.dataset.queued)); enqueue(near); lazyObserve(far); } }; })(); /* ── CARD CACHE (keeps images alive across borough/tab switches) ── */ const _cardCache=new Map(); // cid → HTMLElement function _getCardEl(c){ if(!_cardCache.has(c.id)){ const tmp=document.createElement('div'); tmp.innerHTML=cardHTML(c); const el=tmp.firstElementChild; // Prevent native img drag from hijacking tile drag el.querySelector('.cam-img').setAttribute('draggable','false'); // Cameras hidden in a previous session get their OFFLINE label at creation if(hiddenCams.has(c.id))_markCardOffline(el); _cardCache.set(c.id,el); } return _cardCache.get(c.id); } /* ── RENDER ── */ function renderGrid(){ const g=document.getElementById('cam-grid'); const slice=filtered.slice(0,shown+PAGE); if(!slice.length){ const isFavView=boro==='favorites'; const isHidView=boro==='hidden'; while(g.firstChild)g.removeChild(g.firstChild); g.innerHTML=`

${isFavView?'⭐':'📷'}

${isFavView?'No favorites yet':isHidView?'No hidden cameras':'No cameras match'}

${isFavView?'Hover any camera and click ☆ to save it':isHidView?'Cameras with offline feeds are detected and moved here automatically':'Try different keywords or clear a filter'}

${isFavView||isHidView?'':''}

`; document.getElementById('lm-wrap').style.display='none'; shown=0;return; } // Detach children back to cache (don't destroy — images stay alive) while(g.firstChild)g.removeChild(g.firstChild); const frag=document.createDocumentFragment(); slice.forEach(c=>frag.appendChild(_getCardEl(c))); g.appendChild(frag); shown=slice.length; // Stamp comment counts onto newly rendered cards _cmtUpdateAllIcons(); // Only load images that haven't completed yet (data-active = loaded) const toLoad=Array.from(g.querySelectorAll('.cam-img[data-src]:not([data-active])')); if(toLoad.length)ImgSeq.addInitial(toLoad); _updateLmFooter(); initFavDrag(); _showFavTipOnce(); } // "Showing X of Y" footer + Load More visibility. Split out of renderGrid so the // surgical hide path can refresh the counts without re-rendering the grid. function _updateLmFooter(){ const lmw=document.getElementById('lm-wrap'); const lmBtn=lmw.querySelector('.lm-btn'); if(boro==='favorites'){ const favTipDismissed=(()=>{try{return!!localStorage.getItem(FAV_TIP_KEY);}catch(e){return false;}})(); const showTip=favs.size>=2&&!favTipDismissed; const subEl=document.getElementById('lm-sub'); if(shown=allCams.length){ lmw.style.display='block'; if(lmBtn)lmBtn.style.display='none'; document.getElementById('lm-sub').textContent=''; const endMsg=document.getElementById('lm-end-msg'); if(endMsg){endMsg.style.display='block';endMsg.textContent="That's all folks! If you can make it here, you can make it anywhere.";} }else{ lmw.style.display='none'; if(lmBtn)lmBtn.style.display='none'; document.getElementById('lm-sub').textContent=`Showing all ${filtered.length.toLocaleString()} cameras`; const endMsg=document.getElementById('lm-end-msg');if(endMsg)endMsg.style.display='none'; } } } function loadMore(){ const g=document.getElementById('cam-grid'); const outer=document.getElementById('cam-grid-outer'); const prevShown=shown; // remember where new cameras start const newSlice=filtered.slice(shown,shown+PAGE); const frag=document.createDocumentFragment(); newSlice.forEach(c=>frag.appendChild(_getCardEl(c))); g.appendChild(frag); shown=Math.min(shown+PAGE,filtered.length); // Load only images not yet loaded in newly-added cards ImgSeq.addAll(Array.from(g.querySelectorAll('.cam-img[data-src]:not([data-active]):not([data-queued])'))); // Update lm-wrap state const lmw=document.getElementById('lm-wrap'); const lmBtn=lmw?lmw.querySelector('.lm-btn'):null; if(boro==='favorites'){ const favTipDismissed=(()=>{try{return!!localStorage.getItem(FAV_TIP_KEY);}catch(e){return false;}})(); const showTip=favs.size>=2&&!favTipDismissed; if(shown>=filtered.length){ if(lmw)lmw.style.display='none'; if(lmBtn)lmBtn.style.display='none'; }else{ if(lmw)lmw.style.display='block'; if(lmBtn)lmBtn.style.display=''; document.getElementById('lm-sub').textContent=`Showing ${shown.toLocaleString()} of ${filtered.length.toLocaleString()} cameras`; } }else if(shown>=filtered.length){ if(boro==='all'&&shown>=allCams.length){ // Show end message for All cameras view if(lmw)lmw.style.display='block'; if(lmBtn)lmBtn.style.display='none'; document.getElementById('lm-sub').textContent=''; const endMsg=document.getElementById('lm-end-msg'); if(endMsg){endMsg.style.display='block';endMsg.textContent="That's all folks! If you can make it here, you can make it anywhere.";} achStats.allCamsLoaded=true;_saveStats();achCheck(); }else{ if(lmw)lmw.style.display='none'; if(lmBtn)lmBtn.style.display='none'; document.getElementById('lm-sub').textContent=`Showing all ${filtered.length.toLocaleString()} cameras`; } }else{ document.getElementById('lm-sub').textContent=`Showing ${shown.toLocaleString()} of ${filtered.length.toLocaleString()} cameras`; } initFavDrag(); // In fullscreen, scroll to show the first newly added camera if(camFsOn&&outer&&g.children.length>prevShown){ const firstNew=g.children[prevShown]; if(firstNew)setTimeout(()=>firstNew.scrollIntoView({behavior:'smooth',block:'nearest'}),60); } } function cardHTML(c){ const theme=root().dataset.theme; const name=cleanName(c.name); const short=c.id.slice(0,8).toUpperCase(); const isFav=(_tabsActiveTab()?.cameraIds||[]).includes(c.id); const badge=theme==='hacker'?boroCodes(c.area):c.area; const nb=c.neighborhood?`${c.neighborhood}`:''; // Random blink interval per dot (1.4–2.8s) for desync const bDur=(1.4+Math.random()*1.4).toFixed(2); const bDly=(Math.random()*2).toFixed(2); return `

${name}

${badge}${nb}

`; } function boroCodes(a){return{Manhattan:'[MAN]',Brooklyn:'[BKN]',Queens:'[QNS]',Bronx:'[BRX]','Staten Island':'[SI]'}[a]||a;} function cleanName(n){ if(/^C\d+-/.test(n))return n.replace(/^C\d+-[A-Z]+-\d+-[A-Z]+_at_/,'').replace(/^C\d+-[A-Z]+-\d+-/,'').replace(/_/g,' ').replace(/-Ex\d+[A-Z]?$/,'').replace(/-\d+(\.\d+)?$/,'').trim(); return n.replace(/-\d+\.\d+$/,'').trim(); } function imgErr(img){ // Don't mark placeholder loads as errors — only real camera URLs if(img.dataset.placeholder&&!img.dataset.active)return; img.setAttribute('data-active','1'); // Don't show LOADING overlay — background color serves as placeholder, // and tick() will retry automatically every 2 seconds // Auto-hide feeds that fail repeatedly (e.g. API answers "Camera not found") const cid=img.id&&img.id.startsWith('ci-')?img.id.slice(3):null; if(cid){ const n=(_imgFailCnt.get(cid)||0)+1; _imgFailCnt.set(cid,n); if(n>=HIDE_AFTER_FAILS&&!hiddenCams.has(cid))_hideCam(cid); } _netFail(cid); } function imgOk(img){ // Ignore the transparent-pixel placeholder load if(img.dataset.placeholder&&!img.dataset.active){ delete img.dataset.placeholder; return; } img.setAttribute('data-active','1'); delete img.dataset.placeholder; // Remove any stale loading overlay (from prior error) const w=img.closest('.cam-img-wrap'); if(w){const off=w.querySelector('.img-offline');if(off)off.remove();} const cid=img.id&&img.id.startsWith('ci-')?img.id.slice(3):null; if(cid){ _imgFailCnt.delete(cid); if(hiddenCams.has(cid))_unhideCam(cid); // feed recovered } _netOk(); } /* ── NETWORK-WIDE OUTAGE BANNER ── Individual dead feeds are auto-hidden above. When the whole NYC DOT camera API goes down, every visible tile fails at once with no successful loads to reset the streak — that's the signal we surface. The banner clears itself the instant any feed returns. Skipped in the Hidden view, where feeds are known to be dead and would otherwise read as a false outage. */ function _showOutage(){ if(_outageShown)return; _outageShown=true; const b=document.getElementById('cam-outage'); if(b)b.style.display='flex'; } function _hideOutage(){ if(!_outageShown)return; _outageShown=false; const b=document.getElementById('cam-outage'); if(b)b.style.display='none'; } function _netFail(cid){ if(cid)_failedSinceOk.add(cid); _maybeOutage(); } function _netOk(){ _lastCamOk=Date.now(); _failedSinceOk.clear(); _hideOutage(); } // Guard: surface the outage banner only when every condition above holds, so a partial // failure (a dead borough, a filtered subset, a slow initial load) can never trip it. function _maybeOutage(){ if(boro!=='all'||(searchQ&&searchQ.trim())){_hideOutage();return;} if(Date.now()-_lastCamOk>OUTAGE_SILENCE_MS&&_failedSinceOk.size>=NET_OUTAGE_FAILS)_showOutage(); } // Watchdog for when the NYC DOT API hangs instead of erroring: requests stay // pending, so no error events fire and the streak never climbs. If visible tiles // are being refreshed but none has loaded in OUTAGE_SILENCE_MS, treat it as an // outage. Any successful load (via _netOk) clears it. function _outageWatchdog(){ try{ const g=document.getElementById('cam-grid'); if(!g||!g.querySelector('.cam-card'))return; // no camera tiles expecting a feed _maybeOutage(); }catch(e){} } setInterval(_outageWatchdog,4000); /* ── HIDDEN CAMERAS (offline feeds, auto-detected) ── */ function _saveHidden(){try{localStorage.setItem(HIDDEN_KEY,JSON.stringify([...hiddenCams].map(id=>_hiddenMeta.get(id)||{id})));}catch(e){}} // Hidden cameras stay listed (under the Hidden toggle) even after the live // API drops them, using the metadata saved when they were hidden. function _mergeHiddenIntoList(list){ const have=new Set(list.map(c=>c.id)); hiddenCams.forEach(id=>{ if(have.has(id))return; const m=_hiddenMeta.get(id); if(m&&m.name)list.push({...m,imageUrl:m.imageUrl||IMG_BASE+id+'/image',isOnline:'false'}); }); return list; } function _markCardOffline(el){ const w=el.querySelector('.cam-img-wrap'); if(w&&!w.querySelector('.img-offline')){ const d=document.createElement('div');d.className='img-offline';d.textContent='OFFLINE'; w.appendChild(d); } } function _hideCam(cid){ hiddenCams.add(cid); if(!_hiddenMeta.has(cid)){ const c=allCams.find(x=>x.id===cid); if(c)_hiddenMeta.set(cid,{id:c.id,name:c.name,latitude:c.latitude,longitude:c.longitude,area:c.area,neighborhood:c.neighborhood,imageUrl:c.imageUrl}); } _saveHidden(); // Label the cached card so the Hidden view shows OFFLINE instead of a broken image const el=_cardCache.get(cid); if(el)_markCardOffline(el); updateHiddenCount(); // Surgical removal: drop only this camera's tile and let the grid reflow. // A full applyFilters() here re-rendered the whole grid — every card detached // and re-mounted, Load More progress reset to one page — so one dead camera // crossing the fail threshold made the entire feed visibly churn. if(boro==='hidden'){ applyFilters(); // the Hidden view LISTS hidden cams — membership grew, rebuild }else{ const i=filtered.findIndex(c=>c.id===cid); if(i>-1){ filtered.splice(i,1); if(!filtered.length){ renderGrid(); // last matching camera gone — show the empty state }else if(ishown){ const nel=_getCardEl(filtered[shown]); document.getElementById('cam-grid').appendChild(nel); shown++; _cmtUpdateAllIcons(); if(boro==='favorites')initFavDrag(); const img=nel.querySelector('.cam-img[data-src]'); if(img&&!img.dataset.active){ delete img.dataset.queued; // may be stale from an earlier filtered-away render ImgSeq.addAll([img]); } } _updateLmFooter(); }else{ _updateLmFooter(); // beyond the shown range — only the counts change } updateStats(); updateMapMarkers(); }else{ updateStats(); // not in the current view, but the hidden tally changed } } if(camFsOn)_syncFsPanel(); } // Recovered cameras need a real re-filter (they must re-enter the feed in sorted // position), but the boot-time probes in _verifyHiddenCams can unhide several cams // within milliseconds — debounce so N recoveries cost one grid rebuild, not N. let _refilterT=null; function _scheduleRefilter(){ clearTimeout(_refilterT); _refilterT=setTimeout(()=>{_refilterT=null;applyFilters();},250); } function _unhideCam(cid){ hiddenCams.delete(cid); _hiddenMeta.delete(cid); _imgFailCnt.delete(cid); _saveHidden(); updateHiddenCount(); _scheduleRefilter(); if(boro==='hidden'&&!hiddenCams.size)setBoro('all'); if(camFsOn)_syncFsPanel(); } function updateHiddenCount(){ // Count only hidden cameras still present in the current camera list let n=0;hiddenCams.forEach(id=>{if(allCams.some(c=>c.id===id))n++;}); const chip=document.getElementById('hid-chip'); if(chip)chip.style.display=n?'':'none'; const cnt=document.getElementById('hid-cnt'); if(cnt)cnt.textContent=n?`(${n})`:''; const fsp=document.getElementById('fsp-hidden'); if(fsp)fsp.style.display=n?'':'none'; } // Re-probe hidden cameras once per page load — feeds that came back are unhidden function _verifyHiddenCams(){ hiddenCams.forEach(cid=>{ const c=allCams.find(x=>x.id===cid); if(!c)return; const probe=new Image(); probe.onload=()=>_unhideCam(cid); probe.src=c.imageUrl+'?t='+Date.now(); }); } /* ── IMAGE ROUTE (direct DOT vs Worker relay) ───────── webcams.nyctmc.org is unreachable from many non-US networks, so every fails and the auto-hide sweeps the whole grid empty. At boot, probe a few direct camera URLs: if none responds, swap every image URL to the relay on our own zone (IMG_BASE_PROXY) and remember the choice. The probe runs every load, so the swap heals itself in both directions (network changed, relay retired). tick() re-requests [data-active] cams each cycle, so tiles that already errored recover on their own once the base changes. */ function _setImgBase(base,verify){ const rw=u=>{ if(!u)return u; if(u.startsWith(IMG_BASE_DIRECT))return base+u.slice(IMG_BASE_DIRECT.length); if(u.startsWith(IMG_BASE_PROXY))return base+u.slice(IMG_BASE_PROXY.length); return u; }; IMG_BASE=base; allCams.forEach(c=>{c.imageUrl=rw(c.imageUrl);}); _hiddenMeta.forEach(m=>{m.imageUrl=rw(m.imageUrl);}); document.querySelectorAll('.cam-img[data-src]').forEach(el=>{el.dataset.src=rw(el.dataset.src);}); _imgFailCnt.clear(); // pre-swap failures must not count toward auto-hide if(verify)_verifyHiddenCams(); // cams hidden by pre-swap failures come back } function _probeImgRoute(){ const pool=allCams.filter(c=>c.isOnline!=='false'&&!hiddenCams.has(c.id)); const picks=(pool.length?pool:allCams).slice(); // returning blocked visitors have everything hidden const ids=[]; while(ids.length<3&&picks.length)ids.push(picks.splice(Math.floor(Math.random()*picks.length),1)[0].id); if(!ids.length)return; let settled=false,fails=0; const direct=ok=>{ if(settled)return;settled=true; if(ok&&IMG_BASE!==IMG_BASE_DIRECT){ try{localStorage.removeItem(IMG_PROXY_KEY);}catch(e){} _setImgBase(IMG_BASE_DIRECT,true); }else if(!ok&&IMG_BASE!==IMG_BASE_PROXY){ try{localStorage.setItem(IMG_PROXY_KEY,'1');}catch(e){} _setImgBase(IMG_BASE_PROXY,true); } }; ids.forEach(id=>{ const im=new Image(); im.onload=()=>direct(true); im.onerror=()=>{if(++fails>=ids.length)direct(false);}; im.src=IMG_BASE_DIRECT+id+'/image?t='+Date.now(); }); setTimeout(()=>direct(false),5000); // DOT hanging (not erroring) counts as unreachable } /* ── LANDSCAPE HEADER OFFSET ── */ // Landscape phones (see the orientation:landscape media query): the control bar // sticks at a negative top so only the CAMERA/BOROUGH chip-row stays on screen. // The offset is measured, not hardcoded — the bar's height depends on how its // rows wrap at the current width — and re-measured whenever the bar resizes. // Setting --lsc-top moves the bar without resizing it, so the ResizeObserver // cannot re-fire on its own write. function _lscSync(){ const bar=document.querySelector('.ctrl-bar'); if(!bar)return; if(window.matchMedia('(orientation:landscape) and (max-height:600px)').matches){ const row=bar.querySelector('.chip-row'); if(!row)return; const off=Math.round(row.getBoundingClientRect().top-bar.getBoundingClientRect().top); bar.style.setProperty('--lsc-top',(-off)+'px'); }else{ bar.style.removeProperty('--lsc-top'); } } window.addEventListener('resize',_lscSync); window.addEventListener('orientationchange',_lscSync); try{new ResizeObserver(_lscSync).observe(document.querySelector('.ctrl-bar'));}catch(e){} _lscSync(); /* ── STATS ── */ function updateStats(){ const el=document.getElementById('stats-txt'); let hidN=0;hiddenCams.forEach(id=>{if(allCams.some(c=>c.id===id))hidN++;}); const t=allCams.length-hidN,f=filtered.length; const on=t; // auto-hidden offline cameras excluded if(!t){el.textContent='Loading…';return;} const theme=root().dataset.theme; let _stxt; if(theme==='hacker'){_stxt=`► SCANNING ${t} NODES // ${on} ONLINE // UPTIME 99.97%`;} else if(f===t){_stxt=`${t.toLocaleString()} cameras online`;} else if(shown>=f){_stxt=`Showing ${f.toLocaleString()} cameras`;} else{_stxt=`Showing ${shown.toLocaleString()} of ${f.toLocaleString()} cameras`;} el.textContent=_stxt; document.getElementById('hkr-count').textContent=on; } /* ── REFRESH (2 s fixed, viewport-only) ── */ // IntersectionObserver tracks which camera images are in the viewport asynchronously. // tick() only writes img.src — no getBoundingClientRect(), no forced layout reflow, // no main-thread blockage that would stutter the Finance/Transit rAF animations. let _camObserver=null,_camObserved=new WeakSet(),_visCams=new Set(); function _initCamObserver(){ if(_camObserver)return; _camObserver=new IntersectionObserver(entries=>{ entries.forEach(e=>{e.isIntersecting?_visCams.add(e.target):_visCams.delete(e.target);}); },{threshold:0}); } function startRefresh(){ clearInterval(refTimer);cd=2;tick();refTimer=setInterval(tick,1000); } function tick(){ cd--; if(cd<=0){ const t=Date.now(); _initCamObserver(); // Register any cameras not yet tracked (handles initial load + Load More additions). // WeakSet.has() is O(1) so iterating all cameras is cheap on subsequent calls. document.querySelectorAll('.cam-img[data-active]').forEach(img=>{ if(!_camObserved.has(img)){_camObserved.add(img);_camObserver.observe(img);} }); // Refresh only visible cameras — visibility maintained by observer, no layout read needed _visCams.forEach(img=>{const u=img.dataset.src||'';if(!u)return;img.src=u+(u.indexOf('?')>=0?'&':'?')+'t='+t;}); cd=2; } } /* ── LANDMARK CAMERA MAP ── */ const _LANDMARK_CAM_MAP={ 'Queens Blvd @ 39 St - East': 'mc1', 'C2-BQE-29_WB_at_Morgan_Street': 'mc2', 'Broadway @ 46 Street': 'disney_cam', 'Belt Pkwy @ Avenue X': 'vms_cam', 'Broadway @ 45 St': 'times_sq', 'Broadway @ 46 St': 'times_sq', '7 Ave @ 43 St - 64.186 - PTZ': 'times_sq', 'Broadway @ 46 St- Quad East': 'times_sq', 'Sutton Pl @ 58 St': 'queensboro', 'MHB-19 Manh N URDW @ Anch': 'manh_bridge_1', 'Belt Pkwy @ Verrazano Bridge': 'verrazano', 'Rockefeller Plaza @ W 50 St': 'rockefeller', 'Rockefeller Plz @ 48 St (between 5 Ave and 6 Ave)': 'rockefeller', '6 AVE @ 50 St': 'radio_city', '27th St': 'skyline_cam', 'FDR @ Grand St': 'williamsburg', 'MHB-30 @ BRK S URW @ TWR Walk Way': 'manh_bridge_2', 'MHB-20 Mahn S URW @ Anch': 'manh_bridge_2', 'BB-51 North West Brooklyn Tower': 'brooklyn_bridge', 'Vanderbilt Ave @ E 45 St': 'yale_cam', 'Flatbush Ave and Atlantic Ave': 'barclays', '5 Ave @ E 58 St': 'bergdorf', 'Broadway @ Morris St': 'bull', '5 Ave @ 84 St': 'met_cam', 'Central Park @ 72nd St Post 37': 'central_park', }; function _checkLandmarkCam(name){ if(!name)return; const t=name.trim(); let lm=_LANDMARK_CAM_MAP[t]; if(!lm){ const tl=t.toLowerCase(); for(const[k,v]of Object.entries(_LANDMARK_CAM_MAP)){if(k.toLowerCase()===tl){lm=v;break;}} } if(!lm)return; if(!achStats.landmarkCams)achStats.landmarkCams={}; if(!achStats.landmarkCams[lm]){achStats.landmarkCams[lm]=true;_saveStats();achCheck();} } /* ── MODAL ── */ function _mUpdateNav(){ const prev=document.getElementById('modal-prev'); const next=document.getElementById('modal-next'); if(prev)prev.disabled=_mIdx<=0; if(next)next.disabled=_mIdx>=_mList.length-1; } function modalPrev(){if(_mIdx>0){_mIdx--;openModal(_mList[_mIdx],true);}} function modalNext(){if(_mIdx<_mList.length-1){_mIdx++;openModal(_mList[_mIdx],true);}} // Dedicated modal keydown handler — attached directly to #modal so it fires // for any key targeting the modal OR bubbling up from its children, completely // independent of which element has document focus. function _modalKeyHandler(e){ const tag=e.target.tagName; if(tag==='INPUT'||tag==='TEXTAREA'||tag==='SELECT')return; if(e.key==='ArrowLeft'){e.preventDefault();e.stopPropagation();modalPrev();} else if(e.key==='ArrowRight'){e.preventDefault();e.stopPropagation();modalNext();} else if(e.key==='s'||e.key==='S'){e.preventDefault();e.stopPropagation();saveSnapshot();} // Escape and other keys bubble through to the document handler normally } function openModal(id,_nav){ const cam=allCams.find(c=>c.id===id);if(!cam)return; // Stakeout: reset counter when switching cameras if(_stakeoutCamId!==id){_stakeoutCamId=id;_stakeoutMs=0;} mCam=cam; // Capture visible cam list from DOM (only on direct open, not nav) if(!_nav){ _mList=[...document.querySelectorAll('#cam-grid .cam-card')].map(el=>el.dataset.cid).filter(Boolean); _mIdx=_mList.indexOf(id); } // Camera Loyalist: log today's visit per camera const _today=new Date().toISOString().slice(0,10); if(!achStats.camDayLog)achStats.camDayLog={}; if(!achStats.camDayLog[id])achStats.camDayLog[id]=[]; if(!achStats.camDayLog[id].includes(_today)){ achStats.camDayLog[id].push(_today); _saveStats();achCheck(); } const theme=root().dataset.theme; const name=cleanName(cam.name); document.getElementById('m-ttl').textContent=theme==='hacker'?'► NODE: '+name:name; const img=document.getElementById('m-img');img.src=cam.imageUrl+'?t='+Date.now();img.alt=name; document.getElementById('m-coord').textContent=`${cam.latitude.toFixed(5)}, ${cam.longitude.toFixed(5)}`; const bl=theme==='hacker'?boroCodes(cam.area):cam.area; const nb=cam.neighborhood?`📍 ${cam.neighborhood}`:''; document.getElementById('m-badge').innerHTML=`${bl}${nb}`; const _modalEl=document.getElementById('modal'); _modalEl.style.display='flex'; document.body.style.overflow='hidden'; // Attach dedicated arrow-key handler directly to the modal element. // This fires for any keydown targeting #modal or bubbling up from its children, // regardless of document focus state — much more reliable than focus tricks. _modalEl.removeEventListener('keydown',_modalKeyHandler); _modalEl.addEventListener('keydown',_modalKeyHandler); // Also grab focus on the modal so the handler actually receives events try{if(document.activeElement&&document.activeElement!==document.body)document.activeElement.blur();}catch(e){} _modalEl.focus({preventScroll:true}); requestAnimationFrame(()=>_modalEl.focus({preventScroll:true})); // Track borough for achievement if(cam.area){ if(!Array.isArray(achStats.borosViewed))achStats.borosViewed=[]; if(!achStats.borosViewed.includes(cam.area)){ achStats.borosViewed.push(cam.area); _saveStats();achCheck(); } } // Landmark camera achievements _checkLandmarkCam(cam.name); _mUpdateNav(); clearInterval(mTimer); mTimer=setInterval(()=>{if(mCam)document.getElementById('m-img').src=mCam.imageUrl+'?t='+Date.now();},5000); // If modal map is open, update it for the new camera if(_modalMapOpen&&window._modalMiniMap){ window._modalMiniMap.setView([cam.latitude,cam.longitude],15); // Update marker position so pin follows the camera if(window._modalMiniMapMarker){ window._modalMiniMapMarker.setLatLng([cam.latitude,cam.longitude]); } const lbl=document.getElementById('modal-map-lbl'); if(lbl)lbl.textContent=cleanName(cam.name)||'Camera Location'; } // Notify comments system of the new camera _cmtOnModalOpen(id,name); // Sync favorite button state _updateModalFavBtn(); // Sync modal FS button icon to current cam-fs state _syncModalFsBtn(); } function manualRefresh(){ if(mCam)document.getElementById('m-img').src=mCam.imageUrl+'?t='+Date.now(); achStats.refreshCount++;_saveStats();achCheck(); } async function saveSnapshot(){ if(!mCam)return; // Build Eastern-time timestamp (military time) const etParts=new Intl.DateTimeFormat('en-US',{timeZone:'America/New_York',year:'numeric',month:'2-digit',day:'2-digit',hour:'2-digit',minute:'2-digit',second:'2-digit',hour12:false}).formatToParts(new Date()); const p=Object.fromEntries(etParts.map(x=>[x.type,x.value])); const h=p.hour==='24'?'00':p.hour; const ts=`${p.year}-${p.month}-${p.day}_${h}-${p.minute}-${p.second}`; const fname=(cleanName(mCam.name)||'camera').replace(/[<>:"\/\\|?*]/g,'').trim()+' '+ts+'.jpg'; const src=mCam.imageUrl+'?t='+Date.now(); const triggerDL=blob=>{ const u=URL.createObjectURL(blob); const a=document.createElement('a'); a.href=u;a.download=fname; document.body.appendChild(a);a.click(); setTimeout(()=>{try{document.body.removeChild(a);}catch{}URL.revokeObjectURL(u);},3000); }; // Step 1: Try canvas on the already-loaded modal image (synchronous — preserves user gesture). // toBlob() throws SecurityError synchronously if canvas is CORS-tainted; otherwise fires callback. try{ const mimg=document.getElementById('m-img'); const c=document.createElement('canvas'); c.width=mimg.naturalWidth||640;c.height=mimg.naturalHeight||480; c.getContext('2d').drawImage(mimg,0,0); c.toBlob(b=>{ if(b&&b.size){triggerDL(b);achStats.snapshotCount=(achStats.snapshotCount||0)+1;_saveStats();achCheck();} else window.open(src,'_blank'); },'image/jpeg',0.92); return; // toBlob didn't throw → canvas is clean → download will fire via callback }catch(_secErr){} // Step 2: Canvas was CORS-tainted. Race CORS proxies in parallel (much faster than sequential). const proxies=[ 'https://corsproxy.io/?'+encodeURIComponent(src), 'https://api.allorigins.win/raw?url='+encodeURIComponent(src), 'https://images.weserv.nl/?url='+encodeURIComponent(src.replace(/^https?:\/\//,''))+'&n=-1', ]; const blob=await Promise.any(proxies.map(async url=>{ const ctrl=new AbortController(); const tid=setTimeout(()=>ctrl.abort(),6000); try{ const r=await fetch(url,{signal:ctrl.signal}); clearTimeout(tid); if(!r.ok)throw 0; const b=await r.blob(); if(!b.size)throw 0; return b; }finally{clearTimeout(tid);} })).catch(()=>null); if(blob){ triggerDL(blob); achStats.snapshotCount=(achStats.snapshotCount||0)+1;_saveStats();achCheck(); return; } // Step 3: All proxies failed — open in new tab so user can right-click → Save As window.open(src,'_blank'); } function closeModal(){ const _cm=document.getElementById('modal'); _cm.style.display='none'; _cm.classList.remove('modal-fs'); // clear CSS-fullscreen fallback so it never persists try{if(document.fullscreenElement===_cm||document.webkitFullscreenElement===_cm){const _p=(document.exitFullscreen||document.webkitExitFullscreen).call(document);if(_p&&_p.catch)_p.catch(()=>{});}}catch(e){} _cm.removeEventListener('keydown',_modalKeyHandler); _cm.removeEventListener('mousemove',_fsPanelShow); document.body.style.overflow=''; clearInterval(mTimer);mCam=null;_modalMapOpen=false; // Clean up modal mini-map if(window._modalMiniMap){try{window._modalMiniMap.remove();}catch(e){}window._modalMiniMap=null;} document.getElementById('modal-box').classList.remove('map-open','cmt-open'); const btn=document.getElementById('modal-map-btn'); if(btn)btn.classList.remove('active'); document.getElementById('modal-cmt-btn')?.classList.remove('active'); } let _modalMapOpen=false; function toggleModalMap(){ const box=document.getElementById('modal-box'); const btn=document.getElementById('modal-map-btn'); _modalMapOpen=!_modalMapOpen; // Mutually exclusive: close comments if opening map if(_modalMapOpen&&box.classList.contains('cmt-open')){ box.classList.remove('cmt-open'); document.getElementById('modal-cmt-btn')?.classList.remove('active'); } box.classList.toggle('map-open',_modalMapOpen); if(btn)btn.classList.toggle('active',_modalMapOpen); if(_modalMapOpen&&mCam){ if(!window._modalMiniMap){ setTimeout(()=>{ const _mmTheme=root().dataset.theme||'dark'; const _mmStyle=_mmTheme==='light'?'light_all':'dark_all'; window._modalMiniMap=L.map('modal-mini-map',{zoomControl:false,attributionControl:false}) .setView([mCam.latitude,mCam.longitude],15); L.tileLayer(`https://{s}.basemaps.cartocdn.com/${_mmStyle}/{z}/{x}/{y}{r}.png`,{maxZoom:19}).addTo(window._modalMiniMap); L.control.zoom({position:'bottomright'}).addTo(window._modalMiniMap); const icon=L.divIcon({className:'',html:'

📷

',iconSize:[26,26],iconAnchor:[13,13]}); window._modalMiniMapMarker=L.marker([mCam.latitude,mCam.longitude],{icon}).addTo(window._modalMiniMap); },120); }else{ window._modalMiniMap.invalidateSize(); window._modalMiniMap.setView([mCam.latitude,mCam.longitude],15); // Ensure marker is at the correct position if(window._modalMiniMapMarker){ window._modalMiniMapMarker.setLatLng([mCam.latitude,mCam.longitude]); } } } } document.addEventListener('keydown',e=>{ if(e.key==='Escape'){ const epOpen=document.getElementById('event-popup').style.display!=='none'; if(epOpen){_closeEventPopup();return;} const nsmOpen=document.getElementById('news-story-modal').style.display!=='none'; if(nsmOpen){_closeNewsStory();return;} const lcmOpen=document.getElementById('life-card-modal').style.display!=='none'; if(lcmOpen){_closeLifeCard();return;} closeModal();return; } const lcmOpen=document.getElementById('life-card-modal').style.display!=='none'; if(lcmOpen&&!['INPUT','TEXTAREA','SELECT'].includes(e.target.tagName)){ if(e.key==='ArrowLeft'){e.preventDefault();_lcPrev();} else if(e.key==='ArrowRight'){e.preventDefault();_lcNext();} return; } const modalOpen=document.getElementById('modal').style.display!=='none'; if(modalOpen&&!['INPUT','TEXTAREA','SELECT'].includes(e.target.tagName)){ if(e.key==='ArrowLeft'){e.preventDefault();modalPrev();} else if(e.key==='ArrowRight'){e.preventDefault();modalNext();} else if(e.key==='s'||e.key==='S'){e.preventDefault();saveSnapshot();} } }); document.getElementById('modal').addEventListener('click',function(e){if(e.target===this)closeModal();}); /* ── LEAFLET MAP ── */ // Try multiple CORS-enabled GeoJSON sources for accurate NYC borough boundaries. // Returns a GeoJSON FeatureCollection or null if all sources fail. async function fetchNYCGeoJSON(){ const SOURCES=[ // Local simplified copy (~47 KB, RDP-simplified from the source below): accurate // outer coastline, no 3rd-party dependency, ~98% smaller than the 3 MB original. // (Replaces two dead remote sources that used to 400/404 on every load.) 'nyc-boroughs.min.geojson', // High-detail remote fallback — only fetched if the local file is unavailable. 'https://raw.githubusercontent.com/ResidentMario/geoplot-data/master/nyc-boroughs.geojson', ]; for(const url of SOURCES){ try{ const ctrl=new AbortController(); const tid=setTimeout(()=>ctrl.abort(),8000); const r=await fetch(url,{signal:ctrl.signal}); clearTimeout(tid); if(!r.ok)continue; const gj=await r.json(); if(gj.features&&gj.features.length){ console.log('[NYC boundary] loaded from',url.startsWith('http')?url.split('/')[2]:'local file',':',gj.features.length,'features'); return gj; } }catch(e){ console.warn('[NYC boundary] failed:',url.split('/')[2],e.message); } } console.warn('[NYC boundary] all sources failed — border will not render'); return null; } // Theme-appropriate border color function borderColor(theme){ if(theme==='hacker')return'#00ff41'; if(theme==='dark') return'#22c55e'; return'#22c55e'; } function initMap(){ if(map)return; map=L.map('cam-map',{ maxBounds:NYC_BOUNDS, maxBoundsViscosity:1.0, minZoom:9, maxZoom:19, zoomSnap:0.25, attributionControl:false, }); map.fitBounds(NYC_BOUNDS,{padding:[2,2]}); setTimeout(()=>{ try{map.setMinZoom(Math.floor(map.getZoom()));}catch(e){} },300); // Map Master: track zoom + pan interactions map.on('zoomend moveend',()=>{ achStats.mapExplored=(achStats.mapExplored||0)+1; _saveStats(); if(achStats.mapExplored>=50)achUnlockId('map_master'); }); const theme=root().dataset.theme||'light'; const style=theme==='light'?'light_all':'dark_all'; tileL=L.tileLayer(`https://{s}.basemaps.cartocdn.com/${style}/{z}/{x}/{y}{r}.png`,{ subdomains:'abcd', maxZoom:19, }).addTo(map); // Panes: traffic (350) → dim mask (360) → border (365) → cameras (450) map.createPane('trafficPane'); map.getPane('trafficPane').style.zIndex=350; map.createPane('maskPane'); map.getPane('maskPane').style.zIndex=360; map.createPane('borderPane'); map.getPane('borderPane').style.zIndex=365; map.createPane('cameraPane'); map.getPane('cameraPane').style.zIndex=450; trafficLayer=L.layerGroup([],{pane:'trafficPane'}).addTo(map); markerLayer=L.layerGroup(); if(camPinsVisible)markerLayer.addTo(map); updateMapMarkers(); // Async: fetch borough GeoJSON → dim mask (outside NYC) + border outline. // The evenodd mask shows all of NYC as clear and dims surrounding areas at 20% opacity. // Because evenodd fill-rule is used, shared edges between boroughs (e.g. Brooklyn/Queens) // are NOT visible as internal lines — only the outer city boundary is apparent. fetchNYCGeoJSON().then(gj=>{ if(!map||!gj)return; const theme=root().dataset.theme||'light'; const dimCol=theme==='hacker'?'#000000':theme==='dark'?'#0d1117':'#64748b'; const borderCol=borderColor(theme); // World rectangle → borough holes = area outside NYC is dimmed const worldRing=[[-85,-180],[-85,180],[85,180],[85,-180]]; const holes=[]; gj.features.forEach(f=>{ const geom=f.geometry; const toRing=ring=>ring.map(([lng,lat])=>[lat,lng]); if(geom.type==='Polygon') holes.push(toRing(geom.coordinates[0])); else if(geom.type==='MultiPolygon') geom.coordinates.forEach(p=>holes.push(toRing(p[0]))); }); maskLayer=L.polygon([worldRing,...holes],{ pane:'maskPane',fillColor:dimCol,fillOpacity:0.22, color:'none',fillRule:'evenodd',interactive:false, }).addTo(map); // Outer city border — drawn as thin stroke for crisp edge borderLayer=L.geoJSON(gj,{ pane:'borderPane', style:{color:borderCol,weight:1.5,fillOpacity:0,opacity:0.7}, interactive:false, }).addTo(map); }); } function updateMapMarkers(){ if(!markerLayer)return; markerLayer.clearLayers(); const theme=root().dataset.theme; const hacker=theme==='hacker'; filtered.forEach(c=>{ if(!c.latitude||!c.longitude)return; const col=BCOL[c.area]||'#888'; const m=L.circleMarker([c.latitude,c.longitude],{ pane:'cameraPane', radius:hacker?4:5, fillColor:hacker?'#00ff41':col, color:hacker?'#004400':'rgba(255,255,255,0.8)', weight:hacker?1:1.5, fillOpacity:hacker?0.95:0.88, className:hacker?'hkr-map-dot':'', }); m.bindTooltip(c.name,{permanent:false,direction:'top',className:'leaflet-cam-tip'}); m.on('click',()=>{achStats.mapClicks++;_saveStats();achCheck();openModal(c.id);}); markerLayer.addLayer(m); // Stagger hacker blink — set random negative delay so each dot is offset if(hacker&&m._path){ m._path.style.animationDelay=(-Math.random()*2.8).toFixed(2)+'s'; } }); } function updateMapTiles(){ if(!map||!tileL)return; const theme=root().dataset.theme; const style=theme==='light'?'light_all':'dark_all'; tileL.setUrl(`https://{s}.basemaps.cartocdn.com/${style}/{z}/{x}/{y}{r}.png`); } function updateMapMask(){ const theme=root().dataset.theme||'light'; const dimCol=theme==='hacker'?'#000000':theme==='dark'?'#0d1117':'#64748b'; if(maskLayer)maskLayer.setStyle({fillColor:dimCol}); if(borderLayer)borderLayer.setStyle({color:borderColor(theme)}); } // Remember which layers were active when map was closed, restore on re-open let _savedMapLayers={traffic:false,weather:false,air:false,crime:false,emergency:false,ships:false,movies:false,worldrecords:false}; const _MAP_LAYER_TOG_IDS=['traffic-tog','tog-ships','tog-crime','tog-emergency','tog-air','tog-weather','tog-movies','tog-worldrecords','tog-campins']; function _dimMapLayerToggles(mapIsOpen){ // State-getter for each layer button — used to restore active class when map opens const stateOf={ 'traffic-tog':()=>trafficOn, 'tog-ships':()=>typeof shipsOn!=='undefined'&&shipsOn, 'tog-crime':()=>typeof crimeOn!=='undefined'&&crimeOn, 'tog-emergency':()=>typeof emergencyOn!=='undefined'&&emergencyOn, 'tog-air':()=>typeof airOn!=='undefined'&&airOn, 'tog-weather':()=>typeof weatherOn!=='undefined'&&weatherOn, 'tog-movies':()=>moviesOn, 'tog-worldrecords':()=>worldRecordsOn, 'tog-campins':()=>camPinsVisible, }; _MAP_LAYER_TOG_IDS.forEach(id=>{ const el=document.getElementById(id); if(!el)return; el.classList.toggle('map-layer-dim',!mapIsOpen); if(mapIsOpen){ // Restore active state from actual layer state const fn=stateOf[id]; if(fn)el.classList.toggle('active',fn()); }else{ // Strip active so no layer appears green while map is closed el.classList.remove('active'); } }); } function toggleMap(){ // Mix zone intercept: load map into selected zone instead if(_mixOpen&&_mixActiveZone>=0&&!mapOpen){ _mixLoadZone(_mixActiveZone,'map'); return; } mapOpen=!mapOpen; document.getElementById('map-wrap').classList.toggle('open',mapOpen); document.getElementById('map-tog').classList.toggle('active',mapOpen); _dimMapLayerToggles(mapOpen); if(mapOpen){ if(map)setTimeout(()=>map.invalidateSize(),420); // Restore previously active layers (delay so map is ready) setTimeout(()=>{ if(_savedMapLayers.traffic&&!trafficOn)toggleTraffic(); if(_savedMapLayers.weather&&!(typeof weatherOn!=='undefined'&&weatherOn))toggleWeather(); if(_savedMapLayers.air&&!(typeof airOn!=='undefined'&&airOn))toggleAir(); if(_savedMapLayers.crime&&!(typeof crimeOn!=='undefined'&&crimeOn))toggleCrime(); if(_savedMapLayers.emergency&&!(typeof emergencyOn!=='undefined'&&emergencyOn))toggleEmergency(); if(_savedMapLayers.ships&&!(typeof shipsOn!=='undefined'&&shipsOn))toggleShips(); if(_savedMapLayers.movies&&!moviesOn)toggleMovies(); if(_savedMapLayers.worldrecords&&!worldRecordsOn)toggleWorldRecords(); },500); }else{ // Save which layers are active, then close them _savedMapLayers={ traffic:trafficOn, weather:typeof weatherOn!=='undefined'&&weatherOn, air:typeof airOn!=='undefined'&&airOn, crime:typeof crimeOn!=='undefined'&&crimeOn, emergency:typeof emergencyOn!=='undefined'&&emergencyOn, ships:typeof shipsOn!=='undefined'&&shipsOn, movies:moviesOn, worldrecords:worldRecordsOn, }; setTimeout(()=>{ if(trafficOn)toggleTraffic(); if(typeof weatherOn!=='undefined'&&weatherOn)toggleWeather(); if(typeof airOn!=='undefined'&&airOn)toggleAir(); if(typeof crimeOn!=='undefined'&&crimeOn)toggleCrime(); if(typeof emergencyOn!=='undefined'&&emergencyOn)toggleEmergency(); if(typeof shipsOn!=='undefined'&&shipsOn)toggleShips(); },0); } _updateContentAreaOrder(); } /* ── MAP RESIZE HANDLE ── */ (function(){ const handle=document.getElementById('map-resize-handle'); const wrap=document.getElementById('map-wrap'); let dragging=false,startY=0,startH=0,_dragMoved=false; handle.addEventListener('mousedown',e=>{ if(!mapOpen)return; dragging=true;_dragMoved=false;startY=e.clientY; startH=wrap.getBoundingClientRect().height; handle.classList.add('dragging'); document.body.style.cursor='ns-resize'; document.body.style.userSelect='none'; e.preventDefault(); }); document.addEventListener('mousemove',e=>{ if(!dragging)return; _dragMoved=true; const newH=Math.max(180,Math.min(window.innerHeight*0.8,startH+(e.clientY-startY))); wrap.style.setProperty('--map-h',newH+'px'); if(map)map.invalidateSize(); }); document.addEventListener('mouseup',()=>{ if(!dragging)return; dragging=false;handle.classList.remove('dragging'); document.body.style.cursor='';document.body.style.userSelect=''; if(_dragMoved&&!achStats.mapDragExpanded){achStats.mapDragExpanded=true;_saveStats();achCheck();} }); // Touch support handle.addEventListener('touchstart',e=>{ if(!mapOpen)return; dragging=true;startY=e.touches[0].clientY; startH=wrap.getBoundingClientRect().height; e.preventDefault(); },{passive:false}); document.addEventListener('touchmove',e=>{ if(!dragging)return; const newH=Math.max(180,Math.min(window.innerHeight*0.8,startH+(e.touches[0].clientY-startY))); wrap.style.setProperty('--map-h',newH+'px'); if(map)map.invalidateSize(); },{passive:false}); document.addEventListener('touchend',()=>{dragging=false;}); })(); /* ── NEWS PANEL RESIZE ── */ (function(){ const handle=document.getElementById('news-resize-handle'); const panel=document.getElementById('panel-news'); if(!handle||!panel)return; let dragging=false,startY=0,startH=0; handle.addEventListener('mousedown',e=>{ dragging=true;startY=e.clientY; startH=panel.querySelector('[style*="--news-h"]') ?parseInt(panel.querySelector('[style*="--news-h"]').style.getPropertyValue('--news-h')||'280') :280; // Measure the actual scroll container height instead const scrollDiv=panel.querySelector('div[style*="overflow-y"]'); startH=scrollDiv?scrollDiv.getBoundingClientRect().height:280; handle.classList.add('dragging'); document.body.style.cursor='ns-resize'; document.body.style.userSelect='none'; e.preventDefault(); }); document.addEventListener('mousemove',e=>{ if(!dragging)return; const newH=Math.max(120,Math.min(window.innerHeight*0.7,startH+(e.clientY-startY))); const scrollDiv=panel.querySelector('div[style*="overflow-y"]')||panel.querySelector('div[style*="--news-h"]'); if(scrollDiv)scrollDiv.style.setProperty('--news-h',newH+'px'); // Also set height directly since CSS var on inline style needs the parent to read it if(scrollDiv)scrollDiv.style.height=newH+'px'; }); document.addEventListener('mouseup',()=>{ if(!dragging)return; dragging=false;handle.classList.remove('dragging'); document.body.style.cursor='';document.body.style.userSelect=''; }); handle.addEventListener('touchstart',e=>{ dragging=true;startY=e.touches[0].clientY; const scrollDiv=panel.querySelector('div[style*="overflow-y"]'); startH=scrollDiv?scrollDiv.getBoundingClientRect().height:280; e.preventDefault(); },{passive:false}); document.addEventListener('touchmove',e=>{ if(!dragging)return; const newH=Math.max(120,Math.min(window.innerHeight*0.7,startH+(e.touches[0].clientY-startY))); const scrollDiv=panel.querySelector('div[style*="overflow-y"]'); if(scrollDiv)scrollDiv.style.height=newH+'px'; },{passive:false}); document.addEventListener('touchend',()=>{dragging=false;}); })(); /* ── EVENTS PANEL RESIZE ── */ (function(){ const handle=document.getElementById('events-resize-handle'); const list=document.getElementById('events-list'); if(!handle||!list)return; let dragging=false,startY=0,startH=0; handle.addEventListener('mousedown',e=>{ dragging=true;startY=e.clientY; startH=list.getBoundingClientRect().height; handle.classList.add('dragging'); document.body.style.cursor='ns-resize'; document.body.style.userSelect='none'; e.preventDefault(); }); document.addEventListener('mousemove',e=>{ if(!dragging)return; const newH=Math.max(120,Math.min(window.innerHeight*0.7,startH+(e.clientY-startY))); list.style.height=newH+'px'; }); document.addEventListener('mouseup',()=>{ if(!dragging)return; dragging=false;handle.classList.remove('dragging'); document.body.style.cursor='';document.body.style.userSelect=''; }); handle.addEventListener('touchstart',e=>{ dragging=true;startY=e.touches[0].clientY; startH=list.getBoundingClientRect().height; e.preventDefault(); },{passive:false}); document.addEventListener('touchmove',e=>{ if(!dragging)return; const newH=Math.max(120,Math.min(window.innerHeight*0.7,startH+(e.touches[0].clientY-startY))); list.style.height=newH+'px'; },{passive:false}); document.addEventListener('touchend',()=>{dragging=false;}); })(); /* ── TRAFFIC OVERLAY ── */ function _trafficLegendOn(){ if(!map||_trafficLegend)return; _trafficLegend=L.control({position:'bottomleft'}); _trafficLegend.onAdd=function(){ const d=L.DomUtil.create('div','traffic-legend'); d.innerHTML='

Traffic Speed

' +'

> 30 mph — Free-flowing

' +'

11–30 mph — Moderate

' +'

≤ 10 mph — Congested

' +'

NYC DOT Realtime

'; return d; }; _trafficLegend.addTo(map); } function _trafficLegendOff(){if(_trafficLegend){_trafficLegend.remove();_trafficLegend=null;}} function decodePolyline(s){ let i=0,lat=0,lng=0,r=[]; while(i=0x20); lat+=res&1?~(res>>1):res>>1; sh=0;res=0; do{b=s.charCodeAt(i++)-63;res|=(b&0x1f)<=0x20); lng+=res&1?~(res>>1):res>>1; r.push([lat/1e5,lng/1e5]); } return r; } const TRAFFIC_BTN_HTML=` Traffic`; async function toggleTraffic(){ const btn=document.getElementById('traffic-tog'); if(trafficOn){ if(trafficLayer)trafficLayer.clearLayers(); _trafficLegendOff(); trafficOn=false; btn.classList.remove('active'); btn.innerHTML=TRAFFIC_BTN_HTML; return; } // Open map first if(!mapOpen){toggleMap();await new Promise(r=>setTimeout(r,450));} btn.innerHTML=TRAFFIC_BTN_HTML; if(trafficLayer)trafficLayer.clearLayers(); /* Static fallback — real DOT segment coords + time-of-day speed estimate */ function renderStaticTraffic(){ if(trafficLayer)trafficLayer.clearLayers(); const h=parseInt(new Date().toLocaleString('en-US',{timeZone:'America/New_York',hour:'2-digit',hour12:false})); const pk=(h>=7&&h<10)||(h>=16&&h<20); const SEGS=[ // Manhattan [[[40.7007,-73.9740],[40.7128,-73.9729],[40.7290,-73.9715],[40.7420,-73.9675],[40.7487,-73.9658],[40.7614,-73.9531],[40.7683,-73.9490],[40.7750,-73.9453]],pk?8:30,'FDR Drive N'], [[[40.7750,-73.9453],[40.7683,-73.9490],[40.7614,-73.9531],[40.7487,-73.9658],[40.7290,-73.9715],[40.7128,-73.9729],[40.7007,-73.9740]],pk?9:28,'FDR Drive S'], [[[40.7007,-74.0145],[40.7178,-74.0120],[40.7310,-74.0058],[40.7420,-74.0028],[40.7550,-74.0020],[40.7680,-73.9985],[40.7750,-73.9910],[40.7845,-73.9870]],pk?11:38,'West Side Hwy N'], [[[40.7845,-73.9870],[40.7750,-73.9910],[40.7680,-73.9985],[40.7550,-74.0020],[40.7310,-74.0058],[40.7178,-74.0120],[40.7007,-74.0145]],pk?10:36,'West Side Hwy S'], [[[40.7580,-73.9950],[40.7558,-73.9978],[40.7540,-73.9998],[40.7530,-74.0010]],pk?4:18,'Lincoln Tunnel approach'], [[[40.7260,-74.0060],[40.7240,-74.0072],[40.7218,-74.0084],[40.7205,-74.0093]],pk?5:20,'Holland Tunnel approach'], [[[40.7580,-73.9700],[40.7565,-73.9790],[40.7552,-73.9870],[40.7540,-73.9960]],pk?6:22,'42nd St crosstown'], // Brooklyn [[[40.6162,-74.0261],[40.6192,-74.0236],[40.6236,-74.0198],[40.6248,-74.0191],[40.6258,-74.0186],[40.6279,-74.0177],[40.6305,-74.0168],[40.6324,-74.0161],[40.6334,-74.0159]],pk?9:32,'Gowanus Expwy N (GOW)'], [[[40.6334,-74.0159],[40.6324,-74.0161],[40.6305,-74.0168],[40.6279,-74.0177],[40.6258,-74.0186],[40.6248,-74.0191],[40.6236,-74.0198],[40.6192,-74.0236],[40.6162,-74.0261]],pk?7:30,'Gowanus Expwy S (GOW)'], [[[40.7060,-73.9897],[40.6980,-73.9920],[40.6900,-73.9965],[40.6820,-74.0015],[40.6730,-74.0060],[40.6660,-74.0085]],pk?7:25,'BQE / Brooklyn Bridge'], [[[40.6380,-73.9300],[40.6310,-73.8900],[40.6230,-73.8200],[40.6180,-73.7500]],pk?15:42,'Belt Pkwy E'], [[[40.6180,-73.7500],[40.6230,-73.8200],[40.6310,-73.8900],[40.6380,-73.9300]],pk?14:40,'Belt Pkwy W'], [[[40.6400,-74.0700],[40.6300,-74.1050],[40.6200,-74.1400],[40.6100,-74.1750]],pk?12:38,'Verrazzano / Gowanus SW'], // Queens [[[40.7442,-73.7717],[40.7454,-73.7691],[40.7457,-73.7683],[40.7465,-73.7654],[40.7476,-73.7613],[40.7481,-73.7601],[40.7489,-73.7584],[40.7492,-73.7576],[40.7495,-73.7566],[40.7503,-73.7532],[40.7507,-73.7511],[40.7508,-73.7502]],pk?9:34,'LIE WB Little Neck'], [[[40.7508,-73.7502],[40.7503,-73.7532],[40.7495,-73.7566],[40.7492,-73.7576],[40.7489,-73.7584],[40.7481,-73.7601],[40.7476,-73.7613],[40.7465,-73.7654],[40.7457,-73.7683],[40.7454,-73.7691],[40.7442,-73.7717]],pk?11:36,'LIE EB Little Neck'], [[[40.7626,-73.8397],[40.7614,-73.8390],[40.7611,-73.8389],[40.7605,-73.8388],[40.7600,-73.8388],[40.7583,-73.8390],[40.7551,-73.8385],[40.7513,-73.8359],[40.7504,-73.8353],[40.7498,-73.8350]],pk?9:38,'Van Wyck Expwy S (VWE)'], [[[40.7498,-73.8350],[40.7504,-73.8353],[40.7513,-73.8359],[40.7551,-73.8385],[40.7583,-73.8390],[40.7600,-73.8388],[40.7605,-73.8388],[40.7611,-73.8389],[40.7614,-73.8390],[40.7626,-73.8397]],pk?8:36,'Van Wyck Expwy N (VWE)'], [[[40.7282,-73.9150],[40.7340,-73.9000],[40.7400,-73.8760],[40.7448,-73.8494],[40.7485,-73.8290],[40.7510,-73.8120]],pk?10:30,'Queens Blvd E'], [[[40.7510,-73.8120],[40.7485,-73.8290],[40.7448,-73.8494],[40.7400,-73.8760],[40.7340,-73.9000],[40.7282,-73.9150]],pk?11:28,'Queens Blvd W'], [[[40.7220,-73.9150],[40.7100,-73.9280],[40.7000,-73.9420],[40.6950,-73.9550]],pk?8:26,'BQE Queens'], // Bronx [[[40.8241,-73.8743],[40.8247,-73.8696],[40.8252,-73.8660],[40.8254,-73.8643],[40.8259,-73.8596],[40.8266,-73.8542],[40.8272,-73.8499]],pk?14:40,'Bruckner Expwy N (BE)'], [[[40.8272,-73.8499],[40.8266,-73.8542],[40.8259,-73.8596],[40.8254,-73.8643],[40.8252,-73.8660],[40.8247,-73.8696],[40.8241,-73.8743]],pk?12:38,'Bruckner Expwy S (BE)'], [[[40.8448,-73.8648],[40.8420,-73.8850],[40.8400,-73.9050],[40.8375,-73.9200],[40.8355,-73.9400],[40.8325,-73.9500]],pk?10:32,'Cross Bronx Expwy E'], [[[40.8325,-73.9500],[40.8355,-73.9400],[40.8375,-73.9200],[40.8400,-73.9050],[40.8420,-73.8850],[40.8448,-73.8648]],pk?9:30,'Cross Bronx Expwy W'], [[[40.8200,-73.9400],[40.8260,-73.9200],[40.8320,-73.9000],[40.8380,-73.8800],[40.8440,-73.8620]],pk?12:38,'Major Deegan Expwy N'], [[[40.8440,-73.8620],[40.8380,-73.8800],[40.8320,-73.9000],[40.8260,-73.9200],[40.8200,-73.9400]],pk?11:36,'Major Deegan Expwy S'], // Staten Island [[[40.6440,-74.0760],[40.6330,-74.1080],[40.6220,-74.1400],[40.6120,-74.1720],[40.6020,-74.1940]],pk?18:48,'SI Expwy W'], [[[40.6020,-74.1940],[40.6120,-74.1720],[40.6220,-74.1400],[40.6330,-74.1080],[40.6440,-74.0760]],pk?16:45,'SI Expwy E'], ]; SEGS.forEach(([pts,spd,name])=>{ const col=spd>30?'#22c55e':spd>10?'#f59e0b':'#ef4444'; L.polyline(pts,{pane:'trafficPane',color:col,weight:4,opacity:0.85,interactive:true}) .bindPopup(`${name}
Typical: ~${spd} mph ${pk?'(peak)':'(off-peak)'}`) .addTo(trafficLayer); }); } /* Fetch traffic JSON. Tries direct Socrata endpoint (CORS supported for public datasets) then three proxy services in sequence. Each attempt has a 15-second timeout. JSONP is used as a final fallback (may fail in modern Chrome due to MIME-type block). */ async function _fetchTrafficData(url){ const endpoints=[ url, 'https://api.allorigins.win/raw?url='+encodeURIComponent(url), 'https://corsproxy.io/?'+encodeURIComponent(url), 'https://corsproxy.org/?'+encodeURIComponent(url), ]; let lastErr='no endpoints tried'; for(let i=0;ictrl.abort(),15000); try{ console.log('[Traffic] Endpoint '+(i+1)+'/'+endpoints.length+': '+ep.slice(0,80)+'...'); const r=await fetch(ep,{signal:ctrl.signal,credentials:'omit'}); clearTimeout(t); if(!r.ok)throw new Error('HTTP '+r.status); const d=await r.json(); if(!Array.isArray(d))throw new Error('Not array (got '+typeof d+')'); if(d.length===0)throw new Error('API returned 0 records'); console.log('[Traffic] Success \u2014 '+d.length+' records from endpoint '+(i+1)); return d; }catch(e){ clearTimeout(t); lastErr=e.message; console.warn('[Traffic] Endpoint '+(i+1)+' failed: '+e.message); } } // JSONP last resort (all fetch attempts failed) return new Promise((resolve,reject)=>{ const cb='_tc'+Date.now(); const sc=document.createElement('script'); const timer=setTimeout(()=>{cleanup();reject(new Error('All endpoints failed (last: '+lastErr+')'));},15000); function cleanup(){clearTimeout(timer);delete window[cb];sc.remove();} window[cb]=d=>{cleanup();resolve(d);}; sc.onerror=()=>{cleanup();reject(new Error('All endpoints failed (last: '+lastErr+')'));}; sc.src=url+'&$jsonp='+cb; document.head.appendChild(sc); }); } try{ const data=await _fetchTrafficData(_buildTrafficURL()); if(!trafficLayer||!map)throw new Error('map closed during fetch'); let rendered=0; const _seenLinks=new Set(); data.forEach(seg=>{ if(!seg||typeof seg!=='object')return; // skip null/invalid rows try{ const lid=seg.link_id||seg.transcom_id||''; if(lid&&_seenLinks.has(lid))return; if(lid)_seenLinks.add(lid); const spd=parseFloat(seg.speed||seg.Speed||0); let pts=[]; if(seg.encoded_poly_line){ try{ const raw=decodePolyline(seg.encoded_poly_line); if(raw.length>=2){ const lngs=raw.map(p=>p[1]),lats=raw.map(p=>p[0]); const x0=Math.min(...lngs),x1=Math.max(...lngs); const y0=Math.min(...lats),y1=Math.max(...lats); // Only filter obviously bad data (segment spanning >55 mi east-west or >34 mi N-S) if((x1-x0)<0.8&&(y1-y0)<0.5){ pts=raw; } } }catch(e){pts=[];} } if(pts.length<2&&seg.link_points){ pts=seg.link_points.trim().split(/\s+/).map(pair=>{ const[lt,ln]=pair.split(',').map(Number); return isFinite(lt)&&isFinite(ln)&<>40.4&<<41.0&&ln>-74.3&&ln<-73.6?[lt,ln]:null; }).filter(Boolean); } if(pts.length<2)return; const col=spd>30?'#22c55e':spd>10?'#f59e0b':'#ef4444'; const name=seg.link_name||seg.borough||''; L.polyline(pts,{pane:'trafficPane',color:col,weight:4,opacity:0.82,interactive:!!name}) .bindPopup(name?`${name}
${spd.toFixed(1)} mph`:'') .addTo(trafficLayer); rendered++; }catch(segErr){console.warn('[Traffic] Segment skipped:',segErr.message);} }); if(!rendered){ if(data.length>0)console.warn('[Traffic] 0 rendered from '+data.length+' records. First record fields: '+Object.keys(data[0]).join(', ')); throw new Error('0/'+data.length+' segments rendered'); } _trafficLegendOn(); trafficOn=true;btn.classList.add('active');btn.innerHTML=TRAFFIC_BTN_HTML;_layersSet.add('traffic');_saveStats();achCheck(); }catch(e){ const errMsg=String(e.message||e).slice(0,50); console.error('[Traffic] FATAL: '+errMsg); // Show error in button for 5 s so it can be read without opening DevTools btn.innerHTML=`⚠ ${errMsg}`; await new Promise(r=>setTimeout(r,5000)); renderStaticTraffic(); _trafficLegendOn(); trafficOn=true;btn.classList.add('active');btn.innerHTML=TRAFFIC_BTN_HTML;_layersSet.add('traffic');_saveStats();achCheck(); } } /* ── BOROUGH / NEIGHBORHOOD ── */ function setBoro(b){ boro=b;nbhd='all'; document.querySelectorAll('[data-b]').forEach(el=>el.classList.toggle('active',el.dataset.b===b)); buildNbSel();document.getElementById('nb-sel').value='all'; applyFilters(); if(camFsOn)_syncFsPanel(); // Fav tip: hide when leaving favorites tab, show (if eligible) when entering it if(b==='favorites'){_showFavTipOnce();}else{_hideFavTip();} // Filter achievement if(b!=='all'&&b!=='favorites'&&b!=='hidden'){if(!achStats.filtersUsed){achStats.filtersUsed=true;_saveStats();achCheck();}} } function setNbhd(v){ nbhd=v; if(v!=='all'&&!achStats.filtersUsed){achStats.filtersUsed=true;_saveStats();achCheck();} applyFilters(); } /* ── ADAPTIVE SEARCH ── */ const SEARCH_CTX={ cameras:{placeholder:'Search by location, road, or route…',fn:null}, news:{placeholder:'Search news stories…',fn:q=>_filterPanel('news','news-list',q)}, events:{placeholder:'Search events…',fn:q=>_filterPanel('events','events-list',q)}, conferences:{placeholder:'Search conferences…',fn:q=>_filterConferences(q)}, restaurants:{placeholder:'Search restaurants…',fn:q=>_filterLife('restaurants',q)}, boutique:{placeholder:'Search boutique hotels…',fn:q=>_filterLife('boutique',q)}, nightclubs:{placeholder:'Search nightclubs…',fn:q=>_filterLife('nightclubs',q)}, retail:{placeholder:'Search retail…',fn:q=>_filterLife('retail',q)}, attractions:{placeholder:'Search attractions…',fn:q=>_filterLife('attractions',q)}, smallbiz:{placeholder:'Search small businesses…',fn:q=>_filterLife('smallbiz',q)}, cafes:{placeholder:'Search cafés…',fn:q=>_filterLife('cafes',q)}, startups:{placeholder:'Search startups…',fn:q=>_filterLife('startups',q)}, leaderboard:{placeholder:'Search users on leaderboard…',fn:q=>_filterLeaderboard(q)}, achievements:{placeholder:'Search achievements…',fn:q=>_filterAchievements(q)}, people:{placeholder:'Search NYC people…',fn:null}, utility:{placeholder:'Search transit & utilities…',fn:q=>{document.querySelectorAll('#mta-lines .mta-line').forEach(el=>{el.style.display=q&&!(el.textContent||'').toLowerCase().includes(q.toLowerCase())?'none':'';});}}, about:{placeholder:'Search…',fn:null}, }; let _searchCtx='cameras'; function setSearchContext(ctx){ _searchCtx=SEARCH_CTX[ctx]?ctx:'cameras'; const inp=document.getElementById('srch'); if(inp) inp.placeholder=SEARCH_CTX[_searchCtx].placeholder; // Clear search value when context switches searchQ=''; if(inp) inp.value=''; } function _filterPanel(panelName,listId,q){ const list=document.getElementById(listId); if(!list)return; const items=list.querySelectorAll('[class*="-item"],[class*="-card"],[class*="list-item"],article,li'); if(!items.length)return; items.forEach(el=>{ const txt=(el.textContent||'').toLowerCase(); el.style.display=q&&!txt.includes(q.toLowerCase())?'none':''; }); } function _filterConferences(q){ const items=document.querySelectorAll('#panel-conferences .conf-card,.conf-item'); if(!items.length)return; items.forEach(el=>{ const txt=(el.textContent||'').toLowerCase(); el.style.display=q&&!txt.includes(q.toLowerCase())?'none':''; }); } function _filterLife(type,q){ const cards=document.querySelectorAll(`#life-grid-${type} .life-card`); if(!cards.length)return; const items=LIFE_DATA[type]||[]; cards.forEach((card,i)=>{ const it=items[i]; if(!it){return;} const txt=((it.name||'')+(it.tagline||'')+(it.addr||'')).toLowerCase(); card.style.display=q&&!txt.includes(q.toLowerCase())?'none':''; }); } function _filterLeaderboard(q){ const rows=document.querySelectorAll('#panel-leaderboard tbody tr'); if(!rows.length)return; rows.forEach(el=>{ const txt=(el.textContent||'').toLowerCase(); el.style.display=q&&!txt.includes(q.toLowerCase())?'none':''; }); } function _filterAchievements(q){ const cards=document.querySelectorAll('#panel-achievements .ach-card,.ach-item'); if(!cards.length)return; cards.forEach(el=>{ const txt=(el.textContent||'').toLowerCase(); el.style.display=q&&!txt.includes(q.toLowerCase())?'none':''; }); } let srchT; document.getElementById('srch').addEventListener('input',e=>{ const _sq=e.target.value; searchQ=_sq; clearTimeout(srchT); srchT=setTimeout(()=>{ if(_sq.trim()){achStats.searchCount++;_saveStats();achCheck();} if(_searchCtx==='cameras'||!SEARCH_CTX[_searchCtx]?.fn){ applyFilters(); }else{ SEARCH_CTX[_searchCtx].fn(_sq.trim()); } },280); }); /* ── FAVOURITES ── */ let _favSyncTimer=null; function _syncFavsToFirestore(){ if(!_authCurrentUser)return; const db=_lbInitFirebase();if(!db)return; db.collection(USERS_COL).doc(_authCurrentUser.uid) .update({favCamIds:[...favs],updatedAt:firebase.firestore.FieldValue.serverTimestamp()}) .catch(()=>{}); // Mirror to LB doc (publicly readable) so other users can see favorites in profile view if(_lbVisitorId){ db.collection(LB_COLLECTION).doc(_lbVisitorId) .set({favCamIds:[...favs]},{merge:true}) .catch(()=>{}); } } function toggleFav(id,evt){ evt.stopPropagation(); // Operate on active tab's cameraIds; keep favs as union across all tabs const tab=_tabsActiveTab(); if(tab){ const idx=tab.cameraIds.indexOf(id); const nowOn=idx<0; if(nowOn){tab.cameraIds.push(id);favs.add(id);} else{ tab.cameraIds.splice(idx,1); // Only remove from union if not in any other tab if(!_favTabs.some(t=>t.cameraIds.includes(id)))favs.delete(id); } _tabsSave();_tabsRenderUI(); } else { if(favs.has(id))favs.delete(id);else favs.add(id); } try{localStorage.setItem(FAV_KEY,JSON.stringify([...favs]));}catch(e){} const card=document.querySelector(`[data-cid="${id}"]`); if(card){ const s=card.querySelector('.fav-star'); if(s){const on=(tab?.cameraIds||[]).includes(id);s.classList.toggle('on',on);s.innerHTML=on?STAR_F:STAR_E;s.setAttribute('aria-label',(on?'Remove from':'Add to')+' favorites');} } updateFavCount(); if(boro==='favorites')applyFilters(); _saveStats();achCheck(); // Show guest warning when they favorite anything without an account if(!_authCurrentUser&&favs.size>0){ const warn=document.getElementById('fav-guest-warn'); if(warn)warn.classList.add('show'); } // Debounced sync to Firestore so others can see your favorites in your profile if(_authCurrentUser){clearTimeout(_favSyncTimer);_favSyncTimer=setTimeout(_syncFavsToFirestore,1500);} } function toggleModalFav(){ if(!mCam)return; const id=mCam.id; const tab=_tabsActiveTab(); if(tab){ const idx=tab.cameraIds.indexOf(id); const nowOn=idx<0; if(nowOn){tab.cameraIds.push(id);favs.add(id);} else{ tab.cameraIds.splice(idx,1); if(!_favTabs.some(t=>t.cameraIds.includes(id)))favs.delete(id); } _tabsSave();_tabsRenderUI(); } else { if(favs.has(id))favs.delete(id);else favs.add(id); } try{localStorage.setItem(FAV_KEY,JSON.stringify([...favs]));}catch(e){} const card=document.querySelector(`[data-cid="${id}"]`); if(card){ const s=card.querySelector('.fav-star'); if(s){const on=(tab?.cameraIds||[]).includes(id);s.classList.toggle('on',on);s.innerHTML=on?STAR_F:STAR_E;s.setAttribute('aria-label',(on?'Remove from':'Add to')+' favorites');} } _updateModalFavBtn(); updateFavCount(); if(boro==='favorites')applyFilters(); _saveStats();achCheck(); if(!_authCurrentUser&&favs.size>0){const warn=document.getElementById('fav-guest-warn');if(warn)warn.classList.add('show');} } function _updateModalFavBtn(){ const btn=document.getElementById('modal-fav-btn'); if(!btn||!mCam)return; const on=(_tabsActiveTab()?.cameraIds||[]).includes(mCam.id); btn.classList.toggle('active',on); btn.innerHTML=on?STAR_F:STAR_E; btn.title=on?'Remove from favorites':'Add to favorites'; } function updateFavCount(){ const el=document.getElementById('fav-cnt'); if(el)el.textContent=(!_userPrefs.hideFavCount&&favs.size>0)?`(${favs.size})`:''; } /* ── VIEW MODE ── */ function setView(mode){ viewMode=mode; document.getElementById('cam-grid').classList.toggle('seamless',mode==='seamless'); document.querySelectorAll('[data-view]').forEach(b=>b.classList.toggle('active',b.dataset.view===mode)); // Labels toggle always visible; sync class and button state for both modes const lt=document.getElementById('labels-tog'); document.getElementById('cam-grid').classList.toggle('labels-always',labelsAlways); if(lt)lt.classList.toggle('active',labelsAlways); if(camFsOn)_syncFsPanel(); achStats.viewSwitches++;_saveStats();achCheck(); try{localStorage.setItem(CITY_ID+'-view-mode',mode);}catch(e){} } function setCols(n){ root().style.setProperty('--cols',n); document.getElementById('col-val').textContent=n; try{localStorage.setItem('nyc-cols',n);}catch(e){} if(parseInt(n)===1&&!achStats.colsSetTo2){achStats.colsSetTo2=true;_saveStats();achCheck();} } /* ── THEME ── */ function setTheme(t){ if(t==='hacker')_playAudio('Hacker Mode.wav'); root().setAttribute('data-theme',t); document.querySelectorAll('.theme-btn').forEach(b=>b.classList.toggle('active',b.dataset.t===t)); const _ph=SEARCH_CTX[_searchCtx]?.placeholder||SEARCH_CTX.cameras.placeholder; document.getElementById('srch').placeholder= (t==='hacker'&&_searchCtx==='cameras')?'> QUERY: search node name or route..._':_ph; // Swap american flag image for hacker theme _flagInitCanvas(t==='hacker'?'american-flag-hacker.png':'american-flag.svg'); // Update only the badge text in-place — no need to rebuild cards (CSS handles the rest) document.querySelectorAll('.boro-badge[data-a]').forEach(el=>{ el.textContent=t==='hacker'?boroCodes(el.dataset.a):el.dataset.a; }); updateStats();updateMapMarkers();updateMapTiles();updateMapMask(); if(camFsOn)_syncFsPanel(); // Rebuild theme-adaptive map overlays if(crimeOn&&_crimeInfo)_buildCrimeLegend(_crimeInfo); } /* ── BROWSER FULLSCREEN ── */ function fs(){ const el=root(); const nativeReq=el.requestFullscreen||el.webkitRequestFullscreen; const inNative=document.fullscreenElement||document.webkitFullscreenElement; if(inNative){ (document.exitFullscreen||document.webkitExitFullscreen).call(document); }else if(el.classList.contains('web-fs')){ el.classList.remove('web-fs'); }else if(nativeReq){ // Native fullscreen (desktop, Android); fall back to CSS if the browser rejects it. const p=nativeReq.call(el); if(p&&p.catch)p.catch(()=>el.classList.add('web-fs')); }else{ // No native Fullscreen API on elements (iOS Safari) — fill the viewport via CSS. el.classList.add('web-fs'); } } /* ── CAMERA FULLSCREEN (fills webpage, not browser) ── */ let camFsOn=false; let _fsIdleTimer=null; function _fsPanelShow(){ document.getElementById('cam-fs-panel').classList.remove('fsp-hidden'); clearTimeout(_fsIdleTimer); _fsIdleTimer=setTimeout(_fsPanelHide,3000); } function _fsPanelHide(){ // Don't hide while user is dragging a favorite tile, adjusting a slider, or dragging the panel itself if(_favDragging)return; if(typeof _imgAdjusting!=='undefined'&&_imgAdjusting)return; const panel=document.getElementById('cam-fs-panel'); if(panel&&panel.classList.contains('fsp-dragging'))return; // Don't hide while the music popover is open (user is actively changing stations) const _mp=document.getElementById('fsp-music-popover'); if(_mp&&_mp.classList.contains('open'))return; if(panel)panel.classList.add('fsp-hidden'); // Also close the FSP music popover and its keyboard handler const mp=document.getElementById('fsp-music-popover'); if(mp)mp.classList.remove('open'); if(_fspMusicKeyHandler){document.removeEventListener('keydown',_fspMusicKeyHandler);_fspMusicKeyHandler=null;} } function _syncFsPanel(){ const isSeamless=viewMode==='seamless'; // View buttons document.getElementById('fsp-grid').classList.toggle('fsp-active',!isSeamless); document.getElementById('fsp-seamless').classList.toggle('fsp-active',isSeamless); // Labels — always visible in both Grid and Seamless const labelsDiv=document.getElementById('fsp-labels-div'); const labelsBtn=document.getElementById('fsp-labels'); if(labelsDiv)labelsDiv.style.display=''; if(labelsBtn){labelsBtn.style.display='';labelsBtn.classList.toggle('fsp-active',labelsAlways);} // Theme buttons — always visible document.querySelectorAll('.fsp-theme-btn').forEach(b=>{ b.classList.toggle('fsp-active',b.dataset.fspt===root().dataset.theme); }); // Sound document.getElementById('fsp-sound').classList.toggle('fsp-active',soundPlaying); // Music document.getElementById('fsp-music').classList.toggle('fsp-active',musicPlaying); // Image controls const fspImgBtn=document.getElementById('fsp-imgctrl'); if(fspImgBtn)fspImgBtn.classList.toggle('fsp-active',_imgCtrlOpen); // Music genre buttons document.querySelectorAll('.fsp-genre-btn').forEach(b=>b.classList.toggle('fsp-active',b.dataset.gid===musicGenre)); // Col value const colVal=getComputedStyle(root()).getPropertyValue('--cols').trim()||'6'; document.getElementById('fsp-col-val').textContent=colVal; // Borough + favorites buttons document.querySelectorAll('.fsp-boro').forEach(b=>b.classList.toggle('fsp-active',b.dataset.fspb===boro)); // Neighborhood select const mainSel=document.getElementById('nb-sel'); const fspSel=document.getElementById('fsp-nbhd'); if(mainSel&&fspSel){fspSel.innerHTML=mainSel.innerHTML;fspSel.value=nbhd;} } function toggleFullscreen(){ camFsOn=!camFsOn; root().classList.toggle('cam-fs',camFsOn); const btn=document.getElementById('fs-btn'); if(camFsOn){ btn.innerHTML=``; _syncFsPanel(); _fsPanelShow(); // Mouse move listener document.getElementById('cam-grid-outer').addEventListener('mousemove',_fsPanelShow); // Escape to exit document.addEventListener('keydown',_fsEscHandler); // Scroll to top of grid document.getElementById('cam-grid-outer').scrollTop=0; achStats.fsUsed=true;_saveStats();achCheck(); _syncModalFsBtn(); }else{ btn.innerHTML=``; document.getElementById('cam-grid-outer').removeEventListener('mousemove',_fsPanelShow); document.removeEventListener('keydown',_fsEscHandler); clearTimeout(_fsIdleTimer); _syncModalFsBtn(); } } function _syncModalFsBtn(){ const btn=document.getElementById('modal-fs-btn'); if(!btn)return; const modal=document.getElementById('modal'); const isFs=document.fullscreenElement===modal||document.webkitFullscreenElement===modal||modal.classList.contains('modal-fs'); if(isFs){ btn.title='Exit fullscreen'; btn.innerHTML=''; }else{ btn.title='Fullscreen'; btn.innerHTML=''; } } function modalToggleFs(){ const modal=document.getElementById('modal'); if(!modal)return; const nativeReq=modal.requestFullscreen||modal.webkitRequestFullscreen; const inNative=document.fullscreenElement===modal||document.webkitFullscreenElement===modal; if(inNative){ const fn=document.exitFullscreen||document.webkitExitFullscreen; if(fn)fn.call(document).then(_syncModalFsBtn).catch(()=>{}); }else if(modal.classList.contains('modal-fs')){ modal.classList.remove('modal-fs');_syncModalFsBtn(); }else if(nativeReq){ nativeReq.call(modal).then(_syncModalFsBtn).catch(()=>{modal.classList.add('modal-fs');_syncModalFsBtn();}); }else{ // iOS Safari: no native element fullscreen — use the CSS fallback so the button still works. modal.classList.add('modal-fs');_syncModalFsBtn(); } } function _fsEscHandler(e){ if(e.key!=='Escape'||!camFsOn)return; // Don't exit cam array FS if the single-camera modal is open (ESC should close modal instead) if(document.getElementById('modal').style.display!=='none')return; // Exit camera array FS immediately (fires before browser processes ESC for its own FS exit) toggleFullscreen(); } // If browser fullscreen exits by other means (e.g. F11 toggle, browser button) while cam // array FS is active, exit cam array FS to keep UI consistent. No re-enter: browser FS is // the user's business. (function(){ function _onFSChange(){ const inBrowserFS=!!(document.fullscreenElement||document.webkitFullscreenElement); if(!inBrowserFS&&camFsOn)toggleFullscreen(); _syncModalFsBtn(); } document.addEventListener('fullscreenchange',_onFSChange); document.addEventListener('webkitfullscreenchange',_onFSChange); })(); function fsAdjCols(delta){ const current=parseInt(getComputedStyle(root()).getPropertyValue('--cols').trim()||'6'); const next=Math.max(1,Math.min(10,current+delta)); setCols(next); document.getElementById('fsp-col-val').textContent=next; if(document.getElementById('col-slider'))document.getElementById('col-slider').value=next; if(document.getElementById('col-val'))document.getElementById('col-val').textContent=next; if(next===1&&!achStats.colsSetTo2){achStats.colsSetTo2=true;_saveStats();achCheck();} } /* ── HACKER MESSAGES ── */ const H1=['ROUTING THROUGH PROXY CHAIN','STREAM ENCRYPTION BYPASSED','SURVEILLANCE GRID MAPPED','ALL NODES CAPTURED','DECRYPTING LOCATION METADATA','TRAFFIC CONTROL INFILTRATED','SIGNAL INTERCEPT NOMINAL','UPLINK: TOR EXIT NODE ACTIVE','ANONYMITY LAYER CONFIRMED']; const H2=['BREACHING MAINFRAME...','ROUTING THROUGH 7 PROXIES...','GHOST PROTOCOL ACTIVATED','ALL YOUR BASE ARE BELONG TO US','MR. ROBOT WOULD BE PROUD','BLACK ICE: DEACTIVATED','COVERING TRACKS... WIPING LOGS','SIGNAL BOUNCE: NYC→MOSCOW→TOKYO','CAMERAS NOW UNDER LOCAL CONTROL','ENCRYPTION CRACKED IN 0.003ms']; let h1i=0,h2i=0; function initHacker(){ document.getElementById('hkr1').textContent=H1[0]; document.getElementById('hkr2').textContent=H2[0]; setInterval(()=>{h1i=(h1i+1)%H1.length;document.getElementById('hkr1').textContent=H1[h1i];},3900); setInterval(()=>{h2i=(h2i+1)%H2.length;document.getElementById('hkr2').textContent=H2[h2i];document.getElementById('hkr-node').textContent=Math.floor(Math.random()*253+1);},2600); } function root(){return document.getElementById('R');} /* ── AUDIO HELPERS ── */ // Web Audio API preloader — decodes all SFX to raw PCM buffers on first user gesture. // BufferSourceNode.start(0) plays from decoded PCM with zero re-decode latency. // Falls back to

LONDON LIVE COMMAND CENTER

About the NYC Live Command Center

${s.title}

${r.title}