docs: Add '3D Buildings' Example (#80)

* chore: Update devDependencies 2025-01-16

* docs: Add '3D Buildings' example

src/content/examples/3d-buildings/Buildings3D.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { MapLibre, FillExtrusionLayer } from 'svelte-maplibre-gl';
+</script>
+
+<MapLibre
+	class="h-[55vh] min-h-[300px]"
+	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+	zoom={14.5}
+	pitch={70}
+	minZoom={14}
+	bearing={0}
+	center={[-74.01, 40.7075]}
+>
+	<FillExtrusionLayer
+		source="carto"
+		sourceLayer="building"
+		minzoom={14}
+		filter={['!=', ['get', 'hide_3d'], true]}
+		paint={{
+			'fill-extrusion-color': [
+				'interpolate',
+				['linear'],
+				['get', 'render_height'],
+				0,
+				'#aaccbb',
+				200,
+				'royalblue',
+				400,
+				'purple'
+			],
+			'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 14, 0, 15, ['get', 'render_height']],
+			'fill-extrusion-base': ['case', ['>=', ['get', 'zoom'], 14], ['get', 'render_min_height'], 0]
+		}}
+	/>
+</MapLibre>

src/content/examples/3d-buildings/content.svelte.md

@@ -0,0 +1,16 @@
+---
+title: 3D Buildings
+description: Use extrusions to display buildings' height in 3D.
+original: https://maplibre.org/maplibre-gl-js/docs/examples/3d-buildings/
+---
+
+<script lang="ts">
+  import Demo from "./Buildings3D.svelte";
+  import demoRaw from "./Buildings3D.svelte?raw";
+  import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
+</script>
+
+<Demo />
+
+<CodeBlock content={demoRaw} {shiki} />

src/content/examples/toc.ts

@@ -15,7 +15,8 @@ export const toc: Toc = [
 			'/examples/video-on-a-map': 'Video on a Map',
 			'/examples/fullscreen': 'Fullscreen',
 			'/examples/geolocate': 'Locate the User',
-			'/examples/cursor': 'Change Cursor'
+			'/examples/cursor': 'Change Cursor',
+			'/examples/3d-buildings': '3D Buildings'
 		}
 	},
 	{