Skip to content

Commit 0495aa8

Browse files
danielchen3danielchen3
committed
connecting to database finish
1 parent 63d5def commit 0495aa8

File tree

16 files changed

+514
-355
lines changed

16 files changed

+514
-355
lines changed

‎.gitignore‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Node.js
2+
node_modules
3+
4+
.vscode/
5+
6+
*.class
7+
8+
*.pyc
9+
10+
*.json

‎index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,5 +65,7 @@ <h1>Welcome to My Github</h1>
6565
button.style.background = '#4CAF50';
6666
}
6767
</script>
68+
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
69+
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
6870
</body>
6971
</html>

‎usa_map/AZ/index.html‎

Lines changed: 9 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -4,84 +4,25 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Arizona</title>
7-
<style>
8-
body {
9-
font-family: Arial, sans-serif;
10-
text-align: center;
11-
margin: 50px;
12-
}
13-
h1 {
14-
color: #4CAF50;
15-
}
16-
p {
17-
font-size: 18px;
18-
color: #555;
19-
}
20-
#svgContainer {
21-
margin: 20px auto;
22-
display: inline-block;
23-
width: 100%;
24-
max-width: auto;
25-
}
26-
.map-container {
27-
display: flex;
28-
gap: 20px;
29-
}
30-
#usaMap {
31-
width: 60%;
32-
height: 80vh;
33-
min-height: 500px;
34-
border: 1px solid #ddd;
35-
}
7+
<link rel="stylesheet" href="./../styles.css">
368

37-
#stateInfo {
38-
padding: 15px;
39-
border: 1px solid #ddd;
40-
border-radius: 5px;
41-
background-color: #fff;
42-
display: none;
43-
width: 200px;
44-
height: fit-content;
45-
}
46-
</style>
479
</head>
10+
4811
<body>
4912
<h1>Welcome to Arizona</h1>
5013
<p>This is the Arizona map:</p>
5114

15+
<div class="button-container">
16+
<a href="https://danielchen3.github.io/usa_map" target="_blank">
17+
<button >Go Back Map</button>
18+
</a>
19+
</div>
20+
5221
<div class="map-container">
5322
<object id="usaMap" data="usa_az.svg" type="image/svg+xml" style="width: 60%; max-width: auto; height: auto; border: 1px solid #ddd;"></object>
5423
<div id="stateInfo"></div>
5524
</div>
5625

57-
<script>
58-
const svgObject = document.getElementById('usaMap');
59-
svgObject.addEventListener('load', () => {
60-
const svgDoc = svgObject.contentDocument;
61-
const states = svgDoc.querySelectorAll('path');
62-
63-
states.forEach(state => {
64-
state.addEventListener('mouseover', () => {
65-
state.style.fill = '#FF0000';
66-
67-
68-
const stateInfo = document.getElementById('stateInfo');
69-
stateInfo.style.display = 'block';
70-
stateInfo.innerHTML = `
71-
<h3>${state.id}</h3>
72-
<p>这里是关于 ${state.id} 的详细信息</p>
73-
`;
74-
});
75-
state.addEventListener('mouseout', () => {
76-
state.style.fill = '';
77-
});
78-
state.addEventListener('click', () => {
79-
const targetUrl = `https://danielchen3.github.io/usa_map/${state.id}`;
80-
window.location.href = targetUrl;
81-
});
82-
//}
83-
});
84-
});
85-
</script>
26+
<script type="module" src="usa_az.js"> </script>
8627
</body>
8728
</html>

