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

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

CLAUDE.md

@@ -0,0 +1,99 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+`@svrnty/ngx-open-map-wrapper` is an Angular 16+ library that provides a unified map component with automatic fallback between MapLibre GL (WebGL vector maps) and Leaflet (raster maps). The library automatically detects WebGL support and chooses the optimal rendering engine.
+
+## Architecture
+
+### Adapter Pattern
+
+The library uses the **Adapter pattern** to abstract away differences between MapLibre GL and Leaflet:
+
+- **`IMapAdapter`** (map-adapter.interface.d.ts): Common interface defining map operations
+- **`LibreAdapter`** (libre-adapter.d.ts): MapLibre GL implementation
+- **`LeafletAdapter`** (leaflet-adapter.d.ts): Leaflet implementation
+- **`MapFacade`** (map-facade.d.ts): Facade that selects the appropriate adapter based on WebGL support and user preferences
+
+### Component Structure
+
+- **`OpenMapComponent`** (open-map.component.d.ts): Main Angular component that:
+  - Uses `WebglDetectionDirective` to detect WebGL support
+  - Initializes `MapFacade` with the appropriate adapter
+  - Exposes a unified API via input signals and output events
+  - Emits `mapReady` event with the `MapFacade` instance
+
+- **`WebglDetectionDirective`** (webgl-detection.directive.d.ts): Directive that detects WebGL support on the user's device and emits the result
+
+### Key Interfaces
+
+**MapOptions**:
+- `center: LatLng` - [lat, lng] tuple
+- `zoom: number`
+- `styleUrl: string` - MapLibre style URL
+- `tileUrl: string` - Tile server URL for Leaflet
+
+**Zone** (for delivery/shipping zones):
+- `id: string`
+- `name?: string`
+- `color?: string`
+- `opacity?: number`
+- `polygon: GeoPoint[]` - Array of {x, y} points
+- `shippingFee?: number`
+- `deliverySchedule?: string`
+
+**Address** (for popup display):
+- `line1, line2, postalCode, subdivision, city, country`
+- `shippingFee?: number`
+- `deliverySchedule?: string`
+
+### Core APIs
+
+Both adapters implement:
+- `init(container, options)` - Initialize map
+- `setCenter(latLng)` - Pan to location
+- `setZoom(zoom)` - Set zoom level
+- `addMarker(latLng, options?)` - Add marker with optional id/color
+- `removeMarker(id?)` - Remove specific or all markers
+- `addZone(zones)` - Add delivery zones as polygons
+- `updateZone(zones)` - Update existing zones
+- `openPopup(address)` - Show address popup
+- `closePopup()` - Hide popup
+- `on(type, event)` - Event listener
+- `destroy()` - Cleanup
+
+### Zoom Level Handling
+
+The facade includes a `leafletZoomOffset` property because MapLibre GL and Leaflet use different zoom level scales. When using Leaflet, the facade adjusts zoom levels to maintain visual consistency.
+
+## Development
+
+This is a **compiled Angular library** (not a workspace with source code). The repository contains:
+- `/lib` - TypeScript declaration files (.d.ts)
+- `/fesm2022` - Compiled ES modules
+- `package.json` - Library metadata and peer dependencies
+
+**Peer Dependencies**:
+- `@angular/common` and `@angular/core`: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+- `maplibre-gl`: ^5.0.0
+- `leaflet`: ^1.0.0 || ^2.0.0
+
+**Installation**:
+```bash
+yarn add ngx-open-open-map-wrapper leaflet maplibre-gl
+```
+
+**CSS Imports Required**:
+```css
+@import "leaflet/dist/leaflet.css";
+@import "maplibre-gl/dist/maplibre-gl.css";
+```
+
+## Recent Changes (Current Branch: feature/zone)
+
+Based on git status and recent commits:
+- Added `addZone()` and `updateZone()` methods to `IMapAdapter` interface
+- Both adapters now support zone management (delivery/shipping zones as polygons)
+- Zone objects include shipping fees and delivery schedules for e-commerce use cases

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

