@versatiles/svelte 0.2.0 → 1.0.0

package/dist/utils/draw/bbox.js

@@ -0,0 +1,193 @@
+const maplibregl = await import('maplibre-gl');
+const { LngLatBounds } = maplibregl;
+// prettier-ignore
+export const DragPointMap = new Map([
+    ['n', { cursor: 'ns-resize', flipH: 'n', flipV: 's' }],
+    ['ne', { cursor: 'nesw-resize', flipH: 'n', flipV: 'se' }],
+    ['e', { cursor: 'ew-resize', flipH: 'w', flipV: 'e' }],
+    ['se', { cursor: 'nwse-resize', flipH: 'sw', flipV: 'ne' }],
+    ['s', { cursor: 'ns-resize', flipH: 's', flipV: 'n' }],
+    ['sw', { cursor: 'nesw-resize', flipH: 'se', flipV: 'nw' }],
+    ['w', { cursor: 'ew-resize', flipH: 'e', flipV: 'w' }],
+    ['nw', { cursor: 'nwse-resize', flipH: 'ne', flipV: 'sw' }],
+    [false, { cursor: 'default', flipH: false, flipV: false }],
+]);
+const worldBBox = [-180, -85, 180, 85];
+export class BBoxDrawer {
+    source;
+    dragPoint = false;
+    isDragging = false;
+    map;
+    canvas;
+    inverted;
+    bbox;
+    constructor(map, bbox, color, inverted) {
+        this.bbox = bbox;
+        this.inverted = inverted ?? true;
+        this.map = map;
+        const sourceId = 'bbox_' + Math.random().toString(36).slice(2);
+        if (this.source)
+            throw new Error('BBoxDrawer already added to map');
+        map.addSource(sourceId, { type: 'geojson', data: this.getAsFeatureCollection() });
+        map.addLayer({
+            id: 'bbox-line_' + Math.random().toString(36).slice(2),
+            type: 'line',
+            source: sourceId,
+            filter: ['==', '$type', 'LineString'],
+            layout: { 'line-cap': 'round', 'line-join': 'round' },
+            paint: { 'line-color': color }
+        });
+        map.addLayer({
+            id: 'bbox-fill_' + Math.random().toString(36).slice(2),
+            type: 'fill',
+            source: sourceId,
+            filter: ['==', '$type', 'Polygon'],
+            layout: {},
+            paint: { 'fill-color': color, 'fill-opacity': 0.2 }
+        });
+        this.source = map.getSource(sourceId);
+        this.canvas = map.getCanvasContainer();
+        map.on('mousemove', (e) => {
+            if (e.originalEvent.buttons % 2 === 0)
+                return this.checkDragPointAt(e.point);
+            if (!this.isDragging)
+                return;
+            if (!this.dragPoint)
+                return this.checkDragPointAt(e.point);
+            this.doDrag(e.lngLat);
+            this.redraw();
+            e.preventDefault();
+        });
+        map.on('mousedown', (e) => {
+            if (this.isDragging)
+                return;
+            if (e.originalEvent.buttons % 2) {
+                this.checkDragPointAt(e.point);
+                if (this.dragPoint)
+                    this.isDragging = true;
+                if (this.isDragging)
+                    e.preventDefault();
+            }
+        });
+        map.on('mouseup', () => {
+            this.isDragging = false;
+            this.updateDragPoint(false);
+        });
+    }
+    updateDragPoint(dragPoint) {
+        if (this.dragPoint === dragPoint)
+            return;
+        this.dragPoint = dragPoint;
+        this.canvas.style.cursor = this.getCursor(dragPoint);
+    }
+    getAsFeatureCollection() {
+        const ring = getRing(this.bbox);
+        return {
+            type: 'FeatureCollection',
+            features: [
+                this.inverted ? polygon(getRing(worldBBox), ring) : polygon(ring),
+                linestring(ring)
+            ]
+        };
+        function getRing(bbox) {
+            const x0 = Math.min(bbox[0], bbox[2]);
+            const x1 = Math.max(bbox[0], bbox[2]);
+            const y0 = Math.min(bbox[1], bbox[3]);
+            const y1 = Math.max(bbox[1], bbox[3]);
+            // prettier-ignore
+            return [[x0, y0], [x1, y0], [x1, y1], [x0, y1], [x0, y0]];
+        }
+        function polygon(...coordinates) {
+            return { type: 'Feature', geometry: { type: 'Polygon', coordinates }, properties: {} };
+        }
+        function linestring(coordinates) {
+            return { type: 'Feature', geometry: { type: 'LineString', coordinates }, properties: {} };
+        }
+    }
+    setGeometry(bbox) {
+        this.bbox = bbox.slice(0, 4);
+        this.redraw();
+    }
+    getBounds() {
+        return new LngLatBounds(this.bbox);
+    }
+    redraw() {
+        this.source?.setData(this.getAsFeatureCollection());
+    }
+    getAsPixel() {
+        const p0 = this.map.project([this.bbox[0], this.bbox[1]]);
+        const p1 = this.map.project([this.bbox[2], this.bbox[3]]);
+        return [Math.min(p0.x, p1.x), Math.min(p0.y, p1.y), Math.max(p0.x, p1.x), Math.max(p0.y, p1.y)];
+    }
+    checkDragPointAt(point) {
+        const maxDistance = 5;
+        const { x, y } = point;
+        const [x0, y0, x1, y1] = this.getAsPixel();
+        // Don't think outside the box
+        if (x < x0 - maxDistance)
+            return this.updateDragPoint(false);
+        if (x > x1 + maxDistance)
+            return this.updateDragPoint(false);
+        if (y < y0 - maxDistance)
+            return this.updateDragPoint(false);
+        if (y > y1 + maxDistance)
+            return this.updateDragPoint(false);
+        let dragX = (Math.abs(x0 - x) < maxDistance ? 1 : 0) + (Math.abs(x1 - x) < maxDistance ? 2 : 0);
+        let dragY = (Math.abs(y0 - y) < maxDistance ? 1 : 0) + (Math.abs(y1 - y) < maxDistance ? 2 : 0);
+        if (dragX === 3)
+            dragX = Math.abs(x0 - x) < Math.abs(x1 - x) ? 1 : 2;
+        if (dragY === 3)
+            dragY = Math.abs(y0 - y) < Math.abs(y1 - y) ? 1 : 2;
+        const directions = [false, 'w', 'e', 'n', 'nw', 'ne', 's', 'sw', 'se'];
+        this.updateDragPoint(directions[dragX + dragY * 3]);
+    }
+    getCursor(drag) {
+        return DragPointMap.get(drag)?.cursor ?? 'default';
+    }
+    doDrag(lngLat) {
+        const x = Math.round(lngLat.lng * 1e3) / 1e3;
+        const y = Math.round(lngLat.lat * 1e3) / 1e3;
+        // prettier-ignore
+        switch (this.dragPoint) {
+            case 'n':
+                this.bbox[3] = y;
+                break;
+            case 'ne':
+                this.bbox[2] = x;
+                this.bbox[3] = y;
+                break;
+            case 'e':
+                this.bbox[2] = x;
+                break;
+            case 'se':
+                this.bbox[2] = x;
+                this.bbox[1] = y;
+                break;
+            case 's':
+                this.bbox[1] = y;
+                break;
+            case 'sw':
+                this.bbox[0] = x;
+                this.bbox[1] = y;
+                break;
+            case 'w':
+                this.bbox[0] = x;
+                break;
+            case 'nw':
+                this.bbox[0] = x;
+                this.bbox[3] = y;
+                break;
+            default: return;
+        }
+        if (this.bbox[2] < this.bbox[0]) {
+            // flip horizontal
+            this.bbox = [this.bbox[2], this.bbox[1], this.bbox[0], this.bbox[3]];
+            this.updateDragPoint(DragPointMap.get(this.dragPoint)?.flipH ?? false);
+        }
+        if (this.bbox[3] < this.bbox[1]) {
+            // flip vertical
+            this.bbox = [this.bbox[0], this.bbox[3], this.bbox[2], this.bbox[1]];
+            this.updateDragPoint(DragPointMap.get(this.dragPoint)?.flipV ?? false);
+        }
+    }
+}

