gridloc / src /lib /twin /basemaps.ts
lassanmonster's picture
GridLoc: Bengaluru parking congestion digital twin
db3dbe1
Raw
History Blame Contribute Delete
3.93 kB
// Selectable basemaps for the dashboard map - mirrors kepler.gl's base-map
// picker. Most are CARTO's free, no-API-key GL styles; "Satellite" and
// "No Basemap" are built as inline style objects so switching is just a
// map.setStyle() with the resolved style.
import type { StyleSpecification } from 'maplibre-gl'
export type BasemapId =
| 'no-basemap'
| 'dark-matter'
| 'positron'
| 'voyager'
| 'satellite'
| 'dark'
| 'light'
| 'muted-light'
| 'muted-night'
export interface Basemap {
id: BasemapId
label: string
/** Either a CARTO style URL or an inline MapLibre style object. */
style: string | StyleSpecification
/** Small swatch colour for the list thumbnail (fallback behind the image). */
swatch: string
/** Tiny map preview image (a single Bengaluru tile in this style). */
thumb?: string
/** Whether this is a light-toned basemap (used by the theme toggle). */
light: boolean
}
const CARTO = 'https://basemaps.cartocdn.com/gl'
// A single 256px tile centered on Bengaluru (z11) per style, used as the list
// thumbnail. CARTO raster sets use z/x/y order; ESRI satellite uses z/y/x.
const TILE_Z = 11
const TILE_X = 1465
const TILE_Y = 950
const cartoThumb = (set: string) =>
`https://a.basemaps.cartocdn.com/rastertiles/${set}/${TILE_Z}/${TILE_X}/${TILE_Y}.png`
const SATELLITE_THUMB = `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/${TILE_Z}/${TILE_Y}/${TILE_X}`
// Minimal "no basemap" style - just a flat dark canvas for the overlays.
const NO_BASEMAP_STYLE: StyleSpecification = {
version: 8,
sources: {},
layers: [
{
id: 'background',
type: 'background',
paint: { 'background-color': '#0a0a0b' },
},
],
}
// ESRI World Imagery satellite raster with a CARTO label/road overlay on top.
const SATELLITE_STYLE: StyleSpecification = {
version: 8,
sources: {
satellite: {
type: 'raster',
tiles: [
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
],
tileSize: 256,
attribution: 'Tiles © Esri - Source: Esri, Maxar, Earthstar Geographics',
},
},
layers: [{ id: 'satellite', type: 'raster', source: 'satellite' }],
}
export const BASEMAPS: Basemap[] = [
{ id: 'no-basemap', label: 'No Basemap', style: NO_BASEMAP_STYLE, swatch: '#000000', light: false },
{ id: 'dark-matter', label: 'DarkMatter', style: `${CARTO}/dark-matter-gl-style/style.json`, swatch: '#0e1116', thumb: cartoThumb('dark_all'), light: false },
{ id: 'positron', label: 'Positron', style: `${CARTO}/positron-gl-style/style.json`, swatch: '#d9dde2', thumb: cartoThumb('light_all'), light: true },
{ id: 'voyager', label: 'Voyager', style: `${CARTO}/voyager-gl-style/style.json`, swatch: '#9fb6c6', thumb: cartoThumb('voyager'), light: true },
{ id: 'satellite', label: 'Satellite With Streets', style: SATELLITE_STYLE, swatch: '#3a4a3a', thumb: SATELLITE_THUMB, light: false },
{ id: 'dark', label: 'Dark', style: `${CARTO}/dark-matter-nolabels-gl-style/style.json`, swatch: '#15191f', thumb: cartoThumb('dark_nolabels'), light: false },
{ id: 'light', label: 'Light', style: `${CARTO}/positron-nolabels-gl-style/style.json`, swatch: '#e8ebee', thumb: cartoThumb('light_nolabels'), light: true },
{ id: 'muted-light', label: 'Muted Light', style: `${CARTO}/voyager-nolabels-gl-style/style.json`, swatch: '#c7d2da', thumb: cartoThumb('voyager_nolabels'), light: true },
{ id: 'muted-night', label: 'Muted Night', style: `${CARTO}/dark-matter-gl-style/style.json`, swatch: '#1a1d24', thumb: cartoThumb('dark_all'), light: false },
]
// Defaults the theme toggle flips between.
export const DEFAULT_DARK_BASEMAP: BasemapId = 'dark-matter'
export const DEFAULT_LIGHT_BASEMAP: BasemapId = 'positron'
export function getBasemap(id: BasemapId): Basemap {
return BASEMAPS.find((b) => b.id === id) ?? BASEMAPS[1]
}