Lighter basemap (Positron) + Fireside HQ POI marker
- 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:
parent
cba1a3b044
commit
4100002b4e
1 changed files with 70 additions and 3 deletions
|
|
@ -105,7 +105,7 @@ export function initMap(elementId, opts = {}) {
|
|||
const center = opts.center || [36.8172, -1.2864]; // Nairobi
|
||||
const zoom = opts.zoom ?? 7;
|
||||
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
|
||||
const map = new maplibregl.Map({
|
||||
|
|
@ -186,6 +186,8 @@ export function initMap(elementId, opts = {}) {
|
|||
},
|
||||
});
|
||||
|
||||
_addHqPoi(map);
|
||||
|
||||
map.addLayer({
|
||||
id: 'vehicles-label',
|
||||
type: 'symbol',
|
||||
|
|
@ -209,8 +211,9 @@ export function initMap(elementId, opts = {}) {
|
|||
'text-letter-spacing': 0.04,
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#f1f5f9',
|
||||
'text-halo-color': '#0f172a',
|
||||
// Dark text + white halo reads cleanly on the Positron light basemap.
|
||||
'text-color': '#0f172a',
|
||||
'text-halo-color': '#ffffff',
|
||||
'text-halo-width': 2,
|
||||
},
|
||||
});
|
||||
|
|
@ -221,6 +224,70 @@ export function initMap(elementId, opts = {}) {
|
|||
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 ---------- */
|
||||
|
||||
function _wireHoverPopup(map) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue