Lighter basemap (Positron) + Fireside HQ POI marker
Some checks are pending
build / lint-test (push) Waiting to run
build / build-push (push) Blocked by required conditions

- Basemap switched from dark-matter to Positron — light grey, minimal,
  higher contrast for the cost-centre coloured markers.
- HQ POI: red dot + soft halo + 'Fireside Group HQ' label at
  -1.24089, 36.72880. Layered above vehicles so it stays visible when
  vehicles park there.
- Flipped vehicle plate-label colours to dark text + white halo for
  readability on the light map (was light-on-dark).
This commit is contained in:
kianiadee 2026-05-27 22:26:52 +03:00
parent cba1a3b044
commit 4100002b4e

View file

@ -105,7 +105,7 @@ export function initMap(elementId, opts = {}) {
const center = opts.center || [36.8172, -1.2864]; // Nairobi const center = opts.center || [36.8172, -1.2864]; // Nairobi
const zoom = opts.zoom ?? 7; const zoom = opts.zoom ?? 7;
const styleUrl = opts.styleUrl const styleUrl = opts.styleUrl
|| 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json'; || 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json';
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
const map = new maplibregl.Map({ const map = new maplibregl.Map({
@ -186,6 +186,8 @@ export function initMap(elementId, opts = {}) {
}, },
}); });
_addHqPoi(map);
map.addLayer({ map.addLayer({
id: 'vehicles-label', id: 'vehicles-label',
type: 'symbol', type: 'symbol',
@ -209,8 +211,9 @@ export function initMap(elementId, opts = {}) {
'text-letter-spacing': 0.04, 'text-letter-spacing': 0.04,
}, },
paint: { paint: {
'text-color': '#f1f5f9', // Dark text + white halo reads cleanly on the Positron light basemap.
'text-halo-color': '#0f172a', 'text-color': '#0f172a',
'text-halo-color': '#ffffff',
'text-halo-width': 2, 'text-halo-width': 2,
}, },
}); });
@ -221,6 +224,70 @@ export function initMap(elementId, opts = {}) {
return map; return map;
} }
/* ---------- POIs ---------- */
const HQ_POI = {
name: 'Fireside Group HQ',
lng: 36.728803986483136,
lat: -1.2408926683427806,
};
function _addHqPoi(map) {
map.addSource('poi-source', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: { name: HQ_POI.name, kind: 'hq' },
geometry: { type: 'Point', coordinates: [HQ_POI.lng, HQ_POI.lat] },
}],
},
});
map.addLayer({
id: 'poi-hq-halo',
type: 'circle',
source: 'poi-source',
paint: {
'circle-radius': ['interpolate', ['linear'], ['zoom'], 5, 5, 9, 9, 13, 16, 18, 26],
'circle-color': '#dc2626',
'circle-opacity': 0.20,
},
});
map.addLayer({
id: 'poi-hq-dot',
type: 'circle',
source: 'poi-source',
paint: {
'circle-radius': ['interpolate', ['linear'], ['zoom'], 5, 3, 9, 5, 13, 8, 18, 14],
'circle-color': '#dc2626',
'circle-stroke-color': '#ffffff',
'circle-stroke-width': 2,
},
});
map.addLayer({
id: 'poi-hq-label',
type: 'symbol',
source: 'poi-source',
minzoom: 9,
layout: {
'text-field': ['get', 'name'],
'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
'text-size': ['interpolate', ['linear'], ['zoom'], 9, 10, 13, 12, 17, 15],
'text-offset': [0, 1.4],
'text-anchor': 'top',
'text-allow-overlap': false,
'text-letter-spacing': 0.04,
},
paint: {
'text-color': '#7f1d1d',
'text-halo-color': '#ffffff',
'text-halo-width': 2,
},
});
}
/* ---------- hover popup ---------- */ /* ---------- hover popup ---------- */
function _wireHoverPopup(map) { function _wireHoverPopup(map) {