Skip to content

Commit 89b344f

Browse files
yejiyangyejiyang
committed
some tweaks
1 parent 6bac25c commit 89b344f

3 files changed

Lines changed: 160 additions & 148 deletions

File tree

‎Makefile‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ COMPOSE ?= docker compose
44
FRONTEND_DIR := frontend
55
PYTHON ?= python3
66

7-
.PHONY: help docker-build docker-up docker-down docker-logs docker-clean docker-rebuild-frontend docker-up-frontend docker-up-backend docker-rebuild-backend frontend-build frontend-serve
7+
.PHONY: help docker-build docker-up docker-down docker-logs docker-clean docker-rebuild-frontend docker-up-frontend docker-up-backend docker-rebuild-backend frontend-build frontend-serve docker-build-frontend docker-run-local docker-run
88

99
.DEFAULT_GOAL := help
1010

@@ -21,6 +21,9 @@ help:
2121
@echo " docker-rebuild-frontend - Rebuild frontend container (no cache)"
2222
@echo " docker-up-frontend - Start only the frontend container"
2323
@echo " docker-up-backend - Start only the backend container"
24+
@echo " docker-build-frontend - Build local frontend Docker image"
25+
@echo " docker-run-local - Run with locally built frontend image"
26+
@echo " docker-run - Run with remote frontend image from GitHub"
2427
@echo ""
2528
@echo "Frontend Commands:"
2629
@echo " frontend-build - Build frontend assets"
@@ -65,6 +68,19 @@ docker-rebuild-backend:
6568
@echo "Rebuilding backend Docker container (no cache)..."
6669
$(COMPOSE) build --no-cache backend
6770

71+
# Build and run with local or remote frontend image
72+
docker-build-frontend:
73+
@echo "Building local frontend Docker image..."
74+
docker build -t local/global-tsunami-risk-map-frontend:latest ./$(FRONTEND_DIR)
75+
76+
docker-run-local: docker-build-frontend
77+
@echo "Running with local frontend image..."
78+
USE_LOCAL_BUILD=local/global-tsunami-risk-map-frontend $(COMPOSE) up -d
79+
80+
docker-run:
81+
@echo "Running with remote frontend image from GitHub..."
82+
$(COMPOSE) up -d
83+
6884
# Frontend development helpers
6985
frontend-build:
7086
@echo "Building frontend..."

‎docker-compose.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ services:
1717
- CONTAINER_PORT=5000
1818

1919
frontend:
20-
build: ./frontend
20+
image: ${USE_LOCAL_BUILD:-ghcr.io/yejiyang/global-tsunami-risk-map-frontend:latest}
2121
container_name: frontend
2222
ports:
2323
- "8080:80"

‎frontend/src/index.html‎

Lines changed: 142 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,152 @@
11
<!doctype html>
22
<html>
3-
<head>
4-
<meta charset="utf-8" />
5-
<link
6-
href="https://unpkg.com/maplibre-gl@5.6.0/dist/maplibre-gl.css"
7-
rel="stylesheet"
8-
/>
9-
<script src="https://unpkg.com/maplibre-gl@5.6.0/dist/maplibre-gl.js"></script>
10-
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9"></script>
11-
<!-- Base map configuration -->
12-
<script src="js/basemap-layer.js"></script>
13-
<!-- Add reference to the new Hyderabad layers file -->
14-
<!-- <script src="js/hyderabad-layer.js"></script> -->
15-
<!-- Hazard points visualization -->
16-
<script src="js/hazard-layer.js"></script>
17-
<!-- Points layer visualization -->
18-
<!-- <script src="js/points-layer.js"></script> -->
19-
<!-- Add this to your index.html file, wherever your other script tags are located -->
20-
<!-- <script src="js/norway-hazard-tiles.js"></script> -->
21-
<style>
22-
html,
23-
body,
24-
#map {
25-
height: 100%;
26-
margin: 0;
27-
}
28-
29-
.maplibregl-popup-content {
30-
padding: 15px;
31-
min-width: 480px;
32-
}
33-
34-
.popup-table {
35-
width: 100%;
36-
border-collapse: collapse;
37-
margin-bottom: 10px;
38-
}
39-
40-
.popup-table td {
41-
padding: 4px 8px;
42-
border-bottom: 1px solid #ddd;
43-
}
44-
45-
.popup-table td:first-child {
46-
font-weight: bold;
47-
color: #333;
48-
}
49-
50-
.download-btn {
51-
display: inline-block;
52-
margin-top: 5px;
53-
padding: 6px 12px;
54-
background-color: #1e88e5;
55-
color: #fff;
56-
border: none;
57-
border-radius: 4px;
58-
cursor: pointer;
59-
}
60-
61-
.download-btn:hover {
62-
background-color: #1669bb;
63-
}
64-
65-
.properties-details summary {
66-
cursor: pointer;
67-
font-weight: bold;
68-
margin-top: 5px;
69-
margin-bottom: 5px;
70-
}
713

