@maplibre-yaml/core 0.1.3-beta.1 → 0.2.0

package/README.md

@@ -104,6 +104,50 @@ layers:
       circle-color: "#ef4444"
 ```
 
+### Named Sources
+
+Define sources at the block level and reference them by name across multiple layers:
+
+```yaml
+type: map
+id: neighborhood-map
+config:
+  center: [-73.985, 40.674]
+  zoom: 14
+  mapStyle: https://basemaps.cartocdn.com/gl/positron-gl-style/style.json
+
+sources:
+  boundary:
+    type: geojson
+    url: https://example.com/boundary.geojson
+  parcels:
+    type: vector
+    url: https://example.com/parcels.json
+
+layers:
+  - id: boundary-fill
+    type: fill
+    source: boundary
+    paint:
+      fill-color: "#3388ff"
+      fill-opacity: 0.2
+  - id: boundary-outline
+    type: line
+    source: boundary
+    paint:
+      line-color: "#3388ff"
+      line-width: 2
+  - id: parcels-fill
+    type: fill
+    source: parcels
+    source-layer: parcels
+    paint:
+      fill-color: "#ccc"
+      fill-opacity: 0.5
+```
+
+Sources defined at the block level are added to the map before layers, so any layer can reference them by name. This avoids duplicating source definitions when multiple layers use the same data. Inline sources on individual layers still work as before.
+
 ### Real-time Data with Polling
 
 ```yaml

package/dist/components/index.d.ts

@@ -1,7 +1,7 @@
 export { MLMap, registerMLMap } from '../register.js';
 import 'maplibre-gl';
