Vision Network Camp 3\uae30 \ub3d9\uc120 \uc9c0\ub3c4<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.9.4\/leaflet.css\" \/>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.9.4\/leaflet.min.js\"><\/script>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: #333;\n min-height: 100vh;\n }\n\n .header {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n padding: 1rem 2rem;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n position: relative;\n z-index: 1000;\n display: flex;\n align-items: center;\n gap: 2rem;\n flex-wrap: wrap;\n justify-content: flex-start;\n }\n\n .title-section {\n display: flex;\n align-items: baseline;\n gap: 1rem;\n line-height: 1.2;\n order: 1;\n }\n\n .title {\n font-size: 1.4rem;\n font-weight: 700;\n color: #2c3e50;\n margin: 0;\n white-space: nowrap;\n line-height: 1.2;\n }\n\n .subtitle {\n font-size: 0.9rem;\n color: #7f8c8d;\n margin: 0;\n white-space: nowrap;\n line-height: 1.2;\n }\n\n .controls {\n display: flex;\n gap: 0.8rem;\n flex-wrap: wrap;\n order: 3;\n }\n\n .control-btn {\n padding: 0.4rem 0.8rem;\n border: none;\n border-radius: 20px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 0.85rem;\n white-space: nowrap;\n }\n\n .control-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n }\n\n .control-btn.active {\n background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);\n }\n\n .map-container {\n position: relative;\n width: 100%;\n height: calc(100vh - 120px);\n background: white;\n margin: 0;\n }\n\n #map {\n width: 100%;\n height: 100%;\n }\n\n .custom-marker {\n background: #ff6b6b;\n border: 3px solid white;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-size: 12px;\n color: white;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n }\n\n .custom-marker.start {\n background: #4caf50;\n }\n\n .custom-marker.end {\n background: #f44336;\n }\n\n .custom-popup {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n }\n\n .popup-date {\n font-weight: bold;\n color: #ff6b6b;\n margin-bottom: 0.5rem;\n font-size: 1rem;\n }\n\n .popup-location {\n font-weight: 600;\n margin-bottom: 0.5rem;\n color: #2c3e50;\n }\n\n .popup-activities {\n font-size: 0.9rem;\n color: #555;\n line-height: 1.4;\n }\n\n .header-legend {\n display: flex;\n align-items: center;\n gap: 1rem;\n font-size: 0.8rem;\n order: 2;\n }\n\n .header-legend-item {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n white-space: nowrap;\n }\n\n .header-legend-marker {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 2px solid white;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 8px;\n font-weight: bold;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n }\n\n .header-legend-marker.start {\n background: #4caf50;\n }\n\n .header-legend-marker.route {\n background: #ff6b6b;\n }\n\n .header-legend-marker.end {\n background: #f44336;\n }\n\n .header-legend-line {\n width: 16px;\n height: 3px;\n background: #ff6b6b;\n border-radius: 2px;\n }\n\n .mobile-legend {\n display: none;\n justify-content: center;\n gap: 1rem;\n font-size: 0.75rem;\n margin: 0.8rem 0;\n }\n\n .mobile-legend-item {\n display: flex;\n align-items: center;\n gap: 0.3rem;\n }\n\n .mobile-legend-marker {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n border: 2px solid white;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 7px;\n font-weight: bold;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n }\n\n .mobile-legend-marker.start {\n background: #4caf50;\n }\n\n .mobile-legend-marker.route {\n background: #ff6b6b;\n }\n\n .mobile-legend-marker.end {\n background: #f44336;\n }\n\n .mobile-legend-line {\n width: 14px;\n height: 2px;\n background: #ff6b6b;\n border-radius: 2px;\n }\n\n .legend {\n position: absolute;\n bottom: 2rem;\n left: 2rem;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n padding: 1rem;\n border-radius: 12px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n z-index: 1000;\n display: none;\n }\n\n .legend-title {\n font-weight: 600;\n margin-bottom: 0.8rem;\n color: #2c3e50;\n }\n\n .legend-item {\n display: flex;\n align-items: center;\n gap: 0.8rem;\n margin-bottom: 0.5rem;\n font-size: 0.9rem;\n }\n\n .legend-marker {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n border: 2px solid white;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 10px;\n font-weight: bold;\n }\n\n .legend-marker.start {\n background: #4caf50;\n }\n\n .legend-marker.route {\n background: #ff6b6b;\n }\n\n .legend-marker.end {\n background: #f44336;\n }\n\n .legend-line {\n width: 20px;\n height: 3px;\n background: #ff6b6b;\n border-radius: 2px;\n }\n\n @media (max-width: 768px) {\n .header {\n padding: 1rem;\n flex-direction: column;\n align-items: center;\n gap: 6px; \/* \uc57d 2mm *\/\n }\n\n .title-section {\n display: contents; \/* flexbox \ud574\uc81c\ud558\uc5ec \uc790\uc2dd \uc694\uc18c\ub4e4\uc774 \uc9c1\uc811 \ubc30\uce58\ub428 *\/\n }\n\n .title {\n font-size: 1.3rem;\n line-height: 1.1;\n text-align: center;\n width: 100%;\n order: 1;\n }\n\n .subtitle {\n font-size: 0.8rem;\n line-height: 1.1;\n text-align: center;\n width: 100%;\n order: 2;\n }\n\n .header-legend {\n display: none;\n }\n\n .mobile-legend {\n display: flex;\n margin: 6px 0; \/* \uc57d 2mm *\/\n order: 3;\n }\n\n .controls {\n gap: 0.5rem;\n justify-content: center;\n margin: 6px 0; \/* \uc57d 2mm *\/\n order: 4;\n }\n\n .control-btn {\n padding: 0.4rem 0.8rem;\n font-size: 0.85rem;\n }\n\n .legend {\n display: none !important;\n }\n\n .map-container {\n height: calc(100vh - 160px);\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"header\">\n <div class=\"title-section\">\n <h1 class=\"title\">Vision Network Camp 3\uae30<\/h1>\n <p class=\"subtitle\">22\uc77c\uac04\uc758 \ubbf8\uad6d \uc11c\ubd80 \uc5ec\ud589 \ub3d9\uc120<\/p>\n <\/div>\n <div class=\"header-legend\">\n <div class=\"header-legend-item\">\n <div class=\"header-legend-marker start\">1<\/div>\n <span>\ucd9c\ubc1c<\/span>\n <\/div>\n <div class=\"header-legend-item\">\n <div class=\"header-legend-marker route\">N<\/div>\n <span>\ubc29\ubb38\uc9c0<\/span>\n <\/div>\n <div class=\"header-legend-item\">\n <div class=\"header-legend-line\"><\/div>\n <span>\uacbd\ub85c<\/span>\n <\/div>\n <div class=\"header-legend-item\">\n <div class=\"header-legend-marker end\">22<\/div>\n <span>\ubcf5\uadc0<\/span>\n <\/div>\n <\/div>\n <div class=\"controls\">\n <button class=\"control-btn active\" onclick=\"showRoute('all')\">\uc804\uccb4 \uacbd\ub85c<\/button>\n <button class=\"control-btn\" onclick=\"showRoute('week1')\">1\uc8fc\ucc28<\/button>\n <button class=\"control-btn\" onclick=\"showRoute('week2')\">2\uc8fc\ucc28<\/button>\n <button class=\"control-btn\" onclick=\"showRoute('week3')\">3\uc8fc\ucc28<\/button>\n <\/div>\n <div class=\"mobile-legend\">\n <div class=\"mobile-legend-item\">\n <div class=\"mobile-legend-marker start\">1<\/div>\n <span>\ucd9c\ubc1c<\/span>\n <\/div>\n <div class=\"mobile-legend-item\">\n <div class=\"mobile-legend-marker route\">N<\/div>\n <span>\ubc29\ubb38\uc9c0<\/span>\n <\/div>\n <div class=\"mobile-legend-item\">\n <div class=\"mobile-legend-line\"><\/div>\n <span>\uacbd\ub85c<\/span>\n <\/div>\n <div class=\"mobile-legend-item\">\n <div class=\"mobile-legend-marker end\">22<\/div>\n <span>\ubcf5\uadc0<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"map-container\">\n <div id=\"map\"><\/div>\n <\/div>\n\n <div class=\"legend\">\n <div class=\"legend-title\">\ubc94\ub840<\/div>\n <div class=\"legend-item\">\n <div class=\"legend-marker start\">1<\/div>\n <span>\ucd9c\ubc1c\uc9c0 (SFO \uacf5\ud56d)<\/span>\n <\/div>\n <div class=\"legend-item\">\n <div class=\"legend-marker route\">N<\/div>\n <span>\ubc29\ubb38 \uc9c0\uc5ed<\/span>\n <\/div>\n <div class=\"legend-item\">\n <div class=\"legend-line\"><\/div>\n <span>\uc774\ub3d9 \uacbd\ub85c<\/span>\n <\/div>\n <div class=\"legend-item\">\n <div class=\"legend-marker end\">22<\/div>\n <span>\ubcf5\uadc0\uc9c0 (SFO \uacf5\ud56d)<\/span>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Vision Network Camp 3\uae30 \uc5ec\ud589 \uc77c\uc815 \ub370\uc774\ud130\n const tripData = [\n { day: 1, date: \"7\uc6d4 23\uc77c\", location: \"\uc0cc\ud504\ub780\uc2dc\uc2a4\ucf54\", city: \"San Francisco\", lat: 37.7749, lng: -122.4194, activities: [\"\uacf5\ud56d \ud53d\uc5c5\", \"\uac1c\ud68c\uc608\ubc30 \ubc0f \uc624\ub9ac\uc5d4\ud14c\uc774\uc158\", \"\ube44\uc804 \uc250\uc5b4\ub9c1\", \"Christmas Tree Point\"] },\n { day: 2, date: \"7\uc6d4 24\uc77c\", location: \"McWay Falls \u2192 LA\", city: \"McWay Falls\", lat: 36.1567, lng: -121.6719, activities: [\"McWay Falls \ubc29\ubb38\", \"LA\ub85c \uc7a5\uac70\ub9ac \uc774\ub3d9\"] },\n { day: 3, date: \"7\uc6d4 25\uc77c\", location: \"LA\", city: \"Los Angeles\", lat: 34.0522, lng: -118.2437, activities: [\"\ud558\ub098\ub2d8\uc758 \ub098\ub77c \ud2b9\uac15 1, 2\", \"The Getty \ubc15\ubb3c\uad00\", \"The Getty Villa\", \"\uba85\uc0ac\uc640\uc758 \ub9cc\ub0a8: \uc5d0\ub9ad \ud0dc\uad11\"] },\n { day: 4, date: \"7\uc6d4 26\uc77c\", location: \"LA\", city: \"Los Angeles\", lat: 34.0622, lng: -118.2537, activities: [\"\ud558\ub098\ub2d8\uc758 \ub098\ub77c \ud2b9\uac15 3\", \"CTS \ud22c\uc5b4 \ubc0f \uba85\uc0ac \ub9cc\ub0a8\", \"Greystone Mansion\", \"Lake Hollywood Park\", \"Walk of Fame\", \"The Griffith Observatory\"] },\n { day: 5, date: \"7\uc6d4 27\uc77c\", location: \"LA\", city: \"Los Angeles\", lat: 34.0422, lng: -118.2637, activities: [\"\uc0c8\ub4e4\ubc31 \uad50\ud68c \uc8fc\uc77c\uc608\ubc30\", \"Azusa Street Revival 1906\", \"Bradbury Building\", \"Grand Central Market\", \"The Last Bookstore\", \"UCLA \ud22c\uc5b4\", \"\uba58\ud1a0 \uc904\ub9ac\ud0b4 \ub300\ud45c\ub2d8\uacfc\uc758 \ub9cc\ub0a8\", \"\ube44\uc804 \uc250\uc5b4\ub9c1\"] },\n { day: 6, date: \"7\uc6d4 28\uc77c\", location: \"\uc0cc\ub514\uc5d0\uace0 \u2192 \uc870\uc288\uc544 \ud2b8\ub9ac\", city: \"San Diego\", lat: 32.7157, lng: -117.1611, activities: [\"San Diego Tour (La Jolla Cove)\", \"Kate Sessions Memorial Park Vision Sharing\", \"Cabrillo National Monument\", \"Delta Aquariids Meteor Shower \uad00\uce21\"] },\n { day: 7, date: \"7\uc6d4 29\uc77c\", location: \"Joshua Tree\", city: \"Joshua Tree\", lat: 33.8734, lng: -115.9010, activities: [\"\uc7a5\uac70\ub9ac \uc774\ub3d9\", \"Route 66 Museum\", \"Hopi Point \ub178\uc744 \uac10\uc0c1\"] },\n { day: 8, date: \"7\uc6d4 30\uc77c\", location: \"\uadf8\ub79c\ub4dc \uce90\ub144 \u2192 \ube0c\ub77c\uc774\uc2a4 \uce90\ub144\", city: \"Grand Canyon\", lat: 36.1069, lng: -112.1129, activities: [\"Grand Canyon Tour\", \"Horseshoe Bend\", \"Bryce Canyon\"] },\n { day: 9, date: \"7\uc6d4 31\uc77c\", location: \"\ub77c\uc2a4\ubca0\uac00\uc2a4\", city: \"Las Vegas\", lat: 36.1699, lng: -115.1398, activities: [\"Zion Canyon Tour\", \"\ub77c\uc2a4\ubca0\uac00\uc2a4 \uad00\uad11\"] },\n { day: 10, date: \"8\uc6d4 1\uc77c\", location: \"\ud0b9\uc2a4 \uce90\ub144\", city: \"Kings Canyon\", lat: 36.7378, lng: -118.5551, activities: [\"General Grant Tree\", \"Fallen Monarch\", \"Fresno \uc774\ub3d9\"] },\n { day: 11, date: \"8\uc6d4 2\uc77c\", location: \"\uc694\uc138\ubbf8\ud2f0 \u2192 Fresno\", city: \"Yosemite\", lat: 37.8651, lng: -119.5383, activities: [\"Yosemite National Park\", \"\uc0cc\ud504\ub780\uc2dc\uc2a4\ucf54\ub85c \uc774\ub3d9\"] },\n { day: 12, date: \"8\uc6d4 3\uc77c\", location: \"Walnut Creek\", city: \"Walnut Creek\", lat: 37.9063, lng: -122.0653, activities: [\"\uc9c0\ud604 \ud569\ub958\", \"\ube44\uc804 \uc250\uc5b4\ub9c1 \ubc0f \uc608\ubc30\", \"Painted Ladies\", \"\uae30\ub77c\ub378\ub9ac\", \"\ub86c\ubc14\ub4dc \uc2a4\ud2b8\ub9bf\", \"\ud53c\uc154\ub9e8\uc2a4 \uc6cc\ud504\", \"Pier 39 \ubc14\ub2e4\uc0ac\uc790\", \"\ud06c\ub9ac\uc2dc \ud544\ub4dc\"] },\n { day: 13, date: \"8\uc6d4 4\uc77c\", location: \"Walnut Creek\", city: \"Walnut Creek\", lat: 37.9163, lng: -122.0753, activities: [\"\uc0b0\ud638\uc138 \ud22c\uc5b4\", \"\ub2e4\ub2c8\uc5d8 \uce58\uacfc\uc758\uc0ac \uba85\uc0ac \ub9cc\ub0a8\", \"Communications Hill\"] },\n { day: 14, date: \"8\uc6d4 5\uc77c\", location: \"Walnut Creek\", city: \"Walnut Creek\", lat: 37.8963, lng: -122.0553, activities: [\"\uc0cc\ud504\ub780\uc2dc\uc2a4\ucf54 \uc790\uc720\uc2dc\uac04\"] },\n { day: 15, date: \"8\uc6d4 6\uc77c\", location: \"Walnut Creek\", city: \"Walnut Creek\", lat: 37.9263, lng: -122.0853, activities: [\"Wake Up \uc900\ube44\"] },\n { day: 16, date: \"8\uc6d4 7\uc77c\", location: \"Walnut Creek\", city: \"Walnut Creek\", lat: 37.8863, lng: -122.0453, activities: [\"Wake Up \uc900\ube44\"] },\n { day: 17, date: \"8\uc6d4 8\uc77c\", location: \"Walnut Creek\", city: \"Walnut Creek\", lat: 37.9363, lng: -122.0953, activities: [\"Wake Up \uc9c4\ud589\"] },\n { day: 18, date: \"8\uc6d4 9\uc77c\", location: \"Walnut Creek\", city: \"Walnut Creek\", lat: 37.8763, lng: -122.0353, activities: [\"Wake Up \uc9c4\ud589\"] },\n { day: 19, date: \"8\uc6d4 10\uc77c\", location: \"Walnut Creek \u2192 Yuba City\", city: \"Yuba City\", lat: 39.1404, lng: -121.6169, activities: [\"Wake Up \ub9c8\ubb34\ub9ac\", \"Final Camp \uc7a5\uc18c\ub85c \uc774\ub3d9\"] },\n { day: 20, date: \"8\uc6d4 11\uc77c\", location: \"Arnold\", city: \"Arnold\", lat: 38.2488, lng: -120.3516, activities: [\"Final Camp\"] },\n { day: 21, date: \"8\uc6d4 12\uc77c\", location: \"Arnold\", city: \"Arnold\", lat: 38.2588, lng: -120.3616, activities: [\"Final Camp\"] },\n { day: 22, date: \"8\uc6d4 13\uc77c\", location: \"Arnold \u2192 \uc0cc\ud504\ub780\uc2dc\uc2a4\ucf54 SFO\", city: \"San Francisco\", lat: 37.7849, lng: -122.4094, activities: [\"\ub9c8\uc9c0\ub9c9 \ud504\ub85c\uadf8\ub7a8\", \"\uc0cc\ud504\ub780\uc2dc\uc2a4\ucf54\ub85c \ubcf5\uadc0\"] }\n ];\n\n \/\/ \uc9c0\ub3c4 \ubc0f \ub808\uc774\uc5b4 \ubcc0\uc218\n let map;\n let markers = [];\n let routeLines = [];\n let currentFilter = 'all';\n let adjustedTripData = [];\n\n \/\/ \ub3d9\uc77c \uc9c0\uc5ed \ub9c8\ucee4\ub4e4\uc758 \uc704\uce58 \uc870\uc815 \ud568\uc218\n function adjustOverlappingLocations(data) {\n const adjustedData = [...data];\n const offsetDistance = 0.01; \/\/ \uc57d 1km \uc815\ub3c4\uc758 \uc624\ud504\uc14b\n \n \/\/ \ub3d9\uc77c\ud55c \uc704\uce58\ub97c \ucc3e\uc544\uc11c \uc870\uc815\n for (let i = 0; i < adjustedData.length; i++) {\n const currentLocation = adjustedData[i];\n let overlappingCount = 0;\n \n \/\/ \ud604\uc7ac \uc704\uce58\uc640 \ub3d9\uc77c\ud55c \uc704\uce58\ub4e4\uc744 \ucc3e\uae30\n for (let j = 0; j < i; j++) {\n const prevLocation = adjustedData[j];\n const distance = Math.sqrt(\n Math.pow(currentLocation.lat - prevLocation.lat, 2) + \n Math.pow(currentLocation.lng - prevLocation.lng, 2)\n );\n \n \/\/ \uac70\ub9ac \ucc28\uc774\uac00 \ub9e4\uc6b0 \uc791\uc73c\uba74 \ub3d9\uc77c\ud55c \uc704\uce58\ub85c \ud310\ub2e8\n if (distance < 0.005) {\n overlappingCount++;\n }\n }\n \n \/\/ \uacb9\uce58\ub294 \uc704\uce58\uac00 \uc788\uc73c\uba74 \uc870\uc815\n if (overlappingCount > 0) {\n const angle = (overlappingCount * 60) * (Math.PI \/ 180); \/\/ 60\ub3c4\uc529 \ud68c\uc804\n currentLocation.adjustedLat = currentLocation.lat + (offsetDistance * Math.cos(angle));\n currentLocation.adjustedLng = currentLocation.lng + (offsetDistance * Math.sin(angle));\n } else {\n currentLocation.adjustedLat = currentLocation.lat;\n currentLocation.adjustedLng = currentLocation.lng;\n }\n }\n \n return adjustedData;\n }\n\n \/\/ \uc9c0\ub3c4 \ucd08\uae30\ud654\n function initMap() {\n \/\/ Leaflet \uc9c0\ub3c4 \uc0dd\uc131 (\ubbf8\uad6d \uc11c\ubd80 \uc911\uc2ec)\n map = L.map('map').setView([36.5, -119.0], 6);\n\n \/\/ OpenStreetMap \ud0c0\uc77c \ub808\uc774\uc5b4 \ucd94\uac00\n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n attribution: '\u00a9 OpenStreetMap contributors'\n }).addTo(map);\n\n \/\/ \uc704\uce58 \uc870\uc815\ub41c \ub370\uc774\ud130 \uc0dd\uc131\n adjustedTripData = adjustOverlappingLocations(tripData);\n\n \/\/ \ub9c8\ucee4\uc640 \uacbd\ub85c \uadf8\ub9ac\uae30\n drawLocations();\n drawRoutes();\n }\n\n \/\/ \ucee4\uc2a4\ud140 \ub9c8\ucee4 \uc0dd\uc131\n function createCustomMarker(day, isStart = false, isEnd = false) {\n let className = 'custom-marker';\n if (isStart) className += ' start';\n if (isEnd) className += ' end';\n\n return L.divIcon({\n className: '',\n html: `<div class=\"${className}\">${day}<\/div>`,\n iconSize: [30, 30],\n iconAnchor: [15, 15]\n });\n }\n\n \/\/ \ubc29\ubb38 \uc9c0\uc5ed \ub9c8\ucee4 \ud45c\uc2dc\n function drawLocations() {\n adjustedTripData.forEach((location, index) => {\n const isStart = location.day === 1;\n const isEnd = location.day === 22;\n \n const marker = L.marker([location.adjustedLat, location.adjustedLng], {\n icon: createCustomMarker(location.day, isStart, isEnd)\n }).addTo(map);\n\n \/\/ \ud31d\uc5c5 \ub0b4\uc6a9 \uc0dd\uc131\n const popupContent = `\n <div class=\"custom-popup\">\n <div class=\"popup-date\">${location.day}\uc77c\ucc28 - ${location.date}<\/div>\n <div class=\"popup-location\">${location.location}<\/div>\n <div class=\"popup-activities\">${location.activities.join('<br>\u2022 ')}<\/div>\n <\/div>\n `;\n\n marker.bindPopup(popupContent);\n markers.push(marker);\n });\n }\n\n \/\/ \uacbd\ub85c \uc120 \uadf8\ub9ac\uae30\n function drawRoutes() {\n const coordinates = adjustedTripData.map(location => [location.adjustedLat, location.adjustedLng]);\n \n const routeLine = L.polyline(coordinates, {\n color: '#ff6b6b',\n weight: 4,\n opacity: 0.8,\n smoothFactor: 1\n }).addTo(map);\n\n routeLines.push(routeLine);\n }\n\n \/\/ \uacbd\ub85c \ud544\ud130\ub9c1\n function showRoute(filter) {\n \/\/ \ubc84\ud2bc \uc0c1\ud0dc \ubcc0\uacbd\n document.querySelectorAll('.control-btn').forEach(btn => btn.classList.remove('active'));\n event.target.classList.add('active');\n\n currentFilter = filter;\n \n let visibleData = [];\n switch(filter) {\n case 'week1':\n visibleData = adjustedTripData.slice(0, 7);\n break;\n case 'week2':\n visibleData = adjustedTripData.slice(7, 14);\n break;\n case 'week3':\n visibleData = adjustedTripData.slice(14, 22);\n break;\n default:\n visibleData = adjustedTripData;\n }\n\n \/\/ \uae30\uc874 \ub9c8\ucee4\uc640 \uacbd\ub85c \uc81c\uac70\n markers.forEach(marker => map.removeLayer(marker));\n routeLines.forEach(line => map.removeLayer(line));\n markers = [];\n routeLines = [];\n\n \/\/ \uc0c8\ub85c\uc6b4 \ub9c8\ucee4\uc640 \uacbd\ub85c \uadf8\ub9ac\uae30\n drawFilteredLocations(visibleData);\n drawFilteredRoutes(visibleData);\n\n \/\/ \uc9c0\ub3c4 \ubdf0 \uc870\uc815\n if (visibleData.length > 0) {\n const bounds = L.latLngBounds(visibleData.map(d => [d.adjustedLat, d.adjustedLng]));\n map.fitBounds(bounds, { padding: [20, 20] });\n }\n }\n\n \/\/ \ud544\ud130\ub41c \uc704\uce58 \uadf8\ub9ac\uae30\n function drawFilteredLocations(data) {\n data.forEach((location, index) => {\n const isStart = location.day === 1;\n const isEnd = location.day === 22;\n \n const marker = L.marker([location.adjustedLat, location.adjustedLng], {\n icon: createCustomMarker(location.day, isStart, isEnd)\n }).addTo(map);\n\n const popupContent = `\n <div class=\"custom-popup\">\n <div class=\"popup-date\">${location.day}\uc77c\ucc28 - ${location.date}<\/div>\n <div class=\"popup-location\">${location.location}<\/div>\n <div class=\"popup-activities\">\u2022 ${location.activities.join('<br>\u2022 ')}<\/div>\n <\/div>\n `;\n\n marker.bindPopup(popupContent);\n markers.push(marker);\n });\n }\n\n \/\/ \ud544\ud130\ub41c \uacbd\ub85c \uadf8\ub9ac\uae30\n function drawFilteredRoutes(data) {\n if (data.length > 1) {\n const coordinates = data.map(location => [location.adjustedLat, location.adjustedLng]);\n \n const routeLine = L.polyline(coordinates, {\n color: '#ff6b6b',\n weight: 4,\n opacity: 0.8,\n smoothFactor: 1\n }).addTo(map);\n\n routeLines.push(routeLine);\n }\n }\n\n \/\/ \ud398\uc774\uc9c0 \ub85c\ub4dc \uc2dc \uc9c0\ub3c4 \ucd08\uae30\ud654\n window.addEventListener('load', function() {\n setTimeout(initMap, 100);\n });\n\n \/\/ \ud654\uba74 \ud06c\uae30 \ubcc0\uacbd \uc2dc \uc9c0\ub3c4 \ud06c\uae30 \uc870\uc815\n window.addEventListener('resize', function() {\n if (map) {\n setTimeout(() => {\n map.invalidateSize();\n }, 100);\n }\n });\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Vision Network Camp 3\uae30 \ub3d9\uc120 \uc9c0\ub3c4 Vision Network Camp 3\uae30 22\uc77c\uac04\uc758 \ubbf8\uad6d \uc11c\ubd80 \uc5ec\ud589 \ub3d9\uc120 1 \ucd9c\ubc1c N \ubc29\ubb38\uc9c0 \uacbd\ub85c 22 \ubcf5\uadc0 \uc804\uccb4 \uacbd\ub85c 1\uc8fc\ucc28 2\uc8fc\ucc28 3\uc8fc\ucc28 1 \ucd9c\ubc1c N…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-2179","page","type-page","status-publish","hentry"],"ticketed":false,"_links":{"self":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/comments?post=2179"}],"version-history":[{"count":0,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2179\/revisions"}],"wp:attachment":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/media?parent=2179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2179,"date":"2025-08-21T18:03:28","date_gmt":"2025-08-21T18:03:28","guid":{"rendered":"https:\/\/visionnetworkcamp.org\/?page_id=2179"},"modified":"2025-08-21T18:28:09","modified_gmt":"2025-08-21T18:28:09","slug":"vnc-3%ea%b8%b0-map","status":"publish","type":"page","link":"https:\/\/visionnetworkcamp.org\/ko\/vnc-3%ea%b8%b0-map\/","title":{"rendered":"VNC 3\uae30 Map"},"content":{"rendered":"\n\n\n \n \n Vision Network Camp 3\uae30 \ub3d9\uc120 \uc9c0\ub3c4<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.9.4\/leaflet.css\" \/>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.9.4\/leaflet.min.js\"><\/script>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: #333;\n min-height: 100vh;\n }\n\n .header {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n padding: 1rem 2rem;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n position: relative;\n z-index: 1000;\n display: flex;\n align-items: center;\n gap: 2rem;\n flex-wrap: wrap;\n justify-content: flex-start;\n }\n\n .title-section {\n display: flex;\n align-items: baseline;\n gap: 1rem;\n line-height: 1.2;\n order: 1;\n }\n\n .title {\n font-size: 1.4rem;\n font-weight: 700;\n color: #2c3e50;\n margin: 0;\n white-space: nowrap;\n line-height: 1.2;\n }\n\n .subtitle {\n font-size: 0.9rem;\n color: #7f8c8d;\n margin: 0;\n white-space: nowrap;\n line-height: 1.2;\n }\n\n .controls {\n display: flex;\n gap: 0.8rem;\n flex-wrap: wrap;\n order: 3;\n }\n\n .control-btn {\n padding: 0.4rem 0.8rem;\n border: none;\n border-radius: 20px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 0.85rem;\n white-space: nowrap;\n }\n\n .control-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n }\n\n .control-btn.active {\n background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);\n }\n\n .map-container {\n position: relative;\n width: 100%;\n height: calc(100vh - 120px);\n background: white;\n margin: 0;\n }\n\n #map {\n width: 100%;\n height: 100%;\n }\n\n .custom-marker {\n background: #ff6b6b;\n border: 3px solid white;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-size: 12px;\n color: white;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n }\n\n .custom-marker.start {\n background: #4caf50;\n }\n\n .custom-marker.end {\n background: #f44336;\n }\n\n .custom-popup {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n }\n\n .popup-date {\n font-weight: bold;\n color: #ff6b6b;\n margin-bottom: 0.5rem;\n font-size: 1rem;\n }\n\n .popup-location {\n font-weight: 600;\n margin-bottom: 0.5rem;\n color: #2c3e50;\n }\n\n .popup-activities {\n font-size: 0.9rem;\n color: #555;\n line-height: 1.4;\n }\n\n .header-legend {\n display: flex;\n align-items: center;\n gap: 1rem;\n font-size: 0.8rem;\n order: 2;\n }\n\n .header-legend-item {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n white-space: nowrap;\n }\n\n .header-legend-marker {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 2px solid white;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 8px;\n font-weight: bold;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n }\n\n .header-legend-marker.start {\n background: #4caf50;\n }\n\n .header-legend-marker.route {\n background: #ff6b6b;\n }\n\n .header-legend-marker.end {\n background: #f44336;\n }\n\n .header-legend-line {\n width: 16px;\n height: 3px;\n background: #ff6b6b;\n border-radius: 2px;\n }\n\n .mobile-legend {\n display: none;\n justify-content: center;\n gap: 1rem;\n font-size: 0.75rem;\n margin: 0.8rem 0;\n }\n\n .mobile-legend-item {\n display: flex;\n align-items: center;\n gap: 0.3rem;\n }\n\n .mobile-legend-marker {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n border: 2px solid white;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 7px;\n font-weight: bold;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n }\n\n .mobile-legend-marker.start {\n background: #4caf50;\n }\n\n .mobile-legend-marker.route {\n background: #ff6b6b;\n }\n\n .mobile-legend-marker.end {\n background: #f44336;\n }\n\n .mobile-legend-line {\n width: 14px;\n height: 2px;\n background: #ff6b6b;\n border-radius: 2px;\n }\n\n .legend {\n position: absolute;\n bottom: 2rem;\n left: 2rem;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n padding: 1rem;\n border-radius: 12px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n z-index: 1000;\n display: none;\n }\n\n .legend-title {\n font-weight: 600;\n margin-bottom: 0.8rem;\n color: #2c3e50;\n }\n\n .legend-item {\n display: flex;\n align-items: center;\n gap: 0.8rem;\n margin-bottom: 0.5rem;\n font-size: 0.9rem;\n }\n\n .legend-marker {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n border: 2px solid white;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 10px;\n font-weight: bold;\n }\n\n .legend-marker.start {\n background: #4caf50;\n }\n\n .legend-marker.route {\n background: #ff6b6b;\n }\n\n .legend-marker.end {\n background: #f44336;\n }\n\n .legend-line {\n width: 20px;\n height: 3px;\n background: #ff6b6b;\n border-radius: 2px;\n }\n\n @media (max-width: 768px) {\n .header {\n padding: 1rem;\n flex-direction: column;\n align-items: center;\n gap: 6px; \/* \uc57d 2mm *\/\n }\n\n .title-section {\n display: contents; \/* flexbox \ud574\uc81c\ud558\uc5ec \uc790\uc2dd \uc694\uc18c\ub4e4\uc774 \uc9c1\uc811 \ubc30\uce58\ub428 *\/\n }\n\n .title {\n font-size: 1.3rem;\n line-height: 1.1;\n text-align: center;\n width: 100%;\n order: 1;\n }\n\n .subtitle {\n font-size: 0.8rem;\n line-height: 1.1;\n text-align: center;\n width: 100%;\n order: 2;\n }\n\n .header-legend {\n display: none;\n }\n\n .mobile-legend {\n display: flex;\n margin: 6px 0; \/* \uc57d 2mm *\/\n order: 3;\n }\n\n .controls {\n gap: 0.5rem;\n justify-content: center;\n margin: 6px 0; \/* \uc57d 2mm *\/\n order: 4;\n }\n\n .control-btn {\n padding: 0.4rem 0.8rem;\n font-size: 0.85rem;\n }\n\n .legend {\n display: none !important;\n }\n\n .map-container {\n height: calc(100vh - 160px);\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"header\">\n <div class=\"title-section\">\n <h1 class=\"title\">Vision Network Camp 3\uae30<\/h1>\n <p class=\"subtitle\">22\uc77c\uac04\uc758 \ubbf8\uad6d \uc11c\ubd80 \uc5ec\ud589 \ub3d9\uc120<\/p>\n <\/div>\n <div class=\"header-legend\">\n <div class=\"header-legend-item\">\n <div class=\"header-legend-marker start\">1<\/div>\n <span>\ucd9c\ubc1c<\/span>\n <\/div>\n <div class=\"header-legend-item\">\n <div class=\"header-legend-marker route\">N<\/div>\n <span>\ubc29\ubb38\uc9c0<\/span>\n <\/div>\n <div class=\"header-legend-item\">\n <div class=\"header-legend-line\"><\/div>\n <span>\uacbd\ub85c<\/span>\n <\/div>\n <div class=\"header-legend-item\">\n <div class=\"header-legend-marker end\">22<\/div>\n <span>\ubcf5\uadc0<\/span>\n <\/div>\n <\/div>\n <div class=\"controls\">\n <button class=\"control-btn active\" onclick=\"showRoute('all')\">\uc804\uccb4 \uacbd\ub85c<\/button>\n <button class=\"control-btn\" onclick=\"showRoute('week1')\">1\uc8fc\ucc28<\/button>\n <button class=\"control-btn\" onclick=\"showRoute('week2')\">2\uc8fc\ucc28<\/button>\n <button class=\"control-btn\" onclick=\"showRoute('week3')\">3\uc8fc\ucc28<\/button>\n <\/div>\n <div class=\"mobile-legend\">\n <div class=\"mobile-legend-item\">\n <div class=\"mobile-legend-marker start\">1<\/div>\n <span>\ucd9c\ubc1c<\/span>\n <\/div>\n <div class=\"mobile-legend-item\">\n <div class=\"mobile-legend-marker route\">N<\/div>\n <span>\ubc29\ubb38\uc9c0<\/span>\n <\/div>\n <div class=\"mobile-legend-item\">\n <div class=\"mobile-legend-line\"><\/div>\n <span>\uacbd\ub85c<\/span>\n <\/div>\n <div class=\"mobile-legend-item\">\n <div class=\"mobile-legend-marker end\">22<\/div>\n <span>\ubcf5\uadc0<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"map-container\">\n <div id=\"map\"><\/div>\n <\/div>\n\n <div class=\"legend\">\n <div class=\"legend-title\">\ubc94\ub840<\/div>\n <div class=\"legend-item\">\n <div class=\"legend-marker start\">1<\/div>\n <span>\ucd9c\ubc1c\uc9c0 (SFO \uacf5\ud56d)<\/span>\n <\/div>\n <div class=\"legend-item\">\n <div class=\"legend-marker route\">N<\/div>\n <span>\ubc29\ubb38 \uc9c0\uc5ed<\/span>\n <\/div>\n <div class=\"legend-item\">\n <div class=\"legend-line\"><\/div>\n <span>\uc774\ub3d9 \uacbd\ub85c<\/span>\n <\/div>\n <div class=\"legend-item\">\n <div class=\"legend-marker end\">22<\/div>\n <span>\ubcf5\uadc0\uc9c0 (SFO \uacf5\ud56d)<\/span>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Vision Network Camp 3\uae30 \uc5ec\ud589 \uc77c\uc815 \ub370\uc774\ud130\n const tripData = [\n { day: 1, date: \"7\uc6d4 23\uc77c\", location: \"\uc0cc\ud504\ub780\uc2dc\uc2a4\ucf54\", city: \"San Francisco\", lat: 37.7749, lng: -122.4194, activities: [\"\uacf5\ud56d \ud53d\uc5c5\", \"\uac1c\ud68c\uc608\ubc30 \ubc0f \uc624\ub9ac\uc5d4\ud14c\uc774\uc158\", \"\ube44\uc804 \uc250\uc5b4\ub9c1\", \"Christmas Tree Point\"] },\n { day: 2, date: \"7\uc6d4 24\uc77c\", location: \"McWay Falls \u2192 LA\", city: \"McWay Falls\", lat: 36.1567, lng: -121.6719, activities: [\"McWay Falls \ubc29\ubb38\", \"LA\ub85c \uc7a5\uac70\ub9ac \uc774\ub3d9\"] },\n { day: 3, date: \"7\uc6d4 25\uc77c\", location: \"LA\", city: \"Los Angeles\", lat: 34.0522, lng: -118.2437, activities: [\"\ud558\ub098\ub2d8\uc758 \ub098\ub77c \ud2b9\uac15 1, 2\", \"The Getty \ubc15\ubb3c\uad00\", \"The Getty Villa\", \"\uba85\uc0ac\uc640\uc758 \ub9cc\ub0a8: \uc5d0\ub9ad \ud0dc\uad11\"] },\n { day: 4, date: \"7\uc6d4 26\uc77c\", location: \"LA\", city: \"Los Angeles\", lat: 34.0622, lng: -118.2537, activities: [\"\ud558\ub098\ub2d8\uc758 \ub098\ub77c \ud2b9\uac15 3\", \"CTS \ud22c\uc5b4 \ubc0f \uba85\uc0ac \ub9cc\ub0a8\", \"Greystone Mansion\", \"Lake Hollywood Park\", \"Walk of Fame\", \"The Griffith Observatory\"] },\n { day: 5, date: \"7\uc6d4 27\uc77c\", location: \"LA\", city: \"Los Angeles\", lat: 34.0422, lng: -118.2637, activities: [\"\uc0c8\ub4e4\ubc31 \uad50\ud68c \uc8fc\uc77c\uc608\ubc30\", \"Azusa Street Revival 1906\", \"Bradbury Building\", \"Grand Central Market\", \"The Last Bookstore\", \"UCLA \ud22c\uc5b4\", \"\uba58\ud1a0 \uc904\ub9ac\ud0b4 \ub300\ud45c\ub2d8\uacfc\uc758 \ub9cc\ub0a8\", \"\ube44\uc804 \uc250\uc5b4\ub9c1\"] },\n { day: 6, date: \"7\uc6d4 28\uc77c\", location: \"\uc0cc\ub514\uc5d0\uace0 \u2192 \uc870\uc288\uc544 \ud2b8\ub9ac\", city: \"San Diego\", lat: 32.7157, lng: -117.1611, activities: [\"San Diego Tour (La Jolla Cove)\", \"Kate Sessions Memorial Park Vision Sharing\", \"Cabrillo National Monument\", \"Delta Aquariids Meteor Shower \uad00\uce21\"] },\n { day: 7, date: \"7\uc6d4 29\uc77c\", location: \"Joshua Tree\", city: \"Joshua Tree\", lat: 33.8734, lng: -115.9010, activities: [\"\uc7a5\uac70\ub9ac \uc774\ub3d9\", \"Route 66 Museum\", \"Hopi Point \ub178\uc744 \uac10\uc0c1\"] },\n { day: 8, date: \"7\uc6d4 30\uc77c\", location: \"\uadf8\ub79c\ub4dc \uce90\ub144 \u2192 \ube0c\ub77c\uc774\uc2a4 \uce90\ub144\", city: \"Grand Canyon\", lat: 36.1069, lng: -112.1129, activities: [\"Grand Canyon Tour\", \"Horseshoe Bend\", \"Bryce Canyon\"] },\n { day: 9, date: \"7\uc6d4 31\uc77c\", location: \"\ub77c\uc2a4\ubca0\uac00\uc2a4\", city: \"Las Vegas\", lat: 36.1699, lng: -115.1398, activities: [\"Zion Canyon Tour\", \"\ub77c\uc2a4\ubca0\uac00\uc2a4 \uad00\uad11\"] },\n { day: 10, date: \"8\uc6d4 1\uc77c\", location: \"\ud0b9\uc2a4 \uce90\ub144\", city: \"Kings Canyon\", lat: 36.7378, lng: -118.5551, activities: [\"General Grant Tree\", \"Fallen Monarch\", \"Fresno \uc774\ub3d9\"] },\n { day: 11, date: \"8\uc6d4 2\uc77c\", location: \"\uc694\uc138\ubbf8\ud2f0 \u2192 Fresno\", city: \"Yosemite\", lat: 37.8651, lng: -119.5383, activities: [\"Yosemite National Park\", \"\uc0cc\ud504\ub780\uc2dc\uc2a4\ucf54\ub85c \uc774\ub3d9\"] },\n { day: 12, date: \"8\uc6d4 3\uc77c\", location: \"Walnut Creek\", city: \"Walnut Creek\", lat: 37.9063, lng: -122.0653, activities: [\"\uc9c0\ud604 \ud569\ub958\", \"\ube44\uc804 \uc250\uc5b4\ub9c1 \ubc0f \uc608\ubc30\", \"Painted Ladies\", \"\uae30\ub77c\ub378\ub9ac\", \"\ub86c\ubc14\ub4dc \uc2a4\ud2b8\ub9bf\", \"\ud53c\uc154\ub9e8\uc2a4 \uc6cc\ud504\", \"Pier 39 \ubc14\ub2e4\uc0ac\uc790\", \"\ud06c\ub9ac\uc2dc \ud544\ub4dc\"] },\n { day: 13, date: \"8\uc6d4 4\uc77c\", location: \"Walnut Creek\", city: \"Walnut Creek\", lat: 37.9163, lng: -122.0753, activities: [\"\uc0b0\ud638\uc138 \ud22c\uc5b4\", \"\ub2e4\ub2c8\uc5d8 \uce58\uacfc\uc758\uc0ac \uba85\uc0ac \ub9cc\ub0a8\", \"Communications Hill\"] },\n { day: 14, date: \"8\uc6d4 5\uc77c\", location: \"Walnut Creek\", city: \"Walnut Creek\", lat: 37.8963, lng: -122.0553, activities: [\"\uc0cc\ud504\ub780\uc2dc\uc2a4\ucf54 \uc790\uc720\uc2dc\uac04\"] },\n { day: 15, date: \"8\uc6d4 6\uc77c\", location: \"Walnut Creek\", city: \"Walnut Creek\", lat: 37.9263, lng: -122.0853, activities: [\"Wake Up \uc900\ube44\"] },\n { day: 16, date: \"8\uc6d4 7\uc77c\", location: \"Walnut Creek\", city: \"Walnut Creek\", lat: 37.8863, lng: -122.0453, activities: [\"Wake Up \uc900\ube44\"] },\n { day: 17, date: \"8\uc6d4 8\uc77c\", location: \"Walnut Creek\", city: \"Walnut Creek\", lat: 37.9363, lng: -122.0953, activities: [\"Wake Up \uc9c4\ud589\"] },\n { day: 18, date: \"8\uc6d4 9\uc77c\", location: \"Walnut Creek\", city: \"Walnut Creek\", lat: 37.8763, lng: -122.0353, activities: [\"Wake Up \uc9c4\ud589\"] },\n { day: 19, date: \"8\uc6d4 10\uc77c\", location: \"Walnut Creek \u2192 Yuba City\", city: \"Yuba City\", lat: 39.1404, lng: -121.6169, activities: [\"Wake Up \ub9c8\ubb34\ub9ac\", \"Final Camp \uc7a5\uc18c\ub85c \uc774\ub3d9\"] },\n { day: 20, date: \"8\uc6d4 11\uc77c\", location: \"Arnold\", city: \"Arnold\", lat: 38.2488, lng: -120.3516, activities: [\"Final Camp\"] },\n { day: 21, date: \"8\uc6d4 12\uc77c\", location: \"Arnold\", city: \"Arnold\", lat: 38.2588, lng: -120.3616, activities: [\"Final Camp\"] },\n { day: 22, date: \"8\uc6d4 13\uc77c\", location: \"Arnold \u2192 \uc0cc\ud504\ub780\uc2dc\uc2a4\ucf54 SFO\", city: \"San Francisco\", lat: 37.7849, lng: -122.4094, activities: [\"\ub9c8\uc9c0\ub9c9 \ud504\ub85c\uadf8\ub7a8\", \"\uc0cc\ud504\ub780\uc2dc\uc2a4\ucf54\ub85c \ubcf5\uadc0\"] }\n ];\n\n \/\/ \uc9c0\ub3c4 \ubc0f \ub808\uc774\uc5b4 \ubcc0\uc218\n let map;\n let markers = [];\n let routeLines = [];\n let currentFilter = 'all';\n let adjustedTripData = [];\n\n \/\/ \ub3d9\uc77c \uc9c0\uc5ed \ub9c8\ucee4\ub4e4\uc758 \uc704\uce58 \uc870\uc815 \ud568\uc218\n function adjustOverlappingLocations(data) {\n const adjustedData = [...data];\n const offsetDistance = 0.01; \/\/ \uc57d 1km \uc815\ub3c4\uc758 \uc624\ud504\uc14b\n \n \/\/ \ub3d9\uc77c\ud55c \uc704\uce58\ub97c \ucc3e\uc544\uc11c \uc870\uc815\n for (let i = 0; i < adjustedData.length; i++) {\n const currentLocation = adjustedData[i];\n let overlappingCount = 0;\n \n \/\/ \ud604\uc7ac \uc704\uce58\uc640 \ub3d9\uc77c\ud55c \uc704\uce58\ub4e4\uc744 \ucc3e\uae30\n for (let j = 0; j < i; j++) {\n const prevLocation = adjustedData[j];\n const distance = Math.sqrt(\n Math.pow(currentLocation.lat - prevLocation.lat, 2) + \n Math.pow(currentLocation.lng - prevLocation.lng, 2)\n );\n \n \/\/ \uac70\ub9ac \ucc28\uc774\uac00 \ub9e4\uc6b0 \uc791\uc73c\uba74 \ub3d9\uc77c\ud55c \uc704\uce58\ub85c \ud310\ub2e8\n if (distance < 0.005) {\n overlappingCount++;\n }\n }\n \n \/\/ \uacb9\uce58\ub294 \uc704\uce58\uac00 \uc788\uc73c\uba74 \uc870\uc815\n if (overlappingCount > 0) {\n const angle = (overlappingCount * 60) * (Math.PI \/ 180); \/\/ 60\ub3c4\uc529 \ud68c\uc804\n currentLocation.adjustedLat = currentLocation.lat + (offsetDistance * Math.cos(angle));\n currentLocation.adjustedLng = currentLocation.lng + (offsetDistance * Math.sin(angle));\n } else {\n currentLocation.adjustedLat = currentLocation.lat;\n currentLocation.adjustedLng = currentLocation.lng;\n }\n }\n \n return adjustedData;\n }\n\n \/\/ \uc9c0\ub3c4 \ucd08\uae30\ud654\n function initMap() {\n \/\/ Leaflet \uc9c0\ub3c4 \uc0dd\uc131 (\ubbf8\uad6d \uc11c\ubd80 \uc911\uc2ec)\n map = L.map('map').setView([36.5, -119.0], 6);\n\n \/\/ OpenStreetMap \ud0c0\uc77c \ub808\uc774\uc5b4 \ucd94\uac00\n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n attribution: '\u00a9 OpenStreetMap contributors'\n }).addTo(map);\n\n \/\/ \uc704\uce58 \uc870\uc815\ub41c \ub370\uc774\ud130 \uc0dd\uc131\n adjustedTripData = adjustOverlappingLocations(tripData);\n\n \/\/ \ub9c8\ucee4\uc640 \uacbd\ub85c \uadf8\ub9ac\uae30\n drawLocations();\n drawRoutes();\n }\n\n \/\/ \ucee4\uc2a4\ud140 \ub9c8\ucee4 \uc0dd\uc131\n function createCustomMarker(day, isStart = false, isEnd = false) {\n let className = 'custom-marker';\n if (isStart) className += ' start';\n if (isEnd) className += ' end';\n\n return L.divIcon({\n className: '',\n html: `<div class=\"${className}\">${day}<\/div>`,\n iconSize: [30, 30],\n iconAnchor: [15, 15]\n });\n }\n\n \/\/ \ubc29\ubb38 \uc9c0\uc5ed \ub9c8\ucee4 \ud45c\uc2dc\n function drawLocations() {\n adjustedTripData.forEach((location, index) => {\n const isStart = location.day === 1;\n const isEnd = location.day === 22;\n \n const marker = L.marker([location.adjustedLat, location.adjustedLng], {\n icon: createCustomMarker(location.day, isStart, isEnd)\n }).addTo(map);\n\n \/\/ \ud31d\uc5c5 \ub0b4\uc6a9 \uc0dd\uc131\n const popupContent = `\n <div class=\"custom-popup\">\n <div class=\"popup-date\">${location.day}\uc77c\ucc28 - ${location.date}<\/div>\n <div class=\"popup-location\">${location.location}<\/div>\n <div class=\"popup-activities\">${location.activities.join('<br>\u2022 ')}<\/div>\n <\/div>\n `;\n\n marker.bindPopup(popupContent);\n markers.push(marker);\n });\n }\n\n \/\/ \uacbd\ub85c \uc120 \uadf8\ub9ac\uae30\n function drawRoutes() {\n const coordinates = adjustedTripData.map(location => [location.adjustedLat, location.adjustedLng]);\n \n const routeLine = L.polyline(coordinates, {\n color: '#ff6b6b',\n weight: 4,\n opacity: 0.8,\n smoothFactor: 1\n }).addTo(map);\n\n routeLines.push(routeLine);\n }\n\n \/\/ \uacbd\ub85c \ud544\ud130\ub9c1\n function showRoute(filter) {\n \/\/ \ubc84\ud2bc \uc0c1\ud0dc \ubcc0\uacbd\n document.querySelectorAll('.control-btn').forEach(btn => btn.classList.remove('active'));\n event.target.classList.add('active');\n\n currentFilter = filter;\n \n let visibleData = [];\n switch(filter) {\n case 'week1':\n visibleData = adjustedTripData.slice(0, 7);\n break;\n case 'week2':\n visibleData = adjustedTripData.slice(7, 14);\n break;\n case 'week3':\n visibleData = adjustedTripData.slice(14, 22);\n break;\n default:\n visibleData = adjustedTripData;\n }\n\n \/\/ \uae30\uc874 \ub9c8\ucee4\uc640 \uacbd\ub85c \uc81c\uac70\n markers.forEach(marker => map.removeLayer(marker));\n routeLines.forEach(line => map.removeLayer(line));\n markers = [];\n routeLines = [];\n\n \/\/ \uc0c8\ub85c\uc6b4 \ub9c8\ucee4\uc640 \uacbd\ub85c \uadf8\ub9ac\uae30\n drawFilteredLocations(visibleData);\n drawFilteredRoutes(visibleData);\n\n \/\/ \uc9c0\ub3c4 \ubdf0 \uc870\uc815\n if (visibleData.length > 0) {\n const bounds = L.latLngBounds(visibleData.map(d => [d.adjustedLat, d.adjustedLng]));\n map.fitBounds(bounds, { padding: [20, 20] });\n }\n }\n\n \/\/ \ud544\ud130\ub41c \uc704\uce58 \uadf8\ub9ac\uae30\n function drawFilteredLocations(data) {\n data.forEach((location, index) => {\n const isStart = location.day === 1;\n const isEnd = location.day === 22;\n \n const marker = L.marker([location.adjustedLat, location.adjustedLng], {\n icon: createCustomMarker(location.day, isStart, isEnd)\n }).addTo(map);\n\n const popupContent = `\n <div class=\"custom-popup\">\n <div class=\"popup-date\">${location.day}\uc77c\ucc28 - ${location.date}<\/div>\n <div class=\"popup-location\">${location.location}<\/div>\n <div class=\"popup-activities\">\u2022 ${location.activities.join('<br>\u2022 ')}<\/div>\n <\/div>\n `;\n\n marker.bindPopup(popupContent);\n markers.push(marker);\n });\n }\n\n \/\/ \ud544\ud130\ub41c \uacbd\ub85c \uadf8\ub9ac\uae30\n function drawFilteredRoutes(data) {\n if (data.length > 1) {\n const coordinates = data.map(location => [location.adjustedLat, location.adjustedLng]);\n \n const routeLine = L.polyline(coordinates, {\n color: '#ff6b6b',\n weight: 4,\n opacity: 0.8,\n smoothFactor: 1\n }).addTo(map);\n\n routeLines.push(routeLine);\n }\n }\n\n \/\/ \ud398\uc774\uc9c0 \ub85c\ub4dc \uc2dc \uc9c0\ub3c4 \ucd08\uae30\ud654\n window.addEventListener('load', function() {\n setTimeout(initMap, 100);\n });\n\n \/\/ \ud654\uba74 \ud06c\uae30 \ubcc0\uacbd \uc2dc \uc9c0\ub3c4 \ud06c\uae30 \uc870\uc815\n window.addEventListener('resize', function() {\n if (map) {\n setTimeout(() => {\n map.invalidateSize();\n }, 100);\n }\n });\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Vision Network Camp 3\uae30 \ub3d9\uc120 \uc9c0\ub3c4 Vision Network Camp 3\uae30 22\uc77c\uac04\uc758 \ubbf8\uad6d \uc11c\ubd80 \uc5ec\ud589 \ub3d9\uc120 1 \ucd9c\ubc1c N \ubc29\ubb38\uc9c0 \uacbd\ub85c 22 \ubcf5\uadc0 \uc804\uccb4 \uacbd\ub85c 1\uc8fc\ucc28 2\uc8fc\ucc28 3\uc8fc\ucc28 1 \ucd9c\ubc1c N…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-2179","page","type-page","status-publish","hentry"],"ticketed":false,"_links":{"self":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/comments?post=2179"}],"version-history":[{"count":0,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2179\/revisions"}],"wp:attachment":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/media?parent=2179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}