/* real-map.jsx — real Sofia basemap (Leaflet + CARTO tiles) with real route geometry. */
const SOFIA_HOME = { center: [42.6852, 23.3235], zoom: 14 };
const TILE = {
light_minimal: 'light_nolabels',
light_standard: 'light_all',
light_detailed: 'rastertiles/voyager',
dark_minimal: 'dark_nolabels',
dark_standard: 'dark_all',
dark_detailed: 'dark_all',
};
function cssVars(el) {
const cs = getComputedStyle(el);
return (n) => cs.getPropertyValue('--' + n).trim();
}
// slice a route into colored segments following a pattern of {frac, ...} entries (either
// {frac, level} from routePattern or {frac, cat} from routeCatPattern). Each output segment
// carries the original entry's fields so the caller can resolve the color.
function segByPattern(coords, pattern) {
const n = coords.length;
if (!pattern || pattern.length <= 1) return [{ pts: coords, level: 'safe', ...(pattern && pattern[0]) }];
const out = []; let i = 0, acc = 0;
pattern.forEach((p, k) => {
acc += p.frac;
const end = (k === pattern.length - 1) ? n - 1 : Math.max(i + 1, Math.round(acc * (n - 1)));
out.push({ pts: coords.slice(i, end + 1), ...p });
i = end;
});
return out;
}
// CSS color var for an infrastructure category — the SAME color the filter legend uses, so the
// drawn route matches the markers. 'street' (plain road) gets a neutral grey.
function catColorVar(cat) {
if (!cat || cat === 'street') return 'route-street';
const c = window.VR_COMMUNITY && window.VR_COMMUNITY.cats && window.VR_COMMUNITY.cats[cat];
return (c && c.color) || 'route-street';
}
const pinSVG = (color) =>
``;
// small white glyphs embedded inside community markers (stroke = white)
const CMARK_GLYPH = {
shield: '',
warn: '',
car: '',
bike: '',
bulb: '',
park: '',
drop: '',
wrench: '',
// VELOSOFIZE imported POI glyphs
train: '',
cross: '',
pin: '',
};
// shared so the legend chips + detail-sheet header (screens.jsx CatChip) render the
// exact same glyphs as the map markers.
window.VR_CMARK_GLYPH = CMARK_GLYPH;
// memoize marker HTML — the same (color, glyph, sel) combo is reused across hundreds of markers,
// so building the string once and caching it avoids per-marker template work on every redraw.
const _cmarkCache = {};
function cmarkHTML(color, glyph, sel) {
const key = color + '|' + glyph + '|' + (sel ? 1 : 0);
let html = _cmarkCache[key];
if (html) return html;
const size = sel ? 38 : 30;
html = `
`
+ ``
+ ``
+ `
`;
_cmarkCache[key] = html;
return html;
}
function RealMap({ theme = 'light', detail = 'standard', view = 'home', routeMode = 'none', route = null, selected = 'safe', community = false, commFilter = null, commSelId = null, onPickComm = null, kmzData = null, interactive = true, registerControls = true, commVersion = 0, pickPoint = false, onPickPoint = null }) {
const elRef = React.useRef(null);
const mapRef = React.useRef(null);
const tileRef = React.useRef(null);
const drawRef = React.useRef([]);
const commRef = React.useRef([]);
const kmzRef = React.useRef([]);
const kmzCanvasRef = React.useRef(null);
const pickRef = React.useRef(null);
const userRef = React.useRef(null);
// selection registries: id → { setSel(on) } for already-rendered features, so picking a
// marker re-styles just the two affected features instead of rebuilding whole layers.
const commItemsRef = React.useRef(new Map()); // community points + segments
const kmzLineItemsRef = React.useRef(new Map()); // VELOSOFIZE route lines
const kmzPtItemsRef = React.useRef(new Map()); // VELOSOFIZE POI markers (re-culled on move)
const selAppliedRef = React.useRef(null); // currently-highlighted id
const commSelIdRef = React.useRef(commSelId); // live selected id for move/zoom callbacks
commSelIdRef.current = commSelId;
const applySel = (id, on) => {
if (id == null) return;
const it = commItemsRef.current.get(id) || kmzLineItemsRef.current.get(id) || kmzPtItemsRef.current.get(id);
if (it) it.setSel(on);
};
// init map once
React.useEffect(() => {
const map = L.map(elRef.current, {
zoomControl: false, attributionControl: true,
dragging: interactive, scrollWheelZoom: interactive, doubleClickZoom: interactive, touchZoom: interactive,
boxZoom: false, keyboard: false, tap: interactive, inertia: true, zoomSnap: 0.25,
fadeAnimation: false, zoomAnimation: false, markerZoomAnimation: false,
});
mapRef.current = map;
if (registerControls) window.__vrMap = map; // debug hook for the main map instance
if (registerControls) window.__vrMapZoom = (d) => { const m = mapRef.current; if (m) m.setZoom(m.getZoom() + d); };
map.setView(SOFIA_HOME.center, SOFIA_HOME.zoom);
if (registerControls) window.__vrMapRecenter = () => { const m = mapRef.current; if (m) m.flyTo(SOFIA_HOME.center, SOFIA_HOME.zoom, { duration: 0.6 }); };
// "you are here" marker — a blue pulsing dot in its own ref, so the route/community/kmz
// effects (which only clear their own refs) never remove it.
if (registerControls) window.__vrShowUserLocation = (lat, lng, fly) => {
const m = mapRef.current; if (!m || lat == null || lng == null) return;
const ll = L.latLng(lat, lng);
if (userRef.current) userRef.current.setLatLng(ll);
else userRef.current = L.marker(ll, {
icon: L.divIcon({ html: '
', className: 'vr-marker', iconSize: [30, 30], iconAnchor: [15, 15] }),
interactive: false, zIndexOffset: 900,
}).addTo(m);
if (fly) m.flyTo(ll, Math.max(m.getZoom(), 16), { duration: 0.6 });
};
if (registerControls) window.__vrClearUserLocation = () => { const m = mapRef.current; if (m && userRef.current) { m.removeLayer(userRef.current); userRef.current = null; } };
// directional "puck" used during active navigation — a heading arrow when we know which way
// the rider faces, falling back to the plain pulsing dot when heading is unknown. Shares
// userRef with the dot above so the nav line/marker effects never clear it.
if (registerControls) window.__vrShowUserPuck = (lat, lng, heading) => {
const m = mapRef.current; if (!m || lat == null || lng == null) return;
const ll = L.latLng(lat, lng);
const html = (heading == null || isNaN(heading))
? '