tapquest-ui-yeulamvietnam 2.0.0

package/example/src/View/MapView/index.tsx

@@ -0,0 +1,1325 @@
+import React, { useState, useEffect, useRef, useMemo, use } from 'react';
+import useInteractiveMap from '../../../../src/hooks/useInteractiveMap';
+import useHTMLToCanvas from '../../../../src/hooks/useHTMLToCanvas';
+import styled from 'styled-components';
+
+// Updated styled components for better screen fitting and overflow handling
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 80vh;
+  overflow: hidden;
+  
+  @media (min-width: 768px) {
+    flex-direction: row;
+  }
+`;
+
+const MapContainer = styled.div`
+  width: 100%;
+  height: 30vh;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+  
+  @media (min-width: 768px) {
+    flex: 1;
+    height: 100%;
+    border-radius: 0;
+    border: none;
+    border-right: 1px solid #e0e0e0;
+  }
+`;
+
+const DebugPanel = styled.div`
+  width: 100%;
+  height: 50vh;
+  padding: 16px;
+  background-color: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow-y: auto;
+  
+  @media (min-width: 768px) {
+    width: 350px;
+    height: 100%;
+    max-height: 100%;
+  }
+`;
+
+const DebugPanelContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding-bottom: 20px;
+`;
+
+const FormGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const Label = styled.label`
+  font-size: 14px;
+  font-weight: 600;
+  color: black;
+  text-align: left;
+`;
+
+const Input = styled.input`
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 100%;
+`;
+
+const Button = styled.button`
+  padding: 10px 16px;
+  background-color: #4a90e2;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: background-color 0.2s;
+  width: 100%;
+
+  &:hover {
+    background-color: #3a80d2;
+  }
+
+  &:disabled {
+    background-color: #cccccc;
+    cursor: not-allowed;
+  }
+`;
+
+const Select = styled.select`
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 100%;
+`;
+
+const Divider = styled.hr`
+  border: 0;
+  height: 1px;
+  background-color: #e0e0e0;
+  margin: 8px 0;
+  width: 100%;
+`;
+
+const ColorInputContainer = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 8px;
+`;
+
+const ColorPickerWrapper = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+const ColorInput = styled.input`
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 40px;
+  padding: 0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: pointer;
+  background-color: transparent;
+
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: 3px;
+  }
+  &::-moz-color-swatch {
+    border: none;
+    border-radius: 3px;
+  }
+`;
+
+const HexInput = styled.input`
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 100px;
+  font-family: monospace;
+  text-transform: uppercase;
+`;
+
+const SectionTitle = styled.h2`
+  font-size: 18px;
+  margin: 0;
+  padding: 0;
+`;
+
+const ButtonGroup = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  width: 100%;
+  
+  @media (max-width: 767px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+// Add a new section for marker controls
+const MarkerSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+`;
+
+const CoordinateInputs = styled.div`
+  display: flex;
+  gap: 8px;
+  width: 100%;
+`;
+
+const CoordinateInput = styled.input`
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 100%;
+`;
+
+const LabelSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+`;
+
+const LabelOptions = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  width: 100%;
+`;
+
+const PreviewImage = styled.div`
+  width: 100%;
+  margin-top: 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  overflow: hidden;
+  
+  img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+`;
+
+// List of Vietnam provinces for the dropdown
+const vietnamProvinces = [
+  { id: 'ha-noi', name: 'Hà Nội' },
+  { id: 'ho-chi-minh', name: 'Hồ Chí Minh' },
+  { id: 'da-nang', name: 'Đà Nẵng' },
+  { id: 'hai-phong', name: 'Hải Phòng' },
+  { id: 'can-tho', name: 'Cần Thơ' },
+  { id: 'an-giang', name: 'An Giang' },
+  { id: 'ba-ria-vung-tau', name: 'Bà Rịa - Vũng Tàu' },
+  { id: 'bac-giang', name: 'Bắc Giang' },
+  { id: 'bac-kan', name: 'Bắc Kạn' },
+  { id: 'bac-lieu', name: 'Bạc Liêu' },
+  { id: 'bac-ninh', name: 'Bắc Ninh' },
+  { id: 'ben-tre', name: 'Bến Tre' },
+  { id: 'binh-dinh', name: 'Bình Định' },
+  { id: 'binh-duong', name: 'Bình Dương' },
+  { id: 'binh-phuoc', name: 'Bình Phước' },
+  { id: 'binh-thuan', name: 'Bình Thuận' },
+  { id: 'ca-mau', name: 'Cà Mau' },
+  { id: 'cao-bang', name: 'Cao Bằng' },
+  { id: 'dak-lak', name: 'Đắk Lắk' },
+  { id: 'dak-nong', name: 'Đắk Nông' },
+  { id: 'dien-bien', name: 'Điện Biên' },
+  { id: 'dong-nai', name: 'Đồng Nai' },
+  { id: 'dong-thap', name: 'Đồng Tháp' },
+  { id: 'gia-lai', name: 'Gia Lai' },
+  { id: 'ha-giang', name: 'Hà Giang' },
+  { id: 'ha-nam', name: 'Hà Nam' },
+  { id: 'ha-tinh', name: 'Hà Tĩnh' },
+  { id: 'hai-duong', name: 'Hải Dương' },
+  { id: 'hau-giang', name: 'Hậu Giang' },
+  { id: 'hoa-binh', name: 'Hòa Bình' },
+  { id: 'hung-yen', name: 'Hưng Yên' },
+  { id: 'khanh-hoa', name: 'Khánh Hòa' },
+  { id: 'kien-giang', name: 'Kiên Giang' },
+  { id: 'kon-tum', name: 'Kon Tum' },
+  { id: 'lai-chau', name: 'Lai Châu' },
+  { id: 'lam-dong', name: 'Lâm Đồng' },
+  { id: 'lang-son', name: 'Lạng Sơn' },
+  { id: 'lao-cai', name: 'Lào Cai' },
+  { id: 'long-an', name: 'Long An' },
+  { id: 'nam-dinh', name: 'Nam Định' },
+  { id: 'nghe-an', name: 'Nghệ An' },
+  { id: 'ninh-binh', name: 'Ninh Bình' },
+  { id: 'ninh-thuan', name: 'Ninh Thuận' },
+  { id: 'phu-tho', name: 'Phú Thọ' },
+  { id: 'phu-yen', name: 'Phú Yên' },
+  { id: 'quang-binh', name: 'Quảng Bình' },
+  { id: 'quang-nam', name: 'Quảng Nam' },
+  { id: 'quang-ngai', name: 'Quảng Ngãi' },
+  { id: 'quang-ninh', name: 'Quảng Ninh' },
+  { id: 'quang-tri', name: 'Quảng Trị' },
+  { id: 'soc-trang', name: 'Sóc Trăng' },
+  { id: 'son-la', name: 'Sơn La' },
+  { id: 'tay-ninh', name: 'Tây Ninh' },
+  { id: 'thai-binh', name: 'Thái Bình' },
+  { id: 'thai-nguyen', name: 'Thái Nguyên' },
+  { id: 'thanh-hoa', name: 'Thanh Hóa' },
+  { id: 'thua-thien-hue', name: 'Thừa Thiên Huế' },
+  { id: 'tien-giang', name: 'Tiền Giang' },
+  { id: 'tra-vinh', name: 'Trà Vinh' },
+  { id: 'tuyen-quang', name: 'Tuyên Quang' },
+  { id: 'vinh-long', name: 'Vĩnh Long' },
+  { id: 'vinh-phuc', name: 'Vĩnh Phúc' },
+  { id: 'yen-bai', name: 'Yên Bái' },
+];
+
+// List of Vietnam regions for the dropdown
+const vietnamRegions = [
+  { id: 'dong-bang-song-hong', name: 'Đồng bằng sông Hồng' },
+  { id: 'tay-bac-bo', name: 'Tây Bắc Bộ' },
+  { id: 'dong-bac-bo', name: 'Đông Bắc Bộ' },
+  { id: 'bac-trung-bo', name: 'Bắc Trung Bộ' },
+  { id: 'duyen-hai-nam-trung-bo', name: 'Duyên hải Nam Trung Bộ' },
+  { id: 'tay-nguyen', name: 'Tây Nguyên' },
+  { id: 'dong-nam-bo', name: 'Đông Nam Bộ' },
+  { id: 'tay-nam-bo', name: 'Tây Nam Bộ' },
+];
+
+const MapView: React.FC = () => {
+
+  const [svgImage, setSvgImage] = useState<string | null>(null);
+
+  const [svg2PngImage, setSvg2PngImage] = useState<string | null>(null);
+
+  const [templateComponent, setTemplateComponent] = useState<React.ReactNode | null>(null);
+
+  // State for map configuration
+  const [containerWidth, setContainerWidth] = useState('100%');
+  const [containerHeight, setContainerHeight] = useState('100%');
+  const [mapCreated, setMapCreated] = useState(false);
+  const [mapKey, setMapKey] = useState(0); // Key for forcing re-render
+
+  // State for province coloring
+  const [selectedProvince, setSelectedProvince] = useState('');
+  const [selectedRegion, setSelectedRegion] = useState('');
+  const [colorHex, setColorHex] = useState('#F4E4E4');
+
+  // Reference to the map methods
+  const mapMethodsRef = useRef<any>(null);
+
+  // Check if we're on mobile
+  const [isMobile, setIsMobile] = useState(false);
+
+  // Add state for marker functionality
+  const [markerX, setMarkerX] = useState<number>(100);
+  const [markerY, setMarkerY] = useState<number>(100);
+  const [markerCustomX, setMarkerCustomX] = useState<number>(100);
+  const [markerCustomY, setMarkerCustomY] = useState<number>(100);
+  const [markerId, setMarkerId] = useState<string>('marker-1');
+  const [markers, setMarkers] = useState<string[]>([]);
+  const [markerWidth, setMarkerWidth] = useState<number>(10);
+  const [markerHeight, setMarkerHeight] = useState<number>(10);
+  const [markerSvg, setMarkerSvg] = useState<string>(`<svg width="100%" height="100%" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="9.10644" height="9.10644" fill="white" fillOpacity="0.01" style="mix-blend-mode:multiply"/>
+      <path d="M4.55319 0.569153C3.72329 0.570162 2.92766 0.900289 2.34082 1.48712C1.75399 2.07396 1.42386 2.86958 1.42285 3.69949C1.42187 4.37771 1.64344 5.03752 2.05356 5.57769C2.05356 5.57769 2.13893 5.68996 2.15265 5.70624L4.55319 8.53729L6.95473 5.70501C6.96737 5.68985 7.05283 5.57758 7.05283 5.57758L7.05325 5.5769C7.46313 5.03693 7.68454 4.3774 7.68353 3.69949C7.68252 2.86958 7.3524 2.07396 6.76556 1.48712C6.17873 0.900289 5.3831 0.570162 4.55319 0.569153ZM4.55319 4.8378C4.32806 4.8378 4.10798 4.77104 3.92078 4.64596C3.73359 4.52088 3.58769 4.3431 3.50154 4.1351C3.41538 3.9271 3.39284 3.69823 3.43676 3.47742C3.48068 3.25661 3.5891 3.05378 3.74829 2.89459C3.90748 2.73539 4.11031 2.62698 4.33112 2.58306C4.55193 2.53914 4.78081 2.56168 4.9888 2.64783C5.1968 2.73399 5.37458 2.87989 5.49966 3.06708C5.62474 3.25428 5.6915 3.47436 5.6915 3.69949C5.69116 4.00128 5.57112 4.29062 5.35772 4.50402C5.14432 4.71742 4.85499 4.83746 4.55319 4.8378Z" fill="#A71A1A"/>
+    </svg>`);
+  const [selectedProvinceForMarker, setSelectedProvinceForMarker] = useState<string>('');
+
+  // Add state for label settings
+  const [labelFontSize, setLabelFontSize] = useState<number>(10);
+  const [labelColor, setLabelColor] = useState<string>('#000000');
+  const [labelBgColor, setLabelBgColor] = useState<string>('#ffffff');
+  const [labelBgOpacity, setLabelBgOpacity] = useState<number>(70);
+
+  // Reference to store the remove labels function
+  const removeLabelsRef = useRef<(() => void) | null>(null);
+
+  // Add state for image preview
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [isGeneratingImage, setIsGeneratingImage] = useState(false);
+
+  // Reference to the map container
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+
+  // Initialize HTML to Canvas hook
+  const { generateCanvas } = useHTMLToCanvas();
+
+  useEffect(() => {
+    const checkIfMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    // Initial check
+    checkIfMobile();
+
+    // Add event listener for window resize
+    window.addEventListener('resize', checkIfMobile);
+
+    // Cleanup
+    return () => window.removeEventListener('resize', checkIfMobile);
+  }, []);
+
+  // Create a map of province IDs to province names
+  const provinceNameMap = useMemo(() => {
+    const map: Record<string, string> = {};
+    vietnamProvinces.forEach(province => {
+      map[province.id] = province.name;
+    });
+    return map;
+  }, []);
+
+  // Initialize the map with the province data
+  const {
+    mapInstance,
+    fillProvinceColor,
+    resetAllProvinceColors,
+    fillAreaProvinces,
+    fillAllProvinces,
+    applyRandomColors,
+    addMarker,
+    addFixedRatioMarker,
+    removeMarker,
+    removeAllMarkers,
+    getProvinceCenter,
+    addMarkerToProvince,
+    toggleProvinceLabels,
+    isProvinceLabelsVisible,
+    cleanup
+  } = useInteractiveMap({
+    mapId: `vietnam-map-${mapKey}`,
+    mapBackground: "https://storage.nomion.io/yeulamvietnam/1741956665-yeulamvietnam-map.png",
+    containerStyle: {
+      width: containerWidth,
+      height: containerHeight,
+    },
+    provinceData: provinceNameMap
+  });
+
+  // Store map methods in ref for later use
+  useEffect(() => {
+    // Only store methods in ref if mapInstance exists
+    if (mapInstance) {
+      mapMethodsRef.current = {
+        fillProvinceColor,
+        resetAllProvinceColors,
+        fillAreaProvinces,
+        fillAllProvinces,
+        applyRandomColors,
+        addMarker,
+        addFixedRatioMarker,
+        removeMarker,
+        removeAllMarkers,
+        getProvinceCenter,
+        addMarkerToProvince,
+        toggleProvinceLabels
+      };
+    }
+  }, [fillProvinceColor, resetAllProvinceColors, fillAreaProvinces,
+    fillAllProvinces, applyRandomColors, addMarker, removeMarker,
+    removeAllMarkers, getProvinceCenter, addMarkerToProvince,
+    addFixedRatioMarker,
+    toggleProvinceLabels, mapKey, mapInstance]);
+
+  // Handle map creation
+  const handleCreateMap = () => {
+    setMapCreated(true);
+  };
+
+  // Handle map reset
+  const handleResetMap = () => {
+    setMapCreated(false);
+    setSelectedProvince('');
+    setSelectedRegion('');
+    setColorHex('#F4E4E4');
+    setSvgImage(null);
+    setSvg2PngImage(null);
+
+    setPreviewImage(null);
+    setTemplateComponent(null);
+    setMarkers([]);
+
+    setMapKey(prevKey => prevKey + 1); // Force re-render of the map
+  };
+
+  // Handle province coloring
+  const handleColorProvince = () => {
+    if (!mapMethodsRef.current || !selectedProvince) return;
+    mapMethodsRef.current.fillProvinceColor(selectedProvince, colorHex);
+  };
+
+  // Handle region coloring
+  const handleColorRegion = () => {
+    if (!mapMethodsRef.current || !selectedRegion) return;
+    mapMethodsRef.current.fillAreaProvinces(selectedRegion, colorHex);
+  };
+
+  // Handle reset colors
+  const handleResetColors = () => {
+    if (!mapMethodsRef.current) return;
+    mapMethodsRef.current.resetAllProvinceColors();
+  };
+
+  // Handle random colors
+  const handleRandomColors = () => {
+    if (!mapMethodsRef.current) return;
+    mapMethodsRef.current.applyRandomColors();
+  };
+
+  // Handle color change from color picker
+  const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setColorHex(e.target.value);
+  };
+
+  // Handle manual hex input
+  const handleHexInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    // Only update if it's a valid hex color or empty
+    if (/^#([0-9A-F]{3}){1,2}$/i.test(value) || value === '' || value === '#') {
+      setColorHex(value);
+    }
+  };
+
+  // Handle coloring all provinces
+  const handleColorAllProvinces = () => {
+    if (!mapMethodsRef.current) return;
+    mapMethodsRef.current.fillAllProvinces(colorHex);
+  };
+
+  // Handle adding a marker at specific coordinates
+  const handleAddMarker = () => {
+    if (!mapMethodsRef.current) return;
+
+    mapMethodsRef.current.addMarker({
+      id: markerId,
+      position: { x: markerX, y: markerY },
+      customMarker: {
+        svg: markerSvg,
+        style: {
+          width: `${markerWidth}px`,
+          height: `${markerHeight}px`,
+        }
+      },
+      onClick: () => alert(`Marker ${markerId} clicked!`)
+    });
+
+    // Add to markers list if not already there
+    if (!markers.includes(markerId)) {
+      setMarkers([...markers, markerId]);
+    }
+  };
+
+  const handleAddCustomMarker = () => {
+    if (!mapMethodsRef.current) return;
+
+    mapMethodsRef.current.addFixedRatioMarker({
+      id: markerId,
+      position: { x: markerCustomX, y: markerCustomY },
+      customMarker: {
+        svg: markerSvg,
+        style: {
+          width: `${markerWidth}px`,
+          height: `${markerHeight}px`,
+        }
+      },
+      onClick: () => alert(`Marker ${markerId} clicked!`)
+    });
+
+    // Add to markers list if not already there
+    if (!markers.includes(markerId)) {
+      setMarkers([...markers, markerId]);
+    }
+  };
+
+
+  // Handle adding a marker to a province
+  const handleAddMarkerToProvince = () => {
+    if (!mapMethodsRef.current || !selectedProvinceForMarker) return;
+
+    mapMethodsRef.current.addMarkerToProvince(
+      selectedProvinceForMarker,
+      {
+        id: `province-${selectedProvinceForMarker}`,
+        svg: `province-${selectedProvinceForMarker}`,
+        customMarker: {
+          svg: markerSvg,
+          style: {
+            width: `${markerWidth}px`,
+            height: `${markerHeight}px`,
+          }
+        }
+      },
+    );
+
+    // Add to markers list
+    const newMarkerId = `province-${selectedProvinceForMarker}`;
+    if (!markers.includes(newMarkerId)) {
+      setMarkers([...markers, newMarkerId]);
+    }
+  };
+
+  // Handle removing a specific marker
+  const handleRemoveMarker = (id: string) => {
+    if (!mapMethodsRef.current) return;
+
+    mapMethodsRef.current.removeMarker(id);
+    setMarkers(markers.filter(m => m !== id));
+  };
+
+  // Handle removing all markers
+  const handleRemoveAllMarkers = () => {
+    if (!mapMethodsRef.current) return;
+
+    mapMethodsRef.current.removeAllMarkers();
+    setMarkers([]);
+  };
+
+  // Handle toggling province labels
+  const handleToggleProvinceLabels = () => {
+    if (!mapMethodsRef.current) return;
+
+    // Calculate the background color with opacity
+    const bgColorWithOpacity = `${labelBgColor}${Math.round(labelBgOpacity * 2.55).toString(16).padStart(2, '0')}`;
+
+    mapMethodsRef.current.toggleProvinceLabels({
+      fontSize: labelFontSize,
+      color: labelColor,
+      backgroundColor: bgColorWithOpacity
+    });
+  };
+
+  // Clean up when component unmounts or map is reset
+  useEffect(() => {
+    return () => {
+      if (cleanup) {
+        cleanup();
+      }
+    };
+  }, [cleanup, mapKey]);
+
+  /**
+   * Converts an SVG element to a PNG image element with transparent background
+   * @param svgElement The SVG element to convert
+   * @param scale Optional scale factor for higher resolution output
+   * @returns Promise that resolves with an HTMLImageElement
+   */
+  const convertSvgToPngElement = async (
+    svgElement: SVGElement,
+    scale: number = 2,
+    offsetX: number = 55,
+  ): Promise<HTMLImageElement> => {
+    return new Promise((resolve, reject) => {
+      try {
+        // debugger
+        // Get SVG data
+        const svgData = new XMLSerializer().serializeToString(svgElement);
+
+        // Create base64 encoded version for the Image object
+        const svgBase64 = btoa(unescape(encodeURIComponent(svgData)));
+        const dataUrl = `data:image/svg+xml;base64,${svgBase64}`;
+
+        // Get dimensions
+        const svgRect = svgElement.getBoundingClientRect();
+
+        // Create canvas with appropriate dimensions
+        const canvas = document.createElement('canvas');
+        canvas.width = svgRect.width * scale;
+        canvas.height = svgRect.height * scale;
+
+        // Get canvas context and configure it
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+          throw new Error('Could not get canvas context');
+        }
+
+        // Clear the canvas to ensure transparency
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        // Scale the context for higher resolution
+        ctx.scale(scale, scale);
+
+        // Create image from SVG
+        const tempImg = new Image();
+        tempImg.onload = () => {
+
+          const scale = svgRect.height / tempImg.height;
+          const toDrawImageWidth = tempImg.width * scale;
+          const toDrawImageHeight = tempImg.height * scale;
+
+          // const toDrawImageWidth = tempImg.width;
+          // const toDrawImageHeight = tempImg.height;
+
+          // Draw the image to the canvas
+          ctx.drawImage(tempImg, 0, 0, toDrawImageWidth, toDrawImageHeight);
+
+          // Convert canvas to PNG data URL
+          const pngDataUrl = canvas.toDataURL('image/png');
+
+          setSvgImage(tempImg.src);
+          setSvg2PngImage(pngDataUrl);
+
+          // Create the final image element with the PNG data
+          const imgElement = new Image();
+
+          // Set styles for full width and height
+          imgElement.style.width = '100%';
+          imgElement.style.height = '100%';
+
+          // Set the style attribute for HTML serialization
+          imgElement.setAttribute('style', imgElement.style.cssText);
+
+          // Set the source to the PNG data URL
+          imgElement.onload = () => resolve(imgElement);
+          imgElement.onerror = (error) => reject(error);
+          imgElement.src = pngDataUrl;
+        };
+
+        tempImg.onerror = (error) => {
+          reject(new Error(`Failed to load SVG as image: ${error}`));
+        };
+
+        // Set the source to trigger loading
+        tempImg.src = dataUrl;
+      } catch (error) {
+        reject(error);
+      }
+    });
+  };
+
+  // /**
+  //  * Converts an SVG element to a PNG image element with transparent background using canvg
+  //  * @param svgElement The SVG element to convert
+  //  * @param scale Optional scale factor for higher resolution output
+  //  * @returns Promise that resolves with an HTMLImageElement
+  //  */
+  // const convertSvgToPngElementWithCanvg = async (
+  //   svgElement: SVGElement,
+  //   scale: number = 1
+  // ): Promise<HTMLImageElement> => {
+  //   return new Promise(async (resolve, reject) => {
+  //     try {
+  //       // Dynamically import canvg to avoid SSR issues
+  //       const { Canvg } = await import('canvg');
+
+  //       // Get SVG data
+  //       const svgData = new XMLSerializer().serializeToString(svgElement);
+
+  //       // Get dimensions
+  //       const svgRect = svgElement.getBoundingClientRect();
+  //       const width = svgRect.width;
+  //       const height = svgRect.height;
+
+  //       // Create canvas with appropriate dimensions
+  //       const canvas = document.createElement('canvas');
+  //       canvas.width = width * scale;
+  //       canvas.height = height * scale;
+
+  //       // Get canvas context
+  //       const ctx = canvas.getContext('2d');
+  //       if (!ctx) {
+  //         throw new Error('Could not get canvas context');
+  //       }
+
+  //       // Clear the canvas to ensure transparency
+  //       ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  //       // Create canvg instance with proper configuration
+  //       const v = await Canvg.fromString(ctx, svgData, {
+  //         ignoreMouse: true,
+  //         ignoreAnimation: true,
+  //         enableRedraw: false,
+  //         ignoreDimensions: true, // Important for proper sizing
+  //         scaleWidth: width * scale,
+  //         scaleHeight: height * scale,
+  //         offsetX: 0,
+  //         offsetY: 0,
+  //         forceRedraw: () => false
+  //       });
+
+  //       // Render the SVG to canvas
+  //       await v.render();
+
+  //       // Convert canvas to PNG data URL
+  //       const pngDataUrl = canvas.toDataURL('image/png');
+
+  //       // Create the final image element with the PNG data
+  //       const imgElement = new Image();
+
+  //       // Set styles for full width and height
+  //       imgElement.style.width = '100%';
+  //       imgElement.style.height = '100%';
+  //       imgElement.style.position = 'absolute';
+  //       imgElement.style.top = '0';
+  //       imgElement.style.left = '0';
+
+  //       // Set the style attribute for HTML serialization
+  //       imgElement.setAttribute('style', imgElement.style.cssText);
+
+  //       // Set the source to the PNG data URL
+  //       imgElement.onload = () => resolve(imgElement);
+  //       imgElement.onerror = (error) => reject(error);
+  //       imgElement.src = pngDataUrl;
+
+  //     } catch (error) {
+  //       console.error('Error in convertSvgToPngElement:', error);
+  //       reject(error);
+  //     }
+  //   });
+  // };
+
+  // Handle converting map to image
+  const handleConvertToImage = async () => {
+    if (!mapCreated || !mapContainerRef.current) return;
+
+    setIsGeneratingImage(true);
+
+    try {
+      // clone map container
+      const clonedMapContainer = mapContainerRef.current.cloneNode(true) as HTMLElement;
+
+      // Find all SVG elements in the map container
+      const svgElements = clonedMapContainer.querySelectorAll('svg');
+      console.log("Found SVG elements:", svgElements.length);
+
+      svgElements.forEach(svg => {
+        console.log("SVG element:", svg);
+      });
+
+      if (svgElements.length === 0) {
+        throw new Error('No SVG elements found in the map');
+      }
+
+      // Replace all SVGs with image elements
+      const svgPromises = Array.from(svgElements).map(async (svg) => {
+        try {
+          // Convert SVG to image element
+          const imgElement = await convertSvgToPngElement(svg as SVGElement, 2);
+
+          // Replace the SVG with the image
+          if (svg.parentNode) {
+            svg.parentNode.replaceChild(imgElement, svg);
+          }
+        } catch (error) {
+          console.error('Failed to convert SVG to image:', error);
+        }
+      });
+
+      // Wait for all replacements to complete
+      await Promise.all(svgPromises);
+
+      // Add a small delay to ensure DOM updates are complete
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      // Create a template component with the modified map container
+      const templateDiv = (
+        <div
+          style={{
+            width: mapContainerRef.current.clientWidth,
+            height: mapContainerRef.current.clientHeight,
+          }}
+          dangerouslySetInnerHTML={{ __html: clonedMapContainer.innerHTML }}
+        />
+      );
+
+      setTemplateComponent(templateDiv);
+
+      // Generate canvas from the template
+      const canvas = await generateCanvas({
+        templateComponent: templateDiv,
+        options: {
+          scale: 2
+        }
+      });
+
+      if (canvas) {
+        // Convert canvas to data URL
+        const dataUrl = canvas.toDataURL('image/png');
+        setPreviewImage(dataUrl);
+      }
+
+      // Restore the original content
+      // mapContainerRef.current.innerHTML = originalContent;
+
+    } catch (error) {
+      console.error('Failed to convert map to image:', error);
+      alert('Failed to convert map to image. Please try again.');
+    } finally {
+      setIsGeneratingImage(false);
+    }
+  };
+
+  return (
+    <Container>
+      <MapContainer ref={mapContainerRef}>
+        {mapCreated ? mapInstance : (
+          <div style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100%',
+            color: '#666',
+            padding: '16px',
+            textAlign: 'center'
+          }}>
+            {isMobile
+              ? 'Configure and create the map below'
+              : 'Configure and create the map using the panel on the right'}
+          </div>
+        )}
+      </MapContainer>
+
+      <DebugPanel>
+        <DebugPanelContent>
+          <SectionTitle>Map Configuration</SectionTitle>
+
+          <FormGroup>
+            <Label>Container Width</Label>
+            <Input
+              type="text"
+              value={containerWidth}
+              onChange={(e) => setContainerWidth(e.target.value)}
+              placeholder="e.g., 600px or 100%"
+              disabled={mapCreated}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <Label>Container Height</Label>
+            <Input
+              type="text"
+              value={containerHeight}
+              onChange={(e) => setContainerHeight(e.target.value)}
+              placeholder="e.g., 500px or 100%"
+              disabled={mapCreated}
+            />
+          </FormGroup>
+
+          {!mapCreated ? (
+            <Button onClick={handleCreateMap}>
+              Create Map
+            </Button>
+          ) : (
+            <Button
+              onClick={handleResetMap}
+              style={{ backgroundColor: '#FF9800' }}
+            >
+              Reset & Create New Map
+            </Button>
+          )}
+
+          <Divider />
+
+          <SectionTitle>Province Coloring</SectionTitle>
+
+          <FormGroup>
+            <Label>Select Province</Label>
+            <Select
+              value={selectedProvince}
+              onChange={(e) => setSelectedProvince(e.target.value)}
+              disabled={!mapCreated}
+            >
+              <option value="">-- Select Province --</option>
+              {vietnamProvinces.map(province => (
+                <option key={province.id} value={province.id}>
+                  {province.name}
+                </option>
+              ))}
+            </Select>
+          </FormGroup>
+
+          <FormGroup>
+            <Label>Select Region</Label>
+            <Select
+              value={selectedRegion}
+              onChange={(e) => setSelectedRegion(e.target.value)}
+              disabled={!mapCreated}
+            >
+              <option value="">-- Select Region --</option>
+              {vietnamRegions.map(region => (
+                <option key={region.id} value={region.id}>
+                  {region.name}
+                </option>
+              ))}
+            </Select>
+          </FormGroup>
+
+          <FormGroup>
+            <Label>Color</Label>
+            <ColorInputContainer>
+              <ColorPickerWrapper>
+                <ColorInput
+                  type="color"
+                  value={colorHex}
+                  onChange={handleColorChange}
+                  disabled={!mapCreated}
+                />
+              </ColorPickerWrapper>
+              <HexInput
+                type="text"
+                value={colorHex}
+                onChange={handleHexInputChange}
+                placeholder="#RRGGBB"
+                disabled={!mapCreated}
+                maxLength={7}
+              />
+            </ColorInputContainer>
+          </FormGroup>
+
+          <ButtonGroup>
+            <Button
+              onClick={handleColorProvince}
+              disabled={!mapCreated || !selectedProvince}
+            >
+              Color Province
+            </Button>
+
+            <Button
+              onClick={handleColorRegion}
+              disabled={!mapCreated || !selectedRegion}
+            >
+              Color Region
+            </Button>
+          </ButtonGroup>
+
+          <Button
+            onClick={handleColorAllProvinces}
+            disabled={!mapCreated}
+            style={{ backgroundColor: '#9C27B0' }}
+          >
+            Color All Provinces
+          </Button>
+
+          <Divider />
+
+          <ButtonGroup>
+            <Button
+              onClick={handleResetColors}
+              disabled={!mapCreated}
+              style={{ backgroundColor: '#f44336' }}
+            >
+              Reset All Colors
+            </Button>
+
+            <Button
+              onClick={handleRandomColors}
+              disabled={!mapCreated}
+              style={{ backgroundColor: '#4CAF50' }}
+            >
+              Random Colors
+            </Button>
+          </ButtonGroup>
+
+          <Divider />
+
+          <SectionTitle>Markers</SectionTitle>
+
+          <MarkerSection>
+            <FormGroup>
+              <Label>Marker ID</Label>
+              <Input
+                type="text"
+                value={markerId}
+                onChange={(e) => setMarkerId(e.target.value)}
+                placeholder="Enter marker ID"
+                disabled={!mapCreated}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <Label>Marker SVG</Label>
+              <textarea rows={5} name="markerSvg" id="markerSvg" value={markerSvg} onChange={(e) => setMarkerSvg(e.target.value)}></textarea>
+            </FormGroup>
+
+            <FormGroup>
+              <Label>Marker Size</Label>
+              <CoordinateInputs>
+                <CoordinateInput
+                  type="number"
+                  value={markerWidth}
+                  onChange={(e) => setMarkerWidth(Number(e.target.value))}
+                  placeholder="10px"
+                  disabled={!mapCreated}
+                />
+                <CoordinateInput
+                  type="number"
+                  value={markerHeight}
+                  onChange={(e) => setMarkerHeight(Number(e.target.value))}
+                  placeholder="10px"
+                  disabled={!mapCreated}
+                />
+              </CoordinateInputs>
+            </FormGroup>
+
+            <FormGroup>
+              <Label>Marker Coordinates</Label>
+              <CoordinateInputs>
+                <CoordinateInput
+                  type="number"
+                  value={markerX}
+                  onChange={(e) => setMarkerX(Number(e.target.value))}
+                  placeholder="X"
+                  disabled={!mapCreated}
+                />
+                <CoordinateInput
+                  type="number"
+                  value={markerY}
+                  onChange={(e) => setMarkerY(Number(e.target.value))}
+                  placeholder="Y"
+                  disabled={!mapCreated}
+                />
+              </CoordinateInputs>
+            </FormGroup>
+
+            <Button
+              onClick={handleAddMarker}
+              disabled={!mapCreated}
+              style={{ backgroundColor: '#2196F3' }}
+            >
+              Add Marker at Coordinates
+            </Button>
+
+            <FormGroup>
+              <Label>Custom Marker Coordinates</Label>
+              <CoordinateInputs>
+                <CoordinateInput
+                  type="number"
+                  value={markerCustomX}
+                  onChange={(e) => setMarkerCustomX(Number(e.target.value))}
+                  placeholder="X"
+                  disabled={!mapCreated}
+                />
+                <CoordinateInput
+                  type="number"
+                  value={markerCustomY}
+                  onChange={(e) => setMarkerCustomY(Number(e.target.value))}
+                  placeholder="Y"
+                  disabled={!mapCreated}
+                />
+              </CoordinateInputs>
+            </FormGroup>
+
+            <Button
+              onClick={handleAddCustomMarker}
+              disabled={!mapCreated}
+              style={{ backgroundColor: '#2196F3' }}
+            >
+              Add Custom Marker at Coordinates
+            </Button>
+
+            <FormGroup>
+              <Label>Add Marker to Province</Label>
+              <Select
+                value={selectedProvinceForMarker}
+                onChange={(e) => setSelectedProvinceForMarker(e.target.value)}
+                disabled={!mapCreated}
+              >
+                <option value="">-- Select Province --</option>
+                {vietnamProvinces.map(province => (
+                  <option key={province.id} value={province.id}>
+                    {province.name}
+                  </option>
+                ))}
+              </Select>
+            </FormGroup>
+
+            <Button
+              onClick={handleAddMarkerToProvince}
+              disabled={!mapCreated || !selectedProvinceForMarker}
+              style={{ backgroundColor: '#2196F3' }}
+            >
+              Add Marker to Province
+            </Button>
+
+            {markers.length > 0 && (
+              <>
+                <Label>Active Markers</Label>
+                <div style={{ maxHeight: '150px', overflowY: 'auto', border: '1px solid #ccc', borderRadius: '4px', padding: '8px' }}>
+                  {markers.map(id => (
+                    <div key={id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
+                      <span>{id}</span>
+                      <button
+                        onClick={() => handleRemoveMarker(id)}
+                        style={{
+                          background: '#f44336',
+                          color: 'white',
+                          border: 'none',
+                          borderRadius: '4px',
+                          padding: '4px 8px',
+                          cursor: 'pointer'
+                        }}
+                      >
+                        Remove
+                      </button>
+                    </div>
+                  ))}
+                </div>
+
+                <Button
+                  onClick={handleRemoveAllMarkers}
+                  disabled={!mapCreated || markers.length === 0}
+                  style={{ backgroundColor: '#f44336' }}
+                >
+                  Remove All Markers
+                </Button>
+              </>
+            )}
+          </MarkerSection>
+
+          <Divider />
+
+          <SectionTitle>Province Labels</SectionTitle>
+
+          <LabelSection>
+            <FormGroup>
+              <Label>Label Settings</Label>
+              <LabelOptions>
+                <FormGroup>
+                  <Label>Font Size</Label>
+                  <Input
+                    type="number"
+                    value={labelFontSize}
+                    onChange={(e) => setLabelFontSize(Number(e.target.value))}
+                    min={6}
+                    max={24}
+                    disabled={!mapCreated}
+                  />
+                </FormGroup>
+                <FormGroup>
+                  <Label>Background Opacity</Label>
+                  <Input
+                    type="range"
+                    value={labelBgOpacity}
+                    onChange={(e) => setLabelBgOpacity(Number(e.target.value))}
+                    min={0}
+                    max={100}
+                    disabled={!mapCreated}
+                  />
+                </FormGroup>
+              </LabelOptions>
+
+              <LabelOptions>
+                <FormGroup>
+                  <Label>Text Color</Label>
+                  <ColorInputContainer>
+                    <ColorInput
+                      type="color"
+                      value={labelColor}
+                      onChange={(e) => setLabelColor(e.target.value)}
+                      disabled={!mapCreated}
+                    />
+                  </ColorInputContainer>
+                </FormGroup>
+                <FormGroup>
+                  <Label>Background Color</Label>
+                  <ColorInputContainer>
+                    <ColorInput
+                      type="color"
+                      value={labelBgColor}
+                      onChange={(e) => setLabelBgColor(e.target.value)}
+                      disabled={!mapCreated}
+                    />
+                  </ColorInputContainer>
+                </FormGroup>
+              </LabelOptions>
+            </FormGroup>
+
+            <Button
+              onClick={handleToggleProvinceLabels}
+              disabled={!mapCreated}
+              style={{ backgroundColor: isProvinceLabelsVisible ? '#f44336' : '#4CAF50' }}
+            >
+              {isProvinceLabelsVisible ? 'Hide Province Names' : 'Show Province Names'}
+            </Button>
+          </LabelSection>
+
+          <Divider />
+
+          <SectionTitle>Export Map</SectionTitle>
+
+          <Button
+            onClick={handleConvertToImage}
+            disabled={!mapCreated || isGeneratingImage}
+            style={{ backgroundColor: '#795548' }}
+          >
+            {isGeneratingImage ? 'Generating Image...' : 'Convert to Image'}
+          </Button>
+
+          {
+            svgImage && (
+              <>
+                <Label>Temp</Label>
+                <PreviewImage>
+                  <img src={svgImage} alt="Image Preview" />
+                </PreviewImage>
+              </>
+            )
+          }
+
+          {
+            svg2PngImage && (
+              <>
+                <Label>SVG2PNG</Label>
+                <PreviewImage>
+                  <img src={svg2PngImage} alt="Image Preview" />
+                </PreviewImage>
+              </>
+            )
+          }
+
+          {previewImage && (
+            <PreviewImage>
+              <img src={previewImage} alt="Map Preview" />
+            </PreviewImage>
+          )}
+
+          {
+            !!templateComponent && (
+              <>
+                <Label>Template Component</Label>
+                {templateComponent}
+              </>
+            )
+          }
+
+          {previewImage && (
+            <Button
+              onClick={() => {
+                // Create a temporary link to download the image
+                const link = document.createElement('a');
+                link.href = previewImage;
+                link.download = 'vietnam-map.png';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+              }}
+              style={{ backgroundColor: '#607D8B', marginTop: '8px' }}
+            >
+              Download Image
+            </Button>
+          )}
+
+        </DebugPanelContent>
+      </DebugPanel>
+    </Container>
+  );
+};
+
+export default MapView;