33 lines
1.1 KiB
HTML
33 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Map</title>
|
|
<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; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<script>
|
|
function style(feature) {
|
|
// Customize color based on a feature property; e.g., 'type' or 'category'
|
|
switch(feature.properties.type) {
|
|
case 'park': return { color: '#228B22' }; // green
|
|
case 'water': return { color: '#1E90FF' }; // blue
|
|
case 'residential': return { color: '#FFD700' }; // gold
|
|
default: return { color: '#FF0000' }; // red fallback
|
|
}
|
|
}
|
|
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));
|
|
</script>
|
|
</body>
|
|
</html> |