Legend symbols maplibre

.changeset/breezy-pans-tan.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-svelte": major
+---
+
+add svelte component library to create legend symbols for maplibre styles

.changeset/jolly-bears-create.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-react": major
+---
+
+add react component library to create legend symbols for maplibre styles

.changeset/polite-bobcats-do.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre": major
+---
+
+add core library to create legend symbols for maplibre styles

.changeset/quick-lines-say.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-vue": major
+---
+
+add vue component library to create legend symbols for maplibre styles

.github/workflows/release.yml

@@ -10,6 +10,7 @@ jobs:
  release:
  runs-on: ubuntu-latest
  permissions:
+ id-token: write
  contents: write
  pull-requests: write
  steps:
@@ -21,10 +22,12 @@ jobs:
  registry-url: https://registry.npmjs.org
  - run: npm ci
  - run: npm run build
- - uses: changesets/action@v1
+ - name: Create Release Pull Request or Publish to npm
+ uses: changesets/action@v1
  with:
  publish: npm run release
  version: npm run version-packages
+ commit: "chore: bump package versions"
+ createGithubReleases: true
  env:
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

packages/core/legend-symbols-maplibre/README.md

@@ -1,6 +1,8 @@
 # @xtramaps/legend-symbols-maplibre
 
-Core library for generating legend symbols from MapLibre styles.
+Framework-agnostic library for generating legend symbols from MapLibre GL styles. Takes a style layer and produces a plain virtual DOM tree (`{ element, attributes, children }`) that can be rendered by any framework.
+
+Supports `circle`, `line`, `fill`, and `symbol` layer types.
 
 ## Install
 
@@ -11,9 +13,31 @@ npm install @xtramaps/legend-symbols-maplibre
 ## Usage
 
 ```ts
-import { greet } from "@xtramaps/legend-symbols-maplibre";
+import { legendSymbol } from "@xtramaps/legend-symbols-maplibre";
+
+const tree = legendSymbol({ zoom: 14, layer: myLayer, sprite: mySpriteData });
+
+// tree is a plain object like:
+// { element: "svg", attributes: { viewBox: "0 0 20 20", ... }, children: [...] }
+```
+
+### Utilities
+
+```ts
+import {
+ exprHandler,
+ mapImageToDataURL,
+ cache,
+ loadImage,
+ loadJson,
+} from "@xtramaps/legend-symbols-maplibre";
 ```
 
+- `exprHandler({ zoom, properties })` - Evaluates MapLibre style expressions for a given zoom level and feature properties.
+- `mapImageToDataURL(map, icon)` - Extracts an icon from a MapLibre map instance as a data URL.
+- `cache` - Simple reference-counted cache for sprite data.
+- `loadImage(url, { transformRequest })` / `loadJson(url, { transformRequest })` - Load sprite assets with optional request transformation.
+
 ## License
 
 MIT

packages/core/legend-symbols-maplibre/package.json

