@konce-pt/map 0.8.0

package/dist/engines/google.engine.js

@@ -0,0 +1,396 @@
+import { metersPerPixel, project, unproject } from "../geo.js";
+const LOAD_ERROR = 'kpt-map: nie udało się załadować Google Maps JavaScript API. ' +
+    'Sprawdź klucz (`apiKey`), czy Maps JavaScript API jest włączone w projekcie ' +
+    'i czy restrykcja domenowa klucza obejmuje ten adres.';
+/** Nazwa globalnego callbacku, którego wymaga `loading=async`. */
+const CALLBACK = '__kptGoogleMapsReady';
+let modulePromise = null;
+/**
+ * Ładuje Google Maps JavaScript API raz na aplikację. Gdy `google.maps` już istnieje — bo
+ * aplikacja wstawiła skrypt sama albo stoi tu druga mapa — korzystamy z tego, co jest: drugie
+ * wczytanie Google i tak odrzuca, wypisując ostrzeżenie do konsoli.
+ *
+ * Publiczne, bo silnik nie jest jedynym, kto tego API potrzebuje. Geokoder Google **musi**
+ * iść przez SDK, a nie przez REST: web service `/maps/api/geocode/json` odrzuca klucze
+ * z restrykcją `Referer` („API keys with referer restrictions cannot be used with this API"),
+ * a to jedyna restrykcja, jaką da się sensownie nałożyć na klucz leżący w bundlu przeglądarki.
+ * Wywołania z załadowanego SDK autoryzują się tak samo jak sama mapa.
+ *
+ * Adaptera geokodera biblioteka nadal nie dostarcza — tylko drogę do API, którą i tak
+ * otwiera silnikowi. Powody stoją przy `provideKptGoogleMap` i w `llms.txt`.
+ */
+export async function loadGoogleMapsApi(options) {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        throw new Error('kpt-map: silnik Google Maps wymaga przeglądarki.');
+    }
+    const existing = window['google']?.maps;
+    if (existing?.importLibrary)
+        return existing;
+    modulePromise ??= new Promise((resolve, reject) => {
+        const params = new URLSearchParams({
+            key: options.apiKey,
+            v: options.version ?? 'weekly',
+            loading: 'async',
+            callback: CALLBACK,
+        });
+        if (options.language)
+            params.set('language', options.language);
+        if (options.region)
+            params.set('region', options.region);
+        window[CALLBACK] = () => {
+            delete window[CALLBACK];
+            resolve(window['google'].maps);
+        };
+        const script = document.createElement('script');
+        script.src = `https://maps.googleapis.com/maps/api/js?${params}`;
+        script.async = true;
+        script.onerror = () => {
+            modulePromise = null; // pozwól spróbować ponownie po poprawieniu klucza
+            reject(new Error(LOAD_ERROR));
+        };
+        document.head.append(script);
+    });
+    return modulePromise;
+}
+/** Fabryka silnika — każda mapa dostaje własną instancję. */
+export function createGoogleEngine(options) {
+    return new GoogleEngine(options);
+}
+class GoogleEngine {
+    constructor(options) {
+        this.options = options;
+        this.kind = 'google';
+        this.maps = null;
+        this.markerLib = null;
+        this.map = null;
+        this.host = null;
+        this.userMarker = null;
+        /** Krąg dokładności jest własnym `<div>`, nie `google.maps.Circle` — patrz `setUserPosition`. */
+        this.accuracyEl = null;
+        this.accuracyMeters = 0;
+        this.accuracyAt = null;
+        /** Znaczniki po `id` wraz z ich sprzątaniem — bez tego każdy przelicz przerysowywałby mapę. */
+        this.markers = new Map();
+        this.listeners = [];
+        this.handlers = {};
+    }
+    async init(host, opts) {
+        const maps = (this.maps = await loadGoogleMapsApi(this.options));
+        // Pod nazwą `Map` kryje się konstruktor Google, nie wbudowana kolekcja — stąd alias.
+        const [{ Map: GoogleMap }, markerLib] = await Promise.all([
+            maps.importLibrary('maps'),
+            maps.importLibrary('marker'),
+        ]);
+        this.markerLib = markerLib;
+        this.host = host;
+        this.map = new GoogleMap(host, {
+            center: { lat: opts.center.lat, lng: opts.center.lng },
+            zoom: opts.zoom,
+            minZoom: opts.minZoom ?? this.options.minZoom ?? 2,
+            maxZoom: opts.maxZoom ?? this.options.maxZoom ?? 21,
+            mapId: this.options.mapId,
+            // Kontrolki rysuje warstwa Angulara — te same przyciski w obu silnikach.
+            disableDefaultUI: true,
+            // POI Google przechwytywałyby kliknięcia przeznaczone dla mapy (menu „dodaj lokalizację").
+            clickableIcons: false,
+            scrollwheel: this.options.scrollWheelZoom ?? true,
+            restriction: opts.maxBounds
+                ? { latLngBounds: this.toLatLngBounds(opts.maxBounds), strictBounds: true }
+                : undefined,
+        });
+        // `opts.tileUrl` i `opts.attribution` są tu bez znaczenia: kafle i atrybucję daje Google,
+        // a jej zasłonięcie albo usunięcie łamie warunki korzystania z usługi.
+        this.on_(this.map, 'bounds_changed', () => this.emit('move'));
+        this.on_(this.map, 'idle', () => this.emit('moveend'));
+        this.on_(this.map, 'zoom_changed', () => {
+            // Krąg dokładności ma stały promień w metrach, więc przy każdym zoomie zmienia piksele.
+            this.resizeAccuracy();
+            this.emit('zoomend');
+        });
+        this.on_(this.map, 'click', (e) => this.emit('click', this.toPointerEvent(e)));
+        this.on_(this.map, 'contextmenu', (e) => {
+            // Menu przeglądarki zasłoniłoby własne „Dodaj lokalizację".
+            e.domEvent?.preventDefault();
+            this.emit('contextmenu', this.toPointerEvent(e));
+        });
+        // Pierwszy `idle` znaczy, że mapa zna już swój rozmiar i zasięg.
+        await new Promise((resolve) => {
+            this.maps.event.addListenerOnce(this.map, 'idle', () => resolve());
+        });
+    }
+    destroy() {
+        for (const { marker, dispose } of this.markers.values()) {
+            dispose();
+            marker.map = null;
+        }
+        this.markers.clear();
+        if (this.userMarker)
+            this.userMarker.map = null;
+        this.userMarker = null;
+        this.accuracyEl = null;
+        this.accuracyAt = null;
+        for (const listener of this.listeners)
+            listener.remove?.();
+        this.listeners.length = 0;
+        // Google nie ma odpowiednika `map.remove()` — kontener czyścimy sami.
+        if (this.map)
+            this.maps?.event.clearInstanceListeners(this.map);
+        this.host?.replaceChildren();
+        this.map = null;
+        this.host = null;
+    }
+    setView(center, zoom, animate = true) {
+        if (!this.map)
+            return;
+        const at = { lat: center.lat, lng: center.lng };
+        if (animate) {
+            this.map.panTo(at);
+            this.map.setZoom(zoom);
+        }
+        else {
+            this.map.moveCamera({ center: at, zoom });
+        }
+    }
+    fitBounds(bounds, paddingPx = 0) {
+        this.map?.fitBounds(this.toLatLngBounds(bounds), paddingPx);
+    }
+    panBy(offset) {
+        this.map?.panBy(offset.x, offset.y);
+    }
+    getCenter() {
+        const c = this.map.getCenter();
+        return { lat: c.lat(), lng: c.lng() };
+    }
+    getZoom() {
+        return this.map.getZoom();
+    }
+    /**
+     * Zasięg widoku. `getBounds()` bywa `undefined`, zanim mapa policzy pierwszy układ —
+     * liczymy go wtedy z rdzenia, zamiast oddawać `null` przez kontrakt, który go nie przewiduje.
+     */
+    getBounds() {
+        const b = this.map?.getBounds();
+        if (b) {
+            const ne = b.getNorthEast();
+            const sw = b.getSouthWest();
+            return { south: sw.lat(), west: sw.lng(), north: ne.lat(), east: ne.lng() };
+        }
+        const size = this.getSize();
+        const nw = this.unproject({ x: 0, y: 0 });
+        const se = this.unproject({ x: size.width, y: size.height });
+        return { south: se.lat, west: nw.lng, north: nw.lat, east: se.lng };
+    }
+    getSize() {
+        const rect = this.host?.getBoundingClientRect();
+        return { width: rect?.width ?? 0, height: rect?.height ?? 0 };
+    }
+    /**
+     * Współrzędne → piksele kontenera.
+     *
+     * Świadomie **nie** przez `map.getProjection()`: ten zwraca `null` do pierwszego
+     * `projection_changed` i tak czy owak wymaga ręcznego przeliczenia na piksele kontenera.
+     * Rdzeń (`core/geo.ts`) ma dokładnie tę matematykę — tę samą, na której stoi grupowanie
+     * i adapter Leafleta — więc popup ląduje piksel w piksel tak samo w obu silnikach.
+     * Działa też dla zoomu ułamkowego, którego Google używa przy gestach.
+     */
+    project(at) {
+        const zoom = this.getZoom();
+        const size = this.getSize();
+        const origin = project(this.getCenter(), zoom);
+        const point = project(at, zoom);
+        return {
+            x: point.x - origin.x + size.width / 2,
+            y: point.y - origin.y + size.height / 2,
+        };
+    }
+    unproject(point) {
+        const zoom = this.getZoom();
+        const size = this.getSize();
+        const origin = project(this.getCenter(), zoom);
+        return unproject({ x: origin.x + point.x - size.width / 2, y: origin.y + point.y - size.height / 2 }, zoom);
+    }
+    /**
+     * Wymienia zestaw znaczników różnicowo — znaczniki o niezmienionym `id` zostają na miejscu,
+     * inaczej każdy przelicz gasiłby animacje i migotał.
+     */
+    setMarkers(next) {
+        if (!this.map || !this.markerLib)
+            return;
+        const { AdvancedMarkerElement } = this.markerLib;
+        const seen = new Set();
+        for (const m of next) {
+            seen.add(m.id);
+            const existing = this.markers.get(m.id);
+            if (existing) {
+                existing.marker.position = { lat: m.at.lat, lng: m.at.lng };
+                if (m.zIndex !== undefined)
+                    existing.marker.zIndex = m.zIndex;
+                this.fillMarker(existing.inner, m);
+                continue;
+            }
+            const { anchor, inner } = this.buildMarkerContent(m);
+            const marker = new AdvancedMarkerElement({
+                map: this.map,
+                position: { lat: m.at.lat, lng: m.at.lng },
+                content: anchor,
+                zIndex: m.zIndex ?? 0,
+            });
+            /*
+             * Kliknięcie łapiemy listenerem DOM na własnej treści, a nie zdarzeniem `gmp-click`
+             * z `gmpClickable: true`. Powód jest ten sam, dla którego adapter Leafleta woła
+             * `L.DomEvent.stopPropagation`: bez zatrzymania propagacji to samo kliknięcie doszłoby
+             * do mapy i `onMapClick()` zamknąłby popup w tej samej klatce, w której go otwieramy.
+             * Przy okazji odpada zależność od tego, jak `gmp-click` zachowuje się w danej wersji API.
+             * Dostępność bez zmian — etykietę niesie `aria-label` w HTML-u ikony.
+             */
+            const onClick = (event) => {
+                event.stopPropagation();
+                this.emit('markerclick', m.id, this.fromDomEvent(event, m.at));
+            };
+            inner.addEventListener('click', onClick);
+            this.markers.set(m.id, {
+                marker,
+                inner,
+                dispose: () => inner.removeEventListener('click', onClick),
+            });
+        }
+        for (const [id, entry] of this.markers) {
+            if (seen.has(id))
+                continue;
+            entry.dispose();
+            entry.marker.map = null;
+            this.markers.delete(id);
+        }
+    }
+    setUserPosition(position, html) {
+        if (!this.map || !this.markerLib)
+            return;
+        const { AdvancedMarkerElement } = this.markerLib;
+        if (!position) {
+            if (this.userMarker)
+                this.userMarker.map = null;
+            this.userMarker = null;
+            this.accuracyEl = null;
+            this.accuracyAt = null;
+            return;
+        }
+        const at = { lat: position.at.lat, lng: position.at.lng };
+        this.accuracyMeters = position.accuracy;
+        this.accuracyAt = position.at;
+        if (this.userMarker) {
+            this.userMarker.position = at;
+            this.userMarker.content = this.buildUserContent(html);
+        }
+        else {
+            this.userMarker = new AdvancedMarkerElement({
+                map: this.map,
+                position: at,
+                content: this.buildUserContent(html),
+                // Nad znacznikami lokalizacji — własne położenie ma być zawsze widoczne.
+                zIndex: 1000,
+            });
+        }
+        this.resizeAccuracy();
+    }
+    /** Google dostarcza własne kafle i własną atrybucję — nie ma czego podmieniać. */
+    setTileSource() {
+        // celowo puste
+    }
+    setMaxBounds(bounds) {
+        this.map?.setOptions({
+            restriction: bounds ? { latLngBounds: this.toLatLngBounds(bounds), strictBounds: true } : null,
+        });
+    }
+    /** Google sam reaguje na zmianę rozmiaru kontenera — nie ma odpowiednika `invalidateSize`. */
+    invalidateSize() {
+        // celowo puste
+    }
+    on(event, handler) {
+        (this.handlers[event] ??= []).push(handler);
+    }
+    // ── prywatne ────────────────────────────────────────────────────────────────
+    emit(event, ...args) {
+        for (const handler of this.handlers[event] ?? []) {
+            handler(...args);
+        }
+    }
+    /** Rejestruje listener Google i zapamiętuje go do sprzątania w `destroy()`. */
+    on_(target, event, handler) {
+        this.listeners.push(target.addListener(event, handler));
+    }
+    /**
+     * Opakowanie znacznika. `AdvancedMarkerElement` kotwiczy treść **środkiem dolnej krawędzi**,
+     * a kontrakt daje kotwicę w pikselach od lewego górnego rogu ikony. Element zewnętrzny ma
+     * więc zerowe wymiary — jego „środek dolnej krawędzi" wypada dokładnie we współrzędnych —
+     * a wewnętrzny przesuwa ikonę o żądaną kotwicę.
+     */
+    buildMarkerContent(m) {
+        const anchor = document.createElement('div');
+        anchor.style.cssText = 'position:relative;width:0;height:0';
+        const inner = document.createElement('div');
+        inner.className = 'kpt-map__icon';
+        inner.style.position = 'absolute';
+        anchor.append(inner);
+        this.fillMarker(inner, m);
+        return { anchor, inner };
+    }
+    fillMarker(inner, m) {
+        inner.style.left = `${-m.anchor.x}px`;
+        inner.style.top = `${-m.anchor.y}px`;
+        inner.style.width = `${m.size.width}px`;
+        inner.style.height = `${m.size.height}px`;
+        // HTML pochodzi z `marker-html.ts` — z rdzenia biblioteki, nie od użytkownika.
+        inner.innerHTML = m.html;
+    }
+    /**
+     * Znacznik użytkownika i krąg dokładności w jednym elemencie.
+     *
+     * Krąg jest `<div>`-em z klasą `kpt-map__accuracy`, a nie `google.maps.Circle`: Circle
+     * przyjmuje kolory w opcjach, a kontrakt repo wymaga stylowania tokenami `var(--kpt-*)`.
+     * Średnicę liczy `metersPerPixel()` z rdzenia, więc jest wspólna dla obu silników.
+     */
+    buildUserContent(html) {
+        const anchor = document.createElement('div');
+        anchor.style.cssText = 'position:relative;width:0;height:0';
+        const circle = document.createElement('div');
+        circle.className = 'kpt-map__accuracy';
+        circle.style.cssText = 'position:absolute;border-radius:50%;pointer-events:none';
+        anchor.append(circle);
+        this.accuracyEl = circle;
+        const inner = document.createElement('div');
+        inner.className = 'kpt-map__icon';
+        inner.style.cssText = 'position:absolute;left:-12px;top:-12px;width:24px;height:24px';
+        inner.innerHTML = html;
+        anchor.append(inner);
+        this.resizeAccuracy();
+        return anchor;
+    }
+    resizeAccuracy() {
+        const el = this.accuracyEl;
+        const at = this.accuracyAt;
+        if (!el || !at || !this.map)
+            return;
+        const diameter = (2 * this.accuracyMeters) / metersPerPixel(at.lat, this.getZoom());
+        el.style.width = `${diameter}px`;
+        el.style.height = `${diameter}px`;
+        el.style.left = `${-diameter / 2}px`;
+        el.style.top = `${-diameter / 2}px`;
+    }
+    toPointerEvent(e) {
+        const at = { lat: e.latLng.lat(), lng: e.latLng.lng() };
+        return { at, point: this.toContainerPoint(e.domEvent), originalEvent: e.domEvent };
+    }
+    fromDomEvent(event, at) {
+        return { at, point: this.toContainerPoint(event), originalEvent: event };
+    }
+    /** Google podaje zdarzenie DOM bez pozycji w kontenerze — liczymy ją z prostokąta hosta. */
+    toContainerPoint(event) {
+        const rect = this.host?.getBoundingClientRect();
+        if (!event || !rect)
+            return { x: 0, y: 0 };
+        return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    }
+    toLatLngBounds(b) {
+        return new this.maps.LatLngBounds({ lat: b.south, lng: b.west }, { lat: b.north, lng: b.east });
+    }
+}

