278 lines
9.3 KiB
JavaScript
278 lines
9.3 KiB
JavaScript
import { Map, NavigationControl, Marker, GeoJSONSource } 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';
|
|
import {LatLng} from "leaflet/src/geo/index.js";
|
|
|
|
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();
|
|
}
|
|
addZone(zones) {
|
|
this.updateZone(zones);
|
|
}
|
|
updateZone(zones) {
|
|
const features = zones.map((zone) => {
|
|
const coords = zone.polygon.map((pt) => [pt.y, pt.x]);
|
|
|
|
if (coords[0][0] !== coords[coords.length - 1][0] || coords[0][1] !== coords[coords.length - 1][1]) {
|
|
coords.push(coords[0]);
|
|
}
|
|
|
|
return {
|
|
type: 'Feature',
|
|
properties: {
|
|
id: zone.id,
|
|
name: zone.name,
|
|
color: zone.color ? `#${zone.color}` : '#ff0000',
|
|
},
|
|
geometry: {
|
|
type: 'Polygon',
|
|
coordinates: [coords]
|
|
},
|
|
};
|
|
});
|
|
|
|
const geojson = {
|
|
type: 'FeatureCollection',
|
|
features,
|
|
};
|
|
|
|
if (this.map.getSource("delivery-zones")) {
|
|
(this.map.getSource("delivery-zones").setData(geojson));
|
|
}
|
|
else {
|
|
this.map.addSource("delivery-zones", {
|
|
type: "geojson",
|
|
data: geojson,
|
|
});
|
|
|
|
this.map.addLayer({
|
|
id: "delivery-zones-fill",
|
|
type: "fill",
|
|
source: "delivery-zones",
|
|
paint: {
|
|
"fill-color": ["get", "color"],
|
|
"fill-opacity": 0.4,
|
|
},
|
|
});
|
|
|
|
this.map.addLayer({
|
|
id: "delivery-zones-outline",
|
|
type: "line",
|
|
source: "delivery-zones",
|
|
paint: {
|
|
"line-color": ["get", "color"],
|
|
"line-width": 2,
|
|
},
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
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());
|
|
TileLayer.map
|
|
}
|
|
setZoom(zoom) {
|
|
this.map.setZoom(zoom);
|
|
}
|
|
addMarker(latLng, options) {
|
|
const marker = new Marker$1(latLng);
|
|
marker.addTo(this.map);
|
|
}
|
|
destroy() {
|
|
this.map.remove();
|
|
}
|
|
addZone(zones) {
|
|
this.updateZone(zones);
|
|
}
|
|
updateZone(zones) {
|
|
for(let zone of zones)
|
|
{
|
|
const polygon = zone.polygon.map((geoPoint) => {
|
|
return new LatLng(geoPoint.x, geoPoint.y);
|
|
});
|
|
let color = "red"
|
|
if(zone.color)
|
|
color = `#${zone.color}`;
|
|
|
|
this.map.polygon.push(L.polygon(polygon, {
|
|
color
|
|
})
|
|
.addTo(this.map));
|
|
}
|
|
}
|
|
}
|
|
|
|
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();
|
|
}
|
|
addZone(deliveryZones) {
|
|
this.adapter.addZone(deliveryZones);
|
|
}
|
|
updateZone(deliveryZones) {
|
|
this.adapter.updateZone(deliveryZones);
|
|
}
|
|
}
|
|
|
|
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
|