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":55,"_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","backend","project",{"_34":103,"_13":14,"_47":104,"_105":-5,"_106":55,"_107":108,"_109":108,"_110":-5,"_111":-5,"_112":113,"_114":38,"_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":55},"tree",[62,63,64,65],"file",{"_34":58,"_41":42,"_37":40,"_13":19,"_52":-5,"_50":59,"_17":49,"_39":-5,"_47":60,"_43":44,"_56":-5,"_18":61},"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":51,"_52":53,"_54":55,"_56":-5,"_18":57},"id","fc15570a-ae19-11f0-b9b4-0224a6c84d84","index.ts","fileId","019a044c-67af-73e8-94d4-d2572f774b62","parentId","019a044c-67af-73e8-94d4-d4dc701f26d5","branchId","fc11a66e-ae19-11f0-b9b4-0224a6c84d84","branchVersion",1,"latest",true,"createdAt",["D",1761008707424],0,"fileType","http","content","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","deleted",false,"label",[19,36],"fc1571d6-ae19-11f0-b9b4-0224a6c84d84","directory",["D",1761008707424],[19],{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":96,"_17":49,"_50":59,"_52":-5,"_54":55,"_56":-5,"_72":97,"_18":98},{"_34":82,"_13":83,"_37":84,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":85,"_17":49,"_50":59,"_52":-5,"_54":55,"_56":-5,"_72":86,"_18":87},{"_34":75,"_13":76,"_37":77,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":78,"_17":49,"_50":24,"_52":79,"_54":55,"_56":-5,"_72":80,"_18":81},{"_34":66,"_13":67,"_37":68,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":69,"_17":49,"_50":70,"_52":71,"_54":55,"_56":-5,"_72":73,"_18":74},"fc157d16-ae19-11f0-b9b4-0224a6c84d84","main.ts","019a044c-67af-73e8-94d4-e54d21a427d8",["D",1761008707424],"script","","children",[],[67],"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",[],[76],"fc157a32-ae19-11f0-b9b4-0224a6c84d84","frontend","019a044c-67af-73e8-94d4-dd98c2b12813",["D",1761008707424],[88],[83],{"_34":89,"_13":90,"_37":91,"_39":84,"_41":42,"_43":44,"_45":46,"_47":92,"_17":49,"_50":24,"_52":93,"_54":55,"_56":-5,"_72":94,"_18":95},"fc157514-ae19-11f0-b9b4-0224a6c84d84","index.html","019a044c-67af-73e8-94d4-d89d48f880a8",["D",1761008707424],"\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",[],[83,90],["D",1761008707424],[99],[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":100,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_72":101,"_18":102},["D",1761008707424],[],[19,36],"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":55},"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":55,"_107":108,"_109":108,"_110":-5,"_111":-5,"_112":113,"_114":38,"_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":55},[188,190,192,193],"files",[188,189,190,191,192,193],"counts",{"_179":49,"_180":44,"_181":49,"_32":182,"_183":184},[177],{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":175,"_17":49,"_50":59,"_52":-5,"_54":55,"_56":-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":51,"_52":53,"_54":55,"_56":-5,"_18":178},[19,36],"pulls","branches","forks",{"_185":44,"_187":44},"connections",{"_185":49,"_186":49},"count","unfilledCount","emptyCount",{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":96,"_17":49,"_50":59,"_52":-5,"_54":55,"_56":-5,"_72":204,"_18":205},{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":100,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_72":202,"_18":203},{"_34":82,"_13":83,"_37":84,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":85,"_17":49,"_50":59,"_52":-5,"_54":55,"_56":-5,"_72":200,"_18":201},{"_34":89,"_13":90,"_37":91,"_39":84,"_41":42,"_43":44,"_45":46,"_47":92,"_17":49,"_50":24,"_52":93,"_54":55,"_56":-5,"_72":198,"_18":199},{"_34":75,"_13":76,"_37":77,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":78,"_17":49,"_50":24,"_52":79,"_54":55,"_56":-5,"_72":196,"_18":197},{"_34":66,"_13":67,"_37":68,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":69,"_17":49,"_50":70,"_52":71,"_54":55,"_56":-5,"_72":194,"_18":195},[],[67],[],[76],[],[83,90],[191],[83],[],[19,36],[189],[19],["D",1761008707424],{"_11":12,"_155":151},{"_11":12,"_149":-5,"_150":151,"_112":113,"_152":153,"_154":55},{"_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":55,"_249":55,"_250":55,"_251":46,"_252":-5,"_253":-7,"_254":-7,"_255":49,"_256":55,"_257":55,"_258":-5,"_259":55,"_260":55,"_261":55,"_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","81405aa0531e90dfbb71a5bf473aaa0cf4c8702f","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"]