@@ -1,7 +1,8 @@
 {
  "name": "@xtramaps/legend-symbols-maplibre",
- "version": "0.0.1",
+ "version": "0.0.0-next-20260320165054",
  "license": "MIT",
+ "homepage": "https://github.com/ldproxy/xtramaps/tree/main/packages/core/legend-symbols-maplibre#readme",
  "repository": {
  "type": "git",
  "url": "https://github.com/ldproxy/xtramaps.git",
@@ -29,5 +30,8 @@
  "scripts": {
  "build": "vite build",
  "typecheck": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@maplibre/maplibre-gl-style-spec": "^22.0.0"
  }
 }

packages/core/legend-symbols-maplibre/src/Circle.ts

@@ -0,0 +1,53 @@
+import type { SymbolHandlerProps, SymbolTree } from "./types";
+
+export function Circle({ expr, layer }: SymbolHandlerProps): SymbolTree {
+ const radius = Math.min(expr(layer, "paint", "circle-radius") as number, 8);
+ const strokeWidth = Math.min(
+ expr(layer, "paint", "circle-stroke-width") as number,
+ 4,
+ );
+ const fillColor = expr(layer, "paint", "circle-color") as string;
+ const fillOpacity = expr(layer, "paint", "circle-opacity") as number;
+ const strokeColor = expr(layer, "paint", "circle-stroke-color") as string;
+ const strokeOpacity = expr(layer, "paint", "circle-stroke-opacity") as number;
+ const blur = expr(layer, "paint", "circle-blur") as number;
+
+ const innerRadius = radius - strokeWidth / 2;
+
+ return {
+ element: "svg",
+ attributes: {
+ viewBox: "0 0 20 20",
+ xmlns: "http://www.w3.org/2000/svg",
+ style: {
+ filter: `blur(${blur * innerRadius}px)`,
+ },
+ },
+ children: [
+ {
+ element: "circle",
+ attributes: {
+ key: "l1",
+ cx: 10,
+ cy: 10,
+ fill: fillColor,
+ opacity: fillOpacity,
+ r: innerRadius,
+ },
+ },
+ {
+ element: "circle",
+ attributes: {
+ key: "l2",
+ cx: 10,
+ cy: 10,
+ fill: "transparent",
+ opacity: strokeOpacity,
+ r: radius,
+ "stroke-width": strokeWidth,
+ stroke: strokeColor,
+ },
+ },
+ ],
+ };
+}

packages/core/legend-symbols-maplibre/src/Fill.ts

@@ -0,0 +1,31 @@
+import type { SymbolHandlerProps, SymbolTree } from "./types";
+
+export function Fill({ image, expr, layer }: SymbolHandlerProps): SymbolTree {
+ const { url: dataUrl } = image(
+ expr(layer, "paint", "fill-pattern") as string,
+ );
+ const baseStyle: Record<string, unknown> = {
+ width: "100%",
+ height: "100%",
+ opacity: expr(layer, "paint", "fill-opacity"),
+ };
+ const style = dataUrl
+ ? {
+ ...baseStyle,
+ backgroundImage: `url(${dataUrl})`,
+ backgroundPosition: "top left",
+ }
+ : {
+ ...baseStyle,
+ backgroundColor: expr(layer, "paint", "fill-color"),
+ backgroundSize: "66% 66%",
+ backgroundPosition: "center",
+ };
+
+ return {
+ element: "div",
+ attributes: {
+ style,
+ },
+ };
+}

.changeset/breezy-pans-tan.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-svelte": major
+---
+
+add svelte component library to create legend symbols for maplibre styles

.changeset/jolly-bears-create.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-react": major
+---
+
+add react component library to create legend symbols for maplibre styles

.changeset/polite-bobcats-do.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre": major
+---
+
+add core library to create legend symbols for maplibre styles

.changeset/quick-lines-say.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-vue": major
+---
+
+add vue component library to create legend symbols for maplibre styles

.github/workflows/release.yml

@@ -10,6 +10,7 @@ jobs:
  release:
  runs-on: ubuntu-latest
  permissions:
+ id-token: write
  contents: write
  pull-requests: write
  steps:
@@ -21,10 +22,12 @@ jobs:
  registry-url: https://registry.npmjs.org
  - run: npm ci
  - run: npm run build
- - uses: changesets/action@v1
+ - name: Create Release Pull Request or Publish to npm
+ uses: changesets/action@v1
  with:
  publish: npm run release
  version: npm run version-packages
+ commit: "chore: bump package versions"
+ createGithubReleases: true
  env:
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

packages/core/legend-symbols-maplibre/README.md

@@ -1,6 +1,8 @@
 # @xtramaps/legend-symbols-maplibre
 
-Core library for generating legend symbols from MapLibre styles.
+Framework-agnostic library for generating legend symbols from MapLibre GL styles. Takes a style layer and produces a plain virtual DOM tree (`{ element, attributes, children }`) that can be rendered by any framework.
+
+Supports `circle`, `line`, `fill`, and `symbol` layer types.
 
 ## Install
 
@@ -11,9 +13,31 @@ npm install @xtramaps/legend-symbols-maplibre
 ## Usage
 
 ```ts
-import { greet } from "@xtramaps/legend-symbols-maplibre";
+import { legendSymbol } from "@xtramaps/legend-symbols-maplibre";
+
+const tree = legendSymbol({ zoom: 14, layer: myLayer, sprite: mySpriteData });
+
+// tree is a plain object like:
+// { element: "svg", attributes: { viewBox: "0 0 20 20", ... }, children: [...] }
+```
+
+### Utilities
+
+```ts
+import {
+ exprHandler,
+ mapImageToDataURL,
+ cache,
+ loadImage,
+ loadJson,
+} from "@xtramaps/legend-symbols-maplibre";
 ```
 
+- `exprHandler({ zoom, properties })` - Evaluates MapLibre style expressions for a given zoom level and feature properties.
+- `mapImageToDataURL(map, icon)` - Extracts an icon from a MapLibre map instance as a data URL.
+- `cache` - Simple reference-counted cache for sprite data.
+- `loadImage(url, { transformRequest })` / `loadJson(url, { transformRequest })` - Load sprite assets with optional request transformation.
+
 ## License
 
 MIT

packages/core/legend-symbols-maplibre/package.json

@@ -1,7 +1,8 @@
 {
  "name": "@xtramaps/legend-symbols-maplibre",
- "version": "0.0.1",
+ "version": "0.0.0-next-20260320165054",
  "license": "MIT",
+ "homepage": "https://github.com/ldproxy/xtramaps/tree/main/packages/core/legend-symbols-maplibre#readme",
  "repository": {
  "type": "git",
  "url": "https://github.com/ldproxy/xtramaps.git",
@@ -29,5 +30,8 @@
  "scripts": {
  "build": "vite build",
  "typecheck": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@maplibre/maplibre-gl-style-spec": "^22.0.0"
  }
 }

packages/core/legend-symbols-maplibre/src/Circle.ts

@@ -0,0 +1,53 @@
+import type { SymbolHandlerProps, SymbolTree } from "./types";
+
+export function Circle({ expr, layer }: SymbolHandlerProps): SymbolTree {
+ const radius = Math.min(expr(layer, "paint", "circle-radius") as number, 8);
+ const strokeWidth = Math.min(
+ expr(layer, "paint", "circle-stroke-width") as number,
+ 4,
+ );
+ const fillColor = expr(layer, "paint", "circle-color") as string;
+ const fillOpacity = expr(layer, "paint", "circle-opacity") as number;
+ const strokeColor = expr(layer, "paint", "circle-stroke-color") as string;
+ const strokeOpacity = expr(layer, "paint", "circle-stroke-opacity") as number;
+ const blur = expr(layer, "paint", "circle-blur") as number;
+
+ const innerRadius = radius - strokeWidth / 2;
+
+ return {
+ element: "svg",
+ attributes: {
+ viewBox: "0 0 20 20",
+ xmlns: "http://www.w3.org/2000/svg",
+ style: {
+ filter: `blur(${blur * innerRadius}px)`,
+ },
+ },
+ children: [
+ {
+ element: "circle",
+ attributes: {
+ key: "l1",
+ cx: 10,
+ cy: 10,
+ fill: fillColor,
+ opacity: fillOpacity,
+ r: innerRadius,
+ },
+ },
+ {
+ element: "circle",
+ attributes: {
+ key: "l2",
+ cx: 10,
+ cy: 10,
+ fill: "transparent",
+ opacity: strokeOpacity,
+ r: radius,
+ "stroke-width": strokeWidth,
+ stroke: strokeColor,
+ },
+ },
+ ],
+ };
+}

packages/core/legend-symbols-maplibre/src/Fill.ts

@@ -0,0 +1,31 @@
+import type { SymbolHandlerProps, SymbolTree } from "./types";
+
+export function Fill({ image, expr, layer }: SymbolHandlerProps): SymbolTree {
+ const { url: dataUrl } = image(
+ expr(layer, "paint", "fill-pattern") as string,
+ );
+ const baseStyle: Record<string, unknown> = {
+ width: "100%",
+ height: "100%",
+ opacity: expr(layer, "paint", "fill-opacity"),
+ };
+ const style = dataUrl
+ ? {
+ ...baseStyle,
+ backgroundImage: `url(${dataUrl})`,
+ backgroundPosition: "top left",
+ }
+ : {
+ ...baseStyle,
+ backgroundColor: expr(layer, "paint", "fill-color"),
+ backgroundSize: "66% 66%",
+ backgroundPosition: "center",
+ };
+
+ return {
+ element: "div",
+ attributes: {
+ style,
+ },
+ };
+}

.changeset/breezy-pans-tan.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-svelte": major
+---
+
+add svelte component library to create legend symbols for maplibre styles

.changeset/jolly-bears-create.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-react": major
+---
+
+add react component library to create legend symbols for maplibre styles

.changeset/polite-bobcats-do.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre": major
+---
+
+add core library to create legend symbols for maplibre styles

.changeset/quick-lines-say.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-vue": major
+---
+
+add vue component library to create legend symbols for maplibre styles

.github/workflows/release.yml

@@ -10,6 +10,7 @@ jobs:
  release:
  runs-on: ubuntu-latest
  permissions:
+ id-token: write
  contents: write
  pull-requests: write
  steps:
@@ -21,10 +22,12 @@ jobs:
  registry-url: https://registry.npmjs.org
  - run: npm ci
  - run: npm run build
- - uses: changesets/action@v1
+ - name: Create Release Pull Request or Publish to npm
+ uses: changesets/action@v1
  with:
  publish: npm run release
  version: npm run version-packages
+ commit: "chore: bump package versions"
+ createGithubReleases: true
  env:
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

packages/core/legend-symbols-maplibre/README.md

@@ -1,6 +1,8 @@
 # @xtramaps/legend-symbols-maplibre
 
-Core library for generating legend symbols from MapLibre styles.
+Framework-agnostic library for generating legend symbols from MapLibre GL styles. Takes a style layer and produces a plain virtual DOM tree (`{ element, attributes, children }`) that can be rendered by any framework.
+
+Supports `circle`, `line`, `fill`, and `symbol` layer types.
 
 ## Install
 
@@ -11,9 +13,31 @@ npm install @xtramaps/legend-symbols-maplibre
 ## Usage
 
 ```ts
-import { greet } from "@xtramaps/legend-symbols-maplibre";
+import { legendSymbol } from "@xtramaps/legend-symbols-maplibre";
+
+const tree = legendSymbol({ zoom: 14, layer: myLayer, sprite: mySpriteData });
+
+// tree is a plain object like:
+// { element: "svg", attributes: { viewBox: "0 0 20 20", ... }, children: [...] }
+```
+
+### Utilities
+
+```ts
+import {
+ exprHandler,
+ mapImageToDataURL,
+ cache,
+ loadImage,
+ loadJson,
+} from "@xtramaps/legend-symbols-maplibre";
 ```
 
+- `exprHandler({ zoom, properties })` - Evaluates MapLibre style expressions for a given zoom level and feature properties.
+- `mapImageToDataURL(map, icon)` - Extracts an icon from a MapLibre map instance as a data URL.
+- `cache` - Simple reference-counted cache for sprite data.
+- `loadImage(url, { transformRequest })` / `loadJson(url, { transformRequest })` - Load sprite assets with optional request transformation.
+
 ## License
 
 MIT

packages/core/legend-symbols-maplibre/package.json

@@ -1,7 +1,8 @@
 {
  "name": "@xtramaps/legend-symbols-maplibre",
- "version": "0.0.1",
+ "version": "0.0.0-next-20260320165054",
  "license": "MIT",
+ "homepage": "https://github.com/ldproxy/xtramaps/tree/main/packages/core/legend-symbols-maplibre#readme",
  "repository": {
  "type": "git",
  "url": "https://github.com/ldproxy/xtramaps.git",
@@ -29,5 +30,8 @@
  "scripts": {
  "build": "vite build",
  "typecheck": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@maplibre/maplibre-gl-style-spec": "^22.0.0"
  }
 }

packages/core/legend-symbols-maplibre/src/Circle.ts

@@ -0,0 +1,53 @@
+import type { SymbolHandlerProps, SymbolTree } from "./types";
+
+export function Circle({ expr, layer }: SymbolHandlerProps): SymbolTree {
+ const radius = Math.min(expr(layer, "paint", "circle-radius") as number, 8);
+ const strokeWidth = Math.min(
+ expr(layer, "paint", "circle-stroke-width") as number,
+ 4,
+ );
+ const fillColor = expr(layer, "paint", "circle-color") as string;
+ const fillOpacity = expr(layer, "paint", "circle-opacity") as number;
+ const strokeColor = expr(layer, "paint", "circle-stroke-color") as string;
+ const strokeOpacity = expr(layer, "paint", "circle-stroke-opacity") as number;
+ const blur = expr(layer, "paint", "circle-blur") as number;
+
+ const innerRadius = radius - strokeWidth / 2;
+
+ return {
+ element: "svg",
+ attributes: {
+ viewBox: "0 0 20 20",
+ xmlns: "http://www.w3.org/2000/svg",
+ style: {
+ filter: `blur(${blur * innerRadius}px)`,
+ },
+ },
+ children: [
+ {
+ element: "circle",
+ attributes: {
+ key: "l1",
+ cx: 10,
+ cy: 10,
+ fill: fillColor,
+ opacity: fillOpacity,
+ r: innerRadius,
+ },
+ },
+ {
+ element: "circle",
+ attributes: {
+ key: "l2",
+ cx: 10,
+ cy: 10,
+ fill: "transparent",
+ opacity: strokeOpacity,
+ r: radius,
+ "stroke-width": strokeWidth,
+ stroke: strokeColor,
+ },
+ },
+ ],
+ };
+}

packages/core/legend-symbols-maplibre/src/Fill.ts

@@ -0,0 +1,31 @@
+import type { SymbolHandlerProps, SymbolTree } from "./types";
+
+export function Fill({ image, expr, layer }: SymbolHandlerProps): SymbolTree {
+ const { url: dataUrl } = image(
+ expr(layer, "paint", "fill-pattern") as string,
+ );
+ const baseStyle: Record<string, unknown> = {
+ width: "100%",
+ height: "100%",
+ opacity: expr(layer, "paint", "fill-opacity"),
+ };
+ const style = dataUrl
+ ? {
+ ...baseStyle,
+ backgroundImage: `url(${dataUrl})`,
+ backgroundPosition: "top left",
+ }
+ : {
+ ...baseStyle,
+ backgroundColor: expr(layer, "paint", "fill-color"),
+ backgroundSize: "66% 66%",
+ backgroundPosition: "center",
+ };
+
+ return {
+ element: "div",
+ attributes: {
+ style,
+ },
+ };
+}

.changeset/breezy-pans-tan.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-svelte": major
+---
+
+add svelte component library to create legend symbols for maplibre styles

.changeset/jolly-bears-create.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-react": major
+---
+
+add react component library to create legend symbols for maplibre styles

.changeset/polite-bobcats-do.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre": major
+---
+
+add core library to create legend symbols for maplibre styles

.changeset/quick-lines-say.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-vue": major
+---
+
+add vue component library to create legend symbols for maplibre styles

.github/workflows/release.yml

@@ -10,6 +10,7 @@ jobs:
  release:
  runs-on: ubuntu-latest
  permissions:
+ id-token: write
  contents: write
  pull-requests: write
  steps:
@@ -21,10 +22,12 @@ jobs:
  registry-url: https://registry.npmjs.org
  - run: npm ci
  - run: npm run build
- - uses: changesets/action@v1
+ - name: Create Release Pull Request or Publish to npm
+ uses: changesets/action@v1
  with:
  publish: npm run release
  version: npm run version-packages
+ commit: "chore: bump package versions"
+ createGithubReleases: true
  env:
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

packages/core/legend-symbols-maplibre/README.md

@@ -1,6 +1,8 @@
 # @xtramaps/legend-symbols-maplibre
 
-Core library for generating legend symbols from MapLibre styles.
+Framework-agnostic library for generating legend symbols from MapLibre GL styles. Takes a style layer and produces a plain virtual DOM tree (`{ element, attributes, children }`) that can be rendered by any framework.
+
+Supports `circle`, `line`, `fill`, and `symbol` layer types.
 
 ## Install
 
@@ -11,9 +13,31 @@ npm install @xtramaps/legend-symbols-maplibre
 ## Usage
 
 ```ts
-import { greet } from "@xtramaps/legend-symbols-maplibre";
+import { legendSymbol } from "@xtramaps/legend-symbols-maplibre";
+
+const tree = legendSymbol({ zoom: 14, layer: myLayer, sprite: mySpriteData });
+
+// tree is a plain object like:
+// { element: "svg", attributes: { viewBox: "0 0 20 20", ... }, children: [...] }
+```
+
+### Utilities
+
+```ts
+import {
+ exprHandler,
+ mapImageToDataURL,
+ cache,
+ loadImage,
+ loadJson,
+} from "@xtramaps/legend-symbols-maplibre";
 ```
 
+- `exprHandler({ zoom, properties })` - Evaluates MapLibre style expressions for a given zoom level and feature properties.
+- `mapImageToDataURL(map, icon)` - Extracts an icon from a MapLibre map instance as a data URL.
+- `cache` - Simple reference-counted cache for sprite data.
+- `loadImage(url, { transformRequest })` / `loadJson(url, { transformRequest })` - Load sprite assets with optional request transformation.
+
 ## License
 
 MIT

packages/core/legend-symbols-maplibre/package.json

@@ -1,7 +1,8 @@
 {
  "name": "@xtramaps/legend-symbols-maplibre",
- "version": "0.0.1",
+ "version": "0.0.0-next-20260320165054",
  "license": "MIT",
+ "homepage": "https://github.com/ldproxy/xtramaps/tree/main/packages/core/legend-symbols-maplibre#readme",
  "repository": {
  "type": "git",
  "url": "https://github.com/ldproxy/xtramaps.git",
@@ -29,5 +30,8 @@
  "scripts": {
  "build": "vite build",
  "typecheck": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@maplibre/maplibre-gl-style-spec": "^22.0.0"
  }
 }

packages/core/legend-symbols-maplibre/src/Circle.ts

@@ -0,0 +1,53 @@
+import type { SymbolHandlerProps, SymbolTree } from "./types";
+
+export function Circle({ expr, layer }: SymbolHandlerProps): SymbolTree {
+ const radius = Math.min(expr(layer, "paint", "circle-radius") as number, 8);
+ const strokeWidth = Math.min(
+ expr(layer, "paint", "circle-stroke-width") as number,
+ 4,
+ );
+ const fillColor = expr(layer, "paint", "circle-color") as string;
+ const fillOpacity = expr(layer, "paint", "circle-opacity") as number;
+ const strokeColor = expr(layer, "paint", "circle-stroke-color") as string;
+ const strokeOpacity = expr(layer, "paint", "circle-stroke-opacity") as number;
+ const blur = expr(layer, "paint", "circle-blur") as number;
+
+ const innerRadius = radius - strokeWidth / 2;
+
+ return {
+ element: "svg",
+ attributes: {
+ viewBox: "0 0 20 20",
+ xmlns: "http://www.w3.org/2000/svg",
+ style: {
+ filter: `blur(${blur * innerRadius}px)`,
+ },
+ },
+ children: [
+ {
+ element: "circle",
+ attributes: {
+ key: "l1",
+ cx: 10,
+ cy: 10,
+ fill: fillColor,
+ opacity: fillOpacity,
+ r: innerRadius,
+ },
+ },
+ {
+ element: "circle",
+ attributes: {
+ key: "l2",
+ cx: 10,
+ cy: 10,
+ fill: "transparent",
+ opacity: strokeOpacity,
+ r: radius,
+ "stroke-width": strokeWidth,
+ stroke: strokeColor,
+ },
+ },
+ ],
+ };
+}

packages/core/legend-symbols-maplibre/src/Fill.ts

@@ -0,0 +1,31 @@
+import type { SymbolHandlerProps, SymbolTree } from "./types";
+
+export function Fill({ image, expr, layer }: SymbolHandlerProps): SymbolTree {
+ const { url: dataUrl } = image(
+ expr(layer, "paint", "fill-pattern") as string,
+ );
+ const baseStyle: Record<string, unknown> = {
+ width: "100%",
+ height: "100%",
+ opacity: expr(layer, "paint", "fill-opacity"),
+ };
+ const style = dataUrl
+ ? {
+ ...baseStyle,
+ backgroundImage: `url(${dataUrl})`,
+ backgroundPosition: "top left",
+ }
+ : {
+ ...baseStyle,
+ backgroundColor: expr(layer, "paint", "fill-color"),
+ backgroundSize: "66% 66%",
+ backgroundPosition: "center",
+ };
+
+ return {
+ element: "div",
+ attributes: {
+ style,
+ },
+ };
+}

.changeset/breezy-pans-tan.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-svelte": major
+---
+
+add svelte component library to create legend symbols for maplibre styles

.changeset/jolly-bears-create.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-react": major
+---
+
+add react component library to create legend symbols for maplibre styles

.changeset/polite-bobcats-do.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre": major
+---
+
+add core library to create legend symbols for maplibre styles

.changeset/quick-lines-say.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-vue": major
+---
+
+add vue component library to create legend symbols for maplibre styles

.github/workflows/release.yml

@@ -10,6 +10,7 @@ jobs:
  release:
  runs-on: ubuntu-latest
  permissions:
+ id-token: write
  contents: write
  pull-requests: write
  steps:
@@ -21,10 +22,12 @@ jobs:
  registry-url: https://registry.npmjs.org
  - run: npm ci
  - run: npm run build
- - uses: changesets/action@v1
+ - name: Create Release Pull Request or Publish to npm
+ uses: changesets/action@v1
  with:
  publish: npm run release
  version: npm run version-packages
+ commit: "chore: bump package versions"
+ createGithubReleases: true
  env:
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

packages/core/legend-symbols-maplibre/README.md

@@ -1,6 +1,8 @@
 # @xtramaps/legend-symbols-maplibre
 
-Core library for generating legend symbols from MapLibre styles.
+Framework-agnostic library for generating legend symbols from MapLibre GL styles. Takes a style layer and produces a plain virtual DOM tree (`{ element, attributes, children }`) that can be rendered by any framework.
+
+Supports `circle`, `line`, `fill`, and `symbol` layer types.
 
 ## Install
 
@@ -11,9 +13,31 @@ npm install @xtramaps/legend-symbols-maplibre
 ## Usage
 
 ```ts
-import { greet } from "@xtramaps/legend-symbols-maplibre";
+import { legendSymbol } from "@xtramaps/legend-symbols-maplibre";
+
+const tree = legendSymbol({ zoom: 14, layer: myLayer, sprite: mySpriteData });
+
+// tree is a plain object like:
+// { element: "svg", attributes: { viewBox: "0 0 20 20", ... }, children: [...] }
+```
+
+### Utilities
+
+```ts
+import {
+ exprHandler,
+ mapImageToDataURL,
+ cache,
+ loadImage,
+ loadJson,
+} from "@xtramaps/legend-symbols-maplibre";
 ```
 
+- `exprHandler({ zoom, properties })` - Evaluates MapLibre style expressions for a given zoom level and feature properties.
+- `mapImageToDataURL(map, icon)` - Extracts an icon from a MapLibre map instance as a data URL.
+- `cache` - Simple reference-counted cache for sprite data.
+- `loadImage(url, { transformRequest })` / `loadJson(url, { transformRequest })` - Load sprite assets with optional request transformation.
+
 ## License
 
 MIT

packages/core/legend-symbols-maplibre/package.json

@@ -1,7 +1,8 @@
 {
  "name": "@xtramaps/legend-symbols-maplibre",
- "version": "0.0.1",
+ "version": "0.0.0-next-20260320165054",
  "license": "MIT",
+ "homepage": "https://github.com/ldproxy/xtramaps/tree/main/packages/core/legend-symbols-maplibre#readme",
  "repository": {
  "type": "git",
  "url": "https://github.com/ldproxy/xtramaps.git",
@@ -29,5 +30,8 @@
  "scripts": {
  "build": "vite build",
  "typecheck": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@maplibre/maplibre-gl-style-spec": "^22.0.0"
  }
 }

packages/core/legend-symbols-maplibre/src/Circle.ts

@@ -0,0 +1,53 @@
+import type { SymbolHandlerProps, SymbolTree } from "./types";
+
+export function Circle({ expr, layer }: SymbolHandlerProps): SymbolTree {
+ const radius = Math.min(expr(layer, "paint", "circle-radius") as number, 8);
+ const strokeWidth = Math.min(
+ expr(layer, "paint", "circle-stroke-width") as number,
+ 4,
+ );
+ const fillColor = expr(layer, "paint", "circle-color") as string;
+ const fillOpacity = expr(layer, "paint", "circle-opacity") as number;
+ const strokeColor = expr(layer, "paint", "circle-stroke-color") as string;
+ const strokeOpacity = expr(layer, "paint", "circle-stroke-opacity") as number;
+ const blur = expr(layer, "paint", "circle-blur") as number;
+
+ const innerRadius = radius - strokeWidth / 2;
+
+ return {
+ element: "svg",
+ attributes: {
+ viewBox: "0 0 20 20",
+ xmlns: "http://www.w3.org/2000/svg",
+ style: {
+ filter: `blur(${blur * innerRadius}px)`,
+ },
+ },
+ children: [
+ {
+ element: "circle",
+ attributes: {
+ key: "l1",
+ cx: 10,
+ cy: 10,
+ fill: fillColor,
+ opacity: fillOpacity,
+ r: innerRadius,
+ },
+ },
+ {
+ element: "circle",
+ attributes: {
+ key: "l2",
+ cx: 10,
+ cy: 10,
+ fill: "transparent",
+ opacity: strokeOpacity,
+ r: radius,
+ "stroke-width": strokeWidth,
+ stroke: strokeColor,
+ },
+ },
+ ],
+ };
+}

packages/core/legend-symbols-maplibre/src/Fill.ts

@@ -0,0 +1,31 @@
+import type { SymbolHandlerProps, SymbolTree } from "./types";
+
+export function Fill({ image, expr, layer }: SymbolHandlerProps): SymbolTree {
+ const { url: dataUrl } = image(
+ expr(layer, "paint", "fill-pattern") as string,
+ );
+ const baseStyle: Record<string, unknown> = {
+ width: "100%",
+ height: "100%",
+ opacity: expr(layer, "paint", "fill-opacity"),
+ };
+ const style = dataUrl
+ ? {
+ ...baseStyle,
+ backgroundImage: `url(${dataUrl})`,
+ backgroundPosition: "top left",
+ }
+ : {
+ ...baseStyle,
+ backgroundColor: expr(layer, "paint", "fill-color"),
+ backgroundSize: "66% 66%",
+ backgroundPosition: "center",
+ };
+
+ return {
+ element: "div",
+ attributes: {
+ style,
+ },
+ };
+}

.changeset/breezy-pans-tan.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-svelte": major
+---
+
+add svelte component library to create legend symbols for maplibre styles

.changeset/jolly-bears-create.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-react": major
+---
+
+add react component library to create legend symbols for maplibre styles

.changeset/polite-bobcats-do.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre": major
+---
+
+add core library to create legend symbols for maplibre styles

.changeset/quick-lines-say.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-vue": major
+---
+
+add vue component library to create legend symbols for maplibre styles

.github/workflows/release.yml

@@ -10,6 +10,7 @@ jobs:
  release:
  runs-on: ubuntu-latest
  permissions:
+ id-token: write
  contents: write
  pull-requests: write
  steps:
@@ -21,10 +22,12 @@ jobs:
  registry-url: https://registry.npmjs.org
  - run: npm ci
  - run: npm run build
- - uses: changesets/action@v1
+ - name: Create Release Pull Request or Publish to npm
+ uses: changesets/action@v1
  with:
  publish: npm run release
  version: npm run version-packages
+ commit: "chore: bump package versions"
+ createGithubReleases: true
  env:
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

packages/core/legend-symbols-maplibre/README.md

@@ -1,6 +1,8 @@
 # @xtramaps/legend-symbols-maplibre
 
-Core library for generating legend symbols from MapLibre styles.
+Framework-agnostic library for generating legend symbols from MapLibre GL styles. Takes a style layer and produces a plain virtual DOM tree (`{ element, attributes, children }`) that can be rendered by any framework.
+
+Supports `circle`, `line`, `fill`, and `symbol` layer types.
 
 ## Install
 
@@ -11,9 +13,31 @@ npm install @xtramaps/legend-symbols-maplibre
 ## Usage
 
 ```ts
-import { greet } from "@xtramaps/legend-symbols-maplibre";
+import { legendSymbol } from "@xtramaps/legend-symbols-maplibre";
+
+const tree = legendSymbol({ zoom: 14, layer: myLayer, sprite: mySpriteData });
+
+// tree is a plain object like:
+// { element: "svg", attributes: { viewBox: "0 0 20 20", ... }, children: [...] }
+```
+
+### Utilities
+
+```ts
+import {
+ exprHandler,
+ mapImageToDataURL,
+ cache,
+ loadImage,
+ loadJson,
+} from "@xtramaps/legend-symbols-maplibre";
 ```
 
+- `exprHandler({ zoom, properties })` - Evaluates MapLibre style expressions for a given zoom level and feature properties.
+- `mapImageToDataURL(map, icon)` - Extracts an icon from a MapLibre map instance as a data URL.
+- `cache` - Simple reference-counted cache for sprite data.
+- `loadImage(url, { transformRequest })` / `loadJson(url, { transformRequest })` - Load sprite assets with optional request transformation.
+
 ## License
 
 MIT

packages/core/legend-symbols-maplibre/package.json

@@ -1,7 +1,8 @@
 {
  "name": "@xtramaps/legend-symbols-maplibre",
- "version": "0.0.1",
+ "version": "0.0.0-next-20260320165054",
  "license": "MIT",
+ "homepage": "https://github.com/ldproxy/xtramaps/tree/main/packages/core/legend-symbols-maplibre#readme",
  "repository": {
  "type": "git",
  "url": "https://github.com/ldproxy/xtramaps.git",
@@ -29,5 +30,8 @@
  "scripts": {
  "build": "vite build",
  "typecheck": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@maplibre/maplibre-gl-style-spec": "^22.0.0"
  }
 }

packages/core/legend-symbols-maplibre/src/Circle.ts

@@ -0,0 +1,53 @@
+import type { SymbolHandlerProps, SymbolTree } from "./types";
+
+export function Circle({ expr, layer }: SymbolHandlerProps): SymbolTree {
+ const radius = Math.min(expr(layer, "paint", "circle-radius") as number, 8);
+ const strokeWidth = Math.min(
+ expr(layer, "paint", "circle-stroke-width") as number,
+ 4,
+ );
+ const fillColor = expr(layer, "paint", "circle-color") as string;
+ const fillOpacity = expr(layer, "paint", "circle-opacity") as number;
+ const strokeColor = expr(layer, "paint", "circle-stroke-color") as string;
+ const strokeOpacity = expr(layer, "paint", "circle-stroke-opacity") as number;
+ const blur = expr(layer, "paint", "circle-blur") as number;
+
+ const innerRadius = radius - strokeWidth / 2;
+
+ return {
+ element: "svg",
+ attributes: {
+ viewBox: "0 0 20 20",
+ xmlns: "http://www.w3.org/2000/svg",
+ style: {
+ filter: `blur(${blur * innerRadius}px)`,
+ },
+ },
+ children: [
+ {
+ element: "circle",
+ attributes: {
+ key: "l1",
+ cx: 10,
+ cy: 10,
+ fill: fillColor,
+ opacity: fillOpacity,
+ r: innerRadius,
+ },
+ },
+ {
+ element: "circle",
+ attributes: {
+ key: "l2",
+ cx: 10,
+ cy: 10,
+ fill: "transparent",
+ opacity: strokeOpacity,
+ r: radius,
+ "stroke-width": strokeWidth,
+ stroke: strokeColor,
+ },
+ },
+ ],
+ };
+}

packages/core/legend-symbols-maplibre/src/Fill.ts

@@ -0,0 +1,31 @@
+import type { SymbolHandlerProps, SymbolTree } from "./types";
+
+export function Fill({ image, expr, layer }: SymbolHandlerProps): SymbolTree {
+ const { url: dataUrl } = image(
+ expr(layer, "paint", "fill-pattern") as string,
+ );
+ const baseStyle: Record<string, unknown> = {
+ width: "100%",
+ height: "100%",
+ opacity: expr(layer, "paint", "fill-opacity"),
+ };
+ const style = dataUrl
+ ? {
+ ...baseStyle,
+ backgroundImage: `url(${dataUrl})`,
+ backgroundPosition: "top left",
+ }
+ : {
+ ...baseStyle,
+ backgroundColor: expr(layer, "paint", "fill-color"),
+ backgroundSize: "66% 66%",
+ backgroundPosition: "center",
+ };
+
+ return {
+ element: "div",
+ attributes: {
+ style,
+ },
+ };
+}

.changeset/breezy-pans-tan.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-svelte": major
+---
+
+add svelte component library to create legend symbols for maplibre styles

.changeset/jolly-bears-create.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-react": major
+---
+
+add react component library to create legend symbols for maplibre styles

.changeset/polite-bobcats-do.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre": major
+---
+
+add core library to create legend symbols for maplibre styles

.changeset/quick-lines-say.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-vue": major
+---
+
+add vue component library to create legend symbols for maplibre styles

.github/workflows/release.yml

@@ -10,6 +10,7 @@ jobs:
  release:
  runs-on: ubuntu-latest
  permissions:
+ id-token: write
  contents: write
  pull-requests: write
  steps:
@@ -21,10 +22,12 @@ jobs:
  registry-url: https://registry.npmjs.org
  - run: npm ci
  - run: npm run build
- - uses: changesets/action@v1
+ - name: Create Release Pull Request or Publish to npm
+ uses: changesets/action@v1
  with:
  publish: npm run release
  version: npm run version-packages
+ commit: "chore: bump package versions"
+ createGithubReleases: true
  env:
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

packages/core/legend-symbols-maplibre/README.md

@@ -1,6 +1,8 @@
 # @xtramaps/legend-symbols-maplibre
 
-Core library for generating legend symbols from MapLibre styles.
+Framework-agnostic library for generating legend symbols from MapLibre GL styles. Takes a style layer and produces a plain virtual DOM tree (`{ element, attributes, children }`) that can be rendered by any framework.
+
+Supports `circle`, `line`, `fill`, and `symbol` layer types.
 
 ## Install
 
@@ -11,9 +13,31 @@ npm install @xtramaps/legend-symbols-maplibre
 ## Usage
 
 ```ts
-import { greet } from "@xtramaps/legend-symbols-maplibre";
+import { legendSymbol } from "@xtramaps/legend-symbols-maplibre";
+
+const tree = legendSymbol({ zoom: 14, layer: myLayer, sprite: mySpriteData });
+
+// tree is a plain object like:
+// { element: "svg", attributes: { viewBox: "0 0 20 20", ... }, children: [...] }
+```
+
+### Utilities
+
+```ts
+import {
+ exprHandler,
+ mapImageToDataURL,
+ cache,
+ loadImage,
+ loadJson,
+} from "@xtramaps/legend-symbols-maplibre";
 ```
 
+- `exprHandler({ zoom, properties })` - Evaluates MapLibre style expressions for a given zoom level and feature properties.
+- `mapImageToDataURL(map, icon)` - Extracts an icon from a MapLibre map instance as a data URL.
+- `cache` - Simple reference-counted cache for sprite data.
+- `loadImage(url, { transformRequest })` / `loadJson(url, { transformRequest })` - Load sprite assets with optional request transformation.
+
 ## License
 
 MIT

packages/core/legend-symbols-maplibre/package.json

@@ -1,7 +1,8 @@
 {
  "name": "@xtramaps/legend-symbols-maplibre",
- "version": "0.0.1",
+ "version": "0.0.0-next-20260320165054",
  "license": "MIT",
+ "homepage": "https://github.com/ldproxy/xtramaps/tree/main/packages/core/legend-symbols-maplibre#readme",
  "repository": {
  "type": "git",
  "url": "https://github.com/ldproxy/xtramaps.git",
@@ -29,5 +30,8 @@
  "scripts": {
  "build": "vite build",
  "typecheck": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@maplibre/maplibre-gl-style-spec": "^22.0.0"
  }
 }

packages/core/legend-symbols-maplibre/src/Circle.ts

@@ -0,0 +1,53 @@
+import type { SymbolHandlerProps, SymbolTree } from "./types";
+
+export function Circle({ expr, layer }: SymbolHandlerProps): SymbolTree {
+ const radius = Math.min(expr(layer, "paint", "circle-radius") as number, 8);
+ const strokeWidth = Math.min(
+ expr(layer, "paint", "circle-stroke-width") as number,
+ 4,
+ );
+ const fillColor = expr(layer, "paint", "circle-color") as string;
+ const fillOpacity = expr(layer, "paint", "circle-opacity") as number;
+ const strokeColor = expr(layer, "paint", "circle-stroke-color") as string;
+ const strokeOpacity = expr(layer, "paint", "circle-stroke-opacity") as number;
+ const blur = expr(layer, "paint", "circle-blur") as number;
+
+ const innerRadius = radius - strokeWidth / 2;
+
+ return {
+ element: "svg",
+ attributes: {
+ viewBox: "0 0 20 20",
+ xmlns: "http://www.w3.org/2000/svg",
+ style: {
+ filter: `blur(${blur * innerRadius}px)`,
+ },
+ },
+ children: [
+ {
+ element: "circle",
+ attributes: {
+ key: "l1",
+ cx: 10,
+ cy: 10,
+ fill: fillColor,
+ opacity: fillOpacity,
+ r: innerRadius,
+ },
+ },
+ {
+ element: "circle",
+ attributes: {
+ key: "l2",
+ cx: 10,
+ cy: 10,
+ fill: "transparent",
+ opacity: strokeOpacity,
+ r: radius,
+ "stroke-width": strokeWidth,
+ stroke: strokeColor,
+ },
+ },
+ ],
+ };
+}

packages/core/legend-symbols-maplibre/src/Fill.ts

@@ -0,0 +1,31 @@
+import type { SymbolHandlerProps, SymbolTree } from "./types";
+
+export function Fill({ image, expr, layer }: SymbolHandlerProps): SymbolTree {
+ const { url: dataUrl } = image(
+ expr(layer, "paint", "fill-pattern") as string,
+ );
+ const baseStyle: Record<string, unknown> = {
+ width: "100%",
+ height: "100%",
+ opacity: expr(layer, "paint", "fill-opacity"),
+ };
+ const style = dataUrl
+ ? {
+ ...baseStyle,
+ backgroundImage: `url(${dataUrl})`,
+ backgroundPosition: "top left",
+ }
+ : {
+ ...baseStyle,
+ backgroundColor: expr(layer, "paint", "fill-color"),
+ backgroundSize: "66% 66%",
+ backgroundPosition: "center",
+ };
+
+ return {
+ element: "div",
+ attributes: {
+ style,
+ },
+ };
+}

.changeset/breezy-pans-tan.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-svelte": major
+---
+
+add svelte component library to create legend symbols for maplibre styles

.changeset/jolly-bears-create.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-react": major
+---
+
+add react component library to create legend symbols for maplibre styles

.changeset/polite-bobcats-do.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre": major
+---
+
+add core library to create legend symbols for maplibre styles

.changeset/quick-lines-say.md

@@ -0,0 +1,5 @@
+---
+"@xtramaps/legend-symbols-maplibre-vue": major
+---
+
+add vue component library to create legend symbols for maplibre styles

.github/workflows/release.yml

@@ -10,6 +10,7 @@ jobs:
  release:
  runs-on: ubuntu-latest
  permissions:
+ id-token: write
  contents: write
  pull-requests: write
  steps:
@@ -21,10 +22,12 @@ jobs:
  registry-url: https://registry.npmjs.org
  - run: npm ci
  - run: npm run build
- - uses: changesets/action@v1
+ - name: Create Release Pull Request or Publish to npm
+ uses: changesets/action@v1
  with:
  publish: npm run release
  version: npm run version-packages
+ commit: "chore: bump package versions"
+ createGithubReleases: true
  env:
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

packages/core/legend-symbols-maplibre/README.md

@@ -1,6 +1,8 @@
 # @xtramaps/legend-symbols-maplibre
 
-Core library for generating legend symbols from MapLibre styles.
+Framework-agnostic library for generating legend symbols from MapLibre GL styles. Takes a style layer and produces a plain virtual DOM tree (`{ element, attributes, children }`) that can be rendered by any framework.
+
+Supports `circle`, `line`, `fill`, and `symbol` layer types.
 
 ## Install
 
@@ -11,9 +13,31 @@ npm install @xtramaps/legend-symbols-maplibre
 ## Usage
 
 ```ts
-import { greet } from "@xtramaps/legend-symbols-maplibre";
+import { legendSymbol } from "@xtramaps/legend-symbols-maplibre";
+
+const tree = legendSymbol({ zoom: 14, layer: myLayer, sprite: mySpriteData });
+
+// tree is a plain object like:
+// { element: "svg", attributes: { viewBox: "0 0 20 20", ... }, children: [...] }
+```
+
+### Utilities
+
+```ts
+import {
+ exprHandler,
+ mapImageToDataURL,
+ cache,
+ loadImage,
+ loadJson,
+} from "@xtramaps/legend-symbols-maplibre";
 ```
 
+- `exprHandler({ zoom, properties })` - Evaluates MapLibre style expressions for a given zoom level and feature properties.
+- `mapImageToDataURL(map, icon)` - Extracts an icon from a MapLibre map instance as a data URL.
+- `cache` - Simple reference-counted cache for sprite data.
+- `loadImage(url, { transformRequest })` / `loadJson(url, { transformRequest })` - Load sprite assets with optional request transformation.
+
 ## License
 
 MIT

packages/core/legend-symbols-maplibre/package.json

@@ -1,7 +1,8 @@
 {
  "name": "@xtramaps/legend-symbols-maplibre",
- "version": "0.0.1",
+ "version": "0.0.0-next-20260320165054",
  "license": "MIT",
+ "homepage": "https://github.com/ldproxy/xtramaps/tree/main/packages/core/legend-symbols-maplibre#readme",
  "repository": {
  "type": "git",
  "url": "https://github.com/ldproxy/xtramaps.git",
@@ -29,5 +30,8 @@
  "scripts": {
  "build": "vite build",
  "typecheck": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@maplibre/maplibre-gl-style-spec": "^22.0.0"
  }
 }

packages/core/legend-symbols-maplibre/src/Circle.ts

@@ -0,0 +1,53 @@
+import type { SymbolHandlerProps, SymbolTree } from "./types";
+
+export function Circle({ expr, layer }: SymbolHandlerProps): SymbolTree {
+ const radius = Math.min(expr(layer, "paint", "circle-radius") as number, 8);
+ const strokeWidth = Math.min(
+ expr(layer, "paint", "circle-stroke-width") as number,
+ 4,
+ );
+ const fillColor = expr(layer, "paint", "circle-color") as string;
+ const fillOpacity = expr(layer, "paint", "circle-opacity") as number;
+ const strokeColor = expr(layer, "paint", "circle-stroke-color") as string;
+ const strokeOpacity = expr(layer, "paint", "circle-stroke-opacity") as number;
+ const blur = expr(layer, "paint", "circle-blur") as number;
+
+ const innerRadius = radius - strokeWidth / 2;
+
+ return {
+ element: "svg",
+ attributes: {
+ viewBox: "0 0 20 20",
+ xmlns: "http://www.w3.org/2000/svg",
+ style: {
+ filter: `blur(${blur * innerRadius}px)`,
+ },
+ },
+ children: [
+ {
+ element: "circle",
+ attributes: {
+ key: "l1",
+ cx: 10,
+ cy: 10,
+ fill: fillColor,
+ opacity: fillOpacity,
+ r: innerRadius,
+ },
+ },
+ {
+ element: "circle",
+ attributes: {
+ key: "l2",
+ cx: 10,
+ cy: 10,
+ fill: "transparent",
+ opacity: strokeOpacity,
+ r: radius,
+ "stroke-width": strokeWidth,
+ stroke: strokeColor,
+ },
+ },
+ ],
+ };
+}

packages/core/legend-symbols-maplibre/src/Fill.ts

@@ -0,0 +1,31 @@
+import type { SymbolHandlerProps, SymbolTree } from "./types";
+
+export function Fill({ image, expr, layer }: SymbolHandlerProps): SymbolTree {
+ const { url: dataUrl } = image(
+ expr(layer, "paint", "fill-pattern") as string,
+ );
+ const baseStyle: Record<string, unknown> = {
+ width: "100%",
+ height: "100%",
+ opacity: expr(layer, "paint", "fill-opacity"),
+ };
+ const style = dataUrl
+ ? {
+ ...baseStyle,
+ backgroundImage: `url(${dataUrl})`,
+ backgroundPosition: "top left",
+ }
+ : {
+ ...baseStyle,
+ backgroundColor: expr(layer, "paint", "fill-color"),
+ backgroundSize: "66% 66%",
+ backgroundPosition: "center",
+ };
+
+ return {
+ element: "div",
+ attributes: {
+ style,
+ },
+ };
+}