package/dist/engines/leaflet.engine.d.ts

@@ -0,0 +1,13 @@
+import type { KptMapEngine } from '../engine.ts';
+export interface KptLeafletOptions {
+    /** Dolny limit zoomu. Domyślnie 2 — niżej świat powtarza się w poziomie. */
+    minZoom?: number;
+    /** Górny limit zoomu. Domyślnie 19 (tyle daje OSM). */
+    maxZoom?: number;
+    /** Bezwładność po przeciągnięciu. Domyślnie włączona. */
+    inertia?: boolean;
+    /** Zoom kółkiem myszy. Domyślnie włączony. */
+    scrollWheelZoom?: boolean;
+}
+/** Fabryka silnika — każda mapa dostaje własną instancję. */
+export declare function createLeafletEngine(options?: KptLeafletOptions): KptMapEngine;

package/dist/engines/leaflet.engine.js

@@ -0,0 +1,232 @@
+const MODULE_LOAD_ERROR = 'kpt-map: nie udało się załadować biblioteki `leaflet`. ' +
+    'To zależność opcjonalna — zainstaluj ją w aplikacji: `pnpm add leaflet` ' +
+    '(oraz dołącz `leaflet/dist/leaflet.css`).';
+let modulePromise = null;
+/**
+ * Ładuje Leaflet raz na aplikację. Leaflet 1.9 jest paczką UMD/CJS bez pola `exports`,
+ * więc pod bundlerem trafia raz jako `default`, a raz jako sam namespace — stąd interop.
+ */
+async function loadLeaflet() {
+    modulePromise ??= import('leaflet')
+        .then((mod) => mod?.default ?? mod)
+        .catch((cause) => {
+        modulePromise = null; // pozwól spróbować ponownie po doinstalowaniu paczki
+        throw new Error(MODULE_LOAD_ERROR, { cause });
+    });
+    return modulePromise;
+}
+/** Fabryka silnika — każda mapa dostaje własną instancję. */
+export function createLeafletEngine(options = {}) {
+    return new LeafletEngine(options);
+}
+class LeafletEngine {
+    constructor(options) {
+        this.options = options;
+        this.kind = 'leaflet';
+        this.L = null;
+        this.map = null;
+        this.tiles = null;
+        this.userMarker = null;
+        this.userCircle = null;
+        /** Znaczniki po `id` — bez tego każdy przelicz przerysowywałby całą mapę. */
+        this.markers = new Map();
+        this.handlers = {};
+    }
+    async init(host, opts) {
+        const L = (this.L = await loadLeaflet());
+        this.map = new L.Map(host, {
+            center: [opts.center.lat, opts.center.lng],
+            zoom: opts.zoom,
+            minZoom: opts.minZoom ?? this.options.minZoom ?? 2,
+            maxZoom: opts.maxZoom ?? this.options.maxZoom ?? 19,
+            // Kontrolki rysuje warstwa Angulara — domyślnych nie da się otokenizować
+            // bez walki z niewarstwowanym `leaflet.css`.
+            zoomControl: false,
+            attributionControl: true,
+            inertia: this.options.inertia ?? true,
+            scrollWheelZoom: this.options.scrollWheelZoom ?? true,
+            maxBounds: opts.maxBounds ? this.toLatLngBounds(opts.maxBounds) : undefined,
+            // Bez tego mapa przy `maxBounds` daje się odciągnąć i sprężynuje.
+            maxBoundsViscosity: opts.maxBounds ? 1 : 0,
+        });
+        this.tiles = new L.TileLayer(opts.tileUrl, {
+            attribution: opts.attribution,
+            maxZoom: opts.maxZoom ?? this.options.maxZoom ?? 19,
+        }).addTo(this.map);
+        this.map.on('move', () => this.emit('move'));
+        this.map.on('moveend', () => this.emit('moveend'));
+        this.map.on('zoomend', () => this.emit('zoomend'));
+        this.map.on('click', (e) => this.emit('click', this.toPointerEvent(e)));
+        this.map.on('contextmenu', (e) => {
+            // Menu przeglądarki zasłoniłoby własne „Dodaj lokalizację".
+            L.DomEvent.preventDefault(e.originalEvent);
+            this.emit('contextmenu', this.toPointerEvent(e));
+        });
+    }
+    destroy() {
+        this.markers.clear();
+        this.userMarker = null;
+        this.userCircle = null;
+        this.tiles = null;
+        this.map?.remove();
+        this.map = null;
+    }
+    setView(center, zoom, animate = true) {
+        this.map?.setView([center.lat, center.lng], zoom, { animate });
+    }
+    fitBounds(bounds, paddingPx = 0) {
+        this.map?.fitBounds(this.toLatLngBounds(bounds), {
+            padding: [paddingPx, paddingPx],
+            maxZoom: this.options.maxZoom ?? 19,
+        });
+    }
+    panBy(offset) {
+        this.map?.panBy([offset.x, offset.y], { animate: true });
+    }
+    getCenter() {
+        const c = this.map.getCenter();
+        return { lat: c.lat, lng: c.lng };
+    }
+    getZoom() {
+        return this.map.getZoom();
+    }
+    getBounds() {
+        const b = this.map.getBounds();
+        return { south: b.getSouth(), west: b.getWest(), north: b.getNorth(), east: b.getEast() };
+    }
+    getSize() {
+        const s = this.map.getSize();
+        return { width: s.x, height: s.y };
+    }
+    project(at) {
+        const p = this.map.latLngToContainerPoint([at.lat, at.lng]);
+        return { x: p.x, y: p.y };
+    }
+    unproject(point) {
+        const ll = this.map.containerPointToLatLng([point.x, point.y]);
+        return { lat: ll.lat, lng: ll.lng };
+    }
+    /**
+     * Wymienia zestaw znaczników różnicowo. Znaczniki, których `id` się nie zmieniło,
+     * zostają na miejscu — inaczej każdy przelicz gasiłby animacje i migotał.
+     */
+    setMarkers(next) {
+        if (!this.map || !this.L)
+            return;
+        const L = this.L;
+        const seen = new Set();
+        for (const m of next) {
+            seen.add(m.id);
+            const existing = this.markers.get(m.id);
+            const icon = L.divIcon({
+                html: m.html,
+                className: 'kpt-map__icon',
+                iconSize: [m.size.width, m.size.height],
+                iconAnchor: [m.anchor.x, m.anchor.y],
+            });
+            if (existing) {
+                existing.setLatLng([m.at.lat, m.at.lng]);
+                existing.setIcon(icon);
+                if (m.zIndex !== undefined)
+                    existing.setZIndexOffset(m.zIndex);
+                continue;
+            }
+            const marker = new L.Marker([m.at.lat, m.at.lng], {
+                icon,
+                // Znacznik niesie własny `aria-label` w HTML-u ikony; pusty `alt`
+                // powstrzymuje Leaflet przed dorzuceniem drugiej etykiety.
+                alt: '',
+                keyboard: false,
+                zIndexOffset: m.zIndex ?? 0,
+            });
+            marker.on('click', (e) => {
+                L.DomEvent.stopPropagation(e);
+                this.emit('markerclick', m.id, this.toPointerEvent(e));
+            });
+            marker.addTo(this.map);
+            this.markers.set(m.id, marker);
+        }
+        for (const [id, marker] of this.markers) {
+            if (seen.has(id))
+                continue;
+            marker.remove();
+            this.markers.delete(id);
+        }
+    }
+    setUserPosition(position, html) {
+        if (!this.map || !this.L)
+            return;
+        const L = this.L;
+        if (!position) {
+            this.userMarker?.remove();
+            this.userCircle?.remove();
+            this.userMarker = null;
+            this.userCircle = null;
+            return;
+        }
+        const at = [position.at.lat, position.at.lng];
+        const icon = L.divIcon({ html, className: 'kpt-map__icon', iconSize: [24, 24], iconAnchor: [12, 12] });
+        if (this.userMarker) {
+            this.userMarker.setLatLng(at);
+            this.userMarker.setIcon(icon);
+        }
+        else {
+            // Nad znacznikami lokalizacji — własne położenie ma być zawsze widoczne.
+            this.userMarker = new L.Marker(at, { icon, alt: '', keyboard: false, zIndexOffset: 1000 }).addTo(this.map);
+        }
+        // Promień w metrach; L.Circle sam przelicza go na piksele przy każdym zoomie.
+        if (this.userCircle) {
+            this.userCircle.setLatLng(at);
+            this.userCircle.setRadius(position.accuracy);
+        }
+        else {
+            this.userCircle = new L.Circle(at, {
+                radius: position.accuracy,
+                className: 'kpt-map__accuracy',
+                interactive: false,
+                // Kolory idą z klasy CSS (tokeny), nie z opcji Leafleta.
+                stroke: true,
+                weight: 1,
+            }).addTo(this.map);
+        }
+    }
+    setTileSource(tileUrl, attribution) {
+        if (!this.map || !this.L)
+            return;
+        this.tiles?.remove();
+        this.tiles = new this.L.TileLayer(tileUrl, {
+            attribution,
+            maxZoom: this.options.maxZoom ?? 19,
+        }).addTo(this.map);
+        // Kafle wchodzą pod znaczniki — bez tego nowa warstwa przykryłaby je.
+        this.tiles.bringToBack();
+    }
+    setMaxBounds(bounds) {
+        if (!this.map)
+            return;
+        this.map.setMaxBounds(bounds ? this.toLatLngBounds(bounds) : null);
+        this.map.options.maxBoundsViscosity = bounds ? 1 : 0;
+    }
+    invalidateSize() {
+        // `animate: false` — to reakcja na zmianę layoutu, nie gest użytkownika.
+        this.map?.invalidateSize({ animate: false });
+    }
+    on(event, handler) {
+        (this.handlers[event] ??= []).push(handler);
+    }
+    emit(event, ...args) {
+        for (const handler of this.handlers[event] ?? []) {
+            handler(...args);
+        }
+    }
+    toPointerEvent(e) {
+        return {
+            at: { lat: e.latlng.lat, lng: e.latlng.lng },
+            point: { x: e.containerPoint.x, y: e.containerPoint.y },
+            originalEvent: e.originalEvent,
+        };
+    }
+    toLatLngBounds(b) {
+        return new this.L.LatLngBounds([b.south, b.west], [b.north, b.east]);
+    }
+}

