minor refactoring

MIERUNE · Nov 19, 2024 · 37215b4 · 37215b4
1 parent 71c2976
commit 37215b4
Show file tree

Hide file tree

Showing 45 changed files with 196 additions and 100 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # Svelte MapLibre GL
 
+![NPM Version](https://img.shields.io/npm/v/svelte-maplibre-gl)
+
 Svelte wrapper for MapLibre GL JS (supports Svlete 5+ only)
 
 ⚠️ This project is currently in the early stages of development. Features and APIs are subject to change.

diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
 	"name": "svelte-maplibre-gl",
 	"version": "0.0.3",
 	"license": "(MIT OR Apache-2.0)",
+	"description": "Svelte wrapper for Maplibre GL JS",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -52,18 +53,18 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.46.0",
 		"globals": "^15.12.0",
-		"lucide-svelte": "^0.454.0",
+		"lucide-svelte": "^0.460.1",
 		"maplibre-gl": "5.0.0-pre.6",
 		"mdsvex": "^0.12.3",
-		"mode-watcher": "^0.4.1",
+		"mode-watcher": "^0.5.0",
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.2.8",
 		"prettier-plugin-tailwindcss": "^0.6.8",
 		"publint": "^0.2.12",
 		"svelte": "^5.2.3",
 		"svelte-check": "^4.0.9",
 		"tailwind-merge": "^2.5.4",
-		"tailwind-variants": "^0.2.1",
+		"tailwind-variants": "^0.3.0",
 		"tailwindcss": "^3.4.15",
 		"tailwindcss-animate": "^1.0.7",
 		"typescript": "^5.6.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/content/examples/Index.svelte b/src/content/examples/Index.svelte
@@ -2,7 +2,7 @@
 <ul class="flex flex-col gap-y-2">
 	<li><a href="/examples/plain">Plain Map</a></li>
 	<li><a href="/examples/complex">Complex</a></li>
-	<li><a href="/examples/basestyle">Base Style</a></li>
+	<li><a href="/examples/basestyle">Change Base Style</a></li>
 	<li><a href="/examples/side-by-side">Side by Side</a></li>
 	<li><a href="/examples/terrain">3D Terrain</a></li>
 	<li><a href="/examples/hover-styles">Hover Styles</a></li>

diff --git a/src/content/examples/basestyle/content.svelte.md b/src/content/examples/basestyle/content.svelte.md
@@ -1,6 +1,6 @@
 ---
-title: Base Style
-description: User styles must be preserved when the base style is changed.
+title: Change Base Style
+description: Dynamic contents must be preserved when the base style is changed.
 ---
 
 <script lang="ts">

diff --git a/src/content/examples/terrain/Terrain.svelte b/src/content/examples/terrain/Terrain.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { HillshadeLayer, Light, MapLibre, RasterDEMTileSource, Sky, Terrain } from 'svelte-maplibre-gl';
+	import { HillshadeLayer, MapLibre, RasterDEMTileSource, Sky, Terrain } from 'svelte-maplibre-gl';
 	import { Slider } from '$lib/components/ui/slider/index.js';
 	import { Label } from '$lib/components/ui/label/index.js';
 
@@ -22,8 +22,8 @@
 	class="h-[60vh] min-h-[300px]"
 	style="https://demotiles.maplibre.org/styles/osm-bright-gl-style/style.json"
 	zoom={12}
-	pitch={70}
-	maxPitch={80}
+	pitch={72}
+	maxPitch={85}
 	center={{ lng: 11.39085, lat: 47.3 }}
 >
 	<Sky

diff --git a/src/content/examples/terrain/content.svelte.md b/src/content/examples/terrain/content.svelte.md
@@ -1,6 +1,6 @@
 ---
 title: 3D Terrain
-description: terrain
+description: 3D terrain and sky.
 ---
 
 <script lang="ts">

diff --git a/src/lib/maplibre/controls/AttributionControl.svelte b/src/lib/maplibre/controls/AttributionControl.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	// https://maplibre.org/maplibre-gl-js/docs/API/classes/AttributionControl/
+
 	import { onDestroy } from 'svelte';
 	import maplibregl from 'maplibre-gl';
 	import { getMapContext } from '../contexts.svelte.js';

diff --git a/src/lib/maplibre/controls/FullScreenControl.svelte b/src/lib/maplibre/controls/FullScreenControl.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	// https://maplibre.org/maplibre-gl-js/docs/API/classes/FullscreenControl/
+
 	import { onDestroy } from 'svelte';
 	import maplibregl from 'maplibre-gl';
 	import { getMapContext } from '../contexts.svelte.js';

diff --git a/src/lib/maplibre/controls/GeolocateControl.svelte b/src/lib/maplibre/controls/GeolocateControl.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	// https://maplibre.org/maplibre-gl-js/docs/API/classes/GeolocateControl/
+
 	import { onDestroy } from 'svelte';
 	import maplibregl from 'maplibre-gl';
 	import { getMapContext } from '../contexts.svelte.js';

diff --git a/src/lib/maplibre/controls/GlobeControl.svelte b/src/lib/maplibre/controls/GlobeControl.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	// https://maplibre.org/maplibre-gl-js/docs/API/classes/GlobeControl/
+
 	import { onDestroy } from 'svelte';
 	import maplibregl from 'maplibre-gl';
 	import { getMapContext } from '../contexts.svelte.js';

diff --git a/src/lib/maplibre/controls/Hash.svelte b/src/lib/maplibre/controls/Hash.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	// https://maplibre.org/maplibre-gl-js/docs/API/classes/Hash/
+
 	// FIXME: SvelteKit interoperability
 
 	import { onDestroy } from 'svelte';

diff --git a/src/lib/maplibre/controls/LogoControl.svelte b/src/lib/maplibre/controls/LogoControl.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	// https://maplibre.org/maplibre-gl-js/docs/API/classes/LogoControl/
+
 	import { onDestroy } from 'svelte';
 	import maplibregl from 'maplibre-gl';
 	import { getMapContext } from '../contexts.svelte.js';

diff --git a/src/lib/maplibre/controls/NavigationControl.svelte b/src/lib/maplibre/controls/NavigationControl.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	// https://maplibre.org/maplibre-gl-js/docs/API/classes/NavigationControl/
+
 	import { onDestroy } from 'svelte';
 	import maplibregl from 'maplibre-gl';
 	import { getMapContext } from '../contexts.svelte.js';

diff --git a/src/lib/maplibre/controls/ScaleControl.svelte b/src/lib/maplibre/controls/ScaleControl.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	// https://maplibre.org/maplibre-gl-js/docs/API/classes/ScaleControl/
+
 	import { onDestroy } from 'svelte';
 	import maplibregl from 'maplibre-gl';
 	import { getMapContext } from '../contexts.svelte.js';

diff --git a/src/lib/maplibre/controls/TerrainControl.svelte b/src/lib/maplibre/controls/TerrainControl.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	// https://maplibre.org/maplibre-gl-js/docs/API/classes/TerrainControl/
+
 	import { onDestroy } from 'svelte';
 	import maplibregl from 'maplibre-gl';
 	import { getMapContext, getSourceContext } from '../contexts.svelte.js';

diff --git a/src/lib/maplibre/layers/BackgroundLayer.svelte b/src/lib/maplibre/layers/BackgroundLayer.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
+	// https://maplibre.org/maplibre-style-spec/layers/#background
+
 	import type { Snippet } from 'svelte';
-	import type { BackgroundLayerSpecification } from 'maplibre-gl';
+	import maplibregl from 'maplibre-gl';
 	import RawLayer from './RawLayer.svelte';
 	import type { MapLayerEventProps } from './common.js';
 
-	interface Props extends Omit<BackgroundLayerSpecification, 'id' | 'source' | 'type'>, MapLayerEventProps {
+	interface Props extends Omit<maplibregl.BackgroundLayerSpecification, 'id' | 'source' | 'type'>, MapLayerEventProps {
 		id?: string;
 		beforeId?: string;
 		children?: Snippet;

diff --git a/src/lib/maplibre/layers/CircleLayer.svelte b/src/lib/maplibre/layers/CircleLayer.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
+	// https://maplibre.org/maplibre-style-spec/layers/#circle
+
 	import type { Snippet } from 'svelte';
-	import type { CircleLayerSpecification } from 'maplibre-gl';
+	import maplibregl from 'maplibre-gl';
 	import RawLayer from './RawLayer.svelte';
 	import type { MapLayerEventProps } from './common.js';
 
 	interface Props
-		extends Omit<CircleLayerSpecification, 'id' | 'source' | 'type' | 'source-layer'>,
+		extends Omit<maplibregl.CircleLayerSpecification, 'id' | 'source' | 'type' | 'source-layer'>,
 			MapLayerEventProps {
 		id?: string;
-		sourceLayer?: CircleLayerSpecification['source-layer'];
+		sourceLayer?: maplibregl.CircleLayerSpecification['source-layer'];
 		beforeId?: string;
 		children?: Snippet;
 	}

diff --git a/src/lib/maplibre/layers/FillExtrusionLayer.svelte b/src/lib/maplibre/layers/FillExtrusionLayer.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
+	// https://maplibre.org/maplibre-style-spec/layers/#fill-extrusion
+
 	import type { Snippet } from 'svelte';
-	import type { FillExtrusionLayerSpecification } from 'maplibre-gl';
+	import maplibregl from 'maplibre-gl';
 	import RawLayer from './RawLayer.svelte';
 	import type { MapLayerEventProps } from './common.js';
 
 	interface Props
-		extends Omit<FillExtrusionLayerSpecification, 'id' | 'source' | 'type' | 'source-layer'>,
+		extends Omit<maplibregl.FillExtrusionLayerSpecification, 'id' | 'source' | 'type' | 'source-layer'>,
 			MapLayerEventProps {
 		id?: string;
-		sourceLayer?: FillExtrusionLayerSpecification['source-layer'];
+		sourceLayer?: maplibregl.FillExtrusionLayerSpecification['source-layer'];
 		beforeId?: string;
 		children?: Snippet;
 	}

diff --git a/src/lib/maplibre/layers/FillLayer.svelte b/src/lib/maplibre/layers/FillLayer.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
+	//maplibre.org/maplibre-style-spec/layers/#fill
+
 	import type { Snippet } from 'svelte';
-	import type { FillLayerSpecification } from 'maplibre-gl';
+	import maplibregl from 'maplibre-gl';
 	import RawLayer from './RawLayer.svelte';
 	import type { MapLayerEventProps } from './common.js';
 
-	interface Props extends Omit<FillLayerSpecification, 'id' | 'source' | 'type' | 'source-layer'>, MapLayerEventProps {
+	interface Props
+		extends Omit<maplibregl.FillLayerSpecification, 'id' | 'source' | 'type' | 'source-layer'>,
+			MapLayerEventProps {
 		id?: string;
-		sourceLayer?: FillLayerSpecification['source-layer'];
+		sourceLayer?: maplibregl.FillLayerSpecification['source-layer'];
 		beforeId?: string;
 		children?: Snippet;
 	}

diff --git a/src/lib/maplibre/layers/HeatmapLayer.svelte b/src/lib/maplibre/layers/HeatmapLayer.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
+	// https://maplibre.org/maplibre-style-spec/layers/#heatmap
+
 	import type { Snippet } from 'svelte';
-	import type { HeatmapLayerSpecification } from 'maplibre-gl';
+	import maplibregl from 'maplibre-gl';
 	import RawLayer from './RawLayer.svelte';
 	import type { MapLayerEventProps } from './common.js';
 
 	interface Props
-		extends Omit<HeatmapLayerSpecification, 'id' | 'source' | 'type' | 'source-layer'>,
+		extends Omit<maplibregl.HeatmapLayerSpecification, 'id' | 'source' | 'type' | 'source-layer'>,
 			MapLayerEventProps {
 		id?: string;
-		sourceLayer?: HeatmapLayerSpecification['source-layer'];
+		sourceLayer?: maplibregl.HeatmapLayerSpecification['source-layer'];
 		beforeId?: string;
 		children?: Snippet;
 	}

diff --git a/src/lib/maplibre/layers/HillshadeLayer.svelte b/src/lib/maplibre/layers/HillshadeLayer.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
+	// https://maplibre.org/maplibre-style-spec/layers/#hillshade
+
 	import type { Snippet } from 'svelte';
-	import type { HillshadeLayerSpecification } from 'maplibre-gl';
+	import maplibregl from 'maplibre-gl';
 	import RawLayer from './RawLayer.svelte';
 	import type { MapLayerEventProps } from './common.js';
 
 	interface Props
-		extends Omit<HillshadeLayerSpecification, 'id' | 'source' | 'type' | 'source-layer'>,
+		extends Omit<maplibregl.HillshadeLayerSpecification, 'id' | 'source' | 'type' | 'source-layer'>,
 			MapLayerEventProps {
 		id?: string;
-		sourceLayer?: HillshadeLayerSpecification['source-layer'];
+		sourceLayer?: maplibregl.HillshadeLayerSpecification['source-layer'];
 		beforeId?: string;
 		children?: Snippet;
 	}

diff --git a/src/lib/maplibre/layers/LineLayer.svelte b/src/lib/maplibre/layers/LineLayer.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
+	// https://maplibre.org/maplibre-style-spec/layers/#line
+
 	import type { Snippet } from 'svelte';
-	import type { LineLayerSpecification } from 'maplibre-gl';
+	import maplibregl from 'maplibre-gl';
 	import RawLayer from './RawLayer.svelte';
 	import type { MapLayerEventProps } from './common.js';
 
-	interface Props extends Omit<LineLayerSpecification, 'id' | 'source' | 'type' | 'source-layer'>, MapLayerEventProps {
+	interface Props
+		extends Omit<maplibregl.LineLayerSpecification, 'id' | 'source' | 'type' | 'source-layer'>,
+			MapLayerEventProps {
 		id?: string;
-		sourceLayer?: LineLayerSpecification['source-layer'];
+		sourceLayer?: maplibregl.LineLayerSpecification['source-layer'];
 		beforeId?: string;
 		children?: Snippet;
 	}

diff --git a/src/lib/maplibre/layers/RasterLayer.svelte b/src/lib/maplibre/layers/RasterLayer.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
+	// https://maplibre.org/maplibre-style-spec/layers/#raster
+
 	import type { Snippet } from 'svelte';
-	import type { RasterLayerSpecification } from 'maplibre-gl';
+	import maplibregl from 'maplibre-gl';
 	import RawLayer from './RawLayer.svelte';
 	import type { MapLayerEventProps } from './common.js';
 
 	interface Props
-		extends Omit<RasterLayerSpecification, 'id' | 'source' | 'type' | 'source-layer'>,
+		extends Omit<maplibregl.RasterLayerSpecification, 'id' | 'source' | 'type' | 'source-layer'>,
 			MapLayerEventProps {
 		id?: string;
-		sourceLayer?: RasterLayerSpecification['source-layer'];
+		sourceLayer?: maplibregl.RasterLayerSpecification['source-layer'];
 		beforeId?: string;
 		children?: Snippet;
 	}