map-gl-offline 0.5.3 → 0.5.6

package/dist/index.js

@@ -5379,6 +5379,21 @@ class RegionService {
         if (!Array.isArray(styleEntry.regions)) {
             styleEntry.regions = [];
         }
+        // Inject extra sources into the style so they get patched for offline use
+        if (region.extraSources && region.extraSources.length > 0) {
+            for (const extra of region.extraSources) {
+                if (!styleEntry.style.sources[extra.id]) {
+                    styleEntry.style.sources[extra.id] = {
+                        type: extra.type || 'vector',
+                        tiles: extra.tiles,
+                        ...(extra.minzoom !== undefined ? { minzoom: extra.minzoom } : {}),
+                        ...(extra.maxzoom !== undefined ? { maxzoom: extra.maxzoom } : {}),
+                        ...(extra.attribution ? { attribution: extra.attribution } : {}),
+                    };
+                    regionLogger$1.debug(`Injected extra source into style: ${extra.id}`);
+                }
+            }
+        }
         // Patch style for offline use with the region's maxZoom and tileExtension
         // Pass styleId for sprites since they're stored with the style ID, not region ID
         patchStyleForOffline(styleEntry.style, region.id, region.maxZoom, region.tileExtension, styleId);
@@ -5541,6 +5556,21 @@ class TileService {
         if (!style?.sources || Object.keys(style.sources).length === 0) {
             throw new Error('Style does not contain any sources to download tiles from');
         }
+        // Inject extra sources from the region into the style for downloading
+        if (region.extraSources && region.extraSources.length > 0) {
+            for (const extra of region.extraSources) {
+                if (!style.sources[extra.id]) {
+                    style.sources[extra.id] = {
+                        type: extra.type || 'vector',
+                        tiles: extra.tiles,
+                        ...(extra.minzoom !== undefined ? { minzoom: extra.minzoom } : {}),
+                        ...(extra.maxzoom !== undefined ? { maxzoom: extra.maxzoom } : {}),
+                        ...(extra.attribution ? { attribution: extra.attribution } : {}),
+                    };
+                    tileLogger.debug(`Injected extra source: ${extra.id}`, extra.tiles);
+                }
+            }
+        }
         // Generate tile coordinates once for the region
         const tileCoords = this.generateTileCoordinates(region);
         tileLogger.debug('🔍 ABOUT TO CALL extractTileSources with style:', {
@@ -8100,6 +8130,14 @@ const en = {
     'regionForm.downloadRegion': 'Download Region',
     'regionForm.area': 'Area',
     'regionForm.bounds': 'Bounds',
+    'regionForm.extraSources': 'Additional Tile Sources',
+    'regionForm.extraSourcesInfo': 'Select extra layers from the map to include in this offline region',
+    'regionForm.noExtraSources': 'No additional tile sources found on the map',
+    'regionForm.sourceType.vector': 'Vector',
+    'regionForm.sourceType.raster': 'Raster',
+    'regionForm.sourceType.raster-dem': 'Terrain',
+    'regionForm.selectAll': 'Select All',
+    'regionForm.deselectAll': 'Deselect All',
     // Region List
     'regionList.empty': 'No offline styles or regions found. Click "Add Region" to get started.',
     'regionList.emptyFallback': 'No offline regions found. Click "Add Region" to get started.',
@@ -8315,6 +8353,14 @@ const ar = {
     'regionForm.downloadRegion': 'تحميل المنطقة',
     'regionForm.area': 'المساحة',
     'regionForm.bounds': 'الحدود',
+    'regionForm.extraSources': 'مصادر بلاطات إضافية',
+    'regionForm.extraSourcesInfo': 'اختر طبقات إضافية من الخريطة لتضمينها في هذه المنطقة',
+    'regionForm.noExtraSources': 'لم يتم العثور على مصادر بلاطات إضافية على الخريطة',
+    'regionForm.sourceType.vector': 'متجه',
+    'regionForm.sourceType.raster': 'نقطي',
+    'regionForm.sourceType.raster-dem': 'تضاريس',
+    'regionForm.selectAll': 'تحديد الكل',
+    'regionForm.deselectAll': 'إلغاء تحديد الكل',
     // Region List - قائمة المناطق
     'regionList.empty': 'لم يتم العثور على أنماط أو مناطق غير متصلة. انقر على "إضافة منطقة" للبدء.',
     'regionList.emptyFallback': 'لم يتم العثور على مناطق غير متصلة. انقر على "إضافة منطقة" للبدء.',
@@ -11667,6 +11713,8 @@ class RegionFormModal {
     providerSelect;
     accessTokenInput;
     accessTokenGroup;
+    // Extra sources picker
+    sourceCheckboxes = new Map();
     constructor(options) {
         this.options = options;
     }
@@ -11838,10 +11886,124 @@ class RegionFormModal {
     `;
         this.accessTokenGroup.appendChild(tokenHelp);
         form.appendChild(this.accessTokenGroup);
+        // Extra sources picker
+        if (this.options.mapSources && this.options.mapSources.length > 0) {
+            const sourcesSection = this.createSourcesPicker(this.options.mapSources);
+            form.appendChild(sourcesSection);
+        }
         // Initialize provider detection
         this.detectProviderFromUrl();
         return form;
     }
+    /**
+     * Create the extra sources picker section
+     */
+    createSourcesPicker(sources) {
+        const group = document.createElement('div');
+        group.className = 'flex flex-col gap-3';
+        // Header with label and select all/deselect all
+        const header = document.createElement('div');
+        header.className = 'flex items-center justify-between';
+        header.innerHTML = `
+      <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
+        ${t('regionForm.extraSources')}
+      </label>
+    `;
+        const toggleBtn = document.createElement('button');
+        toggleBtn.type = 'button';
+        toggleBtn.className =
+            'text-xs text-primary-600 dark:text-primary-400 hover:underline cursor-pointer font-medium';
+        toggleBtn.textContent = t('regionForm.selectAll');
+        let allSelected = false;
+        toggleBtn.addEventListener('click', () => {
+            allSelected = !allSelected;
+            for (const { checkbox } of this.sourceCheckboxes.values()) {
+                checkbox.checked = allSelected;
+            }
+            toggleBtn.textContent = allSelected ? t('regionForm.deselectAll') : t('regionForm.selectAll');
+        });
+        header.appendChild(toggleBtn);
+        group.appendChild(header);
+        // Info text
+        const info = document.createElement('div');
+        info.className = 'text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1';
+        info.innerHTML = `${icons.infoCircle({ size: 12 })} ${t('regionForm.extraSourcesInfo')}`;
+        group.appendChild(info);
+        // Source list
+        const list = document.createElement('div');
+        list.className =
+            'flex flex-col gap-2 max-h-48 overflow-y-auto p-3 rounded-xl glass-input border border-gray-100/50 dark:border-gray-700/50 bg-gray-50/50 dark:bg-gray-800/50';
+        for (const source of sources) {
+            const row = document.createElement('label');
+            row.className =
+                'flex items-center gap-3 p-2 rounded-lg hover:bg-white/60 dark:hover:bg-gray-700/40 cursor-pointer transition-colors';
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            checkbox.className =
+                'w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-primary-600 focus:ring-primary-500/50 cursor-pointer flex-shrink-0';
+            checkbox.value = source.id;
+            row.appendChild(checkbox);
+            this.sourceCheckboxes.set(source.id, { checkbox, source });
+            const details = document.createElement('div');
+            details.className = 'flex flex-col min-w-0';
+            const nameRow = document.createElement('div');
+            nameRow.className = 'flex items-center gap-2';
+            const name = document.createElement('span');
+            name.className = 'text-sm font-medium text-gray-800 dark:text-gray-200 truncate';
+            name.textContent = source.id;
+            nameRow.appendChild(name);
+            const typeKey = `regionForm.sourceType.${source.type}`;
+            const badge = document.createElement('span');
+            badge.className =
+                source.type === 'vector'
+                    ? 'text-[10px] px-1.5 py-0.5 rounded-full bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 font-medium flex-shrink-0'
+                    : source.type === 'raster'
+                        ? 'text-[10px] px-1.5 py-0.5 rounded-full bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300 font-medium flex-shrink-0'
+                        : 'text-[10px] px-1.5 py-0.5 rounded-full bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300 font-medium flex-shrink-0';
+            badge.textContent = t(typeKey);
+            nameRow.appendChild(badge);
+            details.appendChild(nameRow);
+            // Zoom range info
+            const zoomMin = source.minzoom ?? 0;
+            const zoomMax = source.maxzoom ?? 22;
+            const meta = document.createElement('span');
+            meta.className = 'text-[11px] text-gray-500 dark:text-gray-400 truncate';
+            meta.textContent = `z${zoomMin}-${zoomMax}`;
+            if (source.tiles.length > 0) {
+                try {
+                    const hostname = new URL(source.tiles[0]).hostname;
+                    meta.textContent += ` · ${escapeHtml$1(hostname)}`;
+                }
+                catch {
+                    // ignore invalid URLs
+                }
+            }
+            details.appendChild(meta);
+            row.appendChild(details);
+            list.appendChild(row);
+        }
+        group.appendChild(list);
+        return group;
+    }
+    /**
+     * Get the selected extra sources from the picker
+     */
+    getSelectedExtraSources() {
+        const selected = [];
+        for (const { checkbox, source } of this.sourceCheckboxes.values()) {
+            if (checkbox.checked) {
+                selected.push({
+                    id: source.id,
+                    type: source.type,
+                    tiles: source.tiles,
+                    minzoom: source.minzoom,
+                    maxzoom: source.maxzoom,
+                    attribution: source.attribution,
+                });
+            }
+        }
+        return selected;
+    }
     /**
      * Handle style URL changes to auto-detect provider
      */
@@ -11928,6 +12090,7 @@ class RegionFormModal {
      */
     async handleSave() {
         try {
+            const selectedSources = this.getSelectedExtraSources();
             const formData = {
                 name: this.nameInput?.value || `Region ${Date.now()}`,
                 minZoom: parseInt(this.minZoomInput?.value || '1'),
@@ -11937,6 +12100,7 @@ class RegionFormModal {
                 // Enhanced Mapbox GL support
                 provider: this.providerSelect?.value,
                 accessToken: this.accessTokenInput?.value || undefined,
+                extraSources: selectedSources.length > 0 ? selectedSources : undefined,
             };
             this.modal?.hide();
             await this.options.onSave(formData);
@@ -12077,10 +12241,77 @@ class RegionControl {
             this.polygonControl.triggerSave();
         }
     }
+    /**
+     * Get the source IDs that belong to the current style URL.
+     * These are the sources the style already includes and will be downloaded automatically.
+     */
+    async getStyleSourceIds() {
+        try {
+            const styleUrl = this.options.styleUrl;
+            if (!styleUrl)
+                return new Set();
+            const response = await fetch(styleUrl);
+            if (!response.ok)
+                return new Set();
+            const styleJson = (await response.json());
+            if (styleJson.sources && typeof styleJson.sources === 'object') {
+                return new Set(Object.keys(styleJson.sources));
+            }
+        }
+        catch (error) {
+            regionLogger.warn('Failed to fetch style for source filtering:', error);
+        }
+        return new Set();
+    }
+    /**
+     * Extract tile sources from the live map instance that are NOT part of the current style.
+     * Returns vector, raster, and raster-dem sources that have tile URLs,
+     * excluding sources that already belong to the style (those are downloaded automatically).
+     */
+    async extractExtraMapSources() {
+        try {
+            const style = this.map?.getStyle?.();
+            if (!style || !style.sources || typeof style.sources !== 'object')
+                return [];
+            // Fetch the original style's source IDs so we can exclude them
+            const styleSourceIds = await this.getStyleSourceIds();
+            const sources = [];
+            for (const [id, raw] of Object.entries(style.sources)) {
+                // Skip sources that belong to the style itself
+                if (styleSourceIds.has(id))
+                    continue;
+                const type = raw.type;
+                if (type !== 'vector' && type !== 'raster' && type !== 'raster-dem')
+                    continue;
+                const tiles = raw.tiles;
+                // Only include sources that have resolvable tile URLs (not idb://)
+                if (!tiles || !Array.isArray(tiles) || tiles.length === 0)
+                    continue;
+                const hasHttpTiles = tiles.some((t) => t.startsWith('http://') || t.startsWith('https://'));
+                if (!hasHttpTiles)
+                    continue;
+                sources.push({
+                    id,
+                    type: type,
+                    tiles: tiles.filter((t) => t.startsWith('http://') || t.startsWith('https://')),
+                    minzoom: typeof raw.minzoom === 'number' ? raw.minzoom : undefined,
+                    maxzoom: typeof raw.maxzoom === 'number' ? raw.maxzoom : undefined,
+                    attribution: typeof raw.attribution === 'string' ? raw.attribution : undefined,
+                });
+            }
+            return sources;
+        }
+        catch (error) {
+            regionLogger.warn('Failed to extract map sources:', error);
+            return [];
+        }
+    }
     /**
      * Show region form modal
      */
-    showRegionForm(bounds, area) {
+    async showRegionForm(bounds, area) {
+        const mapSources = await this.extractExtraMapSources();
+        regionLogger.debug(`Discovered ${mapSources.length} extra tile sources from map`);
         const formOptions = {
             bounds,
             area,
@@ -12089,6 +12320,7 @@ class RegionControl {
             styleUrl: this.options.styleUrl,
             accessToken: this.options.accessToken,
             onThemeToggle: () => this.options.onRegionSaved?.(),
+            mapSources,
         };
         this.regionFormModal = new RegionFormModal(formOptions);
         const modal = this.regionFormModal.show();
@@ -12252,6 +12484,7 @@ class DownloadManager {
             minZoom: formData.minZoom,
             maxZoom: formData.maxZoom,
             styleUrl: formData.styleUrl,
+            extraSources: formData.extraSources,
         };
         const regionId = regionConfig.id;
         try {