\uc2e0\uc131\ud559\uae30\ub3c5\ud559\uad50 Vision Trip \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 }\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 }\n\n .header-legend {\n display: flex;\n align-items: center;\n gap: 1rem;\n font-size: 0.8rem;\n margin-left: auto;\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 .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 .popup-accommodation {\n margin-top: 0.5rem;\n padding: 0.3rem 0.6rem;\n background: #f8f9fa;\n border-radius: 4px;\n font-size: 0.8rem;\n color: #666;\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 .scroll-top-btn {\n display: none;\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\">\uc2e0\uc131\ud559\uae30\ub3c5\ud559\uad50 Vision Trip<\/h1>\n <p class=\"subtitle\">22\uc77c\uac04\uc758 \ubbf8\uad6d \ub3d9\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 (EWR \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 (EWR \uacf5\ud56d)<\/span>\n <\/div>\n <\/div>\n\n <button class=\"scroll-top-btn\" onclick=\"scrollToTop()\">\u2191<\/button>\n\n <script>\n \/\/ \uc5ec\ud589 \uc77c\uc815 \ub370\uc774\ud130\n const tripData = [\n { day: 1, date: \"8\uc6d4 28\uc77c\", location: \"\ub274\uc800\uc9c0\/\ub274\uc695\", city: \"Newark\", lat: 40.7357, lng: -74.1724, activities: [\"EWR \uacf5\ud56d \ub3c4\ucc29\", \"Princeton Seminary\", \"\uc774\uc2dc\uc6d0 \uc120\uc0dd \ub9cc\ub0a8\"], accommodation: \"\ub274\uc800\uc9c0\" },\n { day: 2, date: \"8\uc6d4 29\uc77c\", location: \"\ud544\ub77c\ub378\ud53c\uc544\", city: \"Philadelphia\", lat: 39.9526, lng: -75.1652, activities: [\"\ud544\ub77c\ub378\ud53c\uc544 Tour 1\"], accommodation: \"\ud544\ub77c\ub378\ud53c\uc544\" },\n { day: 3, date: \"8\uc6d4 30\uc77c\", location: \"\ubcfc\ud2f0\ubaa8\uc5b4\", city: \"Baltimore\", lat: 39.2904, lng: -76.6122, activities: [\"Baltimore \ubc29\ubb38\", \"\ucf04\uc2f1\ud134 \uac70\ub9ac\", \"\ucc44\uc655\uaddc \ubaa9\uc0ac \ub9cc\ub0a8\"], accommodation: \"\ud544\ub77c\ub378\ud53c\uc544\" },\n { day: 4, date: \"8\uc6d4 31\uc77c\", location: \"\uc6cc\uc2f1\ud134 DC\", city: \"Washington DC\", lat: 38.9072, lng: -77.0369, activities: [\"\uc0c8\uc18c\ub9dd\uad50\ud68c \uc608\ubc30\", \"Washington DC Tour 1\", \"\uce58\uacfc\uc758\uc0ac \ub9cc\ub0a8\"], accommodation: \"\ubbf8\uc815\" },\n { day: 5, date: \"9\uc6d4 1\uc77c\", location: \"\uc6cc\uc2f1\ud134 DC\", city: \"Washington DC\", lat: 38.9072, lng: -77.0369, activities: [\"Washington DC Tour 2\"], accommodation: \"\ubbf8\uc815\" },\n { day: 6, date: \"9\uc6d4 2\uc77c\", location: \"\uc5d0\ub9ac\", city: \"Erie\", lat: 42.1292, lng: -80.0851, activities: [\"Kinzua Bridge Park\", \"Erie\ub85c \uc774\ub3d9\"], accommodation: \"\ubbf8\uc815\" },\n { day: 7, date: \"9\uc6d4 3\uc77c\", location: \"\ub098\uc774\uc544\uac00\ub77c\", city: \"Niagara Falls\", lat: 43.0962, lng: -79.0377, activities: [\"Erie Maritime Museum\", \"Presque Isle Park\", \"Niagara Fall \uc57c\uacbd\"], accommodation: \"\ubbf8\uc815\" },\n { day: 8, date: \"9\uc6d4 4\uc77c\", location: \"\ub098\uc774\uc544\uac00\ub77c\", city: \"Niagara Falls\", lat: 43.0962, lng: -79.0377, activities: [\"Niagara Fall \uad00\uad11\", \"Watkins Glen Park\"], accommodation: \"\ubbf8\uc815\" },\n { day: 9, date: \"9\uc6d4 5\uc77c\", location: \"\uc774\ud0c0\uce74\", city: \"Ithaca\", lat: 42.4430, lng: -76.5019, activities: [\"Cornell University\", \"Ithaca Falls\", \"Albany\ub85c \uc774\ub3d9\"], accommodation: \"\ubbf8\uc815\" },\n { day: 10, date: \"9\uc6d4 6\uc77c\", location: \"\ub178\uc2a4\ud544\ub4dc\", city: \"Northfield\", lat: 42.7001, lng: -72.4287, activities: [\"\uae30\ub3c5\uad50 \uc720\uc801\uc9c0 \ud0d0\ubc29\", \"Williams College\", \"Moody House\"], accommodation: \"Boston Marlborough\" },\n { day: 11, date: \"9\uc6d4 7\uc77c\", location: \"\ubcf4\uc2a4\ud134\", city: \"Boston\", lat: 42.3601, lng: -71.0589, activities: [\"\uc6b0\uc2a4\ud130\uad50\ud68c \uc608\ubc30\", \"Harvard & MIT\", \"Boston Tour\"], accommodation: \"\ubbf8\uc815\" },\n { day: 12, date: \"9\uc6d4 8\uc77c\", location: \"\ubcf4\uc2a4\ud134\", city: \"Boston\", lat: 42.3601, lng: -71.0589, activities: [\"\ubcf4\uc2a4\ud134 \ub2e4\uc6b4\ud0c0\uc6b4\", \"Plymouth \ud0d0\ubc29\", \"New Port \ubc29\ubb38\"], accommodation: \"\ubbf8\uc815\" },\n { day: 13, date: \"9\uc6d4 9\uc77c\", location: \"\ub274\ud5e4\uc774\ube10\", city: \"New Haven\", lat: 41.3083, lng: -72.9279, activities: [\"Yale University\", \"LEGOLAND\", \"\uc544\uc6b8\ub81b \uc1fc\ud551\"], accommodation: \"\ub274\uc800\uc9c0\/\ub274\uc695\ubd81\ucabd\" },\n { day: 14, date: \"9\uc6d4 10\uc77c\", location: \"\uc6e8\uc2a4\ud2b8\ud3ec\uc778\ud2b8\", city: \"West Point\", lat: 41.3914, lng: -73.9576, activities: [\"West Point\", \"Bear Mountain\", \"\uc628\uc758\ub9ac\uad50\ud68c \uc608\ubc30\"], accommodation: \"\ub274\uc800\uc9c0\" },\n { day: 15, date: \"9\uc6d4 11\uc77c\", location: \"\ub9e8\ud558\ud0c4\", city: \"Manhattan\", lat: 40.7831, lng: -73.9712, activities: [\"\ub9e8\ud558\ud0c4 \ud22c\uc5b4 1\"], accommodation: \"\ub274\uc800\uc9c0\" },\n { day: 16, date: \"9\uc6d4 12\uc77c\", location: \"\ub9e8\ud558\ud0c4\", city: \"Manhattan\", lat: 40.7831, lng: -73.9712, activities: [\"\ub9e8\ud558\ud0c4 \ud22c\uc5b4 2\", \"\uba54\uce20 \uc57c\uad6c\uacbd\uae30\", \"\uc544\ud39c\uc824\ub7ec\uad50\ud68c\"], accommodation: \"\ub274\uc695\/\ub274\uc800\uc9c0\" },\n { day: 17, date: \"9\uc6d4 13\uc77c\", location: \"\ub9e8\ud558\ud0c4\", city: \"Manhattan\", lat: 40.7831, lng: -73.9712, activities: [\"\ub9e8\ud558\ud0c4 \ud22c\uc5b4 3\", \"\ub9e8\ud558\ud0c4\uc131\uad50\ud68c\", \"\uc804\ub3c4 \uacbd\ud5d8\"], accommodation: \"\ub274\uc695\/\ub274\uc800\uc9c0\" },\n { day: 18, date: \"9\uc6d4 14\uc77c\", location: \"\ub871\uc544\uc77c\ub79c\ub4dc\", city: \"Long Island\", lat: 40.7891, lng: -73.1350, activities: [\"Times Square \uc608\ubc30\", \"State Park \ubc29\ubb38\", \"\ud574\uc218\uc695 & BBQ\"], accommodation: \"\ub274\uc695\/\ub274\uc800\uc9c0\" },\n { day: 19, date: \"9\uc6d4 15\uc77c\", location: \"\ub9e8\ud558\ud0c4\", city: \"Manhattan\", lat: 40.7831, lng: -73.9712, activities: [\"\ub9e8\ud558\ud0c4 \ud22c\uc5b4 4\"], accommodation: \"\ub274\uc695\/\ub274\uc800\uc9c0\" },\n { day: 20, date: \"9\uc6d4 16\uc77c\", location: \"\ube0c\ub8e8\ud074\ub9b0\", city: \"Brooklyn\", lat: 40.6782, lng: -73.9442, activities: [\"\ub871\uc544\uc77c\ub79c\ub4dc \ud22c\uc5b4\", \"21\ub2e4\uc6b0\ub4dc\uad50\ud68c\", \"\ub9c8\ud2b8 \ubc84\uc2a4\ud0b9\", \"Brooklyn \uae30\ub3c4\ud68c\"], accommodation: \"\ub274\uc695\/\ub274\uc800\uc9c0\" },\n { day: 21, date: \"9\uc6d4 17\uc77c\", location: \"\ub79c\uce74\uc2a4\ud130\", city: \"Lancaster\", lat: 40.0379, lng: -76.3055, activities: [\"Sight & Sound\", \"Amish Village\", \"Tabernacle\"], accommodation: \"\ub274\uc695\/\ub274\uc800\uc9c0\" },\n { day: 22, date: \"9\uc6d4 18\uc77c\", location: \"\ub274\uc800\uc9c0\", city: \"Newark\", lat: 40.7357, lng: -74.1724, activities: [\"\ub9e8\ud558\ud0c4 \ud22c\uc5b4 5\", \"\uc57c\uacbd \ud22c\uc5b4\", \"EWR \uacf5\ud56d \ucd9c\ubc1c\"], accommodation: \"\ucd9c\ubc1c\" }\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\n map = L.map('map').setView([41.5, -74.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 class=\"popup-accommodation\">\uc219\uc18c: ${location.accommodation}<\/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 class=\"popup-accommodation\">\uc219\uc18c: ${location.accommodation}<\/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 \/\/ \ub9e8 \uc704\ub85c \uc2a4\ud06c\ub864\n function scrollToTop() {\n window.scrollTo({ top: 0, behavior: 'smooth' });\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>\uc2e0\uc131\ud559\uae30\ub3c5\ud559\uad50 Vision Trip \ub3d9\uc120 \uc9c0\ub3c4 \uc2e0\uc131\ud559\uae30\ub3c5\ud559\uad50 Vision Trip 22\uc77c\uac04\uc758 \ubbf8\uad6d \ub3d9\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 \ubc29\ubb38\uc9c0 \uacbd\ub85c…<\/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-2142","page","type-page","status-publish","hentry"],"ticketed":false,"_links":{"self":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2142","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=2142"}],"version-history":[{"count":0,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2142\/revisions"}],"wp:attachment":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/media?parent=2142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2142,"date":"2025-08-21T02:28:04","date_gmt":"2025-08-21T02:28:04","guid":{"rendered":"https:\/\/visionnetworkcamp.org\/?page_id=2142"},"modified":"2025-08-21T17:30:23","modified_gmt":"2025-08-21T17:30:23","slug":"%ec%8b%a0%ec%84%b1%ed%95%99-%eb%8f%99%ec%84%a0","status":"publish","type":"page","link":"https:\/\/visionnetworkcamp.org\/ko\/%ec%8b%a0%ec%84%b1%ed%95%99-%eb%8f%99%ec%84%a0\/","title":{"rendered":"\uc2e0\uc131\ud559 \ub3d9\uc120"},"content":{"rendered":"\n\n\n \n \n \uc2e0\uc131\ud559\uae30\ub3c5\ud559\uad50 Vision Trip \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 }\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 }\n\n .header-legend {\n display: flex;\n align-items: center;\n gap: 1rem;\n font-size: 0.8rem;\n margin-left: auto;\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 .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 .popup-accommodation {\n margin-top: 0.5rem;\n padding: 0.3rem 0.6rem;\n background: #f8f9fa;\n border-radius: 4px;\n font-size: 0.8rem;\n color: #666;\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 .scroll-top-btn {\n display: none;\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\">\uc2e0\uc131\ud559\uae30\ub3c5\ud559\uad50 Vision Trip<\/h1>\n <p class=\"subtitle\">22\uc77c\uac04\uc758 \ubbf8\uad6d \ub3d9\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 (EWR \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 (EWR \uacf5\ud56d)<\/span>\n <\/div>\n <\/div>\n\n <button class=\"scroll-top-btn\" onclick=\"scrollToTop()\">\u2191<\/button>\n\n <script>\n \/\/ \uc5ec\ud589 \uc77c\uc815 \ub370\uc774\ud130\n const tripData = [\n { day: 1, date: \"8\uc6d4 28\uc77c\", location: \"\ub274\uc800\uc9c0\/\ub274\uc695\", city: \"Newark\", lat: 40.7357, lng: -74.1724, activities: [\"EWR \uacf5\ud56d \ub3c4\ucc29\", \"Princeton Seminary\", \"\uc774\uc2dc\uc6d0 \uc120\uc0dd \ub9cc\ub0a8\"], accommodation: \"\ub274\uc800\uc9c0\" },\n { day: 2, date: \"8\uc6d4 29\uc77c\", location: \"\ud544\ub77c\ub378\ud53c\uc544\", city: \"Philadelphia\", lat: 39.9526, lng: -75.1652, activities: [\"\ud544\ub77c\ub378\ud53c\uc544 Tour 1\"], accommodation: \"\ud544\ub77c\ub378\ud53c\uc544\" },\n { day: 3, date: \"8\uc6d4 30\uc77c\", location: \"\ubcfc\ud2f0\ubaa8\uc5b4\", city: \"Baltimore\", lat: 39.2904, lng: -76.6122, activities: [\"Baltimore \ubc29\ubb38\", \"\ucf04\uc2f1\ud134 \uac70\ub9ac\", \"\ucc44\uc655\uaddc \ubaa9\uc0ac \ub9cc\ub0a8\"], accommodation: \"\ud544\ub77c\ub378\ud53c\uc544\" },\n { day: 4, date: \"8\uc6d4 31\uc77c\", location: \"\uc6cc\uc2f1\ud134 DC\", city: \"Washington DC\", lat: 38.9072, lng: -77.0369, activities: [\"\uc0c8\uc18c\ub9dd\uad50\ud68c \uc608\ubc30\", \"Washington DC Tour 1\", \"\uce58\uacfc\uc758\uc0ac \ub9cc\ub0a8\"], accommodation: \"\ubbf8\uc815\" },\n { day: 5, date: \"9\uc6d4 1\uc77c\", location: \"\uc6cc\uc2f1\ud134 DC\", city: \"Washington DC\", lat: 38.9072, lng: -77.0369, activities: [\"Washington DC Tour 2\"], accommodation: \"\ubbf8\uc815\" },\n { day: 6, date: \"9\uc6d4 2\uc77c\", location: \"\uc5d0\ub9ac\", city: \"Erie\", lat: 42.1292, lng: -80.0851, activities: [\"Kinzua Bridge Park\", \"Erie\ub85c \uc774\ub3d9\"], accommodation: \"\ubbf8\uc815\" },\n { day: 7, date: \"9\uc6d4 3\uc77c\", location: \"\ub098\uc774\uc544\uac00\ub77c\", city: \"Niagara Falls\", lat: 43.0962, lng: -79.0377, activities: [\"Erie Maritime Museum\", \"Presque Isle Park\", \"Niagara Fall \uc57c\uacbd\"], accommodation: \"\ubbf8\uc815\" },\n { day: 8, date: \"9\uc6d4 4\uc77c\", location: \"\ub098\uc774\uc544\uac00\ub77c\", city: \"Niagara Falls\", lat: 43.0962, lng: -79.0377, activities: [\"Niagara Fall \uad00\uad11\", \"Watkins Glen Park\"], accommodation: \"\ubbf8\uc815\" },\n { day: 9, date: \"9\uc6d4 5\uc77c\", location: \"\uc774\ud0c0\uce74\", city: \"Ithaca\", lat: 42.4430, lng: -76.5019, activities: [\"Cornell University\", \"Ithaca Falls\", \"Albany\ub85c \uc774\ub3d9\"], accommodation: \"\ubbf8\uc815\" },\n { day: 10, date: \"9\uc6d4 6\uc77c\", location: \"\ub178\uc2a4\ud544\ub4dc\", city: \"Northfield\", lat: 42.7001, lng: -72.4287, activities: [\"\uae30\ub3c5\uad50 \uc720\uc801\uc9c0 \ud0d0\ubc29\", \"Williams College\", \"Moody House\"], accommodation: \"Boston Marlborough\" },\n { day: 11, date: \"9\uc6d4 7\uc77c\", location: \"\ubcf4\uc2a4\ud134\", city: \"Boston\", lat: 42.3601, lng: -71.0589, activities: [\"\uc6b0\uc2a4\ud130\uad50\ud68c \uc608\ubc30\", \"Harvard & MIT\", \"Boston Tour\"], accommodation: \"\ubbf8\uc815\" },\n { day: 12, date: \"9\uc6d4 8\uc77c\", location: \"\ubcf4\uc2a4\ud134\", city: \"Boston\", lat: 42.3601, lng: -71.0589, activities: [\"\ubcf4\uc2a4\ud134 \ub2e4\uc6b4\ud0c0\uc6b4\", \"Plymouth \ud0d0\ubc29\", \"New Port \ubc29\ubb38\"], accommodation: \"\ubbf8\uc815\" },\n { day: 13, date: \"9\uc6d4 9\uc77c\", location: \"\ub274\ud5e4\uc774\ube10\", city: \"New Haven\", lat: 41.3083, lng: -72.9279, activities: [\"Yale University\", \"LEGOLAND\", \"\uc544\uc6b8\ub81b \uc1fc\ud551\"], accommodation: \"\ub274\uc800\uc9c0\/\ub274\uc695\ubd81\ucabd\" },\n { day: 14, date: \"9\uc6d4 10\uc77c\", location: \"\uc6e8\uc2a4\ud2b8\ud3ec\uc778\ud2b8\", city: \"West Point\", lat: 41.3914, lng: -73.9576, activities: [\"West Point\", \"Bear Mountain\", \"\uc628\uc758\ub9ac\uad50\ud68c \uc608\ubc30\"], accommodation: \"\ub274\uc800\uc9c0\" },\n { day: 15, date: \"9\uc6d4 11\uc77c\", location: \"\ub9e8\ud558\ud0c4\", city: \"Manhattan\", lat: 40.7831, lng: -73.9712, activities: [\"\ub9e8\ud558\ud0c4 \ud22c\uc5b4 1\"], accommodation: \"\ub274\uc800\uc9c0\" },\n { day: 16, date: \"9\uc6d4 12\uc77c\", location: \"\ub9e8\ud558\ud0c4\", city: \"Manhattan\", lat: 40.7831, lng: -73.9712, activities: [\"\ub9e8\ud558\ud0c4 \ud22c\uc5b4 2\", \"\uba54\uce20 \uc57c\uad6c\uacbd\uae30\", \"\uc544\ud39c\uc824\ub7ec\uad50\ud68c\"], accommodation: \"\ub274\uc695\/\ub274\uc800\uc9c0\" },\n { day: 17, date: \"9\uc6d4 13\uc77c\", location: \"\ub9e8\ud558\ud0c4\", city: \"Manhattan\", lat: 40.7831, lng: -73.9712, activities: [\"\ub9e8\ud558\ud0c4 \ud22c\uc5b4 3\", \"\ub9e8\ud558\ud0c4\uc131\uad50\ud68c\", \"\uc804\ub3c4 \uacbd\ud5d8\"], accommodation: \"\ub274\uc695\/\ub274\uc800\uc9c0\" },\n { day: 18, date: \"9\uc6d4 14\uc77c\", location: \"\ub871\uc544\uc77c\ub79c\ub4dc\", city: \"Long Island\", lat: 40.7891, lng: -73.1350, activities: [\"Times Square \uc608\ubc30\", \"State Park \ubc29\ubb38\", \"\ud574\uc218\uc695 & BBQ\"], accommodation: \"\ub274\uc695\/\ub274\uc800\uc9c0\" },\n { day: 19, date: \"9\uc6d4 15\uc77c\", location: \"\ub9e8\ud558\ud0c4\", city: \"Manhattan\", lat: 40.7831, lng: -73.9712, activities: [\"\ub9e8\ud558\ud0c4 \ud22c\uc5b4 4\"], accommodation: \"\ub274\uc695\/\ub274\uc800\uc9c0\" },\n { day: 20, date: \"9\uc6d4 16\uc77c\", location: \"\ube0c\ub8e8\ud074\ub9b0\", city: \"Brooklyn\", lat: 40.6782, lng: -73.9442, activities: [\"\ub871\uc544\uc77c\ub79c\ub4dc \ud22c\uc5b4\", \"21\ub2e4\uc6b0\ub4dc\uad50\ud68c\", \"\ub9c8\ud2b8 \ubc84\uc2a4\ud0b9\", \"Brooklyn \uae30\ub3c4\ud68c\"], accommodation: \"\ub274\uc695\/\ub274\uc800\uc9c0\" },\n { day: 21, date: \"9\uc6d4 17\uc77c\", location: \"\ub79c\uce74\uc2a4\ud130\", city: \"Lancaster\", lat: 40.0379, lng: -76.3055, activities: [\"Sight & Sound\", \"Amish Village\", \"Tabernacle\"], accommodation: \"\ub274\uc695\/\ub274\uc800\uc9c0\" },\n { day: 22, date: \"9\uc6d4 18\uc77c\", location: \"\ub274\uc800\uc9c0\", city: \"Newark\", lat: 40.7357, lng: -74.1724, activities: [\"\ub9e8\ud558\ud0c4 \ud22c\uc5b4 5\", \"\uc57c\uacbd \ud22c\uc5b4\", \"EWR \uacf5\ud56d \ucd9c\ubc1c\"], accommodation: \"\ucd9c\ubc1c\" }\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\n map = L.map('map').setView([41.5, -74.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 class=\"popup-accommodation\">\uc219\uc18c: ${location.accommodation}<\/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 class=\"popup-accommodation\">\uc219\uc18c: ${location.accommodation}<\/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 \/\/ \ub9e8 \uc704\ub85c \uc2a4\ud06c\ub864\n function scrollToTop() {\n window.scrollTo({ top: 0, behavior: 'smooth' });\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>\uc2e0\uc131\ud559\uae30\ub3c5\ud559\uad50 Vision Trip \ub3d9\uc120 \uc9c0\ub3c4 \uc2e0\uc131\ud559\uae30\ub3c5\ud559\uad50 Vision Trip 22\uc77c\uac04\uc758 \ubbf8\uad6d \ub3d9\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 \ubc29\ubb38\uc9c0 \uacbd\ub85c…<\/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-2142","page","type-page","status-publish","hentry"],"ticketed":false,"_links":{"self":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2142","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=2142"}],"version-history":[{"count":0,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2142\/revisions"}],"wp:attachment":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/media?parent=2142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}