72-
/* Loading indicator styles */
73-
#loading {
74-
position: absolute;
75-
width: 100%;
76-
height: 100%;
77-
background-color: rgba(255, 255, 255, 0.7);
78-
display: flex;
79-
justify-content: center;
80-
align-items: center;
81-
z-index: 999;
82-
font-size: 24px;
83-
color: #333;
4+
<head>
5+
<meta charset="utf-8" />
6+
<link href="https://unpkg.com/maplibre-gl@5.6.0/dist/maplibre-gl.css" rel="stylesheet" />
7+
<script src="https://unpkg.com/maplibre-gl@5.6.0/dist/maplibre-gl.js"></script>
8+
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9"></script>
9+
<!-- Base map configuration -->
10+
<script src="js/basemap-layer.js"></script>
11+
<!-- Add reference to the new Hyderabad layers file -->
12+
<!-- <script src="js/hyderabad-layer.js"></script> -->
13+
<!-- Hazard points visualization -->
14+
<script src="js/hazard-layer.js"></script>
15+
<!-- Points layer visualization -->
16+
<!-- <script src="js/points-layer.js"></script> -->
17+
<!-- Add this to your index.html file, wherever your other script tags are located -->
18+
<!-- <script src="js/norway-hazard-tiles.js"></script> -->
19+
<style>
20+
html,
21+
body,
22+
#map {
23+
height: 100%;
24+
margin: 0;
25+
}
26+
27+
.maplibregl-popup-content {
28+
padding: 15px;
29+
min-width: 480px;
30+
}
31+
32+
.popup-table {
33+
width: 100%;
34+
border-collapse: collapse;
35+
margin-bottom: 10px;
36+
}
37+
38+
.popup-table td {
39+
padding: 4px 8px;
40+
border-bottom: 1px solid #ddd;
41+
}
42+
43+
.popup-table td:first-child {
44+
font-weight: bold;
45+
color: #333;
46+
}
47+
48+
.download-btn {
49+
display: inline-block;
50+
margin-top: 5px;
51+
padding: 6px 12px;
52+
background-color: #1e88e5;
53+
color: #fff;
54+
border: none;
55+
border-radius: 4px;
56+
cursor: pointer;
57+
}
58+
59+
.download-btn:hover {
60+
background-color: #1669bb;
61+
}
62+
63+
.properties-details summary {
64+
cursor: pointer;
65+
font-weight: bold;
66+
margin-top: 5px;
67+
margin-bottom: 5px;
68+
}
69+
70+
/* Loading indicator styles */
71+
#loading {
72+
position: absolute;
73+
width: 100%;
74+
height: 100%;
75+
background-color: rgba(255, 255, 255, 0.7);
76+
display: flex;
77+
justify-content: center;
78+
align-items: center;
79+
z-index: 999;
80+
font-size: 24px;
81+
color: #333;
82+
}
83+
84+
.spinner {
85+
border: 5px solid #f3f3f3;
86+
border-top: 5px solid #3498db;
87+
border-radius: 50%;
88+
width: 50px;
89+
height: 50px;
90+
animation: spin 2s linear infinite;
91+
margin-right: 20px;
92+
}
93+
94+
@keyframes spin {
95+
0% {
96+
transform: rotate(0deg);
8497
}
8598

86-
.spinner {
87-
border: 5px solid #f3f3f3;
88-
border-top: 5px solid #3498db;
89-
border-radius: 50%;
90-
width: 50px;
91-
height: 50px;
92-
animation: spin 2s linear infinite;
93-
margin-right: 20px;
99+
100% {
100+
transform: rotate(360deg);
94101
}
95-
96-
@keyframes spin {
97-
0% {
98-
transform: rotate(0deg);
99-
}
100-
101-
100% {
102-
transform: rotate(360deg);
103-
}
104-
}
105-
</style>
106-
</head>
107-
108-
<body>
109-
<div id="map"></div>
110-
<div id="loading">
111-
<div class="spinner"></div>
112-
Loading 200,000+ hazard points...
113-
</div>
114-
<script>
115-
// Configure API base URL
116-
const apiBaseUrl =
117-
window.location.hostname === "localhost"
118-
? "http://localhost:5000"
119-
: "/api";
120-
121-
// Initialize map using the function from basemap-layer.js
122-
const map = initializeMap("map");
123-
124-
// Function to fetch all points using vector tiles
125-
map.on("load", async () => {
126-
// Add controls
127-
map.addControl(new maplibregl.NavigationControl(), "top-right");
128-
129-
// Add regular points from the separate file
130-
// await addPointsLayer(map, apiBaseUrl);
131-
132-
// Add hazard points
133-
addGlobalHazardTiles(map, apiBaseUrl);
134-
135-
// Add Hyderabad vector tile layer
136-
// addHyderabadLayer(map, apiBaseUrl);
137-
138-
// // Add the Norway Hazard Points layer
139-
// addNorwayHazardTiles(map);
140-
});
141-
</script>
142-
<div
143-
id="version"
144-
style="
102+
}
103+
</style>
104+
</head>
105+
106+
<body>
107+
<div id="map"></div>
108+
<div id="loading">
109+
<div class="spinner"></div>
110+
Loading 200,000+ hazard points...
111+
</div>
112+
<script>
113+
// Configure API base URL
114+
const apiBaseUrl =
115+
window.location.hostname === "localhost"
116+
? "http://localhost:5000"
117+
: "/api";
118+
119+
// Initialize map using the function from basemap-layer.js
120+
const map = initializeMap("map");
121+
122+
// Function to fetch all points using vector tiles
123+
map.on("load", async () => {
124+
// Add controls
125+
map.addControl(new maplibregl.NavigationControl(), "top-right");
126+
127+
// Add regular points from the separate file
128+
// await addPointsLayer(map, apiBaseUrl);
129+
130+
// Add hazard points
131+
addGlobalHazardTiles(map, apiBaseUrl);
132+
133+
// Add Hyderabad vector tile layer
134+
// addHyderabadLayer(map, apiBaseUrl);
135+
136+
// // Add the Norway Hazard Points layer
137+
// addNorwayHazardTiles(map);
138+
});
139+
</script>
140+
<div id="version" style="
145141
position: absolute;
146-
bottom: 0;
147-
right: 0;
142+
top: 0;
143+
left: 0;
148144
background: rgba(255, 255, 255, 0.7);
149145
padding: 4px;
150146
font-size: 12px;
151-
"
152-
>
153-
Version: {{VERSION}}
154-
</div>
155-
</body>
156-
</html>
147+
">
148+
Version: {{VERSION}}
149+
</div>
150+
</body>
151+
152+
</html>

0 commit comments

Comments
 (0)