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 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) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue