@npm9912/v-map 0.1.0

package/dist/collection/map-provider/leaflet/google-map-tiles-layer.js

@@ -0,0 +1,352 @@
+import * as L from "leaflet";
+import { error, log } from "../../utils/logger";
+const CREATE_SESSION_URL = 'https://tile.googleapis.com/v1/createSession';
+const TILE_URL_BASE = 'https://tile.googleapis.com/v1/2dtiles';
+const ATTRIBUTION_URL = 'https://tile.googleapis.com/tile/v1/viewport';
+const DEFAULT_MAX_ZOOM = 22;
+const SESSION_REFRESH_BUFFER_MS = 60 * 1000;
+const FALLBACK_TILE_SIZE = 256;
+export class GoogleMapTilesLayer extends L.GridLayer {
+    apiKey;
+    highDpi;
+    sessionRequest;
+    scaleFactor;
+    sessionToken;
+    sessionPromise;
+    sessionRefreshId;
+    previousViewport;
+    currentAttribution;
+    mapInstance;
+    onMoveEnd;
+    constructor(options) {
+        super();
+        this.applyInitialGridOptions(options);
+        const { apiKey, mapType, language, region, imageFormat, scale, highDpi, layerTypes, overlay, styles, apiOptions, } = options;
+        if (!apiKey) {
+            throw new Error('Google Map Tiles layer requires an apiKey');
+        }
+        this.apiKey = apiKey;
+        this.highDpi =
+            highDpi ?? (scale === undefined ? true : scale !== 'scaleFactor1x');
+        this.scaleFactor = this.mapScaleToFactor(scale, this.highDpi);
+        const request = {
+            mapType: mapType ?? 'roadmap',
+            language: language ?? 'en-US',
+            region: region ?? 'US',
+        };
+        if (imageFormat) {
+            request.imageFormat = imageFormat;
+        }
+        if (layerTypes?.length) {
+            request.layerTypes = layerTypes;
+        }
+        if (apiOptions?.length) {
+            request.apiOptions = apiOptions;
+        }
+        if (Array.isArray(styles) && styles.length > 0) {
+            request.styles = styles;
+        }
+        if (overlay === true) {
+            request.overlay = true;
+        }
+        const resolvedScale = scale ?? (this.scaleFactor > 1 ? this.factorToScale(this.scaleFactor) : undefined);
+        if (resolvedScale) {
+            request.scale = resolvedScale;
+        }
+        if (this.highDpi) {
+            request.highDpi = true;
+        }
+        this.sessionRequest = request;
+        this.onMoveEnd = () => {
+            void this.updateAttribution();
+        };
+        this.sessionPromise = this.startSessionFetch();
+    }
+    onAdd(map) {
+        this.mapInstance = map;
+        map.on('moveend', this.onMoveEnd);
+        map.on('zoomend', this.onMoveEnd);
+        void this.ensureSession().then(() => this.updateAttribution());
+        return super.onAdd(map);
+    }
+    onRemove(map) {
+        map.off('moveend', this.onMoveEnd);
+        map.off('zoomend', this.onMoveEnd);
+        this.clearSessionRefresh();
+        this.removeCurrentAttribution();
+        this.mapInstance = undefined;
+        return super.onRemove(map);
+    }
+    createTile(coords, done) {
+        const tile = document.createElement('img');
+        tile.decoding = 'async';
+        tile.alt = '';
+        tile.crossOrigin = 'anonymous';
+        const size = this.resolveTileSize();
+        tile.width = size.x;
+        tile.height = size.y;
+        const handleError = (err) => {
+            const message = err instanceof Error ? err.message : 'Google tile load error';
+            done(new Error(message), tile);
+        };
+        tile.onload = () => done(null, tile);
+        tile.onerror = (event) => {
+            const err = event instanceof ErrorEvent
+                ? event.error ?? new Error(event.message)
+                : new Error('Google tile failed to load');
+            handleError(err);
+        };
+        void this.ensureSession()
+            .then(() => {
+            if (!this.sessionToken) {
+                handleError(new Error('Google Maps session unavailable'));
+                return;
+            }
+            tile.src = this.buildTileUrl(coords);
+        })
+            .catch((err) => {
+            handleError(err);
+        });
+        return tile;
+    }
+    ensureSession() {
+        if (this.sessionToken) {
+            return Promise.resolve();
+        }
+        if (!this.sessionPromise) {
+            this.sessionPromise = this.startSessionFetch();
+        }
+        return this.sessionPromise;
+    }
+    startSessionFetch(force = false) {
+        if (this.sessionPromise && !force) {
+            return this.sessionPromise;
+        }
+        const promise = this.fetchAndApplySession()
+            .catch((err) => {
+            const wrapped = err instanceof Error
+                ? err
+                : new Error('Failed to create Google Maps session');
+            error('Google Map Tiles session error', wrapped);
+            this.sessionToken = undefined;
+            throw wrapped;
+        })
+            .finally(() => {
+            if (this.sessionPromise === promise) {
+                this.sessionPromise = undefined;
+            }
+        });
+        this.sessionPromise = promise;
+        return promise;
+    }
+    async fetchAndApplySession() {
+        const url = `${CREATE_SESSION_URL}?key=${this.apiKey}`;
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(this.sessionRequest),
+        });
+        if (!response.ok) {
+            let details;
+            try {
+                const body = await response.json();
+                details = body?.error?.message;
+            }
+            catch {
+                // ignore JSON parse errors
+            }
+            throw new Error(details ?? `Google Maps session request failed (${response.status})`);
+        }
+        const data = (await response.json());
+        this.sessionToken = data.session;
+        this.applyTileSize(data);
+        this.scheduleSessionRefresh(this.parseExpiry(data.expiry));
+        if (this.mapInstance) {
+            void this.updateAttribution();
+            this.redrawLayer();
+        }
+        log('Google Map Tiles session established');
+    }
+    scheduleSessionRefresh(expiryMs) {
+        if (!isFinite(expiryMs))
+            return;
+        const refreshInMs = Math.max(expiryMs - Date.now() - SESSION_REFRESH_BUFFER_MS, 1000);
+        this.clearSessionRefresh();
+        this.sessionRefreshId = setTimeout(() => {
+            void this.startSessionFetch(true).then(() => {
+                if (this.mapInstance) {
+                    void this.updateAttribution();
+                    this.redrawLayer();
+                }
+            });
+        }, refreshInMs);
+    }
+    clearSessionRefresh() {
+        if (this.sessionRefreshId !== undefined) {
+            clearTimeout(this.sessionRefreshId);
+            this.sessionRefreshId = undefined;
+        }
+    }
+    async updateAttribution() {
+        if (!this.mapInstance || !this.sessionToken)
+            return;
+        const bounds = this.mapInstance.getBounds();
+        if (!bounds?.isValid())
+            return;
+        const zoom = this.mapInstance.getZoom();
+        const viewport = `zoom=${zoom}&north=${bounds.getNorth()}&south=${bounds.getSouth()}&east=${bounds.getEast()}&west=${bounds.getWest()}`;
+        if (this.previousViewport === viewport) {
+            return;
+        }
+        this.previousViewport = viewport;
+        try {
+            const response = await fetch(`${ATTRIBUTION_URL}?session=${this.sessionToken}&key=${this.apiKey}&${viewport}`);
+            if (!response.ok) {
+                throw new Error(`Attribution request failed (${response.status})`);
+            }
+            const json = await response.json();
+            const copyright = json?.copyright;
+            if (typeof copyright === 'string' && copyright.length > 0) {
+                this.applyAttribution(copyright);
+            }
+        }
+        catch (err) {
+            error('Failed to fetch Google attribution', err);
+        }
+    }
+    applyAttribution(value) {
+        const map = this.mapInstance;
+        if (!map?.attributionControl)
+            return;
+        if (this.currentAttribution && this.currentAttribution !== value) {
+            map.attributionControl.removeAttribution(this.currentAttribution);
+        }
+        if (!this.currentAttribution || this.currentAttribution !== value) {
+            map.attributionControl.addAttribution(value);
+            this.currentAttribution = value;
+        }
+    }
+    removeCurrentAttribution() {
+        const map = this.mapInstance;
+        if (!map?.attributionControl || !this.currentAttribution)
+            return;
+        map.attributionControl.removeAttribution(this.currentAttribution);
+        this.currentAttribution = undefined;
+    }
+    applyTileSize(data) {
+        const width = Math.max(1, Math.round(data.tileWidth / this.scaleFactor));
+        const height = Math.max(1, Math.round(data.tileHeight / this.scaleFactor));
+        const tileSize = L.point(width, height);
+        this.setGridOptions({ tileSize });
+    }
+    parseExpiry(expiry) {
+        const asInt = parseInt(expiry, 10);
+        return Number.isFinite(asInt) ? asInt * 1000 : Number.NaN;
+    }
+    buildTileUrl(coords) {
+        if (!this.sessionToken) {
+            throw new Error('Google Maps session missing');
+        }
+        const z = coords.z;
+        const x = coords.x;
+        const y = coords.y;
+        return `${TILE_URL_BASE}/${z}/${x}/${y}?session=${this.sessionToken}&key=${this.apiKey}`;
+    }
+    mapScaleToFactor(scale, highDpi) {
+        switch (scale) {
+            case 'scaleFactor4x':
+                return 4;
+            case 'scaleFactor2x':
+                return 2;
+            case 'scaleFactor1x':
+                return 1;
+            default:
+                return highDpi ? 2 : 1;
+        }
+    }
+    factorToScale(factor) {
+        switch (factor) {
+            case 4:
+                return 'scaleFactor4x';
+            case 2:
+                return 'scaleFactor2x';
+            case 1:
+                return 'scaleFactor1x';
+            default:
+                return undefined;
+        }
+    }
+    applyInitialGridOptions(options) {
+        const payload = {};
+        const keys = [
+            'attribution',
+            'bounds',
+            'className',
+            'detectRetina',
+            'errorTileUrl',
+            'keepBuffer',
+            'maxNativeZoom',
+            'maxZoom',
+            'minNativeZoom',
+            'minZoom',
+            'noWrap',
+            'opacity',
+            'pane',
+            'reuseTiles',
+            'subdomains',
+            'tileSize',
+            'tms',
+            'updateInterval',
+            'updateWhenIdle',
+            'updateWhenZooming',
+            'zIndex',
+            'zoomOffset',
+        ];
+        for (const key of keys) {
+            const value = options[key];
+            if (value !== undefined) {
+                payload[key] = value;
+            }
+        }
+        if (payload.maxZoom === undefined) {
+            payload.maxZoom = DEFAULT_MAX_ZOOM;
+        }
+        this.setGridOptions(payload);
+    }
+    setGridOptions(options) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- L.Util.setOptions is typed as (obj: any, options: any) => any in Leaflet
+        const setOptionsFn = L.Util?.setOptions;
+        if (typeof setOptionsFn === 'function') {
+            setOptionsFn(this, options);
+        }
+        else {
+            const self = this;
+            self.options = {
+                ...self.options,
+                ...options,
+            };
+        }
+    }
+    resolveTileSize() {
+        const raw = this.options?.tileSize;
+        if (raw && typeof raw === 'object') {
+            if (Array.isArray(raw) && raw.length === 2) {
+                const [x, y] = raw;
+                return L.point(Number(x) || FALLBACK_TILE_SIZE, Number(y) || FALLBACK_TILE_SIZE);
+            }
+            if ('x' in raw && 'y' in raw) {
+                const point = raw;
+                return L.point(Number(point.x) || FALLBACK_TILE_SIZE, Number(point.y) || FALLBACK_TILE_SIZE);
+            }
+        }
+        if (typeof raw === 'number' && Number.isFinite(raw)) {
+            return L.point(raw, raw);
+        }
+        return L.point(FALLBACK_TILE_SIZE, FALLBACK_TILE_SIZE);
+    }
+    redrawLayer() {
+        this.redraw();
+    }
+}

