add zone, add popup address, add popup zone, add remove marker, add close popup

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

@@ -1,5 +1,5 @@
 import {Map, NavigationControl, Marker, Popup} from 'maplibre-gl';
-import { Map as Map$1, TileLayer, Marker as Marker$1 } from 'leaflet';
+import { Map as Map$1, TileLayer, Marker as Marker$1, polygon } 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';
@@ -130,35 +130,6 @@ class LibreAdapter {
       });
     }
   }
-  openAddressPopup(address)
-  {
-    const bounds = this.map.getBounds();
-    const corner = bounds.getNorthWest();
-    this.closePopup();
-    this.popup = new Popup({
-      closeButton: false,
-      closeOnClick: false,
-    })
-      .setLngLat([corner.lng, corner.lat])
-      .setHTML(`
-        <div class="delivery-address">
-          <p>${address.line1}</p>
-          ${address.line2 ? `<p>${address.line2}</p>` : ''}
-          <p>${address.city}, ${address.postalCode}</p>
-          <p>${address.subdivision}, ${address.country}</p>
-          ${address.shippingFee ? `<p>Shipping ${address.shippingFee}</p>` : ''}
-          ${address.deliverySchedule ? `<p>Delivery time estimate ${address.deliverySchedule}</p>` : ''}
-        </div>`)
-      .addTo(this.map);
-
-    this.map.on('move', () => {
-      if (this.popup) {
-        const newBounds = this.map.getBounds();
-        const newCorner = newBounds.getNorthWest();
-        this.popup.setLngLat([newCorner.lng, newCorner.lat]);
-      }
-    });
-  }
   openZonePopup(zone)
   {
     let sumLng = 0;
@@ -263,47 +234,10 @@ class LeafletAdapter {
       if (zone.opacity)
         opacity = zone.opacity;
       
-      const polygon = L.polygon(latlngs, { color, fillOpacity: opacity })
+      polygon(latlngs, { color, fillOpacity: opacity })
         .addTo(this.map);
     }
   }
-  openAddressPopup(address)
-  {
-    const bounds = this.map.getBounds();
-    const corner = bounds.getNorthEast();
-
-    if (this.popup) {
-      this.map.removeLayer(this.popup);
-    }
-
-    this.popup = new Marker$1(corner, {
-      opacity: 0
-    })
-      .addTo(this.map)
-      .bindTooltip(`
-      <div class="delivery-address">
-        <p>${address.line1}</p>
-        ${address.line2 ? `<p>${address.line2}</p>` : ''}
-        <p>${address.city}, ${address.postalCode}</p>
-        <p>${address.subdivision}, ${address.country}</p>
-        ${address.shippingFee ? `<p>Shipping ${address.shippingFee}</p>` : ''}
-        ${address.deliverySchedule ? `<p>Delivery time estimate ${address.deliverySchedule}</p>` : ''}
-      </div>`,
-        {
-        permanent: true,
-        offset: [-38, 135]
-        })
-      .openTooltip();
-
-    this.map.on('move', () => {
-      if (this.popup) {
-        const newBounds = this.map.getBounds();
-        const newCorner = newBounds.getNorthEast();
-        this.popup.setLatLng(newCorner);
-      }
-    });
-
-  }
   openZonePopup(zone)
   {
     let sumLat = 0;
@@ -323,17 +257,13 @@ class LeafletAdapter {
       opacity: 0
     })
       .addTo(this.map)
-      .bindTooltip(`
-      <div class="delivery-zone">
+      .bindPopup(`
+      <div >
         ${zone.name ? `<p><strong>${zone.name}</strong></p>` : ''}
         ${zone.shippingFee ? `<p>Shipping: ${zone.shippingFee}</p>` : ''}
         ${zone.deliverySchedule ? `<p>Delivery: ${zone.deliverySchedule}</p>` : ''}
-      </div>`,
-        {
-        permanent: true,
-        offset: [0, 0]
-        })
-      .openTooltip();
+      </div>`)
+      .openPopup();
   }
   closePopup()
   {
@@ -386,9 +316,6 @@ class MapFacade {
   updateZone(zones) {
     this.adapter.updateZone(zones);
   }
-  openAddressPopup(deliveryAddress) {
-    this.adapter.openAddressPopup(deliveryAddress);
-  }
   openZonePopup(zone) {
     this.adapter.openZonePopup(zone);
   }