Real-Time Travel Guide

`,\n iconSize: [20, 20]\n })\n }).addTo(mapInstanceRef.current);\n markersRef.current.push(mainMarker);\n\n // Add recommendation markers\n recommendationsWithDistance.forEach((rec: Recommendation) => {\n const marker = mapInstanceRef.current.L.marker([rec.latitude, rec.longitude])\n .addTo(mapInstanceRef.current)\n .bindPopup(`${rec.description} (${rec.distance} km)`);\n markersRef.current.push(marker);\n });\n }\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Unknown error');\n } finally {\n setLoading(false);\n }\n };\n\n const clearPreviousMarkers = () => {\n markersRef.current.forEach(marker => {\n if (mapInstanceRef.current) {\n mapInstanceRef.current.removeLayer(marker);\n }\n });\n markersRef.current = [];\n };\n\n // Modify showRecommendationOnMap to scroll and show distance\n const showRecommendationOnMap = (rec: Recommendation) => {\n if (mapInstanceRef.current) {\n // Scroll to map smoothly\n mapRef.current?.scrollIntoView({ behavior: 'smooth' });\n \n // Clear previous markers except the main location\n markersRef.current\n .filter(marker => !marker.options.icon?.options?.className?.includes('main-location-marker'))\n .forEach(marker => mapInstanceRef.current.removeLayer(marker));\n \n // Center and zoom to recommendation\n mapInstanceRef.current.setView([rec.latitude, rec.longitude], 12);\n \n // Add recommendation marker\n const marker = mapInstanceRef.current.L.marker([rec.latitude, rec.longitude])\n .addTo(mapInstanceRef.current)\n .bindPopup(`${rec.description} (${rec.distance} km)`)\n .openPopup();\n markersRef.current.push(marker);\n }\n };\n\n useEffect(() => {\n // Dynamically import Leaflet only in browser\n const initMap = async () => {\n if (typeof window !== 'undefined') {\n const L = await import('https://esm.sh/leaflet@1.9.4/dist/leaflet.js');\n \n if (mapRef.current && !mapInstanceRef.current) {\n mapInstanceRef.current = L.map(mapRef.current, {\n center: [0, 0],\n zoom: 2,\n worldCopyJump: true\n });\n\n mapInstanceRef.current.L = L; // Store L for later use\n \n L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMap contributors'\n }).addTo(mapInstanceRef.current);\n\n // Add click event to map\n mapInstanceRef.current.on('click', (e: any) => {\n const { lat, lng } = e.latlng;\n setLocation({ latitude: lat, longitude: lng });\n fetchRecommendations(lat, lng);\n });\n }\n }\n };\n\n initMap();\n\n // Attempt geolocation\n if (typeof navigator !== 'undefined' && \"geolocation\" in navigator) {\n navigator.geolocation.getCurrentPosition(\n async (position) => {\n const { latitude, longitude } = position.coords;\n setLocation({ latitude, longitude });\n await fetchRecommendations(latitude, longitude);\n },\n (positionError) => {\n setError(`Geolocation error: ${positionError.message}`);\n }\n );\n } else {\n setError(\"Geolocation is not supported by this browser.\");\n }\n }, []);\n\n return (\n

\n {/* Location Search Form */}\n \n\n {/* Map Container */}\n

\n\n {/* Recommendations Section */}\n

\n \n Recommendations\n

\n {loading ? (\n

Fetching local recommendations...

\n ) : recommendations.length === 0 ? (\n

Click on the map or search for a location to get recommendations

\n ) : (\n

\n {recommendations.map((rec, index) => (\n

\n {rec.description}\n

\n {rec.theme && (\n

\n Theme: {rec.theme}\n

\n )}\n {rec.distance && (\n

\n Distance: {rec.distance} km\n

\n )}\n

\n \n

\n ))}\n

\n )}\n

\n );\n}\n\n// Client-side rendering function\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\n// Render client-side code if in browser\nif (typeof document !== \"undefined\") { \n client(); \n}\n\n// Server-side export\nexport default async function server(request: Request): Promise {\n if (request.method === 'POST' && request.url.includes('/recommendations')) {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n \n const { latitude, longitude } = await request.json();\n \n const prompt = `\n Generate 3 unique and exciting travel recommendations \n for a traveler at coordinates: ${latitude}, ${longitude}. \n For each recommendation, provide:\n 1. A concise, engaging description\n 2. A specific nearby latitude/longitude for the recommendation\n 3. A theme or type of attraction\n \n Respond ONLY with a valid JSON array. Do not include any markdown or code block formatting.\n Example:\n [\n {\n \"description\": \"Historic downtown walking tour\",\n \"latitude\": 40.7128,\n \"longitude\": -74.0060,\n \"theme\": \"Urban History\"\n }\n ]\n `;\n \n const completion = await openai.chat.completions.create({\n messages: [{ role: \"user\", content: prompt }],\n model: \"gpt-4o-mini\",\n max_tokens: 500\n });\n \n // Robust JSON parsing\n const rawResponse = completion.choices[0].message.content || '[]';\n let parsedRecommendations: any[] = [];\n\n try {\n // Remove any markdown code block markers\n const cleanJson = rawResponse\n .replace(/^```(json)?/m, '')\n .replace(/```$/m, '')\n .trim();\n \n parsedRecommendations = JSON.parse(cleanJson);\n } catch (parseError) {\n console.error('JSON Parsing Error:', parseError);\n parsedRecommendations = [];\n }\n \n const recommendationsWithImages = await Promise.all(\n parsedRecommendations.map(async (rec: any) => ({\n ...rec,\n imageUrl: `https://maxm-imggenurl.web.val.run/${encodeURIComponent(rec.description)}`\n }))\n );\n \n return new Response(JSON.stringify({\n recommendations: recommendationsWithImages\n }), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n \n return new Response(`\n \n \n Real-Time Travel Guide\n \n \n \n \n \n \n

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