add colors to the map and docker file

This commit is contained in:
2025-11-20 02:07:06 -08:00
parent c1f18fedb9
commit 37f6310e91
4 changed files with 96 additions and 13 deletions

14
Dockerfile Normal file
View File

@ -0,0 +1,14 @@
# Build stage
FROM rust:latest AS builder
WORKDIR /usr/src/app
COPY . .
RUN cargo build --release
# Run stage
FROM debian:bookworm-slim
RUN apt-get update && apt-get install -y libssl3 ca-certificates && apt-get clean
COPY --from=builder /usr/src/app/Neighborhood_Map_Atlas_Neighborhoods.geojson /
COPY --from=builder /usr/src/app/map.html /
COPY --from=builder /usr/src/app/target/release/mapbattle /usr/local/bin/mapbattle
EXPOSE 8080
CMD ["mapbattle"]

View File

@ -5,23 +5,75 @@
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<style>
#map { height: 90vh; }
#map { height: 90vh; }
.legend {
list-style: none;
padding: 0;
width: 200px;
}
.legend-item {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.color-box {
width: 20px;
height: 20px;
margin-right: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="map"></div>
<ul id="legend" class="legend"></ul>
<script>
function style(feature) {
return { color: feature.properties.color};
}
var map = L.map('map').setView([47.6062, -122.3321], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
}).addTo(map);
// <map>
function style(feature) {
return { color: feature.properties.color};
}
var map = L.map('map').setView([47.6062, -122.3321], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
}).addTo(map);
fetch('/geojson')
.then(res => res.json())
.then(data => L.geoJSON(data, {style: style}).addTo(map));
fetch('/geojson')
.then(res => res.json())
.then(data => L.geoJSON(data, {style: style}).addTo(map));
// </map>
// <legend>
const endpoint = "/legend-data";
fetch(endpoint)
.then(response => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then(data => {
const legend = document.getElementById("legend");
// Clear existing content if any
legend.innerHTML = "";
data.forEach(item => {
const li = document.createElement("li");
li.className = "legend-item";
const colorBox = document.createElement("span");
colorBox.className = "color-box";
colorBox.style.backgroundColor = item.color;
const label = document.createElement("span");
label.textContent = item.name;
li.appendChild(colorBox);
li.appendChild(label);
legend.appendChild(li);
});
})
.catch(error => {
console.error("Fetching legend data failed:", error);
});
</script>
</body>
</html>

View File

@ -25,6 +25,12 @@ impl Team {
}
}
#[derive(Debug, Clone, Deserialize, Serialize)]
pub struct TeamLegend {
pub name: String,
pub color: String
}
#[cfg(test)]
mod tests {
use super::*;

View File

@ -9,7 +9,7 @@ use chrono::NaiveDateTime;
use reqwest::Client;
use xml::reader::EventReader;
use actix_web::{get, App, HttpResponse, HttpServer, Responder};
use crate::data::{Team, Player};
use crate::data::{Team, Player, TeamLegend};
use std::collections::HashMap;
use std::fs::File;
use std::io::BufWriter;
@ -20,6 +20,16 @@ use std::time::Duration;
const DATE_FORMAT: &str = "%Y-%m-%dT%H:%M:%SZ";
#[get("/legend-data")]
async fn legend_data() -> impl Responder {
let teams = read_scores();
let legends: Vec<TeamLegend> = teams.into_iter()
.map(|t| TeamLegend{name: t.name, color: t.color}).collect();
HttpResponse::Ok()
.content_type("application/json")
.body(serde_json::to_string(&legends).unwrap())
}
#[get("/geojson")]
async fn geojson_endpoint() -> impl Responder {
let utils = geo_utils::GeoUtils::new();
@ -51,8 +61,9 @@ async fn main() -> std::io::Result<()> {
App::new()
.service(index)
.service(geojson_endpoint)
.service(legend_data)
})
.bind(("127.0.0.1", 8080))?
.bind(("0.0.0.0", 8080))?
.run()
.await
}