Upload app.py

app.py

@@ -0,0 +1,477 @@
+import re
+import streamlit as st
+import folium
+from folium import Marker, PolyLine, DivIcon
+from geopy.distance import geodesic
+import requests
+import polyline
+import math
+import streamlit.components.v1 as components
+from streamlit_folium import st_folium  # Cài đặt: pip install streamlit-folium
+
+# Lệnh này phải là dòng đầu tiên trong script của bạn
+st.set_page_config(layout="wide", page_title="Làm Map cho Chị")
+
+# Thêm FontAwesome CSS để hiển thị icon
+st.markdown(
+    '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">',
+    unsafe_allow_html=True,
+)
+
+# -----------------------------
+# Hàm mở rộng link và trích xuất tọa độ từ URL
+# -----------------------------
+def extract_coords_from_url(url):
+    try:
+        # Mở URL để lấy URL đích sau redirect
+        resp = requests.get(url, allow_redirects=True, timeout=5)
+        final_url = resp.url
+        # Tìm kiếm tọa độ theo mẫu "@lat,lon"
+        match = re.search(r'@([\d\.\-]+),([\d\.\-]+)', final_url)
+        if match:
+            return (float(match.group(1)), float(match.group(2)))
+        # Nếu không tìm thấy, thử mẫu "!3dlat!4dlon"
+        match2 = re.search(r'!3d([\d\.\-]+)!4d([\d\.\-]+)', final_url)
+        if match2:
+            return (float(match2.group(1)), float(match2.group(2)))
+    except Exception as e:
+        st.error("Lỗi khi mở link: " + str(e))
+    return None
+
+
+# -----------------------------
+# Danh sách icon (FontAwesome)
+# -----------------------------
+icon_list = [
+    "glass", "music", "search", "envelope-o", "heart", "star", "star-o", "user",
+    "film", "th-large", "th", "th-list", "check", "times", "search-plus", "search-minus",
+    "power-off", "signal", "cog", "trash-o", "home", "file-o", "clock-o", "road", "download",
+    "arrow-circle-o-down", "arrow-circle-o-up", "inbox", "play-circle-o", "repeat", "refresh",
+    "list-alt", "lock", "flag", "headphones", "volume-off", "volume-down", "volume-up",
+    "qrcode", "barcode", "tag", "tags", "book", "bookmark", "print", "camera", "font", "bold",
+    "italic", "text-height", "text-width", "align-left", "align-center", "align-right",
+    "align-justify", "list", "outdent", "indent", "video-camera", "picture-o", "pencil",
+    "map-marker", "adjust", "tint", "pencil-square-o", "share", "check-square-o", "arrows",
+    "step-backward", "fast-backward", "backward", "play", "pause", "stop", "forward",
+    "fast-forward", "step-forward", "eject", "chevron-left", "chevron-right", "plus-circle",
+    "minus-circle", "times-circle", "check-circle", "question-circle", "info-circle",
+    "crosshairs", "times-circle-o", "check-circle-o", "ban", "arrow-left", "arrow-right",
+    "arrow-up", "arrow-down", "share-square-o", "expand", "compress", "plus", "minus",
+    "asterisk", "exclamation-circle", "gift", "leaf", "fire", "eye", "eye-slash",
+    "exclamation-triangle", "plane", "calendar", "random", "comment", "magnet", "chevron-up",
+    "chevron-down", "retweet", "shopping-cart", "folder", "folder-open", "arrows-v",
+    "arrows-h", "bar-chart", "twitter-square", "facebook-square", "camera-retro", "key",
+    "cogs", "comments"
+]
+
+# -----------------------------
+# Khởi tạo dữ liệu địa chỉ mẫu trong session_state
+# -----------------------------
+if "addresses" not in st.session_state:
+    st.session_state.addresses = [
+        {
+            "name": "11 Trương Hữu Hoàng",
+            "latitude": 16.491013,
+            "longitude": 107.622923,
+            "marker_icon": "home",
+            "route_color": "#FF4500",
+            "is_home": True,
+            "visible": True
+        },
+        {
+            "name": "KQH Vinh Vệ",
+            "latitude": 16.493565250557587,
+            "longitude": 107.6274186,
+            "marker_icon": "map-marker",
+            "route_color": "#8A2BE2",
+            "is_home": False,
+            "visible": True
+        },
+        {
+            "name": "UBND Xã Phú Mỹ",
+            "latitude": 16.49506178728241,
+            "longitude": 107.6298651576717,
+            "marker_icon": "building",
+            "route_color": "#1E90FF",
+            "is_home": False,
+            "visible": True
+        },
+        {
+            "name": "KQH Chiết Bi",
+            "latitude": 16.49102143751169,
+            "longitude": 107.60960879999999,
+            "marker_icon": "map-marker",
+            "route_color": "#8A2BE2",
+            "is_home": False,
+            "visible": True
+        },
+        {
+            "name": "Trường Tiểu học Phú Thượng",
+            "latitude": 16.491607862678077,
+            "longitude": 107.60640322883584,
+            "marker_icon": "school",
+            "route_color": "#32CD32",
+            "is_home": False,
+            "visible": True
+        },
+        {
+            "name": "Trường THCS Phú Thượng",
+            "latitude": 16.491657525074864,
+            "longitude": 107.60404525582075,
+            "marker_icon": "school",
+            "route_color": "#0000FF",
+            "is_home": False,
+            "visible": True
+        },
+        {
+            "name": "Trường UKA - UK Academy Huế",
+            "latitude": 16.493026837831497,
+            "longitude": 107.60477552883586,
+            "marker_icon": "graduation-cap",
+            "route_color": "#FF8C00",
+            "is_home": False,
+            "visible": True
+        },
+        {
+            "name": "Trường Nghiệp Vụ Thuế",
+            "latitude": 16.4956182,
+            "longitude": 107.60249869999998,
+            "marker_icon": "graduation-cap",
+            "route_color": "#800080",
+            "is_home": False,
+            "visible": True
+        },
+        {
+            "name": "Trường Tiểu học Thuỷ Vân",
+            "latitude": 16.489429637257857,
+            "longitude": 107.62618450000001,
+            "marker_icon": "school",
+            "route_color": "#32CD32",
+            "is_home": False,
+            "visible": True
+        },
+        {
+            "name": "Chợ Hôm (Dạ Lê Chánh)",
+            "latitude": 16.490582399855406,
+            "longitude": 107.6265241,
+            "marker_icon": "shopping-cart",
+            "route_color": "#FFA500",
+            "is_home": False,
+            "visible": True
+        },
+        {
+            "name": "UBND Phường Thuỷ Vân",
+            "latitude": 16.48642452451863,
+            "longitude": 107.6235033,
+            "marker_icon": "building",
+            "route_color": "#1E90FF",
+            "is_home": False,
+            "visible": True
+        },
+        {
+            "name": "Trường THCS Phú Mỹ",
+            "latitude": 16.494371725363457,
+            "longitude": 107.62332647116415,
+            "marker_icon": "school",
+            "route_color": "#0000FF",
+            "is_home": False,
+            "visible": True
+        }
+    ]
+else:
+    for addr in st.session_state.addresses:
+        if "visible" not in addr:
+            addr["visible"] = True
+
+# -----------------------------
+# Sidebar: Cài đặt kích thước icon và text
+# -----------------------------
+st.sidebar.subheader("Cài đặt kích thước")
+home_icon_size = st.sidebar.slider("Kích thước icon chính (Home)", min_value=16, max_value=48, value=28)
+marker_icon_size = st.sidebar.slider("Kích thước icon địa chỉ (khác)", min_value=12, max_value=32, value=16)
+home_text_size = st.sidebar.slider("Kích thước chữ địa chỉ Home", min_value=12, max_value=36, value=24)
+marker_text_size = st.sidebar.slider("Kích thước chữ địa chỉ (khác)", min_value=10, max_value=24, value=16)
+
+# -----------------------------
+# Sidebar: Chọn chế độ hiển thị đường đi
+# -----------------------------
+route_mode = st.sidebar.radio(
+    "Chọn chế độ hiển thị đường đi",
+    ("Tuyến đường ngắn nhất", "Đường thẳng"),
+    index=1
+)
+
+# Chọn icon và hiển thị preview để cập nhật ngay
+selected_icon = st.sidebar.selectbox("Chọn icon cho địa chỉ", options=icon_list,
+                                      index=icon_list.index("map-marker") if "map-marker" in icon_list else 0)
+st.sidebar.markdown(
+    f"<div style='font-size:15px; margin-bottom:10px;'>Xem trước icon: <i class='fa fa-{selected_icon}'></i></div>",
+    unsafe_allow_html=True
+)
+
+# -----------------------------
+# Sidebar: Form thêm địa chỉ mới với live preview icon
+# -----------------------------
+st.sidebar.header("Thêm Địa Chỉ Mới")
+
+# Nhập link Google Map (có thể là link rút gọn, ví dụ: https://maps.app.goo.gl/oMS72uF8bP2b6gmbA)
+google_map_link = st.sidebar.text_input("Nhập tọa độ từ link Google Map", value="", placeholder="https://maps.app.goo.gl/oMS72uF8bP2b6gmbA")
+
+if google_map_link:
+    coords = extract_coords_from_url(google_map_link)
+    if coords:
+        st.session_state.selected_coords = coords
+        st.sidebar.success(f"Tọa độ được trích xuất: {coords[0]}, {coords[1]}")
+    else:
+        st.sidebar.error("Không thể trích xuất tọa độ từ link này.")
+
+# Sử dụng tọa độ đã chọn làm giá trị mặc định cho vĩ độ và kinh độ
+default_coords = st.session_state.get("selected_coords", (16.460000, 107.580000))
+with st.sidebar.form("add_address_form"):
+    name = st.text_input("Tên địa chỉ")
+    latitude = st.number_input("Vĩ độ", value=default_coords[0], format="%.6f")
+    longitude = st.number_input("Kinh độ", value=default_coords[1], format="%.6f")
+    route_color = st.color_picker("Chọn màu cho đường đi", value="#3388ff")
+    is_home = st.checkbox("Đặt làm địa chỉ chính (Home)", value=False)
+    submitted = st.form_submit_button("Thêm địa chỉ")
+    if submitted:
+        if not name:
+            st.sidebar.error("Vui lòng nhập tên địa chỉ!")
+        else:
+            if is_home:
+                for addr in st.session_state.addresses:
+                    addr["is_home"] = False
+            new_address = {
+                "name": name,
+                "latitude": latitude,
+                "longitude": longitude,
+                "marker_icon": selected_icon,
+                "route_color": route_color,
+                "is_home": is_home,
+                "visible": True
+            }
+            st.session_state.addresses.append(new_address)
+            st.sidebar.success("Đã thêm địa chỉ mới.")
+
+# -----------------------------
+# Sidebar: Danh sách địa chỉ (có khả năng xóa và ẩn/hiện)
+# -----------------------------
+st.sidebar.header("Danh sách địa chỉ")
+for idx, addr in list(enumerate(st.session_state.addresses)):
+    label = f"{addr['name']} ({'Home' if addr['is_home'] else 'Địa chỉ'})"
+    st.sidebar.write(label)
+    col1, col2 = st.sidebar.columns(2)
+    if col1.button("Xóa", key=f"delete_{idx}"):
+        st.session_state.addresses.pop(idx)
+        st.experimental_rerun()
+    toggle_label = "Ẩn" if addr.get("visible", True) else "Hiện"
+    if col2.button(toggle_label, key=f"toggle_{idx}"):
+        st.session_state.addresses[idx]["visible"] = not addr.get("visible", True)
+        st.experimental_rerun()
+
+# -----------------------------
+# Xác định địa chỉ Home (nếu không có thì chọn địa chỉ đầu tiên)
+# -----------------------------
+if st.session_state.addresses:
+    home_address = next((addr for addr in st.session_state.addresses if addr["is_home"]),
+                        st.session_state.addresses[0])
+else:
+    st.error("Chưa có địa chỉ nào. Vui lòng thêm địa chỉ.")
+    st.stop()
+
+home_coords = [home_address["latitude"], home_address["longitude"]]
+
+# -----------------------------
+# Hàm lấy lộ trình từ API OSRM (cho tuyến đường ngắn nhất)
+# -----------------------------
+def get_route(start, end):
+    url = f"http://router.project-osrm.org/route/v1/driving/{start[1]},{start[0]};{end[1]},{end[0]}?overview=full&geometries=polyline"
+    response = requests.get(url)
+    if response.ok:
+        data = response.json()
+        if data["routes"]:
+            route_geometry = data["routes"][0]["geometry"]
+            return polyline.decode(route_geometry)
+    return None
+
+# -----------------------------
+# Hàm tính vector offset (chuyển offset từ mét sang độ)
+# -----------------------------
+def compute_offset_vector(home, dest, offset_meters):
+    lat1, lon1 = home
+    lat2, lon2 = dest
+    mean_lat = math.radians((lat1 + lat2) / 2)
+    meters_per_deg_lat = 111111
+    meters_per_deg_lon = 111111 * math.cos(mean_lat)
+
+    d_lat = (lat2 - lat1) * meters_per_deg_lat
+    d_lon = (lon2 - lon1) * meters_per_deg_lon
+
+    perp_x = -d_lat
+    perp_y = d_lon
+    norm = math.sqrt(perp_x ** 2 + perp_y ** 2)
+    if norm == 0:
+        return (0, 0)
+    unit_x = perp_x / norm
+    unit_y = perp_y / norm
+    offset_x = unit_x * offset_meters
+    offset_y = unit_y * offset_meters
+    offset_lat = offset_y / meters_per_deg_lat
+    offset_lon = offset_x / meters_per_deg_lon
+    return (offset_lat, offset_lon)
+
+def apply_offset_to_polyline(polyline_pts, offset_meters, home, dest):
+    offset = compute_offset_vector(home, dest, offset_meters)
+    return [[pt[0] + offset[0], pt[1] + offset[1]] for pt in polyline_pts]
+
+# -----------------------------
+# Xử lý các địa chỉ có tọa độ gần nhau để tránh vẽ đường trùng lặp
+# -----------------------------
+def get_overlap_key(addr):
+    return (round(addr["latitude"], 4), round(addr["longitude"], 4))
+
+overlap_groups = {}
+for idx, addr in enumerate(st.session_state.addresses):
+    if not addr["is_home"]:
+        key = get_overlap_key(addr)
+        overlap_groups.setdefault(key, []).append(idx)
+
+offset_mapping = {}
+for group in overlap_groups.values():
+    n = len(group)
+    for j, addr_index in enumerate(group):
+        offset_mapping[addr_index] = (j - (n - 1) / 2) * 10
+
+# -----------------------------
+# Tạo bản đồ với Folium hiển thị marker và tuyến đường
+# -----------------------------
+m = folium.Map(location=home_coords, zoom_start=14, tiles="CartoDB Positron")
+
+# Vẽ marker cho từng địa chỉ (chỉ những địa chỉ visible)
+for idx, addr in enumerate(st.session_state.addresses):
+    if not addr.get("visible", True):
+        continue
+    coords = [addr["latitude"], addr["longitude"]]
+    if addr["is_home"]:
+        icon_html = f'''
+        <div style="display: inline-flex; align-items: center; font-family: 'Lora', serif;">
+          <div style="background: white; border: 2px solid {addr["route_color"]}; border-radius: 50%; padding: 8px;">
+            <i class="fa fa-{addr["marker_icon"]}" style="font-size:{home_icon_size}px; color:{addr["route_color"]};"></i>
+          </div>
+          <div style="margin-left: 8px; font-size:{home_text_size}px; font-weight:bold; color:black; white-space: nowrap;">
+            {addr["name"]}
+          </div>
+        </div>
+        '''
+        Marker(
+            location=coords,
+            tooltip=addr["name"],
+            icon=DivIcon(html=icon_html),
+            draggable=True
+        ).add_to(m)
+    else:
+        icon_html = f'''
+        <div style="text-align:center; font-family: 'Lora', serif;">
+          <div style="background: white; border: 2px solid {addr["route_color"]}; border-radius: 50%; display: inline-block; padding: 8px;">
+            <i class="fa fa-{addr["marker_icon"]}" style="font-size:{marker_icon_size}px; color:{addr["route_color"]};"></i>
+          </div>
+          <div style="margin-top:4px; font-size:{marker_text_size}px; color:black; white-space: nowrap;">
+            {addr["name"]}
+          </div>
+        </div>
+        '''
+        Marker(
+            location=coords,
+            tooltip=addr["name"],
+            icon=DivIcon(html=icon_html),
+            draggable=True
+        ).add_to(m)
+
+# Vẽ tuyến đường từ Home đến các địa chỉ khác (chỉ với địa chỉ visible)
+for idx, addr in enumerate(st.session_state.addresses):
+    if addr["is_home"] or not addr.get("visible", True):
+        continue
+    dest_coords = [addr["latitude"], addr["longitude"]]
+    offset_m = offset_mapping.get(idx, 0)
+    if route_mode == "Tuyến đường ngắn nhất":
+        route_pts = get_route(home_coords, dest_coords)
+        if route_pts:
+            if offset_m != 0:
+                route_pts = apply_offset_to_polyline(route_pts, offset_m, home_coords, dest_coords)
+            distance = geodesic(home_coords, dest_coords).kilometers
+            popup_text = f"{addr['name']} - {distance:.1f} Km"
+            PolyLine(
+                locations=route_pts,
+                color=addr["route_color"],
+                weight=3,
+                opacity=0.5,
+                popup=popup_text
+            ).add_to(m)
+            mid_point = route_pts[len(route_pts) // 2]
+            Marker(
+                location=mid_point,
+                draggable=True,
+                icon=DivIcon(
+                    html=f'''<div style="font-family: 'Lora', serif; font-size:12pt; color:{addr["route_color"]}; font-weight:bold;
+                             background-color:rgba(255,255,255,0.7); padding:2px 4px; border-radius:4px; text-align:center; white-space: nowrap;">
+                             {distance:.1f} Km
+                             </div>'''
+                )
+            ).add_to(m)
+    elif route_mode == "Đường thẳng":
+        route_pts = [home_coords, dest_coords]
+        if offset_m != 0:
+            route_pts = apply_offset_to_polyline(route_pts, offset_m, home_coords, dest_coords)
+        distance = geodesic(home_coords, dest_coords).kilometers
+        popup_text = f"{addr['name']} - {distance:.1f} Km"
+        PolyLine(
+            locations=route_pts,
+            color=addr["route_color"],
+            weight=3,
+            opacity=0.5,
+            popup=popup_text
+        ).add_to(m)
+        mid_point = [(home_coords[0] + dest_coords[0]) / 2, (home_coords[1] + dest_coords[1]) / 2]
+        Marker(
+            location=mid_point,
+            draggable=True,
+            icon=DivIcon(
+                html=f'''<div style="font-family: 'Lora', serif; font-size:12pt; color:{addr["route_color"]}; font-weight:bold;
+                         background-color:rgba(255,255,255,0.7); padding:2px 4px; border-radius:4px; text-align:center; white-space: nowrap;">
+                         {distance:.1f} Km
+                         </div>'''
+            )
+        ).add_to(m)
+
+# -----------------------------
+# Render map chính
+# -----------------------------
+map_html = m.get_root().render()
+full_html = f"""
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet">
+    <style>
+      html, body {{
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        width: 100%;
+        font-family: 'Lora', serif;
+      }}
+      #map_container {{
+        height: 100vh;
+        width: 100vw;
+      }}
+    </style>
+  </head>
+  <body>
+    <div id="map_container">
+      {map_html}
+    </div>
+  </body>
+</html>
+"""
+
+components.html(full_html, height=800, scrolling=True)