Mapbox GL Geocoder App

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_213":214,"_215":216},"routes/_app.x.$handle.$name",{"_124":123,"_36":75,"_132":114,"_31":40,"_13":14,"_133":-5,"_11":134,"_135":136,"_137":138,"_139":140,"_141":142,"_25":-5,"_143":-5,"_144":-5,"_145":29,"_146":147,"_148":87,"_149":-5,"_150":-5,"_151":152},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_73":74,"_36":75,"_41":76,"_77":-5,"_78":29,"_79":80,"_81":80,"_82":-5,"_83":-5,"_18":84,"_85":68,"_86":87,"_88":87,"_89":-5,"_90":91,"_92":93,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":99,"_100":99,"_101":102,"_103":102,"_104":102,"_105":99,"_106":99,"_107":108,"_109":110,"_111":112,"_113":29},"version",1,"changes",[19,20,21,22,23,24],"aiChatInfo","userId",{"_25":66,"_27":-7,"_28":29,"_30":29,"_31":67,"_33":67},{"_25":62,"_27":-7,"_28":29,"_30":29,"_31":63,"_33":63},{"_25":56,"_27":-7,"_28":29,"_30":29,"_31":57,"_33":57},{"_25":51,"_27":-7,"_28":29,"_30":29,"_31":52,"_33":52},{"_25":46,"_27":-7,"_28":29,"_30":29,"_31":47,"_33":47},{"_25":26,"_27":-7,"_28":29,"_30":29,"_31":32,"_33":32},"file",{"_34":35,"_36":32,"_37":38,"_39":40,"_41":42,"_43":14,"_44":45,"_28":29},"previous","deleted",false,"deletedHere","path","main.ts","latestPath","fileId","019a044c-67af-73e8-94d4-e54d21a427d8","name","fileType","script","content","","createdAt",["D",1761008707424],"branchVersion","branchId","fc11a66e-ae19-11f0-b9b4-0224a6c84d84",{"_34":48,"_36":47,"_37":25,"_39":49,"_41":50,"_43":14,"_44":45,"_28":29},"README.md","019a044c-67af-73e8-94d4-e238c9e820fb","# 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",["D",1761008707424],{"_34":53,"_36":52,"_37":54,"_39":-5,"_41":55,"_43":14,"_44":45,"_28":29},"frontend","019a044c-67af-73e8-94d4-dd98c2b12813","directory",["D",1761008707424],{"_34":58,"_36":59,"_37":25,"_39":60,"_41":61,"_43":14,"_44":45,"_28":29},"frontend/index.html","019a044c-67af-73e8-94d4-d89d48f880a8","index.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 \n \n",["D",1761008707424],{"_34":64,"_36":63,"_37":54,"_39":-5,"_41":65,"_43":14,"_44":45,"_28":29},"backend","019a044c-67af-73e8-94d4-d4dc701f26d5",["D",1761008707424],{"_34":68,"_36":69,"_37":70,"_39":71,"_41":72,"_43":14,"_44":45,"_28":29},"backend/index.ts","019a044c-67af-73e8-94d4-d2572f774b62","index.ts","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",["D",1761008707424],"id","fc0d1dce-ae19-11f0-b9b4-0224a6c84d84","untitled-8445",["D",1761008707424],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","0199f655-9cb6-72ee-b8ea-fe01858d16cb","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","0199f655-9cb6-72ee-b8eb-02a872f619b8","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_124":123,"_131":127},"org",{"_124":123,"_125":-5,"_126":127,"_18":84,"_128":129,"_130":29},"branch",{"_13":14,"_36":114,"_73":45,"_115":74,"_116":-5,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":75,"_122":123},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","rogutkuba","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zNEVNbEdvNlp0Y0RxdFFQQmtOMk9wdGlmVEgifQ","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_73":74,"_36":75,"_41":209,"_77":-5,"_78":29,"_79":80,"_81":80,"_82":-5,"_83":-5,"_18":84,"_85":68,"_86":87,"_88":87,"_89":-5,"_90":91,"_92":93,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":99,"_100":99,"_101":102,"_103":102,"_104":102,"_105":99,"_106":99,"_107":210,"_109":211,"_111":212,"_113":29},"tree",[182,184,186,187],"files",[182,183,184,185,186,187],"counts",{"_172":91,"_173":14,"_174":91,"_175":176,"_177":178},"contents",[153,154,155,156],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_73":169,"_36":63,"_34":64,"_158":-5,"_44":45,"_43":14,"_159":87,"_41":170,"_13":91,"_37":54,"_39":-5,"_28":29,"_161":-5,"_31":171},{"_73":166,"_36":52,"_34":53,"_158":-5,"_44":45,"_43":14,"_159":87,"_41":167,"_13":91,"_37":54,"_39":-5,"_28":29,"_161":-5,"_31":168},{"_73":163,"_36":47,"_34":48,"_158":-5,"_44":45,"_43":14,"_159":87,"_41":164,"_13":91,"_37":25,"_39":49,"_28":29,"_161":-5,"_31":165},{"_73":157,"_36":32,"_34":35,"_158":-5,"_44":45,"_43":14,"_159":87,"_41":160,"_13":91,"_37":38,"_39":40,"_28":29,"_161":-5,"_31":162},"fc157d16-ae19-11f0-b9b4-0224a6c84d84","parentId","latest",["D",1761008707424],"label",[32],"fc157bae-ae19-11f0-b9b4-0224a6c84d84",["D",1761008707424],[47],"fc157a32-ae19-11f0-b9b4-0224a6c84d84",["D",1761008707424],[52],"fc1571d6-ae19-11f0-b9b4-0224a6c84d84",["D",1761008707424],[63],"pulls","branches","forks","envVars",{"_179":14,"_181":14},"connections",{"_179":91,"_180":91},"count","unfilledCount","emptyCount",{"_73":169,"_36":63,"_34":64,"_158":-5,"_44":45,"_43":14,"_159":87,"_41":206,"_13":91,"_37":54,"_39":-5,"_28":29,"_161":-5,"_189":207,"_31":208},{"_73":202,"_36":69,"_34":68,"_158":64,"_44":45,"_43":14,"_159":87,"_41":203,"_13":91,"_37":70,"_39":71,"_28":29,"_161":-5,"_189":204,"_31":205},{"_73":166,"_36":52,"_34":53,"_158":-5,"_44":45,"_43":14,"_159":87,"_41":199,"_13":91,"_37":54,"_39":-5,"_28":29,"_161":-5,"_189":200,"_31":201},{"_73":195,"_36":59,"_34":58,"_158":53,"_44":45,"_43":14,"_159":87,"_41":196,"_13":91,"_37":25,"_39":60,"_28":29,"_161":-5,"_189":197,"_31":198},{"_73":163,"_36":47,"_34":48,"_158":-5,"_44":45,"_43":14,"_159":87,"_41":192,"_13":91,"_37":25,"_39":49,"_28":29,"_161":-5,"_189":193,"_31":194},{"_73":157,"_36":32,"_34":35,"_158":-5,"_44":45,"_43":14,"_159":87,"_41":188,"_13":91,"_37":38,"_39":40,"_28":29,"_161":-5,"_189":190,"_31":191},["D",1761008707424],"children",[],[32],["D",1761008707424],[],[47],"fc157514-ae19-11f0-b9b4-0224a6c84d84",["D",1761008707424],[],[52,59],["D",1761008707424],[185],[52],"fc15570a-ae19-11f0-b9b4-0224a6c84d84",["D",1761008707424],[],[63,69],["D",1761008707424],[183],[63],["D",1761008707424],{"_124":123,"_131":127},{"_124":123,"_125":-5,"_126":127,"_18":84,"_128":129,"_130":29},{"_13":14,"_36":114,"_73":45,"_115":74,"_116":-5,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":75,"_122":123},"ctx",{"_107":-5,"_150":246,"_247":248,"_249":250,"_251":29,"_252":29,"_253":29,"_254":87,"_255":-5,"_256":-7,"_257":-7,"_258":91,"_259":29,"_260":29,"_261":-5,"_262":29,"_263":29,"_264":29,"_265":-5},"ENV",{"_217":218,"_219":220,"_221":114,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245},"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"]

Diff · v1