From c08aad3f68526ffbe03f5f1cb89ace0886950cf7 Mon Sep 17 00:00:00 2001
From: locphamtran <tranloclqd@gmail.com>
Date: Sat, 13 Jun 2026 17:23:42 +0700
Subject: [PATCH] =?UTF-8?q?Click=20v=C3=A0o=20kh=C3=A1m=20ph=C3=A1=20?=
 =?UTF-8?q?=C4=91=E1=BB=8Ba=20=C4=91i=E1=BB=83m=20=C4=91=E1=BB=83=20di=20c?=
 =?UTF-8?q?huy=E1=BB=83n=20=C4=91=E1=BA=BFn=20b=E1=BA=A3n=20=C4=91?=
 =?UTF-8?q?=E1=BB=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.tsx         |  1 +
 ExploreMap.tsx  | 14 +++++++++++++-
 LandingPage.tsx |  2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/App.tsx b/App.tsx
index a88873f..698149f 100644
--- a/App.tsx
+++ b/App.tsx
@@ -14,6 +14,7 @@ const App = () => {
         <LandingPage 
           onContinue={() => setView('explore')} 
           onGoToSignup={() => setView('signup')} 
+          onGoToMap={() => setView('explore')}
         />
       )}
 
diff --git a/ExploreMap.tsx b/ExploreMap.tsx
index 522bd35..d262e15 100644
--- a/ExploreMap.tsx
+++ b/ExploreMap.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import { useTourStore } from './useTourStore';
@@ -14,6 +14,15 @@ const DefaultIcon = L.icon({
 });
 L.Marker.prototype.options.icon = DefaultIcon;
 
+// Component Helper để cập nhật tâm bản đồ khi vị trí người dùng thay đổi
+function RecenterMap({ position }: { position: [number, number] }) {
+  const map = useMap();
+  useEffect(() => {
+    map.setView(position, map.getZoom());
+  }, [position, map]);
+  return null;
+}
+
 export const ExploreMap = ({ onBack }: { onBack: () => void }) => {
   const { publicTours, fetchPublicTours } = useTourStore();
   const [userPos, setUserPos] = useState<[number, number]>([10.7769, 106.7009]); // Mặc định TP.HCM
@@ -50,6 +59,9 @@ export const ExploreMap = ({ onBack }: { onBack: () => void }) => {
           attribution='&copy; OpenStreetMap contributors'
         />
         
+        {/* Tự động di chuyển bản đồ đến vị trí người dùng khi tìm thấy tọa độ */}
+        <RecenterMap position={userPos} />
+        
         {publicTours.map((tour) => {
           const place = tour.legs?.[0]?.places?.[0];
           if (!place) return null;
diff --git a/LandingPage.tsx b/LandingPage.tsx
index b455a74..e51d686 100644
--- a/LandingPage.tsx
+++ b/LandingPage.tsx
@@ -83,7 +83,7 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
               className="flex items-center justify-center gap-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-4 px-8 rounded-2xl transition-all shadow-lg shadow-indigo-100"
             >
               <MapIcon className="w-5 h-5" />
-              Xem Bản đồ Công cộng
+              Khám phá các hành trình du lịch
             </button>
 
             <div className="grid grid-cols-2 gap-4">