From 406ac0fc6db39fb70e90c391e470d5ac14da4c54 Mon Sep 17 00:00:00 2001
From: insaite <insaite@pop-os.localdomain>
Date: Fri, 13 Oct 2023 01:38:41 -0500
Subject: [PATCH] Update: add_title function parameters and template
 modification for styling

---
 ecoscope/mapping/map.py | 89 +++++++++++++++++++++++++++++++++++++++--
 1 file changed, 85 insertions(+), 4 deletions(-)

diff --git a/ecoscope/mapping/map.py b/ecoscope/mapping/map.py
index 6975d9fe..9d75b7dc 100644
--- a/ecoscope/mapping/map.py
+++ b/ecoscope/mapping/map.py
@@ -128,7 +128,17 @@ def add_north_arrow(self, position="topright", scale=1.0):
             )
         )
 
-    def add_title(self, title, font_size="32px", **kwargs):
+    def add_title(
+        self, 
+        title:str, 
+        font_size:str="32px", 
+        font_style:str="normal", 
+        font_family:typing.Union[str, list]="Helvetica", 
+        font_color:typing.Union[str, tuple]="rgba(0,0,0,1)", 
+        position:dict=None,
+        background_color:typing.Union[str, tuple]='#FFFFFF99', 
+        outline:typing.Union[str, dict]="0px solid rgba(0, 0, 0, 0)", 
+        **kwargs):
         """
         Parameters
         ----------
@@ -136,19 +146,90 @@ def add_title(self, title, font_size="32px", **kwargs):
             Text of title.
         font_size : str
             CSS font size that includes units.
+            font_style : str
+        font_family:str"Helvetica", 
+            Font family selection; Could be one or more separated by spaces.
+        font_color : str
+            Text color (css color property); supports rgb, rgba and hex string formats.
+        position : dict|None 
+            Dict object with top, left and bottom margin values for the title container position.
+            ex. {
+                    "top": "10px",
+                    "left": "25px",
+                    "right": "0px",
+                    "bottom": "0px"
+                }
+            All keys are optional in the dictionary (could be passed some of them as necesary).
+            Values could be passed as px or accepted css metric. Default None.
+        background_color : str
+            Box background color; supports rgb, rgba and hex string formats. Default '#FFFFFF99'.
+        outline : str
+            Element outline values (width style color_with_transparency).
+            Could be passed as a string with spaced separated values or a dict structure:
+            ex. {
+                    "width": "1px",
+                    "style": "solid",
+                    "color": "#FFFFFF99" # or rgb/rgba tuple (0, 0, 0, 0)
+                }
         kwargs
             Additional style kwargs. Underscores in keys will be replaced with dashes
-
         """
+        position_styles = ""
+        if isinstance(position, dict):
+            VALID_POSITION_OPTIONS = ['top', 'bottom', 'left', 'right']
+            position_styles = ' '.join([f"{k}:{v};" for k,v in position.items() if k in VALID_POSITION_OPTIONS]) 
+        else:
+            position_styles = "left: 50%;"
+        if isinstance(font_family, str):
+            font = font_family
+        elif isinstance(font_family, list):
+            font = " ".join(font_family)
+        if isinstance(font_color, tuple):
+            if font_color.__len__() == 3:
+                fc = "rgb({},{},{})".format(
+                    font_color[0],
+                    font_color[1],
+                    font_color[2])
+            elif font_color.__len__() == 4:
+                fc = "rgba({},{},{},{})".format(
+                    font_color[0],
+                    font_color[1],
+                    font_color[2],
+                    font_color[3])
+        elif isinstance(font_color, str):
+            fc = font_color if font_color.startswith("#") else f"#{font_color}"
+        if isinstance(background_color, tuple):
+            if background_color.__len__() == 3:
+                bkg = "rgb({},{},{})".format(
+                    background_color[0],
+                    background_color[1],
+                    background_color[2])
+            elif background_color.__len__() == 4:
+                bkg = "rgba({},{},{},{})".format(
+                    background_color[0],
+                    background_color[1],
+                    background_color[2],
+                    background_color[3])
+        elif isinstance(background_color, str):
+            bkg = background_color if background_color.startswith("#") else f"#{background_color}"
+        outline = outline if isinstance(outline, str) else "{} {} {}".format(
+            outline["width"], 
+            outline["style"],
+            outline["color"]
+        )  
         title_html = f"""\
-        <div style="position: absolute; left: 50%;">
+        <div style="position: absolute; {position_styles}">
             <p style="position: relative;
                     left: -50%;
                     border: 1px solid #000;
                     border-radius: 5px;
-                    background-color: #FFFFFF99;
+                    background-color: {bkg};
                     padding: 3px;
+                    outline: {outline};
                     font-size: { font_size };
+                    font-family: {font};
+                    font-style:{font_style};
+                    color: {fc};
                     { "".join([f"{k.replace('_', '-')}: {v};" for k, v in kwargs.items() ]) }
                     ">
             { title }