ngx-open-map-wrapper/fesm2022/svrnty-ngx-open-map-wrapper.mjs

import { Map, NavigationControl, Marker } from 'maplibre-gl';
import { Map as Map$1, TileLayer, Marker as Marker$1 } from 'leaflet';
import * as i0 from '@angular/core';
import { inject, PLATFORM_ID, output, Directive, Injector, input, runInInjectionContext, effect, ViewChild, Component } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

function getLngLat(latLng) {
    return [latLng[1], latLng[0]];
}

class LibreAdapter {
    map;
    init(container, options) {
        this.map = new Map({
            container,
            style: options.styleUrl,
            center: getLngLat(options.center),
            zoom: options.zoom,
        });
        this.map.addControl(new NavigationControl(), 'top-right');
    }
    setCenter(latLng) {
        this.map.setCenter(getLngLat(latLng));
    }
    setZoom(zoom) {
        this.map.setZoom(zoom);
    }
    addMarker(latLng, options) {
        new Marker({ color: options?.color || 'red' })
            .setLngLat(getLngLat(latLng))
            .addTo(this.map);
    }
    destroy() {
        this.map.remove();
    }
}

class LeafletAdapter {
    map;
    init(container, options) {
        this.map = new Map$1(container).setView(options.center, options.zoom);
        new TileLayer(options.tileUrl, {
            attribution: '© OpenStreetMap contributors',
        }).addTo(this.map);
    }
    setCenter(latLng) {
        this.map.setView(latLng, this.map.getZoom());
    }
    setZoom(zoom) {
        this.map.setZoom(zoom);
    }
    addMarker(latLng, options) {
        const marker = new Marker$1(latLng);
        marker.addTo(this.map);
    }
    destroy() {
        this.map.remove();
    }
}

class MapFacade {
    adapter;
    leafletZoomOffset = 1;
    constructor(forceRaster, webglAvailable) {
        if (forceRaster || !webglAvailable) {
            this.adapter = new LeafletAdapter();
        }
        else {
            this.adapter = new LibreAdapter();
        }
    }
    init(container, options) {
        if (this.adapter instanceof LeafletAdapter)
            options.zoom += this.leafletZoomOffset;
        this.adapter.init(container, options);
    }
    setCenter(latLng) {
        this.adapter.setCenter(latLng);
    }
    setZoom(zoom) {
        if (this.adapter instanceof LeafletAdapter)
            zoom += this.leafletZoomOffset;
        this.adapter.setZoom(zoom);
    }
    addMarker(latLng, options) {
        this.adapter.addMarker(latLng, options);
    }
    destroy() {
        this.adapter.destroy();
    }
}

class WebglDetectionDirective {
    platformId = inject(PLATFORM_ID);
    webglSupport = output();
    ngOnInit() {
        if (!isPlatformBrowser(this.platformId))
            return;
        const supported = this.checkWebGLSupport();
        this.webglSupport.emit(supported);
    }
    checkWebGLSupport() {
        let canvas = undefined;
        try {
            canvas = document.createElement('canvas');
            const gl = (canvas.getContext('webgl') ||
                canvas.getContext('experimental-webgl'));
            const supported = !!window.WebGLRenderingContext &&
                !!(gl);
            return supported;
        }
        catch {
            return false;
        }
        finally {
            canvas?.remove();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WebglDetectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: WebglDetectionDirective, isStandalone: true, selector: "[webglDetection]", outputs: { webglSupport: "webglSupport" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WebglDetectionDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[webglDetection]',
                    standalone: true
                }]
        }] });

class OpenMapComponent {
    platformId = inject(PLATFORM_ID);
    injector = inject(Injector);
    webglSupported;
    map;
    mapContainer;
    options = input({
        center: [50.426606229502525, 30.56308375468811],
        zoom: 6,
        styleUrl: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
        tileUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        forceRaster: false,
    });
    mapReady = output();
    ngAfterViewInit() {
        if (false === isPlatformBrowser(this.platformId))
            return;
        runInInjectionContext(this.injector, () => {
            effect(() => {
                if (undefined === this.webglSupported)
                    return;
                if (!this.map)
                    this.initializeMap();
            });
        });
    }
    webglDetection(supported) {
        this.webglSupported = supported;
        if (undefined === this.map)
            this.initializeMap();
    }
    initializeMap() {
        const options = this.options();
        this.map = new MapFacade(options.forceRaster, this.webglSupported);
        this.map.init(this.mapContainer.nativeElement, options);
        this.mapReady.emit(this.map);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OpenMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: OpenMapComponent, isStandalone: true, selector: "open-map", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mapReady: "mapReady" }, viewQueries: [{ propertyName: "mapContainer", first: true, predicate: ["mapContainer"], descendants: true, static: true }], ngImport: i0, template: "<div #mapContainer class=\"map-container\" webglDetection (webglSupport)=\"webglDetection($event)\">\n\n</div>\n", styles: [".map-container{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: WebglDetectionDirective, selector: "[webglDetection]", outputs: ["webglSupport"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OpenMapComponent, decorators: [{
            type: Component,
            args: [{ selector: 'open-map', imports: [
                        WebglDetectionDirective
                    ], standalone: true, template: "<div #mapContainer class=\"map-container\" webglDetection (webglSupport)=\"webglDetection($event)\">\n\n</div>\n", styles: [".map-container{width:100%;height:100%}\n"] }]
        }], propDecorators: { mapContainer: [{
                type: ViewChild,
                args: ['mapContainer', { static: true }]
            }] } });

/*
 * Public API Surface of ngx-open-open-map-wrapper
 */
// Interfaces & types

/**
 * Generated bundle index. Do not edit.
 */

export { MapFacade, OpenMapComponent, WebglDetectionDirective, getLngLat };
//# sourceMappingURL=svrnty-ngx-open-map-wrapper.mjs.map