fix area highlight when switching service

web/src/canvas/geo/geoCircle.ts

@@ -8,6 +8,7 @@ export class GeoCircle {
     private readonly circlesLayer: GeoCirclesLayer
     private readonly root:  Selection<SVGCircleElement, unknown, null, undefined>;
     private readonly canvas: Canvas;
+    private readonly areaColor = '#ccc';
 
     constructor(circlesLayer: GeoCirclesLayer, circleData: CircleData,
                 svgCircle:  SVGCircleElement, service: HatnoteVisService) {
@@ -44,7 +45,7 @@ export class GeoCircle {
             .attr('r', 10)
             .duration(40000)
             .on('interrupt', _ => {
-                highlightedArea.interrupt()
+                highlightedArea.interrupt();
                 popUpContainer.remove();
                 if(this.canvas.settings.debug_mode){
                     console.log('Circle removed for ' + circleData.type)
@@ -87,19 +88,19 @@ export class GeoCircle {
 
     private highlightCountry(countryId: string): Selection<BaseType, unknown, null, any> {
         let country = this.canvas.root.select(`path[data-country-id="${countryId}"]`)
-            .style('fill', '#eddc4e')
+            .style('fill', this.canvas.visDirector.current_service_theme.geo_area_highlight_color)
         country.transition()
             .duration(5000)
-            .style('fill', '#ccc');
+            .style('fill', this.canvas.visDirector.current_service_theme.geo_area_color)
         return country
     };
 
     private highlightState(stateId: string): Selection<BaseType, unknown, null, any> {
         let country = this.canvas.root.select(`path[data-state-id="${stateId}"]`)
-            .style('fill', '#eddc4e')
+            .style('fill', this.canvas.visDirector.current_service_theme.geo_area_highlight_color)
         country.transition()
             .duration(5000)
-            .style('fill', '#ccc');
+            .style('fill', this.canvas.visDirector.current_service_theme.geo_area_color)
         return country
     };
 }

web/src/canvas/geo/geoCirclesLayer.ts

@@ -24,6 +24,10 @@ export class GeoCirclesLayer{
     }
 
     private addCircle(circle: CircleData){
+        if(circle.location === undefined) {
+            return;
+        }
+
         let that = this;
 
         // make sure that circle that already exits a removed so that the animation can start from start

web/src/canvas/geo/geoVisualisation.ts

@@ -41,6 +41,18 @@ export class GeoVisualisation {
             next: (_) => this.canvas.geoPopUpContainer.attr("style", "opacity: 0;")
         })
 
+        this.canvas.onThemeHasChanged.subscribe({
+            next: (_) => {
+                if (this.canvas.visDirector.current_service_theme.id_name === HatnoteVisService.Bloxberg){
+                    this.worldMap.selectAll("#countries-mesh path").interrupt()
+                        .style('fill',this.canvas.visDirector.current_service_theme.geo_area_color)
+                } else {
+                    this.germanyMap.selectAll("#state-mesh path").interrupt()
+                        .style('fill',this.canvas.visDirector.current_service_theme.geo_area_color)
+                }
+            }
+        })
+
         this.canvas.onCarouselTransitionEnd.subscribe({
             next: (_) => this.canvas.geoPopUpContainer.attr("style", "opacity: 1;")
         })
@@ -87,19 +99,19 @@ export class GeoVisualisation {
 
         // Add a path for each country and color it according te this data.
         this.germanyMap.append("g")
-            .attr("id", "countries-mesh")
+            .attr("id", "state-mesh")
             .selectAll("path")
             .data((states as FeatureCollection).features)
             .join("path")
-            .attr("fill", d => '#ccc')
+            .attr("fill", this.canvas.visDirector.current_service_theme.geo_area_color)
             .attr("d", path)
             .attr("data-state-id", c => `${c.id}`)
             .attr("data-state-name", c => `${c.properties?.name}`)
 
         let countrymesh = mesh(germany, statesGeometry as GeometryObject, (a: GeometryObject, b: GeometryObject) => a !== b)
         // Add a white mesh.
         this.germanyMap.append("path")
-            .attr("id", "countries-border-mesh")
+            .attr("id", "state-border-mesh")
             .datum(countrymesh)
             .attr("fill", "none")
             .attr("stroke", "white")
@@ -129,7 +141,7 @@ export class GeoVisualisation {
             .selectAll("path")
             .data((countries as FeatureCollection).features)
             .join("path")
-            .attr("fill", d => '#ccc')
+            .attr("fill", this.canvas.visDirector.current_service_theme.geo_area_color)
             .attr("d", path)
             .attr("data-country-id", c => `${c.id}`)
             .attr("data-country-name", c => `${c.properties?.name}`)

web/src/theme/bloxberg.ts

@@ -14,6 +14,8 @@ export const bloxberg_service_theme: ServiceTheme = {
     header_logo: BloxbergLogo,
     carousel_time: 300000,
     header_y: 0,
+    geo_area_color: '#ccc',
+    geo_area_highlight_color: '#eddc4e',
     transition_logo: TransitionBloxbergLogo,
     qr_code: {
         image: QrCodeBloxberg,

web/src/theme/keeper.ts

@@ -14,6 +14,8 @@ export const keeper_service_theme: ServiceTheme = {
     header_logo: KeeperLogo,
     carousel_time: 300000,
     header_y: 2,
+    geo_area_color: '#ccc',
+    geo_area_highlight_color: '#eddc4e',
     transition_logo: TransitionKeeperLogo,
     qr_code: {
         image: QrCodeKeeper,

web/src/theme/minerva.ts

@@ -14,6 +14,8 @@ export const minerva_service_theme: ServiceTheme = {
     header_logo: MinervaLogo,
     carousel_time: 300000,
     header_y: 4,
+    geo_area_color: '#ccc',
+    geo_area_highlight_color: '#eddc4e',
     transition_logo: TransitionMinervaLogo,
     qr_code: {
         image: QrCodeMinerva,

web/src/theme/model.ts

@@ -25,6 +25,8 @@ export interface ServiceTheme {
     header_title: string,
     header_logo: any,
     header_y: number,
+    geo_area_color: string,
+    geo_area_highlight_color: string,
     carousel_time: number
     transition_logo: any,
     qr_code: ThemeQrCode,