andras/perfect-postcode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Quick save

Browse source
This commit is contained in:
Andras Schmelczer 2026-02-07 22:19:44 +00:00
parent e5d5819098
commit 2906b01734
25 changed files with 1070 additions and 237 deletions
Download patch file Download diff file Expand all files Collapse all files

30
frontend/src/lib/map-utils.ts
View file

@ -8,7 +8,7 @@ import {
DENSITY_GRADIENT_DARK,
ZOOM_TO_RESOLUTION_THRESHOLDS,
TWEMOJI_BASE,
POSTCODE_ZOOM_THRESHOLD,
BUFFER_MULTIPLIER,
} from './consts';
// Re-export constants for backwards compatibility
@ -21,9 +21,12 @@ export function getMapStyle(theme: 'light' | 'dark'): StyleSpecification {
// Use absolute URL for tiles - required by MapLibre
const tileUrl = `${window.location.origin}/api/tiles/{z}/{x}/{y}`;
const baseLayers = layers('protomaps', flavor, { lang: 'en' });
const isDark = theme === 'dark';
// Reduce road layer opacity so hexagons are more visible
// In dark mode, make all text white with dark outline
const modifiedLayers = baseLayers.map((layer) => {
// Modify road opacity
if (layer.id.includes('roads_') || layer.id.includes('road_')) {
if (layer.type === 'line') {
return { ...layer, paint: { ...layer.paint, 'line-opacity': ROAD_OPACITY } };
@ -31,6 +34,20 @@ export function getMapStyle(theme: 'light' | 'dark'): StyleSpecification {
return { ...layer, paint: { ...layer.paint, 'fill-opacity': ROAD_OPACITY } };
}
}
// Modify text colors in dark mode
if (isDark && layer.type === 'symbol' && layer.paint?.['text-color']) {
return {
...layer,
paint: {
...layer.paint,
'text-color': '#ffffff',
'text-halo-color': '#1a1a1a',
'text-halo-width': 1.5,
},
};
}
return layer;
});
@ -41,7 +58,7 @@ export function getMapStyle(theme: 'light' | 'dark'): StyleSpecification {
protomaps: {
type: 'vector',
tiles: [tileUrl],
maxzoom: POSTCODE_ZOOM_THRESHOLD,
maxzoom: 17,
},
},
layers: modifiedLayers,
@ -139,15 +156,18 @@ export function getBoundsFromViewState(
const scale = Math.pow(2, zoom);
const worldSize = TILE_SIZE * scale;
const bufferedWidth = width * BUFFER_MULTIPLIER;
const bufferedHeight = height * BUFFER_MULTIPLIER;
const degreesPerPixelLng = 360 / worldSize;
const halfWidthDeg = (width / 2) * degreesPerPixelLng;
const halfWidthDeg = (bufferedWidth / 2) * degreesPerPixelLng;
const latRad = (clampedLat * Math.PI) / 180;
const mercatorY = (1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2;
const centerPixelY = mercatorY * worldSize;
const topPixelY = centerPixelY - height / 2;
const bottomPixelY = centerPixelY + height / 2;
const topPixelY = centerPixelY - bufferedHeight / 2;
const bottomPixelY = centerPixelY + bufferedHeight / 2;
const pixelYToLat = (pixelY: number): number => {
const mercY = Math.max(0.001, Math.min(0.999, pixelY / worldSize));