add addzone and update zone in map-adapter interface

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

@@ -1,8 +1,9 @@
-import { Map, NavigationControl, Marker } from 'maplibre-gl';
+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]];
@@ -33,6 +34,66 @@ class LibreAdapter {
     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 {
@@ -45,6 +106,7 @@ class LeafletAdapter {
     }
     setCenter(latLng) {
         this.map.setView(latLng, this.map.getZoom());
+        TileLayer.map
     }
     setZoom(zoom) {
         this.map.setZoom(zoom);
@@ -56,6 +118,25 @@ class LeafletAdapter {
     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 {
@@ -88,6 +169,12 @@ class MapFacade {
     destroy() {
         this.adapter.destroy();
     }
+    addZone(deliveryZones) {
+        this.adapter.addZone(deliveryZones);
+    }
+    updateZone(deliveryZones) {
+        this.adapter.updateZone(deliveryZones);
+    }
 }
 
 class WebglDetectionDirective {
@@ -120,12 +207,12 @@ class WebglDetectionDirective {
     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
-                }]
-        }] });
+        type: Directive,
+        args: [{
+            selector: '[webglDetection]',
+            standalone: true
+        }]
+    }] });
 
 class OpenMapComponent {
     platformId = inject(PLATFORM_ID);
@@ -168,14 +255,14 @@ class OpenMapComponent {
     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 }]
-            }] } });
+        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