fix some bugs

Author: danielchen3

usa_map/NY/index.html

@@ -22,6 +22,8 @@ <h1>Welcome to New York</h1>
         <div id="stateInfo"></div>
     </div>
 
+    <div id="tooltip" class="tooltip"></div>
+
     <script type="module" src="usa_ny.js"> </script>
 </body>
 </html>

usa_map/NY/usa_ny.js

@@ -77,9 +77,8 @@ svgObject.addEventListener('load', () => {
 
     regions.forEach(region => {
         if (region.id && !region.id.includes("path")) {
-            region.addEventListener('mouseover', () => {
+            region.addEventListener('mouseover', (e) => {
                 region.style.fill = '#FF0000'; 
-
 
                 const stateInfo = document.getElementById('stateInfo');
                 stateInfo.style.display = 'block';
@@ -105,9 +104,30 @@ svgObject.addEventListener('load', () => {
                 if (Array.from(countyData.entries()).find(([key]) => key.endsWith(processedId))) {
                     Create_County_Chart('tempChart', getRandomPattern(test_data_pattern1, test_data_pattern2), 'County Alert Trend');
                 }
+                // const tooltip = document.getElementById('tooltip');
+                // console.log("get tooltip", tooltip);
+                // tooltip.style.display = 'block';
+                // tooltip.style.left = e.pageX + 10 + 'px';
+                // tooltip.style.top = e.pageY + 10 + 'px';
+                // tooltip.innerHTML = `
+                //     <h3>${processedId}</h3>
+                //     ${(() => {
+                //         const match = Array.from(countyData.entries()).find(([key]) => key.endsWith(processedId));
+                //         if (match) {
+                //             const [_, value] = match;
+                //             return `
+                //                 <p>Climate Zone: ${value.BA_zone}</p>
+                //                 <p>State: ${value.state_name}</p>
+                //             `;
+                //         }
+                //         return 'Data not match';
+                //     })()}
+                // `;
+                
             });
             region.addEventListener('mouseout', () => {
                 region.style.fill = ''; 
+                // document.getElementById('tooltip').style.display = 'none';
             });
             region.addEventListener('click', () => {
                 const targetUrl = `https://danielchen3.github.io/usa_map/${region.id}`;
@@ -143,7 +163,7 @@ svgObject.addEventListener('load', () => {
                     })()}
                 `;
                 if (Array.from(countyData.entries()).find(([key]) => key.endsWith(processedId))) {
-                    Create_County_Chart('tempChart', test_data, 'County Alert Trend');
+                    Create_County_Chart('tempChart', getRandomPattern(test_data_pattern1, test_data_pattern2), 'County Alert Trend');
                 }
             });
             path.addEventListener('mouseout', () => {

usa_map/sty.css

@@ -25,6 +25,20 @@ p {
     gap: 20px;
 }
 
+.tooltip {
+    position: fixed;
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+    padding: 10px;
+    border-radius: 4px;
+    font-size: 14px;
+    pointer-events: none;
+    z-index: 1000;
+    display: none;
+    border: 1px solid rgba(255, 255, 255, 0.2); 
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  
+}
+
 button {
     background-color: #4CAF50;
     color: white;