@@ -1,4 +1,4 @@
-import { Map, NavigationControl, Marker, GeoJSONSource } from 'maplibre-gl';
+import {Map, NavigationControl, Marker, Popup} 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';
@@ -11,6 +11,9 @@ function getLngLat(latLng) {
 
 class LibreAdapter {
   map;
+  deliveryCheckMarker;
+  popup;
+  markers = {};
   init(container, options) {
     this.map = new Map({
       container,
@@ -27,9 +30,41 @@ class LibreAdapter {
     this.map.setZoom(zoom);
   }
   addMarker(latLng, options) {
-        new Marker({ color: options?.color || 'red' })
+    const coords = getLngLat(latLng);
-            .setLngLat(getLngLat(latLng))
+    
+    if (options.id) {
+      if (this.markers[options.id]) {
+        this.markers[options.id].remove();
+      }
+      
+      const marker = new Marker({ color: options.color || 'red' })
+        .setLngLat(coords)
         .addTo(this.map);
+      this.markers[options.id] = marker;
+    } else {
+      if (this.deliveryCheckMarker) {
+        this.deliveryCheckMarker.remove();
+      }
+      this.deliveryCheckMarker = new Marker({ color: options?.color || 'red' })
+        .setLngLat(coords)
+        .addTo(this.map);
+    }
+  }
+  removeMarker(id) {
+    if (id) {
+      if (this.markers[id]) {
+        this.markers[id].remove();
+        delete this.markers[id];
+      }
+    }
+    else
+    {
+      if (this.deliveryCheckMarker)
+      {
+        this.deliveryCheckMarker.remove();
+        this.deliveryCheckMarker = undefined;
+      }
+    }
   }
   destroy() {
     this.map.remove();
@@ -50,7 +85,8 @@ class LibreAdapter {
         properties: {
           id: zone.id,
           name: zone.name,
-                    color: zone.color ? `#${zone.color}` : '#ff0000',
+          color: zone.color ? zone.color : '#ff0000',
+          opacity: zone.opacity ? zone.opacity : 0.4,
         },
         geometry: {
           type: 'Polygon',
@@ -64,29 +100,29 @@ class LibreAdapter {
       features,
     };
     
-        if (this.map.getSource("delivery-zones")) {
+    if (this.map.getSource("zones")) {
-            (this.map.getSource("delivery-zones").setData(geojson));
+      (this.map.getSource("zones").setData(geojson));
     }
     else {
-            this.map.addSource("delivery-zones", {
+      this.map.addSource("zones", {
         type: "geojson",
         data: geojson,
       });
       
       this.map.addLayer({
-                id: "delivery-zones-fill",
+        id: "zones-fill",
         type: "fill",
-                source: "delivery-zones",
+        source: "zones",
         paint: {
           "fill-color": ["get", "color"],
-                    "fill-opacity": 0.4,
+          "fill-opacity": ["get", "opacity"],
         },
       });
       
       this.map.addLayer({
-                id: "delivery-zones-outline",
+        id: "zones-outline",
         type: "line",
-                source: "delivery-zones",
+        source: "zones",
         paint: {
           "line-color": ["get", "color"],
           "line-width": 2,
@@ -94,10 +130,77 @@ 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;
+    let sumLat = 0;
+    zone.polygon.forEach(point => {
+      sumLng += point.y;
+      sumLat += point.x;
+    });
+    const centerLng = sumLng / zone.polygon.length;
+    const centerLat = sumLat / zone.polygon.length;
+
+    this.closePopup();
+    this.popup = new Popup({
+      closeButton: true,
+      closeOnClick: false,
+    })
+      .setLngLat([centerLng, centerLat])
+      .setHTML(`
+        <div class="delivery-zone">
+          ${zone.name ? `<p><strong>${zone.name}</strong></p>` : ''}
+          ${zone.shippingFee ? `<p>Shipping: ${zone.shippingFee}$</p>` : ''}
+          ${zone.deliverySchedule ? `<p>Delivery: ${zone.deliverySchedule}</p>` : ''}
+        </div>`)
+      .addTo(this.map);
+  }
+  closePopup()
+  {
+    if (this.popup) {
+      this.popup.remove();
+      this.popup = undefined;
+    }
+  }
+  on(type, event,){
+    this.map.on(type, event);
+  }
 }
 
 class LeafletAdapter {
   map;
+  deliveryCheckMarker;
+  markers = {};
+  popup;
   init(container, options) {
     this.map = new Map$1(container).setView(options.center, options.zoom);
     new TileLayer(options.tileUrl, {
@@ -112,8 +215,33 @@ class LeafletAdapter {
     this.map.setZoom(zoom);
   }
   addMarker(latLng, options) {
-        const marker = new Marker$1(latLng);
+    if (options.id) {
+      if (this.markers[options.id]) {
+        this.map.removeLayer(this.markers[options.id]);
+      }
+      const marker = new Marker$1(latLng)
         marker.addTo(this.map);
+      this.markers[options.id] = marker;
+    } else {
+      if (this.deliveryCheckMarker) {
+        this.map.removeLayer(this.deliveryCheckMarker);
+      }
+      this.deliveryCheckMarker = new Marker$1(latLng).addTo(this.map);
+    }
+  }
+  
+  removeMarker(id) {
+    if (id) {
+      if (this.markers[id]) {
+        this.map.removeLayer(this.markers[id]);
+        delete this.markers[id];
+      }
+    } else {
+      if (this.deliveryCheckMarker) {
+        this.map.removeLayer(this.deliveryCheckMarker);
+        this.deliveryCheckMarker = undefined;
+      }
+    }
   }
   destroy() {
     this.map.remove();
@@ -124,19 +252,99 @@ class LeafletAdapter {
   updateZone(zones) {
     for(let zone of zones)
     {
-            const polygon = zone.polygon.map((geoPoint) => {
+      const latlngs = zone.polygon.map((geoPoint) => {
         return new LatLng(geoPoint.x, geoPoint.y);
       });
-            let color = "red"
+      let color = "#ff0000"
+      let opacity = 0.4;
       if(zone.color)
-                color = `#${zone.color}`;
+        color = zone.color;
       
-            this.map.polygon.push(L.polygon(polygon, {
+      if (zone.opacity)
-                color
+        opacity = zone.opacity;
-            })
+      
-                .addTo(this.map));
+      const polygon = L.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;
+    let sumLng = 0;
+    zone.polygon.forEach(point => {
+      sumLat += point.x;
+      sumLng += point.y;
+    });
+    const centerLat = sumLat / zone.polygon.length;
+    const centerLng = sumLng / zone.polygon.length;
+
+    if (this.popup) {
+      this.map.removeLayer(this.popup);
+    }
+
+    this.popup = new Marker$1([centerLat, centerLng], {
+      opacity: 0
+    })
+      .addTo(this.map)
+      .bindTooltip(`
+      <div class="delivery-zone">
+        ${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();
+  }
+  closePopup()
+  {
+    if (this.popup) {
+      this.map.removeLayer(this.popup);
+      this.popup = undefined;
+    }
+  }
+  on(type, event) {
+    this.map.on(type, event);
+  }
 }
 
 class MapFacade {
@@ -166,14 +374,29 @@ class MapFacade {
   addMarker(latLng, options) {
     this.adapter.addMarker(latLng, options);
   }
+  removeMarker() {
+    this.adapter.removeMarker();
+  }
   destroy() {
     this.adapter.destroy();
   }
-    addZone(deliveryZones) {
+  addZone(zones) {
-        this.adapter.addZone(deliveryZones);
+    this.adapter.addZone(zones);
   }
-    updateZone(deliveryZones) {
+  updateZone(zones) {
-        this.adapter.updateZone(deliveryZones);
+    this.adapter.updateZone(zones);
+  }
+  openAddressPopup(deliveryAddress) {
+    this.adapter.openAddressPopup(deliveryAddress);
+  }
+  openZonePopup(zone) {
+    this.adapter.openZonePopup(zone);
+  }
+  closePopup() {
+    this.adapter.closePopup();
+  }
+  on(type, event,){
+    this.adapter.on(type, event);
   }
 }
 

lib/adapters/leaflet-adapter.d.ts

@@ -1,13 +1,19 @@
-import {DeliveryZone, IMapAdapter, LatLng, MapOptions} from './map-adapter.interface';
+import {Zone, IMapAdapter, LatLng, MapOptions, Address} from './map-adapter.interface';
 export declare class LeafletAdapter implements IMapAdapter {
   private map;
+  private deliveryCheckMarker?;
+  private markers?: {};
+  private popup?;
   init(container: HTMLElement, options: MapOptions): void;
   setCenter(latLng: LatLng): void;
   setZoom(zoom: number): void;
-    addMarker(latLng: LatLng, options?: {
+  addMarker(latLng: LatLng, options?: { id?: string; color?: string }): void;
-        color?: string;
+  removeMarker(id?: string): void;
-    }): void;
   destroy(): void;
-    addZone(zone: DeliveryZone[]): void;
+  addZone(zone: Zone[]): void;
-    updateZone(one: DeliveryZone[]): void;
+  updateZone(zone: Zone[]): void;
+  openZonePopup(zone: Zone) : void
+  openAddressPopup(address: Address): void;
+  closePopup(): void;
+  on(type: string, event: (e: any) => void): void;
 }

lib/adapters/libre-adapter.d.ts

@@ -1,13 +1,19 @@
-import {DeliveryZone, IMapAdapter, LatLng, MapOptions} from './map-adapter.interface';
+import {Address, IMapAdapter, LatLng, MapOptions, Zone} from './map-adapter.interface';
 export declare class LibreAdapter implements IMapAdapter {
   private map;
+  private deliveryCheckMarker?;
+  private markers?: {};
+  private popup?;
   init(container: HTMLElement, options: MapOptions): void;
   setCenter(latLng: LatLng): void;
   setZoom(zoom: number): void;
-    addMarker(latLng: LatLng, options?: {
+  addMarker(latLng: LatLng, options?: { id?: string; color?: string }): void;
-        color?: string;
+  removeMarker(id?: string): void;
-    }): void;
   destroy(): void;
-    addZone(zone: DeliveryZone[]): void;
+  addZone(zone: Zone[]): void;
-    updateZone(one: DeliveryZone[]): void;
+  updateZone(zone: Zone[]): void;
+  openZonePopup(zone: Zone) : void
+  openAddressPopup(address: Address): void;
+  closePopup(): void;
+  on(type: string, event: (e: any) => void): void;
 }

lib/adapters/map-adapter.interface.d.ts

@@ -1,5 +1,4 @@
-import * as maplibregl from 'maplibre-gl';
+
-import * as L from 'leaflet';
 export interface MapOptions {
   center: LatLng;
   zoom: number;
@@ -10,11 +9,24 @@ export interface GeoPoint {
   x: number;
   y: number;
 }
-export interface DeliveryZone {
+export interface Zone {
   id: string;
   name?: string;
   color?: string;
+  opacity?: number;
   polygon: GeoPoint[];
+  shippingFee?: number;
+  deliverySchedule?: string;
+}
+export interface Address {
+  line1: string;
+  line2?: string;
+  postalCode: string;
+  subdivision: string;
+  city: string;
+  country: string;
+  shippingFee?: number;
+  deliverySchedule?: string;
 }
 
 export type LatLng = [number, number];
@@ -23,10 +35,17 @@ export interface IMapAdapter {
   init(container: HTMLElement, options: MapOptions): void;
   setCenter(latLng: LatLng): void;
   setZoom(zoom: number): void;
-    addMarker(latLng: LatLng, options?: {
+  addMarker(latLng: LatLng, options?: { id?: string; color?: string }): void;
-        color?: string;
+  removeMarker(id?: string): void;
-    }): void;
   destroy(): void;
-    addZone(zone: DeliveryZone[]): void;
+  addZone(zone: Zone[]): void;
-    updateZone(one: DeliveryZone[]): void;
+  updateZone(zone: Zone[]): void;
+  openZonePopup(zone: Zone) : void
+  openAddressPopup(address: Address): void;
+  closePopup(): void;
+  on(
+    type: string,
+    event: (e: any) => void,
+  ): void;
+  
 }

lib/adapters/map-facade.d.ts

@@ -1,4 +1,4 @@
-import {IMapAdapter, MapOptions, LatLng, DeliveryZone} from './map-adapter.interface';
+import {IMapAdapter, MapOptions, LatLng, Zone, Address} from './map-adapter.interface';
 export declare class MapFacade implements IMapAdapter {
   private readonly adapter;
   private readonly leafletZoomOffset;
@@ -6,10 +6,13 @@ export declare class MapFacade implements IMapAdapter {
   init(container: HTMLElement, options: MapOptions): void;
   setCenter(latLng: LatLng): void;
   setZoom(zoom: number): void;
-    addMarker(latLng: LatLng, options?: {
+  addMarker(latLng: LatLng, options?: { id?: string; color?: string }): void;
-        color?: string;
+  removeMarker(id?: string): void;
-    }): void;
   destroy(): void;
-    addZone(zone: DeliveryZone[]): void;
+  addZone(zone: Zone[]): void;
-    updateZone(one: DeliveryZone[]): void;
+  updateZone(zone: Zone[]): void;
+  openZonePopup(zone: Zone) : void
+  openAddressPopup(address: Address): void;
+  closePopup(): void;
+  on(type: string, event: (e: any) => void): void;
 }