‎usa_map/AZ/test.html‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎usa_map/AZ/usa_az.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import {data_list, state_code, state_name} from "../assets.js"
2+
3+
// async function processData() {
4+
// const querySnapshot = await data_list;
5+
// querySnapshot.forEach((doc) => {
6+
// console.log(`${doc.id} => ${JSON.stringify(doc.data())}`);
7+
// });
8+
// }
9+
let countyData = new Map();
10+
async function get_corresponding_regions(){
11+
const name = document.title;
12+
console.log("title is ", name);
13+
const abbr = state_name[name];
14+
console.log("state_abbr is ", abbr);
15+
const code = state_code[abbr];
16+
console.log("state_code is ",code);
17+
const all_coutry_regions = await data_list;
18+
all_coutry_regions.forEach((doc) => {
19+
const fullId = doc.id;
20+
const statePrefix = fullId.slice(0, -3);
21+
22+
// if match
23+
if (statePrefix === String(code)) {
24+
console.log(`找到匹配: ${doc.id} => ${JSON.stringify(doc.data())}`);
25+
const data = doc.data();
26+
const BA_zone = data['BA Climate Zone'];
27+
const county_name = data['county name'];
28+
const state_name = data['state name'];
29+
countyData.set(county_name, {
30+
"BA_zone": BA_zone,
31+
"state_name":state_name
32+
});
33+
console.log(`找到匹配: ${fullId} => BA Climate Zone: ${BA_zone}`);
34+
}
35+
});
36+
}
37+
get_corresponding_regions();
38+
39+
40+
const svgObject = document.getElementById('usaMap');
41+
svgObject.addEventListener('load', () => {
42+
const svgDoc = svgObject.contentDocument;
43+
const regions = svgDoc.querySelectorAll('path');
44+
45+
regions.forEach(region => {
46+
region.addEventListener('mouseover', () => {
47+
region.style.fill = '#FF0000';
48+
const stateInfo = document.getElementById('stateInfo');
49+
stateInfo.style.display = 'block';
50+
stateInfo.innerHTML = `
51+
<h3>${region.id}</h3>
52+
${(() => {
53+
const match = Array.from(countyData.entries()).find(([key]) => key.endsWith(region.id));
54+
if (match) {
55+
const [_, value] = match;
56+
return `
57+
<p>Climate Zone: ${value.BA_zone}</p>
58+
<p>State: ${value.state_name}</p>
59+
`;
60+
}
61+
return 'Data not match';
62+
})()}
63+
`;
64+
});
65+
region.addEventListener('mouseout', () => {
66+
region.style.fill = '';
67+
});
68+
region.addEventListener('click', () => {
69+
const targetUrl = `https://danielchen3.github.io/usa_map/${region.id}`;
70+
window.location.href = targetUrl;
71+
});
72+
});
73+
});

‎usa_map/CA/index.html‎

Lines changed: 9 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -4,91 +4,23 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>California</title>
7-
<style>
8-
body {
9-
font-family: Arial, sans-serif;
10-
text-align: center;
11-
margin: 50px;
12-
}
13-
h1 {
14-
color: #4CAF50;
15-
}
16-
p {
17-
font-size: 18px;
18-
color: #555;
19-
}
20-
#svgContainer {
21-
margin: 20px auto;
22-
display: inline-block;
23-
width: 100%;
24-
max-width: auto;
25-
}
26-
.map-container {
27-
display: flex;
28-
gap: 20px;
29-
}
30-
#usaMap {
31-
width: 60%; /* 增加宽度占比 */
32-
height: 80vh; /* 使用视口高度单位 */
33-
min-height: 500px; /* 设置最小高度 */
34-
border: 1px solid #ddd;
35-
}
36-
37-
#stateInfo {
38-
padding: 15px;
39-
border: 1px solid #ddd;
40-
border-radius: 5px;
41-
background-color: #fff;
42-
display: none;
43-
width: 200px;
44-
height: fit-content;
45-
}
46-
</style>
7+
<link rel="stylesheet" href="./../styles.css">
478
</head>
489
<body>
4910
<h1>Welcome to California</h1>
5011
<p>This is the California map:</p>
5112

52-
<!-- 嵌入外部 SVG 文件 -->
13+
<div class="button-container">
14+
<a href="https://danielchen3.github.io/usa_map" target="_blank">
15+
<button>Go Back Map</button>
16+
</a>
17+
</div>
18+
5319
<div class="map-container">
54-
<object id="usaMap" data="California_county_map_(labeled).svg" type="image/svg+xml" style="width: 60%; max-width: auto; height: auto; border: 1px solid #ddd;"></object>
20+
<object id="usaMap" data="usa_ca.svg" type="image/svg+xml" style="width: 60%; max-width: auto; height: auto; border: 1px solid #ddd;"></object>
5521
<div id="stateInfo"></div>
5622
</div>
5723

