Spaces:
Sleeping
Sleeping
| // 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] | |
| } | |