@maplibre-yaml/core 0.1.3 → 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-Br4guic2.js';
-import '../page.schema-EBT_0Ojm.js';
+import '../map-renderer-8-c51Ww7.js';
+import '../page.schema-Cad2FFqh.js';
 import 'zod';
 
 /**

package/dist/components/index.js

@@ -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")
@@ -3568,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,
@@ -3598,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;
@@ -3823,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);
   }
@@ -4185,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({
@@ -4213,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?.();
@@ -4512,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: () => {
         },
@@ -4524,7 +4537,7 @@ var MLMap = class extends HTMLElement {
             })
           );
         }
-      });
+      }, sources);
       this.setupEventForwarding();
     } catch (error) {
       this.handleError([