package/dist/utils/location.d.ts

@@ -1,3 +1,4 @@
 import type { Language } from '@versatiles/style';
-export declare function getCountry(): string;
+export declare function getCountryName(): string | null;
+export declare function getCountryCode(): string | null;
 export declare function getLanguage(): Language;

package/dist/utils/location.js

@@ -1,22 +1,32 @@
 import { timezone2countrycode } from './zones.js';
-export function getCountry() {
+export function getCountryName() {
+    try {
+        const countryCode = getCountryCode();
+        if (!countryCode)
+            return null;
+        const region = new Intl.DisplayNames(['en-GB'], { type: 'region' });
+        const country = region.of(countryCode);
+        return country || null;
+    }
+    catch {
+        return null;
+    }
+}
+export function getCountryCode() {
     try {
         const options = Intl.DateTimeFormat().resolvedOptions();
         let countryCode = timezone2countrycode(options.timeZone);
         if (!countryCode)
             countryCode = navigator.language.split('-')[1];
-        const region = new Intl.DisplayNames(['en-GB'], { type: 'region' });
-        const country = region.of(countryCode);
-        return country || '';
+        return countryCode || null;
     }
-    catch (error) {
-        console.error('Could not determine country from timezone:', error);
-        return ''; // Fallback if no country can be determined
+    catch {
+        return null;
     }
 }
 export function getLanguage() {
     try {
-        const language = Intl.DateTimeFormat().resolvedOptions().locale.split('-')[0];
+        const language = Intl.DateTimeFormat().resolvedOptions().locale.split('-')[0].toLowerCase();
         switch (language) {
             case 'en':
             case 'de':
@@ -24,8 +34,7 @@ export function getLanguage() {
         }
         return null;
     }
-    catch (error) {
-        console.error('Could not determine country from timezone:', error);
+    catch {
         return null; // Fallback if no country can be determined
     }
 }

package/dist/utils/map_style.d.ts

@@ -0,0 +1,6 @@
+import { type StyleBuilderOptions } from '@versatiles/style';
+export declare function getMapStyle(darkMode: boolean, styleOptions?: StyleBuilderOptions & {
+    transitionDuration?: number;
+    disableDarkMode?: boolean;
+}): import("maplibre-gl").StyleSpecification;
+export declare function isDarkMode(element?: HTMLElement): boolean;

package/dist/utils/map_style.js

@@ -0,0 +1,28 @@
+import { styles } from '@versatiles/style';
+import { getLanguage } from './location.js';
+export function getMapStyle(darkMode, styleOptions = {}) {
+    darkMode = darkMode && !styleOptions.disableDarkMode;
+    const style = styles.colorful({
+        baseUrl: 'https://tiles.versatiles.org',
+        language: getLanguage(),
+        recolor: {
+            invertBrightness: darkMode,
+            gamma: darkMode ? 0.5 : 1
+        },
+        ...styleOptions
+    });
+    if (styleOptions.transitionDuration != null) {
+        style.transition = { duration: styleOptions.transitionDuration, delay: 0 };
+    }
+    return style;
+}
+export function isDarkMode(element) {
+    if (element != null) {
+        const colorScheme = getComputedStyle(element).getPropertyValue('color-scheme');
+        if (colorScheme.includes('dark'))
+            return true;
+        if (colorScheme.includes('light'))
+            return false;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}

package/dist/utils/sprite_library.d.ts

@@ -0,0 +1,19 @@
+interface SpriteEntry {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    pixelRatio: number;
+    sdf: boolean;
+    id: string;
+    name: string;
+    group: string;
+}
+export declare class SpriteLibrary {
+    private spriteList;
+    private pixelRatio;
+    constructor(pixelRatio?: number);
+    getSpriteList(): Promise<SpriteEntry[]>;
+    private loadSpriteList;
+}
+export default SpriteLibrary;

package/dist/utils/sprite_library.js

@@ -0,0 +1,30 @@
+export class SpriteLibrary {
+    spriteList = [];
+    pixelRatio;
+    constructor(pixelRatio = 2) {
+        this.pixelRatio = pixelRatio;
+    }
+    async getSpriteList() {
+        await this.loadSpriteList();
+        return this.spriteList;
+    }
+    async loadSpriteList() {
+        if (this.spriteList.length)
+            return;
+        const spriteGroupList = (await fetch('https://tiles.versatiles.org/assets/sprites/index.json').then((r) => r.json()));
+        await Promise.all(spriteGroupList.map(async (group) => {
+            const spriteGroup = (await fetch(`https://tiles.versatiles.org/assets/sprites/${group}/sprites@${this.pixelRatio}x.json`).then((r) => r.json()));
+            Object.entries(spriteGroup).forEach(([name, entry]) => {
+                this.spriteList.push({
+                    ...entry,
+                    pixelRatio: entry.pixelRatio ?? 1,
+                    sdf: entry.sdf ?? false,
+                    id: `${group}/${name}`,
+                    group,
+                    name
+                });
+            });
+        }));
+    }
+}
+export default SpriteLibrary;

package/package.json

@@ -1,22 +1,24 @@
 {
   "name": "@versatiles/svelte",
-  "version": "0.2.0",
+  "version": "1.0.0",
+  "license": "MIT",
   "scripts": {
-    "build": "vite build && npm run package",
+    "build": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && vite build && npm run package",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check": "npm run lint && npm run build && npm run test",
     "dev": "vite dev",
     "format": "prettier --write .",
-    "lint": "prettier --check . && eslint .",
+    "lint": "prettier --check . && eslint --color .",
     "package": "svelte-kit sync && svelte-package && publint",
     "prepack": "npm run package",
     "prepublishOnly": "npm run package",
     "preview": "vite preview",
-    "screenshots": "npm run build && npx tsx ./scripts/screenshots.ts",
+    "screenshots": "npm run build && npx tsx ./scripts/screenshots.ts && pngquant --nofs --force --ext .png screenshots/*.png && optipng -quiet screenshots/*.png",
     "release": "npm run build && npx vrt release-npm",
     "test:integration": "playwright test",
     "test:unit": "vitest run",
-    "test": "npm run test:integration && npm run test:unit",
+    "test:coverage": "vitest run --coverage",
+    "test": "npm run test:unit && npm run test:integration",
     "upgrade": "npm-check-updates -u && rm -f package-lock.json; rm -rf node_modules; npm update --save && npm install"
   },
   "exports": {
@@ -37,31 +39,34 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
-    "@sveltejs/adapter-auto": "^4.0.0",
+    "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.16.1",
     "@sveltejs/package": "^2.3.9",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@turf/turf": "^7.2.0",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^22.10.10",
-    "@types/split2": "^4.2.3",
+    "@types/node": "^22.12.0",
     "@versatiles/release-tool": "^1.2.6",
+    "@vitest/coverage-v8": "^3.0.4",
     "cookie": "^1.0.2",
     "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-svelte": "^2.46.1",
     "geojson": "^0.5.0",
     "globals": "^15.14.0",
+    "happy-dom": "^16.7.3",
     "npm-check-updates": "^17.1.14",
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.3",
     "publint": "^0.3.2",
-    "split2": "^4.2.0",
-    "svelte": "^5.19.2",
+    "sass": "^1.83.4",
+    "sass-embedded": "^1.83.4",
+    "svelte": "^5.19.6",
     "svelte-check": "^4.1.4",
+    "svelte-preprocess": "^6.0.3",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.21.0",
+    "typescript-eslint": "^8.22.0",
     "vite": "^6.0.11",
     "vitest": "^3.0.4"
   },
@@ -69,7 +74,7 @@
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "@versatiles/style": "^5.2.5",
-    "maplibre-gl": "^5.0.1"
+    "@versatiles/style": "^5.2.9",
+    "maplibre-gl": "^5.1.0"
   }
 }

package/dist/components/AutoComplete.svelte

@@ -1,197 +0,0 @@
-<!-- AutoComplete.svelte -->
-<script lang="ts" generics="T">
-	import { isDarkMode } from '../utils/style.js';
-	/* eslint svelte/no-at-html-tags: off */
-
-	import { createEventDispatcher, onMount } from 'svelte';
-	const dispatch = createEventDispatcher();
-
-	type Item = { key: string; value: T };
-	type ResultItem = Item & { _label: string };
-
-	// Component properties
-	export let placeholder: string = '';
-	export let minChar: number = 0;
-	export let maxItems: number = 10;
-
-	// Reactive variables
-	export let items: Item[];
-
-	let inputElement: HTMLInputElement; // Reference to DOM element
-	let autocompleteElement: HTMLDivElement; // Reference to DOM element
-	let isOpen = false;
-	let results: ResultItem[] = [];
-	let selectedIndex = 0;
-	let inputText: string = '';
-
-	// Escape special characters in search string for use in regex
-	const regExpEscape = (s: string) => s.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
-
-	if (inputText.length >= minChar) {
-		const r = filterResults();
-		if (r.length > 0) {
-			const { key, value } = r[0];
-			inputText = key;
-			setTimeout(() => dispatch('change', JSON.parse(JSON.stringify(value))), 0);
-		} else {
-			inputText = '';
-		}
-	}
-
-	export function setInputText(text: string) {
-		console.log(text);
-		inputText = text;
-		results = filterResults();
-		close(0);
-	}
-
-	// Handle input change
-	function onChange() {
-		if (inputText.length >= minChar) {
-			results = filterResults();
-			selectedIndex = 0;
-			isOpen = true;
-		} else {
-			isOpen = false;
-		}
-	}
-
-	function onFocus() {
-		inputElement.setSelectionRange(0, 1000);
-	}
-
-	// Filter results based on search query
-	function filterResults(): ResultItem[] {
-		const searchText = inputText.trim();
-		const searchTextUpper = searchText.toUpperCase();
-		const searchReg = RegExp(regExpEscape(searchText), 'i');
-		return items
-			.filter((item) => item.key.toUpperCase().includes(searchTextUpper))
-			.slice(0, maxItems)
-			.map((item) => ({
-				...item,
-				_label: item.key.replace(searchReg, '<span>$&</span>')
-			}));
-	}
-
-	// Handle keyboard navigation
-	function onKeyDown(event: KeyboardEvent) {
-		switch (event.key) {
-			case 'ArrowDown':
-				if (selectedIndex < results.length - 1) selectedIndex += 1;
-				break;
-			case 'ArrowUp':
-				if (selectedIndex > 0) selectedIndex -= 1;
-				break;
-			case 'Enter':
-				event.preventDefault();
-				close(selectedIndex);
-				break;
-			case 'Escape':
-				event.preventDefault();
-				close();
-				break;
-		}
-	}
-
-	// Close the autocomplete and select an item
-	function close(index = -1) {
-		isOpen = false;
-		if (index > -1 && results[index]) {
-			const { key, value } = results[index];
-			inputText = key;
-			dispatch('change', JSON.parse(JSON.stringify(value)));
-		}
-	}
-
-	onMount(() => {
-		const darkMode = isDarkMode(autocompleteElement);
-		autocompleteElement.style.setProperty('--bg-color', darkMode ? '#000' : '#fff');
-		autocompleteElement.style.setProperty('--fg-color', darkMode ? '#fff' : '#000');
-	});
-</script>
-
-<svelte:window on:click={() => close()} />
-
-<div class="autocomplete" bind:this={autocompleteElement}>
-	<input
-		type="text"
-		bind:value={inputText}
-		{placeholder}
-		autocomplete="off"
-		on:input={onChange}
-		on:keydown={onKeyDown}
-		on:focusin={onFocus}
-		on:click={(e) => e.stopPropagation()}
-		bind:this={inputElement}
-		aria-activedescendant={isOpen ? `result-${selectedIndex}` : undefined}
-		aria-autocomplete="list"
-		aria-controls="autocomplete-results"
-	/>
-	<div class="autocomplete-results" class:hide-results={!isOpen}>
-		{#each results as result, i}
-			<button
-				on:click={() => close(i)}
-				class={i === selectedIndex ? ' is-active' : ''}
-				role="option"
-				aria-selected={i === selectedIndex}
-			>
-				{@html result._label}
-			</button>
-		{/each}
-	</div>
-</div>
-
-<style>
-	.autocomplete {
-		position: relative;
-		border-radius: 0.5em;
-		background: color-mix(in srgb, var(--bg-color) 80%, transparent);
-		box-sizing: border-box;
-		line-height: normal;
-	}
-
-	input {
-		width: 100%;
-		display: block;
-		box-sizing: border-box;
-		padding: 0.3em 0.6em;
-		border: none;
-		background: none;
-		color: var(--fg-color);
-	}
-
-	.autocomplete-results {
-		padding: 0;
-		margin: 0;
-		background: none;
-		width: 100%;
-		display: block;
-		border-radius: 0 0 0.5em 0.5em;
-	}
-
-	.autocomplete-results.hide-results {
-		display: none;
-	}
-
-	button {
-		padding: 0.2rem 0.5rem;
-		cursor: pointer;
-		border: none;
-		display: block;
-		background: transparent;
-		font-weight: normal;
-		color: color-mix(in srgb, var(--fg-color) 50%, transparent);
-		width: 100%;
-		text-align: left;
-	}
-
-	button > :global(span) {
-		color: var(--fg-color);
-	}
-
-	button.is-active,
-	button:hover {
-		background-color: color-mix(in srgb, var(--fg-color) 15%, transparent);
-	}
-</style>

package/dist/components/BBoxMap/README.md

@@ -1,70 +0,0 @@
-# BBox Map
-
-This SvelteKit component generates an interactive world map with a search field that allows users to easily search for geographic bounding boxes (BBoxes) for various regions, including continents, countries, and cities. The selected bounding box can also be manipulated by dragging the edges.
-
-## Improving Bounding Boxes
-
-Bounding boxes for different regions (continents, countries, cities, etc.) are stored in the `bboxes.json` file. This file is generated by the helper script `helpers/merge_bboxes.ts`, which processes the `*.jsonl` files in the `data` directory.
-
-### Editing Bounding Boxes
-
-To edit or add new bounding boxes:
-
-1. **Modify or Add a JSONL File**: Edit existing JSONL files in the `data` directory or create new ones with the required bounding box data.
-2. **Run the `merge_bboxes.ts` Script**: After making changes, run the `merge_bboxes.ts` script to update the `bboxes.json` file.
-
-### Helper Script: `merge_bboxes.ts`
-
-This script consolidates bounding box data from multiple JSONL files in the `data` directory, checks for duplicate labels, and outputs a single, sorted JSON file (`bboxes.json`). The bounding box coordinates are also rounded to an appropriate precision based on their size.
-
-#### Usage
-
-Simply run the script:
-
-```bash
-./helpers/merge_bboxes.ts
-```
-
-#### Output
-
-The script writes the processed data to `bboxes.json` in the parent directory. The entries in this file are sorted by population and formatted as:
-
-```json
-["Label", lngMin, latMin, lngWidth, latHeight]
-```
-
-### Helper Script: `geojson2bboxes.ts`
-
-This script processes GeoJSON or GeoJSONL files to extract bounding boxes for each geographic feature, generate labels, and either extract or estimate the population for each feature. The results are saved in JSONL format, which can be used by the `merge_bboxes.ts` script.
-
-#### Usage
-
-```bash
-./helpers/geojson2bboxes.ts <FILENAME> <LABEL_TEMPLATE> [POPULATION_KEY]
-```
-
-- `<FILENAME>`: The name of the input GeoJSON or GeoJSONL file. The file can be optionally compressed with `.br` (Brotli) or `.gz` (Gzip).
-- `<LABEL_TEMPLATE>`: A template string used to generate labels for each feature. Placeholders in the form `{propertyName}` will be replaced by the corresponding property value from each feature.
-- `[POPULATION_KEY]`: (Optional) The key in the feature's properties that contains the population value. If not provided, the script will estimate the population.
-
-#### Example
-
-```bash
-./helpers/geojson2bboxes.ts africa.geojson "{country}, {city}"
-```
-
-This command processes the `africa.geojson` file, generating labels in the format `"country, city"` and estimating the population for each region.
-
-#### Output
-
-The script outputs a `.jsonl` file with entries formatted as follows:
-
-```json
-{
-  "label": "Country - City",
-  "population": 123456,
-  "bbox": [minLng, minLat, maxLng, maxLat]
-}
-```
-
-Place this `.jsonl` file in the `data` directory to include it in the `bboxes.json` file when running `merge_bboxes.ts`.