-import '../map-renderer-IvxniEQy.js';
-import '../page.schema-VBytF9l5.js';
+import '../map-renderer-8-c51Ww7.js';
+import '../page.schema-Cad2FFqh.js';
 import 'zod';
 
 /**

package/dist/components/index.js

@@ -4,6 +4,42 @@ import maplibregl2 from 'maplibre-gl';
 
 // @maplibre-yaml/core - Declarative web maps with YAML
 
+var LongitudeSchema = z.number().min(-180, "Longitude must be >= -180").max(180, "Longitude must be <= 180").describe("Longitude in degrees (-180 to 180)");
+var LatitudeSchema = z.number().min(-90, "Latitude must be >= -90").max(90, "Latitude must be <= 90").describe("Latitude in degrees (-90 to 90)");
+var LngLatSchema = z.tuple([LongitudeSchema, LatitudeSchema]).describe("Geographic coordinates as [longitude, latitude]");
+var LngLatBoundsSchema = z.tuple([
+  LongitudeSchema,
+  // west
+  LatitudeSchema,
+  // south
+  LongitudeSchema,
+  // east
+  LatitudeSchema
+  // north
+]).describe("Bounding box as [west, south, east, north]");
+var ColorSchema = z.string().refine(
+  (val) => {
+    if (val.startsWith("#")) {
+      return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(val);
+    }
+    if (val.startsWith("rgb")) {
+      return /^rgba?\s*\([^)]+\)$/.test(val);
+    }
+    if (val.startsWith("hsl")) {
+      return /^hsla?\s*\([^)]+\)$/.test(val);
+    }
+    return true;
+  },
+  {
+    message: "Invalid color format. Use hex (#rgb, #rrggbb), rgb(), rgba(), hsl(), hsla(), or named colors."
+  }
+).describe("CSS color value");
+var ExpressionSchema = z.array(z.any()).refine((val) => val.length > 0 && typeof val[0] === "string", {
+  message: 'Expression must be an array starting with a string operator (e.g., ["get", "property"])'
+}).describe("MapLibre expression for data-driven styling");
+var NumberOrExpressionSchema = z.union([z.number(), ExpressionSchema]).describe("Number value or MapLibre expression");
+var ColorOrExpressionSchema = z.union([ColorSchema, ExpressionSchema]).describe("Color value or MapLibre expression");
+var ZoomLevelSchema = z.number().min(0, "Zoom level must be >= 0").max(24, "Zoom level must be <= 24").describe("Map zoom level (0-24)");
 var ValidTagNames = [
   "h1",
   "h2",
@@ -54,42 +90,6 @@ var ContentBlockSchema = z.object({
   style: z.string().optional().describe("Inline CSS styles for the block container"),
   content: z.array(ContentItemSchema).describe("Array of content items to render")
 }).describe("Content block for rich text and media");
-var LongitudeSchema = z.number().min(-180, "Longitude must be >= -180").max(180, "Longitude must be <= 180").describe("Longitude in degrees (-180 to 180)");
-var LatitudeSchema = z.number().min(-90, "Latitude must be >= -90").max(90, "Latitude must be <= 90").describe("Latitude in degrees (-90 to 90)");
-var LngLatSchema = z.tuple([LongitudeSchema, LatitudeSchema]).describe("Geographic coordinates as [longitude, latitude]");
-var LngLatBoundsSchema = z.tuple([
-  LongitudeSchema,
-  // west
-  LatitudeSchema,
-  // south
-  LongitudeSchema,
-  // east
-  LatitudeSchema
-  // north
-]).describe("Bounding box as [west, south, east, north]");
-var ColorSchema = z.string().refine(
-  (val) => {
-    if (val.startsWith("#")) {
-      return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(val);
-    }
-    if (val.startsWith("rgb")) {
-      return /^rgba?\s*\([^)]+\)$/.test(val);
-    }
-    if (val.startsWith("hsl")) {
-      return /^hsla?\s*\([^)]+\)$/.test(val);
-    }
-    return true;
-  },
-  {
-    message: "Invalid color format. Use hex (#rgb, #rrggbb), rgb(), rgba(), hsl(), hsla(), or named colors."
-  }
-).describe("CSS color value");
-var ExpressionSchema = z.array(z.any()).refine((val) => val.length > 0 && typeof val[0] === "string", {
-  message: 'Expression must be an array starting with a string operator (e.g., ["get", "property"])'
-}).describe("MapLibre expression for data-driven styling");
-var NumberOrExpressionSchema = z.union([z.number(), ExpressionSchema]).describe("Number value or MapLibre expression");
-var ColorOrExpressionSchema = z.union([ColorSchema, ExpressionSchema]).describe("Color value or MapLibre expression");
-var ZoomLevelSchema = z.number().min(0, "Zoom level must be >= 0").max(24, "Zoom level must be <= 24").describe("Map zoom level (0-24)");
 var StreamConfigSchema = z.object({
   type: z.enum(["websocket", "sse"]).describe("Streaming connection type"),
   url: z.string().url().optional().describe("WebSocket or SSE endpoint URL"),
@@ -589,6 +589,7 @@ var MapBlockSchema = z.object({
   className: z.string().optional().describe("CSS class name for container"),
   style: z.string().optional().describe("Inline CSS styles for container"),
   config: MapConfigSchema.describe("Map configuration"),
+  sources: z.record(z.string(), LayerSourceSchema).optional().describe("Map sources"),
   layers: z.array(LayerOrReferenceSchema).default([]).describe("Map layers"),
   controls: ControlsConfigSchema.optional().describe("Map controls"),
   legend: LegendConfigSchema.optional().describe("Legend configuration")
@@ -599,6 +600,7 @@ var MapFullPageBlockSchema = z.object({
   className: z.string().optional().describe("CSS class name for container"),
   style: z.string().optional().describe("Inline CSS styles for container"),
   config: MapConfigSchema.describe("Map configuration"),
+  sources: z.record(z.string(), LayerSourceSchema).optional().describe("Map sources"),
   layers: z.array(LayerOrReferenceSchema).default([]).describe("Map layers"),
   controls: ControlsConfigSchema.optional().describe("Map controls"),
   legend: LegendConfigSchema.optional().describe("Legend configuration")
@@ -704,6 +706,10 @@ var GlobalConfigSchema = z.object({
   description: z.string().optional().describe("Application description"),
   defaultMapStyle: z.string().url().optional().describe("Default map style URL"),
   theme: z.enum(["light", "dark"]).default("light").describe("Default theme"),
+  defaultZoom: z.number().min(0).max(24).optional().describe("Default zoom level for all maps"),
+  defaultCenter: LngLatSchema.optional().describe(
+    "Default center [lng, lat] for all maps"
+  ),
   dataFetching: z.object({
     defaultStrategy: z.enum(["runtime", "build", "hybrid"]).default("runtime").describe("Default fetch strategy"),
     timeout: z.number().min(1e3).default(3e4).describe("Default timeout in milliseconds"),
@@ -3564,9 +3570,16 @@ var LayerManager = class {
     this.abortControllers = /* @__PURE__ */ new Map();
   }
   async addLayer(layer) {
-    const sourceId = `${layer.id}-source`;
+    const isSourceRef = typeof layer.source === "string";
+    const sourceId = isSourceRef ? layer.source : `${layer.id}-source`;
     this.layerToSource.set(layer.id, sourceId);
-    await this.addSource(sourceId, layer);
+    if (!isSourceRef) {
+      await this.addSource(sourceId, layer);
+    } else if (!this.map.getSource(sourceId)) {
+      throw new Error(
+        `Source '${sourceId}' referenced by layer '${layer.id}' not found. Ensure it is defined in the block-level 'sources' map.`
+      );
+    }
     const layerSpec = {
       id: layer.id,
       type: layer.type,
@@ -3594,12 +3607,6 @@ var LayerManager = class {
     }
   }
   async addSource(sourceId, layer) {
-    if (typeof layer.source === "string") {
-      if (!this.map.getSource(layer.source)) {
-        throw new Error(`Source reference '${layer.source}' not found`);
-      }
-      return;
-    }
     const source = layer.source;
     if (source.type === "geojson") {
       const geojsonSource = source;
@@ -3819,7 +3826,10 @@ var LayerManager = class {
     }
     if (this.map.getLayer(layerId)) this.map.removeLayer(layerId);
     const sourceId = this.layerToSource.get(layerId) || `${layerId}-source`;
-    if (this.map.getSource(sourceId)) this.map.removeSource(sourceId);
+    const isInlineSource = sourceId === `${layerId}-source`;
+    if (isInlineSource && this.map.getSource(sourceId)) {
+      this.map.removeSource(sourceId);
+    }
     this.sourceData.delete(sourceId);
     this.layerToSource.delete(layerId);
   }
@@ -4181,7 +4191,7 @@ var MapRenderer = class {
   controlsManager;
   eventListeners;
   isLoaded;
-  constructor(container, config, layers = [], options = {}) {
+  constructor(container, config, layers = [], options = {}, sources) {
     this.eventListeners = /* @__PURE__ */ new Map();
     this.isLoaded = false;
     this.map = new maplibregl2.Map({
@@ -4209,6 +4219,13 @@ var MapRenderer = class {
     this.controlsManager = new ControlsManager(this.map);
     this.map.on("load", () => {
       this.isLoaded = true;
+      if (sources) {
+        for (const [id, sourceSpec] of Object.entries(sources)) {
+          if (!this.map.getSource(id)) {
+            this.map.addSource(id, sourceSpec);
+          }
+        }
+      }
       Promise.all(layers.map((layer) => this.addLayer(layer))).then(() => {
         this.emit("load", void 0);
         options.onLoad?.();
@@ -4508,7 +4525,7 @@ var MLMap = class extends HTMLElement {
     }
     this.appendChild(this.mapContainer);
     try {
-      const { config, layers = [] } = mapBlock;
+      const { config, sources, layers = [] } = mapBlock;
       this.renderer = new MapRenderer(this.mapContainer, config, layers, {
         onLoad: () => {
         },
@@ -4520,7 +4537,7 @@ var MLMap = class extends HTMLElement {
             })
           );
         }
-      });
+      }, sources);
       this.setupEventForwarding();
     } catch (error) {
       this.handleError([