map-gl-offline 0.5.3 → 0.5.6

package/dist/index.umd.js

@@ -5373,6 +5373,21 @@
             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);
@@ -5535,6 +5550,21 @@
             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:', {
@@ -8094,6 +8124,14 @@
         '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.',
@@ -8309,6 +8347,14 @@
         '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': 'لم يتم العثور على مناطق غير متصلة. انقر على "إضافة منطقة" للبدء.',
@@ -11661,6 +11707,8 @@
         providerSelect;
         accessTokenInput;
         accessTokenGroup;
+        // Extra sources picker
+        sourceCheckboxes = new Map();
         constructor(options) {
             this.options = options;
         }
@@ -11832,10 +11880,124 @@
     `;
             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
          */
@@ -11922,6 +12084,7 @@
          */
         async handleSave() {
             try {
+                const selectedSources = this.getSelectedExtraSources();
                 const formData = {
                     name: this.nameInput?.value || `Region ${Date.now()}`,
                     minZoom: parseInt(this.minZoomInput?.value || '1'),
@@ -11931,6 +12094,7 @@
                     // 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);
@@ -12071,10 +12235,77 @@
                 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,
@@ -12083,6 +12314,7 @@
                 styleUrl: this.options.styleUrl,
                 accessToken: this.options.accessToken,
                 onThemeToggle: () => this.options.onRegionSaved?.(),
+                mapSources,
             };
             this.regionFormModal = new RegionFormModal(formOptions);
             const modal = this.regionFormModal.show();
@@ -12246,6 +12478,7 @@
                 minZoom: formData.minZoom,
                 maxZoom: formData.maxZoom,
                 styleUrl: formData.styleUrl,
+                extraSources: formData.extraSources,
             };
             const regionId = regionConfig.id;
             try {