[{"_1":2,"_176":-5,"_177":-5},"loaderData",{"_3":4,"_92":93},"root",{"_5":6,"_35":36,"_65":66},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20,"_34":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","5c349ef9e7d7333839a0634dd567aae2d49623a6","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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","API_URL","https://api.val.town","clerkState",{"_67":68},"__internal_clerk_state",{"_69":70,"_71":46,"_72":73,"_74":73,"_75":20,"_76":73,"_77":73,"_78":73,"_79":73,"_80":81,"_90":20,"_91":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_82":20,"_19":20,"_83":73,"_84":85,"_86":73,"_87":46,"_88":20,"_89":73},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_94":95,"_96":97,"_98":99,"_100":101,"_151":152,"_173":174,"_175":-5},"handle","EFIOM","name","Creative","path","frontend/components/Map.tsx","project",{"_102":103,"_96":97,"_104":105,"_106":-5,"_107":20,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":114,"_115":116,"_117":-5,"_118":119,"_120":32,"_14":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":131,"_134":135,"_137":138,"_150":20},"id","377ad82e-2805-11f0-ba3b-569c3dd06744","createdAt",["D",1746266331920],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","a82da4c0-2800-11f0-89c9-c7d0e2d9e1ea","pinnedFileId","504bd344-2805-11f0-96ec-569c3dd06744","pinPreview",true,"pinMigrated","screenshotVersion",15,"likeCount","7991faaa-7feb-41bf-8275-4fe9ce3df2fc","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_94":95,"_132":133},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ3YTBRRzVwNVBpaW5sTmhDTTVJdHZKYkM2cCJ9","org",{"_94":95,"_136":133,"_12":112},"avatar","branch",{"_139":140,"_96":44,"_102":141,"_142":103,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":97,"_149":95},"version",16,"377b2a4a-2805-11f0-ba3b-569c3dd06744","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_102":153,"_96":154,"_155":156,"_157":158,"_159":141,"_160":161,"_162":116,"_104":163,"_139":32,"_164":165,"_166":167,"_168":20,"_169":-5,"_98":170},"809f77fc-3f8f-11f0-8f94-76b3cceeab13","Map.tsx","fileId","809f78ce-3f8f-11f0-8f94-76b3cceeab13","parentId","17c9b051-a976-449e-8986-3786b2d4ecbc","branchId","branchVersion",13,"latest",["D",1748854601922],"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { Faculty } from \"../../shared/types.ts\";\n\ninterface MapProps {\n faculties: Faculty[];\n selectedFaculty: Faculty | null;\n onFacultySelect: (faculty: Faculty) => void;\n userLocation: [number, number] | null;\n}\n\n// Declare Leaflet types\ndeclare global {\n const L: any;\n}\n\nexport function Map({ faculties, selectedFaculty, onFacultySelect, userLocation }: MapProps) {\n const mapRef = useRef(null);\n const markersRef = useRef>(new Map());\n const userMarkerRef = useRef(null);\n\n useEffect(() => {\n if (!mapRef.current) {\n initializeMap();\n }\n }, []);\n\n useEffect(() => {\n if (mapRef.current && faculties.length > 0) {\n updateMarkers();\n }\n }, [faculties]);\n\n useEffect(() => {\n if (mapRef.current && selectedFaculty) {\n highlightSelectedFaculty();\n }\n }, [selectedFaculty]);\n\n useEffect(() => {\n if (mapRef.current && userLocation) {\n updateUserLocation();\n }\n }, [userLocation]);\n\n const initializeMap = () => {\n const mapContainer = document.getElementById('map');\n if (!mapContainer) return;\n\n // Get initial data from window or use defaults\n const initialData = window.__INITIAL_DATA__;\n const center = initialData?.campusCenter || [11.9716, 8.4956];\n const bounds = initialData?.campusBounds;\n\n // Initialize the map\n mapRef.current = L.map('map').setView(center, 16);\n\n // Add tile layer (OpenStreetMap)\n L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMap contributors',\n maxZoom: 19\n }).addTo(mapRef.current);\n\n // Set map bounds if available\n if (bounds) {\n const leafletBounds = L.latLngBounds(\n [bounds.south, bounds.west],\n [bounds.north, bounds.east]\n );\n mapRef.current.setMaxBounds(leafletBounds);\n }\n\n // Add campus landmarks if available\n if (initialData?.landmarks) {\n addLandmarks(initialData.landmarks);\n }\n };\n\n const addLandmarks = (landmarks: any[]) => {\n landmarks.forEach(landmark => {\n const icon = getLandmarkIcon(landmark.type);\n \n L.marker(landmark.coordinates, {\n icon: L.divIcon({\n className: 'landmark-marker',\n html: icon,\n iconSize: [24, 24],\n iconAnchor: [12, 12]\n })\n })\n .bindPopup(`\n \n `)\n .addTo(mapRef.current);\n });\n };\n\n const getLandmarkIcon = (type: string): string => {\n const icons: { [key: string]: string } = {\n 'entrance': '🚪',\n 'administration': '🏛️',\n 'library': '📚',\n 'student-services': '👥',\n 'health': '🏥',\n 'recreation': '⚽',\n 'religious': '🕌',\n 'dining': '🍽️'\n };\n return icons[type] || '📍';\n };\n\n const getLandmarkDescription = (type: string): string => {\n const descriptions: { [key: string]: string } = {\n 'entrance': 'Campus entrance',\n 'administration': 'Administrative offices',\n 'library': 'Library facility',\n 'student-services': 'Student services',\n 'health': 'Health center',\n 'recreation': 'Sports and recreation',\n 'religious': 'Religious facility',\n 'dining': 'Dining facility'\n };\n return descriptions[type] || 'Campus facility';\n };\n\n const updateMarkers = () => {\n // Clear existing faculty markers\n markersRef.current.forEach(marker => {\n mapRef.current.removeLayer(marker);\n });\n markersRef.current.clear();\n\n // Add faculty markers\n faculties.forEach(faculty => {\n const marker = L.marker(faculty.coordinates, {\n icon: L.divIcon({\n className: `faculty-marker ${selectedFaculty?.id === faculty.id ? 'selected-marker' : ''}`,\n html: getFacultyIcon(faculty),\n iconSize: [30, 30],\n iconAnchor: [15, 15]\n })\n });\n\n marker.bindPopup(createPopupContent(faculty));\n \n marker.on('click', () => {\n onFacultySelect(faculty);\n });\n\n marker.addTo(mapRef.current);\n markersRef.current.set(faculty.id, marker);\n });\n };\n\n const getFacultyIcon = (faculty: Faculty): string => {\n const icons: { [key: string]: string } = {\n 'engineering': '⚙️',\n 'medicine': '🏥',\n 'science': '🔬',\n 'arts': '🎭',\n 'education': '📚',\n 'law': '⚖️',\n 'agriculture': '🌾',\n 'management': '💼',\n 'computing': '💻',\n 'earth': '🌍'\n };\n return icons[faculty.id] || '🏛️';\n };\n\n const createPopupContent = (faculty: Faculty): string => {\n return `\n \n `;\n };\n\n const highlightSelectedFaculty = () => {\n if (!selectedFaculty) return;\n\n // Update marker styles\n markersRef.current.forEach((marker, facultyId) => {\n const markerElement = marker.getElement();\n if (markerElement) {\n if (facultyId === selectedFaculty.id) {\n markerElement.classList.add('selected-marker');\n } else {\n markerElement.classList.remove('selected-marker');\n }\n }\n });\n\n // Pan to selected faculty\n const selectedMarker = markersRef.current.get(selectedFaculty.id);\n if (selectedMarker) {\n mapRef.current.setView(selectedFaculty.coordinates, 17, { animate: true });\n selectedMarker.openPopup();\n }\n };\n\n const updateUserLocation = () => {\n if (!userLocation) return;\n\n // Remove existing user marker\n if (userMarkerRef.current) {\n mapRef.current.removeLayer(userMarkerRef.current);\n }\n\n // Add new user marker\n userMarkerRef.current = L.marker(userLocation, {\n icon: L.divIcon({\n className: 'user-location-marker',\n html: '📍',\n iconSize: [24, 24],\n iconAnchor: [12, 12]\n })\n })\n .bindPopup('Your Location')\n .addTo(mapRef.current);\n\n // Pan to user location\n mapRef.current.setView(userLocation, 17, { animate: true });\n };\n\n // Set up global functions for popup interactions\n useEffect(() => {\n (window as any).selectFaculty = (facultyId: string) => {\n const faculty = faculties.find(f => f.id === facultyId);\n if (faculty) {\n onFacultySelect(faculty);\n }\n };\n\n return () => {\n delete (window as any).selectFaculty;\n };\n }, [faculties, onFacultySelect]);\n\n return null; // This component manages the map through direct DOM manipulation\n}","deleted","label",[171,172,154],"frontend","components","permalink","https://www.val.town/x/EFIOM/Creative/code/frontend/components/Map.tsx","extension","actionData","errors"]