Mapbox GL Geocoder App

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_210":211,"_212":213},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_156":-5,"_20":157,"_22":158,"_159":160,"_161":162,"_26":163,"_24":164,"_165":-5,"_166":-5,"_167":54,"_168":169,"_170":46,"_171":-5,"_172":-5,"_173":174},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","rogutkuba","name","untitled-8445","branchName","main","version","path","frontend","project",{"_34":103,"_13":14,"_47":104,"_105":-5,"_106":54,"_107":108,"_109":108,"_110":-5,"_111":-5,"_112":113,"_114":97,"_115":46,"_116":46,"_117":-5,"_118":49,"_119":120,"_121":-5,"_122":-5,"_123":-5,"_124":-5,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":126,"_134":135,"_136":137,"_138":139,"_140":54},"tree",[61,62,63,64],"file",{"_34":57,"_41":42,"_37":40,"_13":19,"_51":-5,"_50":58,"_17":49,"_39":-5,"_47":59,"_43":44,"_55":-5,"_18":60},"contents",[33],"upstream","pull","ahead","behind","envVars",{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_18":56},"id","fc157514-ae19-11f0-b9b4-0224a6c84d84","index.html","fileId","019a044c-67af-73e8-94d4-d89d48f880a8","parentId","019a044c-67af-73e8-94d4-dd98c2b12813","branchId","fc11a66e-ae19-11f0-b9b4-0224a6c84d84","branchVersion",1,"latest",true,"createdAt",["D",1761008707424],0,"fileType","content","\n\n \n \n \n Mapbox GL Geocoder App\n\n \n \n \n\n \n \n \n\n \n \n \n

\n\n \n \n","deleted",false,"label",[19,36],"fc157a32-ae19-11f0-b9b4-0224a6c84d84","directory",["D",1761008707424],[19],{"_34":88,"_13":89,"_37":90,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":91,"_17":49,"_50":58,"_51":-5,"_53":54,"_55":-5,"_71":92,"_18":93},{"_34":57,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":81,"_17":49,"_50":58,"_51":-5,"_53":54,"_55":-5,"_71":82,"_18":83},{"_34":74,"_13":75,"_37":76,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":77,"_17":49,"_50":24,"_51":78,"_53":54,"_55":-5,"_71":79,"_18":80},{"_34":65,"_13":66,"_37":67,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":68,"_17":49,"_50":69,"_51":70,"_53":54,"_55":-5,"_71":72,"_18":73},"fc157d16-ae19-11f0-b9b4-0224a6c84d84","main.ts","019a044c-67af-73e8-94d4-e54d21a427d8",["D",1761008707424],"script","","children",[],[66],"fc157bae-ae19-11f0-b9b4-0224a6c84d84","README.md","019a044c-67af-73e8-94d4-e238c9e820fb",["D",1761008707424],"# Mapbox GL Geocoder App\n\nA minimal HTTP app featuring a full-screen Mapbox GL map with geocoder functionality.\n\n## Features\n\n- 🗺️ Full-screen interactive map using Mapbox GL JS\n- 🔍 Address search with geocoder that centers the map on results\n- 📍 Marker placement on searched locations\n- 🧭 Navigation controls (zoom, rotate)\n- 📱 Responsive design\n\n## Setup\n\n1. Get a free Mapbox access token from [mapbox.com](https://account.mapbox.com/)\n2. Add it as an environment variable: `MAPBOX_ACCESS_TOKEN`\n3. The app will automatically use the token when available\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Hono HTTP server\n├── frontend/\n│ └── index.html # Full-screen map interface\n└── README.md\n```\n\n## Usage\n\n- Open the app in your browser\n- Use the search box in the top-left to find any address or location\n- The map will automatically center on the selected location with a marker\n- Use the navigation controls in the top-right to zoom and navigate\n\n## Technical Details\n\n- **Backend**: Hono framework serving static files and injecting environment variables\n- **Frontend**: Mapbox GL JS v3.0.1 with Geocoder plugin v5.0.0\n- **Styling**: Full-screen map with minimal UI overlay\n- **Geocoding**: Powered by Mapbox's geocoding API",[],[75],["D",1761008707424],[84],[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":85,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_71":86,"_18":87},["D",1761008707424],[],[19,36],"fc1571d6-ae19-11f0-b9b4-0224a6c84d84","backend","019a044c-67af-73e8-94d4-d4dc701f26d5",["D",1761008707424],[94],[89],{"_34":95,"_13":96,"_37":97,"_39":90,"_41":42,"_43":44,"_45":46,"_47":98,"_17":49,"_50":99,"_51":100,"_53":54,"_55":-5,"_71":101,"_18":102},"fc15570a-ae19-11f0-b9b4-0224a6c84d84","index.ts","019a044c-67af-73e8-94d4-d2572f774b62",["D",1761008707424],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n\n// Serve the main page\napp.get(\"/\", async c => {\n const mapboxToken = Deno.env.get('MAPBOX_ACCESS_TOKEN') || 'YOUR_MAPBOX_TOKEN_HERE';\n \n const html = `\n\n\n \n \n Mapbox GL Geocoder App\n \n \n \n \n \n \n \n \n \n \n\n\n

\n \n

🗺️ Mapbox Setup Required

To use this map, you need to set your Mapbox access token.

1. Get a free token from mapbox.com

2. Add it as an environment variable: MAPBOX_ACCESS_TOKEN

3. Refresh this page

\n\n \n\n`;\n \n return c.html(html);\n});\n\nexport default app.fetch; // This is the entry point for HTTP vals",[],[89,96],"fc0d1dce-ae19-11f0-b9b4-0224a6c84d84",["D",1761008707424],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","0199f655-9cb6-72ee-b8ea-fe01858d16cb","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","0199f655-9cb6-72ee-b8eb-02a872f619b8","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_155":151},"org",{"_11":12,"_149":-5,"_150":151,"_112":113,"_152":153,"_154":54},"branch",{"_17":44,"_13":16,"_34":42,"_141":103,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":14,"_148":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zNEVNbEdvNlp0Y0RxdFFQQmtOMk9wdGlmVEgifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":103,"_13":14,"_47":206,"_105":-5,"_106":54,"_107":108,"_109":108,"_110":-5,"_111":-5,"_112":113,"_114":97,"_115":46,"_116":46,"_117":-5,"_118":49,"_119":120,"_121":-5,"_122":-5,"_123":-5,"_124":-5,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":126,"_134":207,"_136":208,"_138":209,"_140":54},[188,190,192,193],"files",[188,189,190,191,192,193],"counts",{"_179":49,"_180":44,"_181":49,"_32":182,"_183":184},[177],{"_34":57,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":175,"_17":49,"_50":58,"_51":-5,"_53":54,"_55":-5,"_18":176},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1761008707424],[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_18":178},[19,36],"pulls","branches","forks",{"_185":44,"_187":44},"connections",{"_185":49,"_186":49},"count","unfilledCount","emptyCount",{"_34":88,"_13":89,"_37":90,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":91,"_17":49,"_50":58,"_51":-5,"_53":54,"_55":-5,"_71":204,"_18":205},{"_34":95,"_13":96,"_37":97,"_39":90,"_41":42,"_43":44,"_45":46,"_47":98,"_17":49,"_50":99,"_51":100,"_53":54,"_55":-5,"_71":202,"_18":203},{"_34":57,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":81,"_17":49,"_50":58,"_51":-5,"_53":54,"_55":-5,"_71":200,"_18":201},{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":85,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_71":198,"_18":199},{"_34":74,"_13":75,"_37":76,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":77,"_17":49,"_50":24,"_51":78,"_53":54,"_55":-5,"_71":196,"_18":197},{"_34":65,"_13":66,"_37":67,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":68,"_17":49,"_50":69,"_51":70,"_53":54,"_55":-5,"_71":194,"_18":195},[],[66],[],[75],[],[19,36],[191],[19],[],[89,96],[189],[89],["D",1761008707424],{"_11":12,"_155":151},{"_11":12,"_149":-5,"_150":151,"_112":113,"_152":153,"_154":54},{"_17":44,"_13":16,"_34":42,"_141":103,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":14,"_148":12},"ctx",{"_134":-5,"_172":243,"_244":245,"_246":247,"_248":54,"_249":54,"_250":54,"_251":46,"_252":-5,"_253":-7,"_254":-7,"_255":49,"_256":54,"_257":54,"_258":-5,"_259":54,"_260":54,"_261":54,"_262":-5},"ENV",{"_214":215,"_216":217,"_218":16,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","a3e067d4463eea85f6334f8e583e8516ae58c4f6","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",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]