[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_109":110,"_111":112},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","marc1","name","in-good-company","path","frontend/MapPanel.tsx","project",{"_22":48,"_11":12,"_35":49,"_50":-5,"_51":44,"_52":53,"_54":53,"_55":56,"_57":-5,"_58":59,"_60":61,"_62":34,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/marc1/in-good-company/code/frontend/MapPanel.tsx","extension","id","62235c58-6b39-4fc5-a29e-af5eaa77df31","MapPanel.tsx","fileId","81afe8de-afc8-11f1-bc92-1607ee4eb77e","parentId","01a09cf0-34c2-729a-80d0-4b01cdf4ec4a","branchId","486e705c-045f-4c65-82da-a04d3d617ab8","branchVersion",37,"latest",true,"createdAt",["D",1789343186700],"version",22,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from 'https://esm.sh/react@18.2.0';\n\nconst color = c => ({Eat:'#b56845',Drink:'#806383',Explore:'#467660',Escape:'#427783',Shop:'#9b7c45',Essentials:'#777b69'}[c] || '#23483f');\nexport const mapLocations = p => (p.locations?.length ? p.locations : [{lat:p.lat,lng:p.lng}]).filter(l=>Number.isFinite(l.lat)&&Number.isFinite(l.lng));\nconst pointsFor = items => items.flatMap(p=>mapLocations(p).map(l=>({...p,lat:l.lat,lng:l.lng,mapLabel:p.name+(l.label?' · '+l.label:'')})));\nexport function MapPanel({ items, selected, onSelect }) {\n const node = useRef(null), map = useRef(null), layer = useRef(null), current = useRef({items,onSelect});\n const refresh = useRef(null), fit = useRef(null);\n const [error,setError] = useState(false), [ready,setReady] = useState(false);\n current.current = { items, onSelect };\n useEffect(() => {\n const element = node.current;\n let frame = 0, disposed = false;\n const init = () => {\n if(disposed || element.clientHeight < 100 || element.clientWidth < 100) return;\n if(map.current) { map.current.invalidateSize({pan:false}); fit.current?.(); return; }\n const L = window.L;\n if(!L) { setError(true); return; }\n map.current = L.map(element, {zoomControl:false,scrollWheelZoom:false,zoomSnap:0.25}).setView([1.29,103.85],13);\n L.control.zoom({position:'bottomright'}).addTo(map.current);\n map.current.getPane('tilePane').classList.add('grayscale','opacity-70');\n const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom:19,attribution:'© OpenStreetMap'}).addTo(map.current);\n let failures=0;\n tiles.on('tileerror',()=>{if(++failures>=3)setError(true);});\n tiles.on('tileload',()=>{failures=0;setError(false);});\n layer.current = L.layerGroup().addTo(map.current);\n fit.current = () => {\n const points=pointsFor(current.current.items);\n if(points.length) map.current.fitBounds(L.latLngBounds(points.map(p=>[p.lat,p.lng])),{padding:[40,64],maxZoom:15,animate:false});\n else map.current.setView([1.29,103.85],13);\n };\n refresh.current = (shouldFit = true) => {\n map.current.closePopup();\n layer.current.clearLayers();\n const groups=[];\n for(const p of pointsFor(current.current.items)) {const pixel=map.current.latLngToLayerPoint([p.lat,p.lng]);const group=groups.find(g=>pixel.distanceTo(g.pixel)<44);if(group)group.items.push(p);else groups.push({pixel,items:[p]});}\n for(const {items:group} of groups) {\n const p=group[0];\n const icon=L.divIcon({className:'guide-pin',iconSize:[36,44],iconAnchor:[18,40],html:``});\n const marker=L.marker([p.lat,p.lng],{icon,title:p.mapLabel,alt:p.mapLabel,keyboard:true}).addTo(layer.current);\n const label=group.map(p=>p.mapLabel).join(' · ');\n marker.getElement()?.setAttribute('aria-label',label);\n const tooltip=document.createElement('span');tooltip.textContent=group.length>1?group.length+' nearby places':label;\n marker.bindTooltip(tooltip,{direction:'top',offset:[0,-35]});\n if(group.length===1)marker.on('click',()=>current.current.onSelect(p));\n else {const panel=document.createElement('div');const title=document.createElement('p');title.textContent='Choose a nearby place';panel.appendChild(title);for(const item of group){const button=document.createElement('button');button.textContent=item.mapLabel;button.className='block rounded-lg p-2 text-left text-sm underline';button.addEventListener('click',()=>current.current.onSelect(item));panel.appendChild(button);}marker.bindPopup(panel,{maxHeight:280,maxWidth:280});}\n }\n if(shouldFit)fit.current();\n };\n map.current.on('zoomend',()=>refresh.current?.(false));\n refresh.current();setReady(true);\n };\n // Wait for real layout: Leaflet otherwise writes position:relative onto an\n // initially unstyled absolute element, collapsing its height permanently.\n const observer=new ResizeObserver(()=>{cancelAnimationFrame(frame);frame=requestAnimationFrame(init);});\n observer.observe(element);frame=requestAnimationFrame(init);\n return ()=>{disposed=true;cancelAnimationFrame(frame);observer.disconnect();map.current?.remove();map.current=null;layer.current=null;refresh.current=null;fit.current=null;};\n },[]);\n useEffect(()=>{refresh.current?.();},[JSON.stringify(items.map(p=>[p.id,p.name,p.category,mapLocations(p)]))]);\n return

Your Singapore, mapped

Numbered pins let you choose between nearby places

\n \n {(!ready||error)&&

{error?'Map imagery couldn’t load. You can still browse places and use their “Find on Maps” links.':'Opening your map…'}

}\n {ready&&!error&&!items.some(p=>mapLocations(p).length)&&

These recommendations don’t have a specific map location. Browse the list and follow their website or Maps links.

}\n

{[...new Set(items.filter(p=>mapLocations(p).length).map(p=>p.category))].map(c=>{c})}

{items.filter(p=>mapLocations(p).length).length} {items.filter(p=>mapLocations(p).length).length===1?'recommendation':'recommendations'} · {pointsFor(items).length} {pointsFor(items).length===1?'location':'locations'} mapped

;\n}\n\r\n","deleted",false,"label",[47,24],"frontend","6ce853b8-4cca-404e-8de5-b08044ea87f6",["D",1789339382932],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Marc’s Singapore guide, from people he trusts","imageUrl","userId","09d0017f-b431-4bfe-98be-204d22547721","pinnedFileId","01a09cf0-34c2-729a-80d0-57a4a755a616","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019eb420-ab29-777b-a6b0-b715c4bf52ff","tursoName","6ce853b84cca404e8de5b08044ea87f6","tursoHostname","6ce853b84cca404e8de5b08044ea87f6-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789519256886],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_108":104},"org",{"_9":10,"_101":102,"_103":104,"_58":59,"_105":106,"_107":44},"branch",{"_37":32,"_11":92,"_22":30,"_93":48,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":12,"_100":10},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Marc","avatar","https://lh3.googleusercontent.com/a/ACg8ocLUz6whQ8rM9wDF8thCZsGM5Haat5v2fLvGtdw-mkhsa2Q22u96KA=s96-c","tier","free","canRestrictVals","profileImageUrl","ctx",{"_85":-5,"_142":143,"_144":145,"_146":147,"_148":44,"_149":44,"_150":44,"_151":34,"_152":-5,"_153":-7,"_154":-7,"_155":66,"_156":44,"_157":44,"_158":-5,"_159":44,"_160":44,"_161":44,"_162":-5},"ENV",{"_113":114,"_115":116,"_117":92,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139,"_140":141},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]