package/dist/collection/map-provider/leaflet/leaflet-helpers.js

@@ -0,0 +1,94 @@
+import { LEAFLET_VERSION } from "../../lib/versions.gen";
+import { isBrowser, supportsAdoptedStyleSheets } from "../../utils/dom-env";
+import * as L from "leaflet";
+function injectInlineMin(root) {
+    if (!isBrowser())
+        return;
+    const css = `
+    :host { display:block; }
+    #map { width:100%; height:100%; display:block; }
+  `;
+    if (supportsAdoptedStyleSheets()) {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(css);
+        const target = (root ?? document);
+        const current = target.adoptedStyleSheets ?? [];
+        target.adoptedStyleSheets = [...current, sheet];
+        return null;
+    }
+    else {
+        const style = document.createElement('style');
+        style.textContent = css;
+        (root ?? document.head).appendChild(style);
+        return style;
+    }
+}
+function addLeafletCssFromCdn(root, version = LEAFLET_VERSION, cdn = 'jsdelivr') {
+    if (!isBrowser())
+        return;
+    const href = cdn === 'unpkg'
+        ? `https://unpkg.com/leaflet@${version}/dist/leaflet.css`
+        : `https://cdn.jsdelivr.net/npm/leaflet@${version}/dist/leaflet.css`;
+    if (cdn === 'unpkg')
+        L.Icon.Default.imagePath = `https://unpkg.com/npm/leaflet@${version}/dist/images/`;
+    else
+        L.Icon.Default.imagePath = `https://cdn.jsdelivr.net/npm/leaflet@${version}/dist/images/`;
+    // doppelte Injektion vermeiden (prüfe ShadowRoot **und** globales head)
+    const scope = root ?? document;
+    const already = scope.querySelector?.(`link[rel="stylesheet"][href="${href}"]`) ||
+        document.head.querySelector(`link[rel="stylesheet"][href="${href}"]`);
+    if (already)
+        return null;
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = href;
+    // Optional: link.integrity = '<SRI-Hash>'; link.crossOrigin = '';
+    (root ?? document.head).appendChild(link);
+    return link;
+}
+export function removeInjectedCss(shadowRoot, injectedStyle) {
+    if (!shadowRoot || !injectedStyle)
+        return;
+    // Das <style>-Element aus dem Shadow‑DOM entfernen
+    injectedStyle.remove(); // moderne API
+}
+export function ensureLeafletCss(mode, root) {
+    if (!isBrowser())
+        return; // Tests/SSR: no-op
+    switch (mode) {
+        case 'cdn':
+            return addLeafletCssFromCdn(root);
+        case 'inline-min':
+            return injectInlineMin(root);
+        case 'bundle':
+            // CSS wird vom Host/App-Bundle geliefert (z.B. via import 'leaflet/dist/leaflet.css')
+            break;
+        case 'none':
+        default:
+            // Host kümmert sich selbst; nichts tun
+            break;
+    }
+    return null;
+}
+// Die Google Maps JS API wird seit der Umstellung auf Map Tiles nicht mehr geladen.
+/** Fügt ein kleines Google-Logo als Leaflet-Control hinzu (Branding-Sicherheit) */
+export function ensureGoogleLogo(map, markAdded) {
+    if (map._googleLogoAdded)
+        return;
+    const Logo = L.Control.extend({
+        onAdd() {
+            const img = L.DomUtil.create('img');
+            img.src =
+                'https://developers.google.com/static/maps/documentation/images/google_on_white.png';
+            img.alt = 'Google';
+            img.style.pointerEvents = 'none';
+            img.style.height = '18px';
+            img.style.margin = '0 0 6px 6px';
+            return img;
+        },
+        onRemove() { },
+    });
+    new Logo({ position: 'bottomleft' }).addTo(map);
+    map._googleLogoAdded = true;
+    markAdded();
+}