58-
<script>
59-
const svgObject = document.getElementById('usaMap');
60-
svgObject.addEventListener('load', () => {
61-
const svgDoc = svgObject.contentDocument;
62-
const regions_1 = svgDoc.querySelectorAll('path');
63-
const regions_2 = svgDoc.querySelectorAll('polyline');
64-
65-
regions = [regions_1, regions_2];
66-
67-
regions.forEach(region_ => {
68-
region_.forEach(region => {
69-
if (region.id && !region.id.includes("path")) {
70-
region.addEventListener('mouseover', () => {
71-
region.style.fill = '#FF0000';
72-
73-
const stateInfo = document.getElementById('stateInfo');
74-
stateInfo.style.display = 'block';
75-
const processedId = region.id.split('_').slice(3).join('_'); stateInfo.innerHTML = `
76-
<h3>${processedId}</h3>
77-
<p>这里是关于 ${processedId} 的详细信息</p>
78-
`;
79-
});
80-
region.addEventListener('mouseout', () => {
81-
region.style.fill = '';
82-
});
83-
region.addEventListener('click', () => {
84-
const targetUrl = `https://danielchen3.github.io/usa_map/${region.id}`;
85-
window.location.href = targetUrl;
86-
});
87-
}
88-
});
89-
});
90-
91-
});
92-
</script>
24+
<script type="module" src="usa_ca.js"> </script>
9325
</body>
9426
</html>

‎usa_map/CA/usa_ca.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import {data_list, state_code, state_name} from "../assets.js"
2+
3+
// async function processData() {
4+
// const querySnapshot = await data_list;
5+
// querySnapshot.forEach((doc) => {
6+
// console.log(`${doc.id} => ${JSON.stringify(doc.data())}`);
7+
// });
8+
// }
9+
let countyData = new Map();
10+
async function get_corresponding_regions(){
11+
const name = document.title;
12+
console.log("title is ", name);
13+
const abbr = state_name[name];
14+
console.log("state_abbr is ", abbr);
15+
const code = state_code[abbr];
16+
console.log("state_code is ",code);
17+
const all_coutry_regions = await data_list;
18+
all_coutry_regions.forEach((doc) => {
19+
const fullId = doc.id;
20+
const statePrefix = fullId.slice(0, -3);
21+
22+
// if match
23+
if (statePrefix === String(code)) {
24+
console.log(`找到匹配: ${doc.id} => ${JSON.stringify(doc.data())}`);
25+
const data = doc.data();
26+
const BA_zone = data['BA Climate Zone'];
27+
const county_name = data['county name'];
28+
const state_name = data['state name'];
29+
countyData.set(county_name, {
30+
"BA_zone": BA_zone,
31+
"state_name":state_name
32+
});
33+
console.log(`找到匹配: ${fullId} => BA Climate Zone: ${BA_zone}`);
34+
}
35+
});
36+
}
37+
get_corresponding_regions();
38+
39+
const svgObject = document.getElementById('usaMap');
40+
svgObject.addEventListener('load', () => {
41+
const svgDoc = svgObject.contentDocument;
42+
const regions_1 = svgDoc.querySelectorAll('path');
43+
const regions_2 = svgDoc.querySelectorAll('polyline');
44+
45+
const regions = [regions_1, regions_2];
46+
47+
regions.forEach(region_ => {
48+
region_.forEach(region => {
49+
if (region.id && !region.id.includes("path")) {
50+
region.addEventListener('mouseover', () => {
51+
region.style.fill = '#FF0000';
52+
53+
const stateInfo = document.getElementById('stateInfo');
54+
stateInfo.style.display = 'block';
55+
const processedId = region.id.split('_').slice(3).join(' ');
56+
stateInfo.innerHTML = `
57+
<h3>${processedId}</h3>
58+
${(() => {
59+
const match = Array.from(countyData.entries()).find(([key]) => key.endsWith(processedId));
60+
if (match) {
61+
const [_, value] = match;
62+
return `
63+
<p>Climate Zone: ${value.BA_zone}</p>
64+
<p>State: ${value.state_name}</p>
65+
`;
66+
}
67+
return 'Data not match';
68+
})()}
69+
`;
70+
});
71+
region.addEventListener('mouseout', () => {
72+
region.style.fill = '';
73+
});
74+
region.addEventListener('click', () => {
75+
const targetUrl = `https://danielchen3.github.io/usa_map/${region.id}`;
76+
window.location.href = targetUrl;
77+
});
78+
}
79+
});
80+
});
81+
});

0 commit comments

Comments
 (0)