Add pmtiles support for raster url (#178)

* Add pmtiles support for raster url

* Add changeset

* Doc comments on the tiles and url props and url updated with undefined

* Remove error message

.changeset/large-carrots-remember.md

@@ -0,0 +1,5 @@
+---
+'svelte-maplibre': patch
+---
+
+Add pmtiles support for raster url

src/lib/RasterTileSource.svelte

@@ -4,18 +4,31 @@
   import { addSource, removeSource } from './source.js';
   import type { Scheme } from './types.js';
   import flush from 'just-flush';
-  import type { RasterTileSource } from 'maplibre-gl';
+  import * as pmtiles from 'pmtiles';
+  import maplibregl, { type RasterTileSource } from 'maplibre-gl';
 
   export let id: string = getId('raster-source');
-  export let tiles: string[];
+
+  /** An array one or more tile source URLs pointing to the tiles.
+   * Either `tiles` or `url` must be provided. */
+  export let tiles: string[] | undefined = undefined;
   export let tileSize: number | undefined = undefined;
+  /** A single URL pointing to a PMTiles archive. Either `tiles` or `url` must be provided. */
+  export let url: string | undefined = undefined;
   export let bounds: Array<number> | null = null;
   export let scheme: Scheme | null = null;
   export let attribution: string | null = null;
   export let minzoom: number | null = null;
   export let maxzoom: number | null = null;
   export let volatile: boolean | null = null;
 
+  if (url && url.includes('pmtiles://')) {
+    if (!maplibregl.config.REGISTERED_PROTOCOLS.hasOwnProperty('pmtiles')) {
+      let protocol = new pmtiles.Protocol();
+      maplibregl.addProtocol('pmtiles', protocol.tile);
+    }
+  }
+
   const { map, self: source } = updatedSourceContext();
   let sourceObj: RasterTileSource | undefined;
 
@@ -29,6 +42,7 @@
         type: 'raster',
         tiles,
         tileSize,
+        url,
         bounds,
         scheme,
         attribution,
@@ -50,12 +64,14 @@
     sourceObj;
   }
 
-  // Don't set tiles again after we've just created it.
+  // Don't set tiles/url again after we've just created it.
   $: if (sourceObj) {
     if (first) {
       first = false;
-    } else {
+    } else if (tiles) {
       sourceObj.setTiles(tiles);
+    } else {
+      sourceObj.setUrl(url);
     }
   }