chore(text): allow adding custom styles to text

    - allow hiding text based on zoom level of map

Author: MrYuion

projects/demo/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 
-import { MapRangeComponent } from 'projects/library/src/lib/components/overlays/map-range/map-range.component';
 import { MapPinComponent } from 'projects/library/src/lib/components/overlays/map-pin/map-pin.component';
+import { MapRadiusComponent } from 'projects/library/src/lib/components/overlays/map-radius/map-radius.component';
 
 import * as dayjs from 'dayjs';
 
@@ -19,6 +19,11 @@ export class AppComponent {
         this.model.show = {};
         this.model.map = {};
         this.model.map.src = 'assets/australia.svg';
+        this.model.map.text = [
+            { id: 'area-10.06-status', content: 'Meeting Room\n10.06' },
+            { id: 'area-10.05-status', content: 'Meeting Room\n10.05' },
+            { id: 'scanner-2', content: 'Scanner', show_after_zoom: 2, styles: { 'color': 'red' } }
+        ];
         this.model.zoom = 1;
         this.model.center = { x: 0.25, y: 0.75 };
         this.model.count = Array(3).fill(0);
@@ -57,10 +62,9 @@ export class AppComponent {
         this.model.map.poi = [];
         if (this.model.show.radius) {
             this.model.map.poi.push({
-                id: 'Nyada',
                 coordinates: { x: 3000, y: 3000 },
-                content: MapRangeComponent,
-                data: { text: `I'm somewhere in this circle`, diameter: 10 }
+                content: MapRadiusComponent,
+                data: { text: `I'm somewhere in this circle`, diameter: 5 }
             });
         }
         if (this.model.show.pin) {
@@ -74,11 +78,11 @@ export class AppComponent {
                     text: fixed ? 'NSW is here' : `I'm currently round here`
                 }
             });
-            const focus: any = {};
+            let focus: any = null;
             if (fixed) {
-                focus.id = 'AU-NSW';
+                focus = 'area-10.05-status';
             } else {
-                focus.coordinates = { x: 5000, y: 7500 };
+                focus = { x: 0.75, y: 0.25 };
             }
             this.model.map.focus = focus;
             this.model.map.styles = {

projects/demo/src/app/app.module.ts

@@ -5,6 +5,8 @@ import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { AInteractiveMapModule } from 'projects/library/src/public-api';
 
+import 'hammerjs';
+
 @NgModule({
   declarations: [
     AppComponent

projects/library/src/lib/classes/map-render-feature.ts

@@ -13,6 +13,8 @@ export class MapRenderFeature {
     public readonly content: RenderFeature;
     /** Data to pass to the content */
     public readonly data: any;
+    /** Data to pass to the content */
+    public readonly show_after_zoom: number;
 
     /** Type of content being rendered by this feature */
     public get content_type(): 'component' | 'template' | 'html' {
@@ -28,7 +30,8 @@ export class MapRenderFeature {
         this.id = data.id || JSON.stringify(coordinates);
         this.coordinates = coordinates;
         this.content = data.content;
-        this.data = data.data;
+        this.data = data.data || data.styles;
+        this.show_after_zoom = data.show_after_zoom;
     }
 
     private processCoordinates(data: string | Point, map: RenderableMap): Point {

projects/library/src/lib/components/map-outlet/map-outlet.component.html

@@ -21,6 +21,6 @@
     >
         <div class="map" *ngIf="map" [innerHTML]="map.raw_data | safe"></div>
         <map-overlay-outlet [zoom]="local_zoom" [center]="local_center" [items]="features"></map-overlay-outlet>
-        <map-text-outlet [items]="text"></map-text-outlet>
+        <map-text-outlet [zoom]="local_zoom" [items]="text"></map-text-outlet>
     </div>
 </div>

projects/library/src/lib/components/map-text-outlet/map-text-outlet.component.html

@@ -1,14 +1,18 @@
 <ng-container *ngIf="items && items.length">
     <ng-container *ngFor="let item of items">
         <div
-            *ngIf="item.coordinates"
+            *ngIf="item.coordinates && (!item.show_after_zoom || zoom >= item.show_after_zoom)"
             class="map-text"
-            [style.top]="(item.coordinates.y * 100) + '%'"
-            [style.left]="(item.coordinates.x * 100) + '%'"
+            [style.top]="item.coordinates.y * 100 + '%'"
+            [style.left]="item.coordinates.x * 100 + '%'"
             [style.transform]="'rotate(' + rotation + 'deg)'"
-
         >
-            <div class="text">{{ item.content }}</div>
+            <div
+                class="text"
+                [ngStyle]="item.data"
+            >
+                {{ item.content }}
+            </div>
         </div>
     </ng-container>
 </ng-container>

projects/library/src/lib/components/map-text-outlet/map-text-outlet.component.scss

@@ -1,6 +1,7 @@
 
 .map-text {
     position: absolute;
+    font-size: 1rem;
 }
 
 .text {
@@ -9,7 +10,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
     color: #fff;
-    font-size: .8rem;
+    font-size: .8em;
     text-shadow: 0 0 2px #000;
     white-space: pre-line;
     min-width: 20em;

projects/library/src/lib/components/map-text-outlet/map-text-outlet.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 
-import { MapRenderFeature } from '../../classes/map-render-feature';
+import { MapTextFeature } from '../../helpers/map.interfaces';
 
 @Component({
     selector: 'map-text-outlet',
@@ -9,7 +9,9 @@ import { MapRenderFeature } from '../../classes/map-render-feature';
 })
 export class MapTextOutletComponent {
     /** List of text items to render on top of the map */
-    @Input() items: MapRenderFeature[] = [];
+    @Input() items: MapTextFeature[] = [];
+    /** Rotation of the map */
+    @Input() zoom: number = 1;
     /** Rotation of the map */
     @Input() rotation: number = 0;
 }

projects/library/src/lib/helpers/map.interfaces.ts

@@ -15,6 +15,10 @@ export interface MapFeature<T = any> {
 
 export interface MapTextFeature extends MapFeature {
     readonly content: string;
+    /** Minimum zoom level to show the text feature */
+    readonly show_after_zoom?: number;
+    /** Map of CSS properties to their values */
+    readonly styles?: { [style: string]: string };
 }
 
 export interface MapState {