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: "
\n\n
\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: "
\n\n
\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