Merge Map block change from branch 'develop'

src/app/blocks/map-block/map-block.component.ts

@@ -1,7 +1,8 @@
 import {Component} from '@angular/core';
 import {BaseBlockComponent} from '../base-block/base-block.component';
-import {icon, latLng, marker, tileLayer} from 'leaflet';
+import {icon, latLng, marker, tileLayer, divIcon, geoJSON} from 'leaflet';
 import {get, isArray, set} from 'lodash-es';
+import * as DOMPurify from 'dompurify';
 
 @Component({
   selector: 'app-map-block',
@@ -28,23 +29,92 @@ contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA
   markerClusterData = [];
   markerClusterOptions = {};
 
+  // Country GeoJSON provider base URL
+  countryProviderBaseURL = 'https://raw.githubusercontent.com/AshKyd/geojson-regions/main/public/countries/50m/';
+  countryExtension = '.geojson';
+
+  // Country area polygon styling
+  countryStyle = {
+    color: 'gray',
+    weight: 2,
+    opacity: 0.3,
+    fillColor: 'gray',
+    fillOpacity: 0.5
+  };
+
+  // In-memory cache for country GeoJSON data
+  countryCache: { [key: string]: any } = {};
+
   onConfigUpdate(config: any) {
     this.height = get(config, 'height', 500);
     set(this.options, 'zoom', get(config, 'zoom', 8));
     const latln = get(config, 'latlng', [51.505, -0.09]);
     set(this.options, 'center', latLng(latln[0], latln[1]));
+
+    // Allow setting custom country provider base URL
+    this.countryProviderBaseURL = get(config, 'countryProviderBaseURL', this.countryProviderBaseURL);
+    // Allow setting custom country extension
+    this.countryExtension = get(config, 'countryExtension', this.countryExtension);
+
+    // Update country style from config
+    this.countryStyle = {
+      ...this.countryStyle,
+      ...get(config, 'countryStyle', {})
+    };
+  }
+
+  private fetchGeoJsonData(countryCode: string): Promise<any> {
+    if (this.countryCache[countryCode]) {
+      return Promise.resolve(this.countryCache[countryCode]);
+    } else {
+      const geoJsonFilename = `${countryCode}${this.countryExtension}`;
+      return fetch(`${this.countryProviderBaseURL}${geoJsonFilename}`)
+        .then(response => response.json())
+        .then(geojsonData => {
+          this.countryCache[countryCode] = geojsonData; // Cache the data
+          return geojsonData;
+        });
+    }
   }
 
   onData(data: any, firstChange: boolean) {
     if (isArray(data)) {
-      this.layers = data.map(({ lat, long, label }) => marker(latLng(lat, long), {
-        icon: icon({
-          iconSize: [ 25, 41 ],
-          iconAnchor: [ 13, 41 ],
-          iconUrl: '/assets/marker-icon.png',
-          shadowUrl: '/assets/marker-shadow.png'
-        })
-      }).bindPopup(label));
+      this.layers = [];
+
+      data.forEach(({ lat, long, label, customPin, country }) => {
+        let markerIcon;
+        if (customPin) {
+          const sanitizedHtml = DOMPurify.sanitize(customPin);
+          markerIcon = divIcon({
+            html: `<div style="font-size: 25px;">${sanitizedHtml}</div>`,
+            iconSize: [25, 41],
+            className: 'custom-marker' // avoid the ugly default marker class
+          });
+        } else {
+          markerIcon = icon({
+            iconSize: [25, 41],
+            iconAnchor: [13, 41],
+            iconUrl: '/assets/marker-icon.png',
+            shadowUrl: '/assets/marker-shadow.png'
+          });
+        }
+
+        if (lat && long) {
+          this.layers.push(
+            marker(latLng(lat, long), { icon: markerIcon }).bindPopup(label)
+          );
+        }
+
+        if (country) {
+          const countryCode = country.toUpperCase();
+          this.fetchGeoJsonData(countryCode).then(geojsonData => {
+            const geojsonLayer = geoJSON(geojsonData, {
+              style: this.countryStyle,
+            });
+            this.layers.push(geojsonLayer);
+          });
+        }
+      });
     }
   }
-}
+}