;\n}\n\nfunction App() {\n const [input, setInput] = useState(\"\");\n const [state, dispatch] = useReducer(mapReducer, {\n geojson: null,\n error: null,\n });\n const [loading, setLoading] = useState(false);\n const [copyStatus, setCopyStatus] = useState(\"Copy JSON\");\n\n // Suggestion prompts\n const suggestions = [\n \"Tallest mountains on Earth\",\n \"Filming locations from The Lord of the Rings\",\n \"California state boundaries\",\n \"Major rivers in South America\",\n \"Ancient wonders of the world\",\n \"Famous UFO sightings in the U.S.\",\n \"Best surf spots in Hawaii\",\n \"Abandoned ghost towns in the USA\",\n \"Largest national parks in the world\",\n ];\n\n async function handleSubmit(query) {\n // If query is an event, prevent default and get query from input\n if (typeof query === \"object\" && query.preventDefault) {\n query.preventDefault();\n query = input;\n }\n\n if (!query.trim()) return;\n\n setInput(query);\n setLoading(true);\n dispatch({ type: \"SET_ERROR\", error: null });\n\n try {\n const response = await fetch(\"/generate_geojson\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ query }),\n });\n\n const data = await response.json();\n\n if (response.ok) {\n dispatch({ type: \"SET_GEOJSON\", geojson: data });\n } else {\n dispatch({\n type: \"SET_ERROR\",\n error: data.error || \"Failed to generate location\",\n });\n }\n } catch (error) {\n dispatch({\n type: \"SET_ERROR\",\n error: \"Network error. Please try again.\",\n });\n } finally {\n setLoading(false);\n }\n }\n\n const copyGeoJSON = () => {\n if (state.geojson) {\n navigator.clipboard.writeText(JSON.stringify(state.geojson, null, 2))\n .then(() => {\n setCopyStatus(\"Copied!\");\n setTimeout(() => setCopyStatus(\"Copy JSON\"), 2000);\n });\n }\n };\n\n return (\n \n

\n 🗺️ Type Anything, ChatGPT will map it 🤖\n

\n \n setInput(e.target.value)}\n placeholder=\"Enter a place or description...\"\n style={{\n flexGrow: 1,\n padding: \"10px\",\n marginRight: \"10px\",\n backgroundColor: \"#1e1e1e\",\n color: \"#e0e0e0\",\n border: \"1px solid #333\",\n borderRadius: \"4px\",\n }}\n />\n \n {loading ? \"Mapping...\" : \"Show on Map\"}\n \n \n\n {/* Suggestion Dropdown */}\n \n {\n const selectedValue = e.target.value;\n if (selectedValue) {\n handleSubmit(selectedValue);\n }\n }}\n style={{\n width: \"100%\",\n padding: \"10px\",\n fontSize: \"16px\",\n borderRadius: \"5px\",\n backgroundColor: \"#1e1e1e\",\n color: \"#e0e0e0\",\n border: \"1px solid #333\",\n }}\n >\n \n {suggestions.map((suggestion, index) => (\n \n {suggestion}\n \n ))}\n \n \n\n {state.error && (\n

\n {state.error}\n

\n )}\n\n {state.geojson && }\n\n \n {state.geojson && (\n {\n const filename = input.toLowerCase().replace(/\\s+/g, \"_\") +\n \".geojson\";\n downloadGeoJSON(state.geojson, filename);\n }}\n style={{\n padding: \"10px\",\n backgroundColor: \"#0288d1\",\n color: \"white\",\n border: \"none\",\n cursor: \"pointer\",\n borderRadius: \"4px\",\n }}\n >\n Download GeoJSON\n \n )}\n \n\n {state.geojson && (\n

\n \n

GeoJSON Details

\n \n {copyStatus}\n \n

\n \n {JSON.stringify(state.geojson, null, 2)}\n \n \n )}\n\n

\n \n View Source\n \n

\n \n );\n}\n\nfunction client() {\n // Add custom CSS for dark mode Leaflet popup\n const style = document.createElement(\"style\");\n style.textContent = `\n .dark-popup .leaflet-popup-content-wrapper {\n background-color: #1e1e1e;\n color: #e0e0e0;\n border-radius: 5px;\n }\n .dark-popup .leaflet-popup-tip {\n background-color: #1e1e1e;\n }\n `;\n document.head.appendChild(style);\n\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\") {\n try {\n const { query } = await request.json();\n\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n const response = await openai.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content: `You are a GeoJSON generation assistant. \n For any user query, only return a VALID GeoJSON Feature or FeatureCollection with these strict rules:\n 1. Use only Point, LineString, or Polygon geometry\n 2. Include coordinates in [longitude, latitude] order\n 3. Provide meaningful properties with a 'name' key, and any other properties you think are important\n 4. if you want to communicate with the user, do it in a \"user message\" attribute associated with any or all of the features.\n 5. If uncertain about exact location, choose a representative point\n 6. Prioritize accuracy and simplicity`,\n },\n {\n role: \"user\",\n content: `Generate a precise GeoJSON representation for: ${query}. \n Be as specific and accurate as possible. If you cannot confidently generate coordinates, return an error.`,\n },\n ],\n model: \"gpt-5-nano\",\n response_format: { type: \"json_object\" },\n max_tokens: 2000,\n });\n\n const geojsonString = response.choices[0].message.content;\n const geojson = JSON.parse(geojsonString);\n\n if (!validateGeoJSON(geojson)) {\n return new Response(\n JSON.stringify({\n error: \"Generated GeoJSON does not meet validation requirements\",\n }),\n {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n return new Response(JSON.stringify(geojson), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"GeoJSON Generation Error:\", error);\n return new Response(\n JSON.stringify({\n error:\n \"Failed to generate location. Please try a different description.\",\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n return new Response(\n `\n \n \n Type Anything, See It on a Map\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}","deleted","label",[98],"permalink","https://www.val.town/x/robbyrobby/typeanythingmap/code/main.tsx","extension","actionData","errors"]