package/dist/format.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Dystans po ludzku: poniżej kilometra w metrach zaokrąglonych do dziesiątek,
+ * wyżej w kilometrach z jednym miejscem po przecinku (`6,2 km` w `pl-PL`).
+ *
+ * Wartość ujemna albo nieskończona daje `null` — wołający chowa wtedy wiersz,
+ * zamiast malować „NaN km".
+ */
+export declare function formatDistance(metres: number | null | undefined, locale: string): string | null;
+/** Współrzędne do wiersza karty — pięć miejsc po przecinku to ok. metr. */
+export declare function formatLatLng(at: {
+    lat: number;
+    lng: number;
+}, digits?: number): string;

package/dist/format.js

@@ -0,0 +1,32 @@
+/*
+ * Formatowanie liczb dla warstwy prezentacji mapy — pure TS.
+ * Wszystko przez `Intl`, więc separator dziesiętny idzie z locale,
+ * a nie z zaszytej na sztywno kropki.
+ */
+/**
+ * Dystans po ludzku: poniżej kilometra w metrach zaokrąglonych do dziesiątek,
+ * wyżej w kilometrach z jednym miejscem po przecinku (`6,2 km` w `pl-PL`).
+ *
+ * Wartość ujemna albo nieskończona daje `null` — wołający chowa wtedy wiersz,
+ * zamiast malować „NaN km".
+ */
+export function formatDistance(metres, locale) {
+    if (metres == null || !Number.isFinite(metres) || metres < 0)
+        return null;
+    if (metres < 1000) {
+        const rounded = metres < 100 ? Math.round(metres) : Math.round(metres / 10) * 10;
+        return `${new Intl.NumberFormat(locale).format(rounded)} m`;
+    }
+    const km = metres / 1000;
+    // Powyżej 100 km ułamek nie niesie już informacji.
+    const digits = km >= 100 ? 0 : 1;
+    const value = new Intl.NumberFormat(locale, {
+        minimumFractionDigits: digits,
+        maximumFractionDigits: digits,
+    }).format(km);
+    return `${value} km`;
+}
+/** Współrzędne do wiersza karty — pięć miejsc po przecinku to ok. metr. */
+export function formatLatLng(at, digits = 5) {
+    return `${at.lat.toFixed(digits)}, ${at.lng.toFixed(digits)}`;
+}