@maplibre-yaml/core 0.1.3 → 0.2.1

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-SjO3KQmx.js';
+import '../page.schema-Cad2FFqh.js';
 import 'zod';
 
 /**

package/dist/components/index.js

@@ -1,6 +1,6 @@
 import { parse } from 'yaml';
 import { z, ZodError } from 'zod';
-import maplibregl2 from 'maplibre-gl';
+import { Map as Map$1, Popup, NavigationControl, GeolocateControl, ScaleControl, FullscreenControl } from 'maplibre-gl';
 
 // @maplibre-yaml/core - Declarative web maps with YAML
 
@@ -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);
   }
@@ -4031,7 +4037,7 @@ var EventHandler = class {
   showPopup(content, feature, lngLat) {
     this.activePopup?.remove();
     const html = this.popupBuilder.build(content, feature.properties);
-    this.activePopup = new maplibregl2.Popup().setLngLat(lngLat).setHTML(html).addTo(this.map);
+    this.activePopup = new Popup().setLngLat(lngLat).setHTML(html).addTo(this.map);
   }
   /**
    * Detach events for a layer
@@ -4136,14 +4142,14 @@ var ControlsManager = class {
     if (config.navigation) {
       const options = typeof config.navigation === "object" ? config.navigation : {};
       const position = options.position || "top-right";
-      const control = new maplibregl2.NavigationControl();
+      const control = new NavigationControl();
       this.map.addControl(control, position);
       this.addedControls.push(control);
     }
     if (config.geolocate) {
       const options = typeof config.geolocate === "object" ? config.geolocate : {};
       const position = options.position || "top-right";
-      const control = new maplibregl2.GeolocateControl({
+      const control = new GeolocateControl({
         positionOptions: { enableHighAccuracy: true },
         trackUserLocation: true
       });
@@ -4153,14 +4159,14 @@ var ControlsManager = class {
     if (config.scale) {
       const options = typeof config.scale === "object" ? config.scale : {};
       const position = options.position || "bottom-left";
-      const control = new maplibregl2.ScaleControl();
+      const control = new ScaleControl();
       this.map.addControl(control, position);
       this.addedControls.push(control);
     }
     if (config.fullscreen) {
       const options = typeof config.fullscreen === "object" ? config.fullscreen : {};
       const position = options.position || "top-right";
-      const control = new maplibregl2.FullscreenControl();
+      const control = new FullscreenControl();
       this.map.addControl(control, position);
       this.addedControls.push(control);
     }
@@ -4185,10 +4191,10 @@ 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({
+    this.map = new Map$1({
       ...config,
       container: typeof container === "string" ? container : container,
       style: config.mapStyle,
@@ -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([