Repository: ryanhausen/fitsmap (language: python)

Issue:
These are backwards
https://github.com/ryanhausen/fitsmap/blob/7c14de7ae6b8cabffbfba54e2760c5250233bcf0/README.rst?plain=1#L273-L275


Discussion / hints:

Fix patch:
diff --git a/README.rst b/README.rst
index 29e556a..7ecd8e6 100644
--- a/README.rst
+++ b/README.rst
@@ -112,6 +112,10 @@ There are two FITS files (``F125W.fits``, ``F160W.fits``), a PNG file
 image files. To render these files using FitsMap you can use
 |dir_to_map| or |files_to_map|.
 
+Note: Currently FITS image data only pulled from the 0th extension
+and all other extensions are ignored. For non-FITS images, currently JPEG and
+PNG area supported. Further all catalog files must end in the extension .cat.
+
 After the FitsMap has been generated you can view it in your web browser by
 navigating to the directory containing the map (``index.html``) and running the
 following command in the terminal:
@@ -134,7 +138,7 @@ To convert this directory into a FitsMap using |dir_to_map|:
 
     from fitsmap import convert
 
-    convert.dir_to_map.(
+    convert.dir_to_map(
         "path/to/data",
         out_dir="path/to/data/map",
         cat_wcs_fits_file="path/to/data/F125W.fits",
@@ -206,7 +210,7 @@ function |files_to_map|:
         ...,
     ]
 
-    convert.files_to_map.(
+    convert.files_to_map(
         paths_to_files,
         out_dir="path/to/data/map",
         cat_wcs_fits_file="path/to/header_file.fits",
@@ -233,7 +237,7 @@ are the ``simple_norm`` kwargs for that file. For example:
         "fits_images/F160W.fits",
     ]
 
-    convert.files_to_map.(
+    convert.files_to_map(
         paths_to_files,
         out_dir="path/to/data/map",
         cat_wcs_fits_file="path/to/header_file.fits",
@@ -252,12 +256,48 @@ share the view with others by sharing the url.
 
 
 Search
-**************
+******
 
 You can search the catalogs by the ``id`` column from the catalog and FitsMap
 will locate and pan to the source in the map.
 
 
+Image/Catalog settings
+**********************
+
+You can adjust the appearance of the image and catalog markers by using the
+settings tool visible in the top left corner. Note that the changes made using
+the settings tool **are not saved** when the webpage is refreshed.
+
+.. image:: https://raw.githubusercontent.com/ryanhausen/fitsmap/master/docs/settings-collapsed.png
+    :alt: FitsMap
+    :align: center
+    :width: 100px
+
+When the button is hovered over, the settings menu will expand to show the following
+options (Note if there is not a catalog in the FitsMap, then the catalog settings
+will not be visible):
+
+.. image:: https://raw.githubusercontent.com/ryanhausen/fitsmap/master/docs/settings-expanded.png
+    :alt: FitsMap
+    :align: center
+
+- **Image Settings**:
+
+You can edit the brightness, contrast, inversion, and hue of the image by moving
+the sliders. To reset the setting to its default value, click the label
+associated with the slider (e.g. "Brightness").
+
+- **Catalog Settings**:
+
+Use the dropdown menus to select which catalog you would like to adjust the
+settings for. You can change the outline of the markers using the "Line" menu.
+You can change the fill color of the markers using the "Fill" menu. You can
+change the number of columns that are used to display values in the pop-up
+when a markers is clicked usein the "# Cols" menu. You can change the size of
+the markers using the "Scale-Radius" slider.
+
+
 Parallelization
 **********************************
 
@@ -270,9 +310,9 @@ ways:
 
 The settings for parallelization are set using the following keyword arguments:
 
-- ``procs_per_task``: Sets how many layers/catalogs to convert in parallel at a
+- ``procs_per_task``: How many processes can work on a single task.
+- ``task_procs``: Sets how many layers/catalogs to convert in parallel at a
   time.
-- ``task_procs``: How many processes can work on a single task.
 
 You can use both keyword arguments at the same time, but keep in mind the number
 of CPUs available. For example, if ``procs_per_task=2`` and ``task_procs=2``
diff --git a/docs/settings-collapsed.png b/docs/settings-collapsed.png
new file mode 100644
index 0000000..82ae5ab
Binary files /dev/null and b/docs/settings-collapsed.png differ
diff --git a/docs/settings-expanded.png b/docs/settings-expanded.png
new file mode 100644
index 0000000..41d7dd8
Binary files /dev/null and b/docs/settings-expanded.png differ
diff --git a/fitsmap/cartographer.py b/fitsmap/cartographer.py
index eef7024..4292dae 100644
--- a/fitsmap/cartographer.py
+++ b/fitsmap/cartographer.py
@@ -29,7 +29,7 @@
 import shutil
 from itertools import count, cycle, repeat, starmap
 from functools import partial, reduce
-from typing import Dict, Iterable, List, Tuple
+from typing import Any, Dict, Iterable, List, Optional, Tuple, Union
 
 import numpy as np
 from astropy.wcs import WCS
@@ -45,8 +45,10 @@ def chart(
     img_layer_names: List[str],
     marker_layer_names: List[str],
     wcs: WCS,
-    rows_per_column: int,
+    n_cols: int,
     max_xy: Tuple[int, int],
+    pixel_scale: float,
+    units_are_pixels: bool,
 ) -> None:
     """Creates an HTML file containing a leaflet js map using the given params.
 
@@ -96,7 +98,14 @@ def chart(
 
     with open(os.path.join(out_dir, "js", "index.js"), "w") as f:
         f.write(
-            build_index_js(img_layer_dicts, cat_layer_dicts, rows_per_column, max_xy)
+            build_index_js(
+                img_layer_dicts,
+                cat_layer_dicts,
+                n_cols,
+                max_xy,
+                pixel_scale,
+                units_are_pixels,
+            )
         )
     # generated javascript =====================================================
 
@@ -119,7 +128,7 @@ def layer_name_to_dict(
     max_native_zoom: int,
     name: str,
     color: str,
-) -> dict:
+) -> Dict[str, Union[str, int, List[str]]]:
     """Convert layer name to dict for conversion."""
 
     layer_dict = dict(
@@ -130,7 +139,10 @@ def layer_name_to_dict(
         max_native_zoom=max_native_zoom,
     )
     if color:
-        layer_dict["color"] = color
+        layer_dict["stroke_color"] = color
+        layer_dict["fill_color"] = color
+        layer_dict["stroke_opacity"] = 1.0
+        layer_dict["fill_opacity"] = 0.2
 
         cat_col_path = "/".join([out_dir, f"{name}.columns"])
         with open(cat_col_path, "r") as f:
@@ -157,20 +169,20 @@ def img_layer_dict_to_str(layer: dict) -> str:
     return "".join(layer_str)
 
 
-def cat_layer_dict_to_str(layer: dict, rows_per_column: int) -> str:
+def cat_layer_dict_to_str(layer: dict, n_cols: int) -> str:
     """Convert layer dict to layer str for including in HTML file."""
 
-    rpc_str = "Infinity" if np.isinf(rows_per_column) else str(rows_per_column)
     layer_str = [
         "const " + layer["name"],
         " = L.gridLayer.tiledMarkers(",
         "{ ",
         'tileURL:"' + layer["directory"] + '", ',
         "radius: 10, ",
-        'color: "' + layer["color"] + '", ',
+        'strokeColor: "' + layer["stroke_color"] + '", ',
+        'fillColor: "' + layer["fill_color"] + '", ',
         "fillOpacity: 0.2, ",
         "strokeOpacity: 1.0, ",
-        f"rowsPerColumn: {rpc_str}, ",
+        f"nCols: {n_cols}, ",
         f'catalogColumns: [{",".join(layer["columns"])}], ',
         "minZoom: " + str(layer["min_zoom"]) + ", ",
         "maxZoom: " + str(layer["max_zoom"]) + ", ",
@@ -184,16 +196,16 @@ def cat_layer_dict_to_str(layer: dict, rows_per_column: int) -> str:
 def get_colors() -> Iterable[str]:
     return cycle(
         [
-            "#4C72B0",
-            "#DD8452",
-            "#55A868",
-            "#C44E52",
-            "#8172B3",
-            "#937860",
-            "#DA8BC3",
-            "#8C8C8C",
-            "#CCB974",
-            "#64B5CD",
+            "rgb(76, 114, 176)",
+            "rgb(221, 132, 82)",
+            "rgb(85, 168, 104)",
+            "rgb(196, 78, 82)",
+            "rgb(129, 114, 179)",
+            "rgb(147, 120, 96)",
+            "rgb(218, 139, 195)",
+            "rgb(140, 140, 140)",
+            "rgb(204, 185, 116)",
+            "rgb(100, 181, 205)",
         ]
     )
 
@@ -231,8 +243,9 @@ def loading_screen_js(tile_layers: List[dict]):
     js = "\n".join(
         [
             f'{tile_layers[0]["name"]}.on("load", () => {{',
-            '    document.getElementById("loading-screen").style.visibility = "hidden";',
+            '    document.getElementById("loading-screen").style.display = "none";',
             '    document.getElementById("map").style.visibility = "visible";',
+            "    label.update(map.getCenter());",
             "});",
         ]
     )
@@ -323,6 +336,11 @@ def build_conditional_js(out_dir: str, include_markerjs: bool) -> str:
         * include_markerjs,
         "js/customSearch.min.js" * include_markerjs,
         "js/tiledMarkers.min.js" * include_markerjs,
+        "https://cdn.jsdelivr.net/npm/toolcool-color-picker/dist/toolcool-color-picker.min.js"
+        * include_markerjs,
+        "js/fitsmapScale.min.js",
+        "js/labelControl.min.js",
+        "js/settingsControl.min.js",
         "js/urlCoords.js",
         "js/index.js",
     ]
@@ -353,14 +371,18 @@ def leaflet_layer_control_declaration(
         list(map(lambda l: '"{0}":{0}'.format(l["name"]), img_layer_dicts))
     )
 
-    cat_layer_label_pairs = ",".join(
-        list(map(lambda l: '"{0}":{0}'.format(l["name"]), cat_layer_dicts))
+    cat_layer_label_pairs = ",\n".join(
+        list(map(lambda l: '    "{0}":{0}'.format(l["name"]), cat_layer_dicts))
     )
 
     control_js = [
+        "const catalogs = {",
+        cat_layer_label_pairs,
+        "};",
+        "",
         "const layerControl = L.control.layers(",
         f"    {{{img_layer_label_pairs}}},",
-        f"    {{{cat_layer_label_pairs}}}",
+        "    catalogs",
         ").addTo(map);",
     ]
 
@@ -429,8 +451,10 @@ def build_urlCoords_js(img_wcs: WCS) -> str:
 def build_index_js(
     image_layer_dicts: List[Dict],
     marker_layer_dicts: List[str],
-    rows_per_column: int,
+    n_cols: int,
     max_xy: Tuple[int, int],
+    pixel_scale: float,
+    units_are_pixels: bool,
 ) -> str:
     js = "\n".join(
         [
@@ -441,7 +465,7 @@ def build_index_js(
             *list(
                 starmap(
                     cat_layer_dict_to_str,
-                    zip(marker_layer_dicts, repeat(rows_per_column)),
+                    zip(marker_layer_dicts, repeat(n_cols)),
                 )
             ),
             "",
@@ -450,6 +474,10 @@ def build_index_js(
             "",
             leaflet_map_js(image_layer_dicts),
             "",
+            leaflet_scale_bar_declaration(pixel_scale, units_are_pixels),
+            "",
+            leaflet_label_declaration(),
+            "",
             leaflet_layer_control_declaration(image_layer_dicts, marker_layer_dicts),
             "",
             "// Search ======================================================================",
@@ -459,11 +487,20 @@ def build_index_js(
                 else ""
             ),
             "",
+            leaflet_settings_declaration(),
+            "",
             "// Map event setup =============================================================",
             loading_screen_js(image_layer_dicts),
             "",
             'map.on("moveend", updateLocationBar);',
             'map.on("zoomend", updateLocationBar);',
+            'map.on("mousemove", (event) => {label.update(event.latlng);});',
+            'map.on("baselayerchange", (event) => {label.options.title = event.name;});',
+            "",
+            "map.whenReady(function () {",
+            "    scale.options.maxWidth = Math.round(map.getSize().x * 0.2);",
+            "    label.addTo(map);",
+            "});",
             "",
             'if (urlParam("zoom")==null) {',
             f"    map.fitBounds(L.latLngBounds([[0, 0], [{max_xy[0]}, {max_xy[1]}]]));",
@@ -490,16 +527,18 @@ def build_html(title: str, extra_js: str, extra_css: str) -> str:
         '    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.js" integrity="sha512-SeiQaaDh73yrb56sTW/RgVdi/mMqNeM2oBwubFHagc5BkixSpP1fvqF47mKzPGWYSSy4RwbBunrJBQ4Co8fRWA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>',
         extra_js,
         "    <style>",
-        "        /* Map */",
-        r"        html,body{height:100%;padding:0;margin:0;font-family:Helvetica,Arial,sans-serif}#map{width:100%;height:100%;visibility:hidden}",
-        "        /* Loading Page */",
-        r"        .overlay{background:#fff;height:100vh;width:100%;position:absolute}.brand{position:absolute;top:100px;left:50%;transform:translateX(-50%)}.brand img{width:100%;height:auto}.loadingtext{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:700;font-size:xx-large}.loading{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border-bottom:16px solid #0044aaff;border-top:16px solid #0044aaff;border-left:16px solid #80b3ffff;border-right:16px solid #80b3ffff;width:250px;height:250px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-animation:rotate 1s ease-in-out infinite;-o-animation:rotate 1s ease-in-out infinite;animation:rotate 1s ease-in-out infinite}",
-        r"        @keyframes rotate{0%{-webkit-transform:translate(-50%,-50%) rotate(0deg);-moz-transform:translate(-50%,-50%) rotate(0deg);-ms-transform:translate(-50%,-50%) rotate(0deg);-o-transform:translate(-50%,-50%) rotate(0deg);transform:translate(-50%,-50%) rotate(0deg)}100%{-webkit-transform:translate(-50%,-50%) rotate(360deg);-moz-transform:translate(-50%,-50%) rotate(360deg);-ms-transform:translate(-50%,-50%) rotate(360deg);-o-transform:translate(-50%,-50%) rotate(360deg);transform:translate(-50%,-50%) rotate(360deg)}}",
+        "    /* Map */",
+        r"    html,body{height:100%;padding:0;margin:0;font-family:Helvetica,Arial,sans-serif}#map{width:100%;height:100%;visibility:hidden}",
+        "    /* Loading Page */",
+        "    /*",
+        r'    Copyright (c) 2023 by kootoopas (https://codepen.io/kootoopas/pen/kGPoaB) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.',
+        "    */",
+        r'    @-webkit-keyframes bg-scrolling-reverse {100% {background-position: 50px 50px;}}@-moz-keyframes bg-scrolling-reverse {100% {background-position: 50px 50px;}}@-o-keyframes bg-scrolling-reverse {100% {background-position: 50px 50px;}}@keyframes bg-scrolling-reverse {100% {background-position: 50px 50px;}}@-webkit-keyframes bg-scrolling {0% {background-position: 50px 50px;}}@-moz-keyframes bg-scrolling {0% {background-position: 50px 50px;}}@-o-keyframes bg-scrolling {0% {background-position: 50px 50px;}}@keyframes bg-scrolling {0% {background-position: 50px 50px;}}#loading-screen {color: #999;font: 400 16px/1.5 exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;text-align: center;background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;-webkit-animation: bg-scrolling-reverse 0.92s infinite;-moz-animation: bg-scrolling-reverse 0.92s infinite;-o-animation: bg-scrolling-reverse 0.92s infinite;animation: bg-scrolling-reverse 0.92s infinite;-webkit-animation-timing-function: linear;-moz-animation-timing-function: linear;-o-animation-timing-function: linear;animation-timing-function: linear;width: 100%;height: 100%;}',
         "    </style>",
         "</head>",
         "<body>",
         '    <div id="loading-screen" class="overlay">',
-        '        <div class="brand"><img src="imgs/loading-logo.svg" /></div>',
+        '        <div class="brand"><img src="imgs/loading-logo.svg" style="width: 100%" alt="FitsMap logo"/></div>',
         '        <div class="loading"></div>',
         '        <div class="loadingtext">Loading...</div>',
         "    </div>",
@@ -510,3 +549,50 @@ def build_html(title: str, extra_js: str, extra_css: str) -> str:
     ]
 
     return "\n".join(html)
+
+
+def leaflet_scale_bar_declaration(
+    pixel_scale: float,
+    units_are_pixels: bool,
+) -> str:
+    js_bool = "true" if units_are_pixels else "false"
+
+    return "\n".join(
+        [
+            "// Scale Bar Control ===========================================================",
+            "// https://stackoverflow.com/a/62093918",
+            "const scale = L.control.fitsmapScale({",
+            f"    pixelScale: {pixel_scale},",
+            f"    unitsArePixels: {js_bool},",
+            "}).addTo(map);",
+        ]
+    )
+
+
+def leaflet_label_declaration() -> str:
+    js = "\n".join(
+        [
+            "// Label Control ===============================================================",
+            "const label = L.control.label({",
+            "    position: 'bottomleft',",
+            "    title: '',",
+            "    isRADec: Boolean(is_ra_dec) // from urlCoords.js",
+            "}).addTo(map);",
+        ]
+    )
+
+    return js
+
+
+def leaflet_settings_declaration() -> str:
+    js = "\n".join(
+        [
+            "// Settings Control ============================================================",
+            "const settingsControl = L.control.settings({",
+            "    position: 'topleft',",
+            "    catalogs:catalogs,",
+            "}).addTo(map);",
+        ]
+    )
+
+    return js
diff --git a/fitsmap/convert.py b/fitsmap/convert.py
index ab376bd..aee3c45 100644
--- a/fitsmap/convert.py
+++ b/fitsmap/convert.py
@@ -36,7 +36,7 @@
     repeat,
     starmap,
 )
-from typing import Any, Callable, Dict, Iterable, List, Tuple, Union
+from typing import Any, Callable, Dict, Iterable, List, Optional, Tuple, Union
 
 import cbor2
 import mapbox_vector_tile as mvt
@@ -300,18 +300,20 @@ def make_tile_pil(tile: np.ndarray) -> np.ndarray:
     Returns:
         np.ndarray: an RGBA version of the input data
     """
-
-    if len(tile.shape) == 2:
+    # black and white pngs have a single channel
+    if len(tile.shape) < 3:
         img_tile = np.dstack([tile, tile, tile, np.ones_like(tile) * 255])
+    # RGB images need an alpha channel added
     elif tile.shape[2] == 3:
         img_tile = np.concatenate(
             (tile, np.ones(list(tile.shape[:-1]) + [1], dtype=np.float32) * 255),
             axis=2,
         )
+    # RGBA images are already in the correct format
+    elif tile.shape[2] == 4:
+        img_tile = np.array(tile)
     else:
-        img_tile = np.copy(tile)
-
-    # else the image is already RGBA
+        raise ValueError("Image must be 2D or 3D with 1, 3, or 4 channels")
 
     ys, xs = np.where(np.isnan(np.atleast_3d(tile)[:, :, 0]))
     img_tile[ys, xs, :] = np.array([0, 0, 0, 0], dtype=np.float32)
@@ -994,17 +996,20 @@ def files_to_map(
     task_procs: int = 0,
     procs_per_task: int = 0,
     catalog_delim: str = ",",
-    cat_wcs_fits_file: str = None,
+    cat_wcs_fits_file: Optional[str] = None,
     max_catalog_zoom: int = -1,
     tile_size: Tuple[int, int] = [256, 256],
     norm_kwargs: dict = {},
-    rows_per_column: int = np.inf,
+    rows_per_column: Optional[int] = None,
+    n_columns: int = 1,
     prefer_xy: bool = False,
     catalog_starts_at_one: bool = True,
     img_tile_batch_size: int = 1000,
+    pixel_scale: float = 1.0,
+    units_are_pixels: bool = True,
     cluster_min_points: int = 2,
-    cluster_radius: float = None,
-    cluster_node_size: int = None,
+    cluster_radius: Optional[float] = None,
+    cluster_node_size: Optional[int] = None,
 ) -> None:
     """Converts a list of files into a LeafletJS map.
 
@@ -1037,21 +1042,23 @@ def files_to_map(
                             The default is linear scaling using min/max values.
                             See documentation for more information:
                             https://docs.astropy.org/en/stable/api/astropy.visualization.mpl_normalize.simple_norm.html
-        rows_per_column (int): If converting a catalog, the number of items in
-                               have in each column of the marker popup.
-                               By default produces all values in a single
-                               column. Setting this value can make it easier to
-                               work with catalogs that have a lot of values for
-                               each object.
+        rows_per_column (Optional[int]): (deprecated) please use `n_columns` instead
+        n_columns (int): If converting a catalog, the number of columns to use
+                      when displaying the values in the popup. The default
+                      displays everything in a single column.
         prefer_xy (bool): If True x/y coordinates should be preferred if both
                           ra/dec and x/y are present in a catalog
         catalog_starts_at_one (bool): True if the catalog is 1 indexed, False if
                                       the catalog is 0 indexed
         img_tile_batch_size (int): The number of image tiles to process in
                                    parallel when task_procs > 1
+        pixel_scale (float): The pixel scale of the image in either arcsec/pix
+                             or pixels, depending on the value of `units_are_pixels`
+        units_are_pixels (bool): If True, the pixel scale is in pixels, if False,
+                                 the pixel scale is in arcsec/pix
         cluster_min_points (int): The minimum points to form a catalog cluster
-        cluster_radius (float): The radius of each cluster in pixels.
-        cluster_node_size (int): The size for the kd-tree leaf mode, afftects performance.
+        cluster_radius (Optional[float]): The radius of each cluster in pixels.
+        cluster_node_size (Optional[int]): The size for the kd-tree leaf mode, afftects performance.
 
     Example of image specific norm_kwargs vs single norm_kwargs:
 
@@ -1067,6 +1074,11 @@ def files_to_map(
         None
     """
 
+    if rows_per_column is not None:
+        raise DeprecationWarning(
+            "rows_per_column is deprecated, use `n_columns` instead"
+        )
+
     assert len(files) > 0, "No files provided `files` is an empty list"
 
     unlocatable_files = list(filterfalse(os.path.exists, files))
@@ -1226,8 +1238,10 @@ def f(func_args):
         img_layer_names,
         cat_layer_names,
         cat_wcs,
-        rows_per_column,
+        n_columns,
         (max_x, max_y),
+        pixel_scale,
+        units_are_pixels,
     )
     print("Done.")
 
@@ -1244,17 +1258,19 @@ def dir_to_map(
     max_catalog_zoom: int = -1,
     tile_size: Shape = [256, 256],
     norm_kwargs: Union[Dict[str, Any], Dict[str, Dict[str, Any]]] = {},
-    rows_per_column: int = np.inf,
+    rows_per_column: int = None,
+    n_columns: int = 1,
     prefer_xy: bool = False,
     catalog_starts_at_one: bool = True,
     img_tile_batch_size: int = 1000,
+    pixel_scale: float = 1.0,
+    units_are_pixels: bool = True,
     cluster_min_points: int = 2,
     cluster_radius: float = None,
     cluster_node_size: int = None,
 ) -> None:
     """Converts a list of files into a LeafletJS map.
 
-
     Args:
         directory (str): Path to directory containing the files to be converted
         out_dir (str): Directory to place the genreated web page and associated
@@ -1292,21 +1308,24 @@ def dir_to_map(
                             The default is linear scaling using min/max values.
                             See documentation for more information:
                             https://docs.astropy.org/en/stable/api/astropy.visualization.mpl_normalize.simple_norm.html
-        rows_per_column (int): If converting a catalog, the number of items in
-                               have in each column of the marker popup.
-                               By default produces all values in a single
-                               column. Setting this value can make it easier to
-                               work with catalogs that have a lot of values for
-                               each object.
+        rows_per_column (Optional[int]): (deprecated) please use `n_columns` instead
+        n_columns (int): If converting a catalog, the number of columns to use
+                         when displaying the values in the popup. The default
+                         displays everything in a single column.
         prefer_xy (bool): If True x/y coordinates should be preferred if both
                           ra/dec and x/y are present in a catalog
         catalog_starts_at_one (bool): True if the catalog is 1 indexed, False if
                                       the catalog is 0 indexed
         img_tile_batch_size (int): The number of image tiles to process in
                                    parallel when task_procs > 1
+        pixel_scale (float): The pixel scale of the image in either arcsec/pix
+                             or pixels, depending on the value of `units_are_pixels`
+        units_are_pixels (bool): If True, the pixel scale is in pixels, if False,
+                                 the pixel scale is in arcsec/pix
+
         cluster_min_points (int): The minimum points to form a catalog cluster
-        cluster_radius (float): The radius of each cluster in pixels.
-        cluster_node_size (int): The size for the kd-tree leaf mode, afftects performance.
+        cluster_radius (Optional[float]): The radius of each cluster in pixels.
+        cluster_node_size (Optional[int]): The size for the kd-tree leaf mode, afftects performance.
 
     Example of image specific norm_kwargs vs single norm_kwargs:
 
@@ -1350,9 +1369,12 @@ def dir_to_map(
         tile_size=tile_size,
         norm_kwargs=norm_kwargs,
         rows_per_column=rows_per_column,
+        n_columns=n_columns,
         prefer_xy=prefer_xy,
         catalog_starts_at_one=catalog_starts_at_one,
         img_tile_batch_size=img_tile_batch_size,
+        pixel_scale=pixel_scale,
+        units_are_pixels=units_are_pixels,
         cluster_min_points=cluster_min_points,
         cluster_radius=cluster_radius,
         cluster_node_size=cluster_node_size,
diff --git a/fitsmap/support/LabelControl.css b/fitsmap/support/LabelControl.css
new file mode 100644
index 0000000..afd82d3
--- /dev/null
+++ b/fitsmap/support/LabelControl.css
@@ -0,0 +1,17 @@
+/* Label Control */
+
+.label-control p {
+    margin-bottom: 0px;
+    margin-top: 0px;
+}
+
+.label-control div {
+    padding: 2px;
+}
+
+.label-control.leaflet-control {
+    background-color: rgba(255, 255, 255, 0.5);
+    border-radius: 4px;
+    margin-left: 5px;
+    margin-bottom: 5px;
+}
\ No newline at end of file
diff --git a/fitsmap/support/LabelControl.min.css b/fitsmap/support/LabelControl.min.css
new file mode 100644
index 0000000..004f092
--- /dev/null
+++ b/fitsmap/support/LabelControl.min.css
@@ -0,0 +1,1 @@
+.label-control p{margin-bottom:0;margin-top:0}.label-control div{padding:2px}.label-control.leaflet-control{background-color:rgba(255,255,255,.5);border-radius:4px;margin-left:5px;margin-bottom:5px}
\ No newline at end of file
diff --git a/fitsmap/support/SettingsControl.css b/fitsmap/support/SettingsControl.css
new file mode 100644
index 0000000..e6997f4
--- /dev/null
+++ b/fitsmap/support/SettingsControl.css
@@ -0,0 +1,77 @@
+div.settings-control {
+    background-clip: padding-box;
+}
+
+div.settings-control.menu-button {
+    background-color: rgba(255, 255, 255, 1.0);
+    border-radius: 4px;
+    padding: 2px;
+    display: flex;
+    align-items: center;
+    border: 2px solid rgba(0,0,0,0.2);
+    width: 26px;
+    height: 26px;
+}
+
+div.settings-control.menu-control {
+    background-color: rgba(255, 255, 255, 1.0);
+    border-radius: 4px;
+    min-width: 200px;
+    border: 2px solid rgba(0,0,0,0.2);
+    padding: 6px;
+}
+
+input.settings-range {
+    float: right;
+    width: 160px;
+    height: 15px;
+}
+
+div.settings-range-badge {
+    position: absolute;
+    left: 0%;
+    background: #717171;
+    color: #fff;
+    border: 2px solid rgba(0,0,0,0.2);
+    width: 20px;
+    text-align: center;
+    visibility: hidden;
+}
+
+#settings-catalog-menu {
+    display: flex;
+    margin-top: 3px;
+    align-items: center;
+}
+
+#settings-catalog-picker{
+    width: 100%;
+}
+
+#catalog-line-color, #catalog-fill-color {
+    margin-left: 2px;
+    margin-right: 2px;
+}
+
+#settings-catalog-row-n {
+    margin-left: 2px;
+    width: 30px;
+}
+
+label.settings-range {
+    vertical-align: super;
+}
+
+p.settings {
+    margin-bottom: 0px;
+    margin-top: 2px;
+}
+
+b.settings {
+    margin-bottom: 0px;
+    margin-top: 2px;
+}
+
+div.collapsed {
+    display: none !important;
+}
\ No newline at end of file
diff --git a/fitsmap/support/SettingsControl.min.css b/fitsmap/support/SettingsControl.min.css
new file mode 100644
index 0000000..5e32a12
--- /dev/null
+++ b/fitsmap/support/SettingsControl.min.css
@@ -0,0 +1,1 @@
+div.settings-control{background-clip:padding-box}div.settings-control.menu-button{background-color:rgba(255,255,255,1);border-radius:4px;padding:2px;display:flex;align-items:center;border:2px solid rgba(0,0,0,.2);width:26px;height:26px}div.settings-control.menu-control{background-color:rgba(255,255,255,1);border-radius:4px;min-width:200px;border:2px solid rgba(0,0,0,.2);padding:6px}input.settings-range{float:right;width:160px;height:15px}div.settings-range-badge{position:absolute;left:0;background:#717171;color:#fff;border:2px solid rgba(0,0,0,.2);width:20px;text-align:center;visibility:hidden}#settings-catalog-menu{display:flex;margin-top:3px;align-items:center}#settings-catalog-picker{width:100%}#catalog-fill-color,#catalog-line-color{margin-left:2px;margin-right:2px}#settings-catalog-row-n{margin-left:2px;width:30px}label.settings-range{vertical-align:super}p.settings{margin-bottom:0;margin-top:2px}b.settings{margin-bottom:0;margin-top:2px}div.collapsed{display:none !important}
\ No newline at end of file
diff --git a/fitsmap/support/fitsmapScale.js b/fitsmap/support/fitsmapScale.js
new file mode 100644
index 0000000..e930896
--- /dev/null
+++ b/fitsmap/support/fitsmapScale.js
@@ -0,0 +1,36 @@
+// https://stackoverflow.com/a/62093918
+L.Control.FitsMapScale = L.Control.Scale.extend({
+    options: {
+        unitsArePixels: true,
+        pixelScale: 1.0,
+    },
+
+    _updateMetric: function (maxPixels) {
+        const pixels = this._getRoundNum(maxPixels);
+
+        let distance = this.options.unitsArePixels ? pixels : pixels * this.options.pixelScale;
+        distance = parseFloat(distance.toFixed(2));
+
+        let units;
+        if (this.options.unitsArePixels){
+            units = 'px';
+        } else{
+            if (distance > 60) {
+                distance = distance / 60;
+                units = "'";
+            }
+            else {
+                units = '"';
+            }
+        }
+
+        const label = distance + units;
+        this._updateScale(this._mScale, label, pixels / maxPixels);
+    }
+});
+
+L.control.fitsmapScale = function (options) {
+    const scaleOpts = {imperial:false, updateWhenIdle:true};
+    return new L.Control.FitsMapScale(L.extend(scaleOpts, options));
+}
+
diff --git a/fitsmap/support/fitsmapScale.min.js b/fitsmap/support/fitsmapScale.min.js
new file mode 100644
index 0000000..0b060f6
--- /dev/null
+++ b/fitsmap/support/fitsmapScale.min.js
@@ -0,0 +1,1 @@
+L.Control.FitsMapScale=L.Control.Scale.extend({options:{unitsArePixels:!0,pixelScale:1},_updateMetric:function(t){const e=this._getRoundNum(t);let i,n=this.options.unitsArePixels?e:e*this.options.pixelScale;n=parseFloat(n.toFixed(2)),this.options.unitsArePixels?i="px":n>60?(n/=60,i="'"):i='"';const o=n+i;this._updateScale(this._mScale,o,e/t)}}),L.control.fitsmapScale=function(t){return new L.Control.FitsMapScale(L.extend({imperial:!1,updateWhenIdle:!0},t))};
\ No newline at end of file
diff --git a/fitsmap/support/labelControl.js b/fitsmap/support/labelControl.js
new file mode 100644
index 0000000..33881bd
--- /dev/null
+++ b/fitsmap/support/labelControl.js
@@ -0,0 +1,47 @@
+// =============================================================================
+// Control that displays the label text
+L.Control.Label = L.Control.extend({
+    options : {
+        displayHTML : '',
+        isRADec: true,
+        nDecimals: 5,
+        title: '',
+        latlng: {lat: 0, lng: 0}
+    },
+
+    makeText: function (coord1, coord2) {
+        const unit1 = this.options.isRADec ? "RA" : "x";
+        const unit2 = this.options.isRADec ? "Dec" : "y";
+        let labelText = '<div class="label-control">';
+        labelText += this.options.title!="" ? `<p class="label-control">${this.options.title}</p>` : "";
+        labelText += `<p class="label-control">${unit1}: ${coord1.toFixed(this.options.nDecimals)} ${unit2}: ${coord2.toFixed(this.options.nDecimals)}</p>`
+        labelText += '</div>';
+        return labelText;
+    },
+
+
+    onAdd: function () {
+        const div = L.DomUtil.create('div', 'label-control');
+        div.innerHTML = this.makeText(0.0, 0.0);
+        this.options.displayHTML = div;
+
+        return div;
+    },
+
+    update: function (latlng) {
+        if (this.options.isRADec) {
+            raDec = pixToSky(latlng);
+            this.options.displayHTML.innerHTML = this.makeText(raDec[0], raDec[1]);
+        } else {
+            this.options.displayHTML.innerHTML = this.makeText(latlng.lat, latlng.lng);
+        }
+
+    },
+
+    onRemove: function (map) {
+    },
+});
+
+L.control.label = function (opts) {
+    return new L.Control.Label(opts);
+}
\ No newline at end of file
diff --git a/fitsmap/support/labelControl.min.js b/fitsmap/support/labelControl.min.js
new file mode 100644
index 0000000..1073dba
--- /dev/null
+++ b/fitsmap/support/labelControl.min.js
@@ -0,0 +1,1 @@
+L.Control.Label=L.Control.extend({options:{displayHTML:"",isRADec:!0,nDecimals:5,title:"",latlng:{lat:0,lng:0}},makeText:function(t,i){const o=this.options.isRADec?"RA":"x",n=this.options.isRADec?"Dec":"y";let e='<div class="label-control">';return e+=""!=this.options.title?`<p class="label-control">${this.options.title}</p>`:"",e+=`<p class="label-control">${o}: ${t.toFixed(this.options.nDecimals)} ${n}: ${i.toFixed(this.options.nDecimals)}</p>`,e+="</div>",e},onAdd:function(){const t=L.DomUtil.create("div","label-control");return t.innerHTML=this.makeText(0,0),this.options.displayHTML=t,t},update:function(t){this.options.isRADec?(raDec=pixToSky(t),this.options.displayHTML.innerHTML=this.makeText(raDec[0],raDec[1])):this.options.displayHTML.innerHTML=this.makeText(t.lat,t.lng)},onRemove:function(t){}}),L.control.label=function(t){return new L.Control.Label(t)};
\ No newline at end of file
diff --git a/fitsmap/support/settingsControl.js b/fitsmap/support/settingsControl.js
new file mode 100644
index 0000000..8d0bab0
--- /dev/null
+++ b/fitsmap/support/settingsControl.js
@@ -0,0 +1,253 @@
+// =============================================================================
+// Control for dislaying image/catalog settings
+L.Control.Settings = L.Control.extend({
+    options : {
+        displayHTML : '',
+        catalogs: undefined,
+    },
+
+    makeIcon: function () {
+        let iconDiv = '<div id="settings-control-icon" class="settings-control menu-button">'
+        iconDiv += `
+            <svg width="30px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 8.00002C9.79085 8.00002 7.99999 9.79088 7.99999 12C7.99999 14.2092 9.79085 16 12 16C14.2091 16 16 14.2092 16 12C16 9.79088 14.2091 8.00002 12 8.00002ZM9.99999 12C9.99999 10.8955 10.8954 10 12 10C13.1046 10 14 10.8955 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 9.99999 13.1046 9.99999 12Z" fill="#0F1729"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 8.00002C9.79085 8.00002 7.99999 9.79088 7.99999 12C7.99999 14.2092 9.79085 16 12 16C14.2091 16 16 14.2092 16 12C16 9.79088 14.2091 8.00002 12 8.00002ZM9.99999 12C9.99999 10.8955 10.8954 10 12 10C13.1046 10 14 10.8955 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 9.99999 13.1046 9.99999 12Z" fill="#0F1729"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7673 1.01709C10.9925 0.999829 11.2454 0.99993 11.4516 1.00001L12.5484 1.00001C12.7546 0.99993 13.0075 0.999829 13.2327 1.01709C13.4989 1.03749 13.8678 1.08936 14.2634 1.26937C14.7635 1.49689 15.1915 1.85736 15.5007 2.31147C15.7454 2.67075 15.8592 3.0255 15.9246 3.2843C15.9799 3.50334 16.0228 3.75249 16.0577 3.9557L16.1993 4.77635L16.2021 4.77788C16.2369 4.79712 16.2715 4.81659 16.306 4.8363L16.3086 4.83774L17.2455 4.49865C17.4356 4.42978 17.6693 4.34509 17.8835 4.28543C18.1371 4.2148 18.4954 4.13889 18.9216 4.17026C19.4614 4.20998 19.9803 4.39497 20.4235 4.70563C20.7734 4.95095 21.0029 5.23636 21.1546 5.4515C21.2829 5.63326 21.4103 5.84671 21.514 6.02029L22.0158 6.86003C22.1256 7.04345 22.2594 7.26713 22.3627 7.47527C22.4843 7.7203 22.6328 8.07474 22.6777 8.52067C22.7341 9.08222 22.6311 9.64831 22.3803 10.1539C22.1811 10.5554 21.9171 10.8347 21.7169 11.0212C21.5469 11.1795 21.3428 11.3417 21.1755 11.4746L20.5 12L21.1755 12.5254C21.3428 12.6584 21.5469 12.8205 21.7169 12.9789C21.9171 13.1653 22.1811 13.4446 22.3802 13.8461C22.631 14.3517 22.7341 14.9178 22.6776 15.4794C22.6328 15.9253 22.4842 16.2797 22.3626 16.5248C22.2593 16.7329 22.1255 16.9566 22.0158 17.14L21.5138 17.9799C21.4102 18.1535 21.2828 18.3668 21.1546 18.5485C21.0028 18.7637 20.7734 19.0491 20.4234 19.2944C19.9803 19.6051 19.4613 19.7901 18.9216 19.8298C18.4954 19.8612 18.1371 19.7852 17.8835 19.7146C17.6692 19.6549 17.4355 19.5703 17.2454 19.5014L16.3085 19.1623L16.306 19.1638C16.2715 19.1835 16.2369 19.2029 16.2021 19.2222L16.1993 19.2237L16.0577 20.0443C16.0228 20.2475 15.9799 20.4967 15.9246 20.7157C15.8592 20.9745 15.7454 21.3293 15.5007 21.6886C15.1915 22.1427 14.7635 22.5032 14.2634 22.7307C13.8678 22.9107 13.4989 22.9626 13.2327 22.983C13.0074 23.0002 12.7546 23.0001 12.5484 23H11.4516C11.2454 23.0001 10.9925 23.0002 10.7673 22.983C10.5011 22.9626 10.1322 22.9107 9.73655 22.7307C9.23648 22.5032 8.80849 22.1427 8.49926 21.6886C8.25461 21.3293 8.14077 20.9745 8.07542 20.7157C8.02011 20.4967 7.97723 20.2475 7.94225 20.0443L7.80068 19.2237L7.79791 19.2222C7.7631 19.2029 7.72845 19.1835 7.69396 19.1637L7.69142 19.1623L6.75458 19.5014C6.5645 19.5702 6.33078 19.6549 6.11651 19.7146C5.86288 19.7852 5.50463 19.8611 5.07841 19.8298C4.53866 19.7901 4.01971 19.6051 3.57654 19.2944C3.2266 19.0491 2.99714 18.7637 2.84539 18.5485C2.71718 18.3668 2.58974 18.1534 2.4861 17.9798L1.98418 17.14C1.87447 16.9566 1.74067 16.7329 1.63737 16.5248C1.51575 16.2797 1.36719 15.9253 1.32235 15.4794C1.26588 14.9178 1.36897 14.3517 1.61976 13.8461C1.81892 13.4446 2.08289 13.1653 2.28308 12.9789C2.45312 12.8205 2.65717 12.6584 2.82449 12.5254L3.47844 12.0054V11.9947L2.82445 11.4746C2.65712 11.3417 2.45308 11.1795 2.28304 11.0212C2.08285 10.8347 1.81888 10.5554 1.61972 10.1539C1.36893 9.64832 1.26584 9.08224 1.3223 8.52069C1.36714 8.07476 1.51571 7.72032 1.63732 7.47528C1.74062 7.26715 1.87443 7.04347 1.98414 6.86005L2.48605 6.02026C2.58969 5.84669 2.71714 5.63326 2.84534 5.45151C2.9971 5.23637 3.22655 4.95096 3.5765 4.70565C4.01966 4.39498 4.53862 4.20999 5.07837 4.17027C5.50458 4.1389 5.86284 4.21481 6.11646 4.28544C6.33072 4.34511 6.56444 4.4298 6.75451 4.49867L7.69141 4.83775L7.69394 4.8363C7.72844 4.8166 7.7631 4.79712 7.79791 4.77788L7.80068 4.77635L7.94225 3.95571C7.97723 3.7525 8.02011 3.50334 8.07542 3.2843C8.14077 3.0255 8.25461 2.67075 8.49926 2.31147C8.80849 1.85736 9.23648 1.49689 9.73655 1.26937C10.1322 1.08936 10.5011 1.03749 10.7673 1.01709ZM14.0938 4.3363C14.011 3.85634 13.9696 3.61637 13.8476 3.43717C13.7445 3.2858 13.6019 3.16564 13.4352 3.0898C13.2378 3.00002 12.9943 3.00002 12.5073 3.00002H11.4927C11.0057 3.00002 10.7621 3.00002 10.5648 3.0898C10.3981 3.16564 10.2555 3.2858 10.1524 3.43717C10.0304 3.61637 9.98895 3.85634 9.90615 4.3363L9.75012 5.24064C9.69445 5.56333 9.66662 5.72467 9.60765 5.84869C9.54975 5.97047 9.50241 6.03703 9.40636 6.13166C9.30853 6.22804 9.12753 6.3281 8.76554 6.52822C8.73884 6.54298 8.71227 6.55791 8.68582 6.57302C8.33956 6.77078 8.16643 6.86966 8.03785 6.90314C7.91158 6.93602 7.83293 6.94279 7.70289 6.93196C7.57049 6.92094 7.42216 6.86726 7.12551 6.7599L6.11194 6.39308C5.66271 6.2305 5.43809 6.14921 5.22515 6.16488C5.04524 6.17811 4.87225 6.23978 4.72453 6.34333C4.5497 6.46589 4.42715 6.67094 4.18206 7.08103L3.72269 7.84965C3.46394 8.2826 3.33456 8.49907 3.31227 8.72078C3.29345 8.90796 3.32781 9.09665 3.41141 9.26519C3.51042 9.4648 3.7078 9.62177 4.10256 9.9357L4.82745 10.5122C5.07927 10.7124 5.20518 10.8126 5.28411 10.9199C5.36944 11.036 5.40583 11.1114 5.44354 11.2504C5.47844 11.379 5.47844 11.586 5.47844 12C5.47844 12.414 5.47844 12.621 5.44354 12.7497C5.40582 12.8887 5.36944 12.9641 5.28413 13.0801C5.20518 13.1875 5.07927 13.2876 4.82743 13.4879L4.10261 14.0643C3.70785 14.3783 3.51047 14.5352 3.41145 14.7349C3.32785 14.9034 3.29349 15.0921 3.31231 15.2793C3.33461 15.501 3.46398 15.7174 3.72273 16.1504L4.1821 16.919C4.4272 17.3291 4.54974 17.5342 4.72457 17.6567C4.8723 17.7603 5.04528 17.8219 5.2252 17.8352C5.43813 17.8508 5.66275 17.7695 6.11199 17.607L7.12553 17.2402C7.42216 17.1328 7.5705 17.0791 7.7029 17.0681C7.83294 17.0573 7.91159 17.064 8.03786 17.0969C8.16644 17.1304 8.33956 17.2293 8.68582 17.427C8.71228 17.4421 8.73885 17.4571 8.76554 17.4718C9.12753 17.6719 9.30853 17.772 9.40635 17.8684C9.50241 17.963 9.54975 18.0296 9.60765 18.1514C9.66662 18.2754 9.69445 18.4367 9.75012 18.7594L9.90615 19.6637C9.98895 20.1437 10.0304 20.3837 10.1524 20.5629C10.2555 20.7142 10.3981 20.8344 10.5648 20.9102C10.7621 21 11.0057 21 11.4927 21H12.5073C12.9943 21 13.2378 21 13.4352 20.9102C13.6019 20.8344 13.7445 20.7142 13.8476 20.5629C13.9696 20.3837 14.011 20.1437 14.0938 19.6637L14.2499 18.7594C14.3055 18.4367 14.3334 18.2754 14.3923 18.1514C14.4502 18.0296 14.4976 17.963 14.5936 17.8684C14.6915 17.772 14.8725 17.6719 15.2344 17.4718C15.2611 17.4571 15.2877 17.4421 15.3141 17.427C15.6604 17.2293 15.8335 17.1304 15.9621 17.0969C16.0884 17.064 16.167 17.0573 16.2971 17.0681C16.4295 17.0791 16.5778 17.1328 16.8744 17.2402L17.888 17.607C18.3372 17.7696 18.5619 17.8509 18.7748 17.8352C18.9547 17.8219 19.1277 17.7603 19.2754 17.6567C19.4502 17.5342 19.5728 17.3291 19.8179 16.919L20.2773 16.1504C20.536 15.7175 20.6654 15.501 20.6877 15.2793C20.7065 15.0921 20.6721 14.9034 20.5885 14.7349C20.4895 14.5353 20.2921 14.3783 19.8974 14.0643L19.1726 13.4879C18.9207 13.2876 18.7948 13.1875 18.7159 13.0801C18.6306 12.9641 18.5942 12.8887 18.5564 12.7497C18.5215 12.6211 18.5215 12.414 18.5215 12C18.5215 11.586 18.5215 11.379 18.5564 11.2504C18.5942 11.1114 18.6306 11.036 18.7159 10.9199C18.7948 10.8126 18.9207 10.7124 19.1725 10.5122L19.8974 9.9357C20.2922 9.62176 20.4896 9.46479 20.5886 9.26517C20.6722 9.09664 20.7065 8.90795 20.6877 8.72076C20.6654 8.49906 20.5361 8.28259 20.2773 7.84964L19.8179 7.08102C19.5728 6.67093 19.4503 6.46588 19.2755 6.34332C19.1277 6.23977 18.9548 6.1781 18.7748 6.16486C18.5619 6.14919 18.3373 6.23048 17.888 6.39307L16.8745 6.75989C16.5778 6.86725 16.4295 6.92093 16.2971 6.93195C16.167 6.94278 16.0884 6.93601 15.9621 6.90313C15.8335 6.86965 15.6604 6.77077 15.3142 6.57302C15.2877 6.55791 15.2611 6.54298 15.2345 6.52822C14.8725 6.3281 14.6915 6.22804 14.5936 6.13166C14.4976 6.03703 14.4502 5.97047 14.3923 5.84869C14.3334 5.72467 14.3055 5.56332 14.2499 5.24064L14.0938 4.3363Z" fill="#0F1729"/>
+            </svg>
+       `;
+       iconDiv += "</div>";
+       return iconDiv;
+    },
+
+    moveBadge: function (text) {
+        const parent = document.getElementById("settings-control");
+        const range = document.getElementById(text);
+        const badge = document.getElementById(text + "-badge");
+        badge.innerHTML = range.value;
+        badge.style.visibility = "visible";
+        const offsetLeft = range.getBoundingClientRect().left - parent.getBoundingClientRect().left;
+        badge.style.left = offsetLeft - 4 + (range.value / range.max * 0.9) * range.getBoundingClientRect().width + "px";
+        const offsetTop = range.getBoundingClientRect().top - parent.getBoundingClientRect().top;
+        badge.style.top = offsetTop - 22 + "px";
+    },
+
+    hideBadge: function (text) {
+        const badge = document.getElementById(text + "-badge");
+        badge.style.visibility = "hidden";
+    },
+
+    resetRange: function(text, defaultValue){
+        const range = document.getElementById(text);
+        range.value = defaultValue;
+        range.dispatchEvent(new Event("input"));
+    },
+
+    makeRange: function (text, min, max, defaultValue, step) {
+        let rangeText = '<div>';
+        rangeText += `<label class="settings-range" for="${text}" onclick="settingsControl.resetRange('${text}', '${defaultValue}')">${text}:</label>`;
+        rangeText += `<input class="settings-range" oninput="settingsControl.updateCSS();settingsControl.moveBadge('${text}')" onfocusout="settingsControl.hideBadge('${text}')" onmouseup="settingsControl.hideBadge('${text}')" type="range" min="${min}" max="${max}" value="${defaultValue}" step="${step}" class="range" id="${text}" />`;
+        rangeText += `<div class="settings-range-badge" id="${text}-badge"></div>`
+        rangeText += '</div>';
+        return rangeText;
+
+    },
+
+    updateCSS: function(e) {
+        let css = ".leaflet-tile { filter: ";
+        css += `brightness(${document.getElementById("Brightness").value}%) `;
+        css += `contrast(${document.getElementById("Contrast").value}%) `;
+        css += `invert(${document.getElementById("Invert").value}%) `;
+        css += `hue-rotate(${document.getElementById("Hue").value}deg) `;
+        css += "};";
+        document.getElementById("img-filters").innerHTML = css;
+    },
+
+    update_catalog_line: function() {
+        const colorpicker = document.getElementById("catalog-line-color");
+        if (colorpicker !== null) {
+            const color = colorpicker.color;
+
+            const cat = this.options.catalogs[document.getElementById("settings-catalog-picker").value];
+            cat.options.strokeColor = `rgb(${color.r},${color.g},${color.b})`;
+            cat.options.strokeOpacity = color.a;
+            cat.redraw();
+        }
+    },
+
+    update_catalog_fill: function(e) {
+        const colorpicker = document.getElementById("catalog-fill-color");
+        if (colorpicker !== null) {
+            const color = colorpicker.color;
+
+            const cat = this.options.catalogs[document.getElementById("settings-catalog-picker").value];
+            cat.options.fillColor = `rgb(${color.r},${color.g},${color.b})`;
+            cat.options.fillOpacity = color.a;
+            cat.redraw();
+        }
+    },
+
+    update_catalog_colorpickers(e) {
+        if (e !== undefined) {
+            const currentCatalog = document.getElementById("settings-catalog-picker").value;
+            const catalog = this.options.catalogs[currentCatalog];
+
+            const currentStrokeColor = catalog.options.strokeColor;
+            let rgbArr = currentStrokeColor.substring(4, currentStrokeColor.length-1).replace(/ /g, '').split(',');
+            const  initStrokeColor = {
+                r: rgbArr[0],
+                g: rgbArr[1],
+                b: rgbArr[2]
+            };
+            const currentStrokeRGBA = `rgba(${initStrokeColor.r},${initStrokeColor.g},${initStrokeColor.b},${catalog.options.strokeOpacity})`;
+
+            const currentFillColor = catalog.options.fillColor;
+            rgbArr = currentFillColor.substring(4, currentFillColor.length-1).replace(/ /g, '').split(',');
+            const  initFillColor = {
+                r: rgbArr[0],
+                g: rgbArr[1],
+                b: rgbArr[2]
+            };
+            const currentFillRGBA = `rgba(${initFillColor.r},${initFillColor.g},${initFillColor.b},${catalog.options.fillOpacity})`;
+
+            document.getElementById("catalog-line-color").color=currentStrokeRGBA;
+            document.getElementById("catalog-fill-color").color=currentFillRGBA;
+        }
+    },
+
+    updateRadiusScaleSlider() {
+        const currentCatalog = document.getElementById("settings-catalog-picker").value;
+        const catalog = this.options.catalogs[currentCatalog];
+        document.getElementById("Scale-Radius").value = catalog.options.scaleRadius;
+    },
+
+    updateRadius() {
+        const cat = this.options.catalogs[document.getElementById("settings-catalog-picker").value];
+        const radius = document.getElementById("Scale-Radius").value;
+        cat.options.scaleRadius = radius;
+        cat.redraw();
+    },
+
+    updateCatalogNCols() {
+        const cat = this.options.catalogs[document.getElementById("settings-catalog-picker").value];
+        const nCols = document.getElementById("settings-catalog-col-n").value;
+        cat.options.nCols = nCols;
+    },
+
+    onAdd: function (map) {
+        const menuDiv = L.DomUtil.create('div', 'settings-control');
+
+        // This is the menu icon as an SVG
+        let iconDiv = this.makeIcon();
+
+        let menuHTML = '<div id="settings-control-menu" class="settings-control menu-control collapsed">'
+        menuHTML += '<b class="settings">Image Settings</b>';
+        menuHTML += this.makeRange("Brightness", 0, 800, 100, 1);
+        menuHTML += this.makeRange("Contrast", 0, 800, 100, 1);
+        menuHTML += this.makeRange("Invert", 0, 100, 0, 1);
+        menuHTML += this.makeRange("Hue", 0, 360, 0, 1);
+
+        if (this.options.catalogs != undefined && Object.keys(this.options.catalogs).length > 0) {
+            let catalogHTML = '<div class="leaflet-control-layers-separator"></div>';;
+            catalogHTML += '<b class="settings">Catalog Settings</b></br>';
+            catalogHTML += '<div class="settings-catalog-big">';
+            catalogHTML += '<select id="settings-catalog-picker" name="catalog_picker" id="catalog-picker" oninput="settingsControl.update_catalog_colorpickers(1);settingsControl.updateRadiusScaleSlider()">';
+            for (let catalog in this.options.catalogs){
+                catalogHTML += '<option value="' + catalog + '">' + catalog + '</option>';
+            }
+            const initCatalog = this.options.catalogs[Object.keys(this.options.catalogs)[0]];
+
+            // const initStrokeColor = this.hex_to_RGB(initCatalog.options.strokeColor);
+            let rgbArr = initCatalog.options.strokeColor.substring(4, initCatalog.options.strokeColor.length-1).replace(/ /g, '').split(',');
+            const  initStrokeColor = {
+                r: rgbArr[0],
+                g: rgbArr[1],
+                b: rgbArr[2]
+            };
+            const initStrokeRGBA = `rgba(${initStrokeColor.r},${initStrokeColor.g},${initStrokeColor.b},${initCatalog.options.strokeOpacity})`;
+
+            // const initFillColor = this.hex_to_RGB(initCatalog.options.fillColor);
+            rgbArr = initCatalog.options.fillColor.substring(4, initCatalog.options.fillColor.length-1).replace(/ /g, '').split(',');
+            const  initFillColor = {
+                r: rgbArr[0],
+                g: rgbArr[1],
+                b: rgbArr[2]
+            }
+            const initFillRGBA = `rgba(${initFillColor.r},${initFillColor.g},${initFillColor.b},${initCatalog.options.fillOpacity})`;
+
+            catalogHTML += "</select>";
+            catalogHTML += '<div id="settings-catalog-menu">';
+            catalogHTML += '<label>Line:</label>'
+            catalogHTML += `<toolcool-color-picker id="catalog-line-color" color="${initStrokeRGBA}" onblur="settingsControl.update_catalog_line()"></toolcool-color-picker>`;
+            catalogHTML += '<label>Fill:</label>'
+            catalogHTML += `<toolcool-color-picker id="catalog-fill-color" color="${initFillRGBA}" onblur="settingsControl.update_catalog_fill()"></toolcool-color-picker>`;
+            catalogHTML += '<label># Cols:</label>'
+            catalogHTML += `<input id="settings-catalog-col-n" onchange="settingsControl.updateCatalogNCols()" type="number" min="1" max="100" value="${initCatalog.options.nCols}" step="1" class="range" id="catalog_row_n" />`;
+            catalogHTML += '</div>';
+
+            // catalogHTML += '</br>';
+            catalogHTML += '<div>';
+            const text = "Scale-Radius";
+            const min = 0.1;
+            const max = 10.0;
+            const step = 0.1;
+            const defaultValue = 1.0;
+            catalogHTML += `<label class="settings-range" for="${text}">${text}:</label>`;
+            catalogHTML += `<input class="settings-range" oninput="settingsControl.moveBadge('${text}');" onchange="settingsControl.updateRadius();" onfocusout="settingsControl.hideBadge('${text}')" onmouseup="settingsControl.hideBadge('${text}')" type="range" min="${min}" max="${max}" value="${defaultValue}" step="${step}" class="range" id="${text}" />`;
+            catalogHTML += `<div class="settings-range-badge" id="${text}-badge"></div>`
+            catalogHTML += '</div>';
+
+            catalogHTML += '</div>';
+            menuHTML += catalogHTML;
+        }
+        menuHTML += "</div>";
+
+        iconDiv += menuHTML;
+        menuDiv.innerHTML = iconDiv;
+
+        menuDiv.id = "settings-control";
+
+        L.DomEvent.disableClickPropagation(menuDiv);
+
+       L.DomEvent.on(menuDiv, {
+            mouseenter: this.expand,
+            mouseleave: this.collapse
+        }, this);
+
+        return menuDiv;
+    },
+
+    onRemove: function (map) {
+    },
+
+	// @method expand(): this
+	// Expand the control container if collapsed.
+	expand() {
+        if (this.options.catalogs != undefined && this.options.catalogs.length > 0) {
+            this.update_catalog_colorpickers(this.options.catalogs);
+        }
+        document.getElementById("settings-control-menu").classList.remove("collapsed");
+        document.getElementById("settings-control-icon").classList.add("collapsed");
+	},
+
+	// @method collapse(): this
+	// Collapse the control container if expanded.
+	collapse() {
+        document.getElementById("settings-control-icon").classList.remove("collapsed");
+        document.getElementById("settings-control-menu").classList.add("collapsed");
+	},
+
+
+
+
+});
+
+L.control.settings = function (opts) {
+    const control = new L.Control.Settings(opts);
+
+    // Add the CSS for the settings control for the img css filters
+    const imgStyle = document.createElement("style");
+    imgStyle.id = "img-filters";
+    document.getElementsByTagName("head")[0].appendChild(imgStyle);
+
+    return control
+}
\ No newline at end of file
diff --git a/fitsmap/support/settingsControl.min.js b/fitsmap/support/settingsControl.min.js
new file mode 100644
index 0000000..8d9b8b7
--- /dev/null
+++ b/fitsmap/support/settingsControl.min.js
@@ -0,0 +1,1 @@
+L.Control.Settings=L.Control.extend({options:{displayHTML:"",catalogs:void 0},makeIcon:function(){let t='<div id="settings-control-icon" class="settings-control menu-button">';return t+='\n            <svg width="30px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 8.00002C9.79085 8.00002 7.99999 9.79088 7.99999 12C7.99999 14.2092 9.79085 16 12 16C14.2091 16 16 14.2092 16 12C16 9.79088 14.2091 8.00002 12 8.00002ZM9.99999 12C9.99999 10.8955 10.8954 10 12 10C13.1046 10 14 10.8955 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 9.99999 13.1046 9.99999 12Z" fill="#0F1729"/>\n            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 8.00002C9.79085 8.00002 7.99999 9.79088 7.99999 12C7.99999 14.2092 9.79085 16 12 16C14.2091 16 16 14.2092 16 12C16 9.79088 14.2091 8.00002 12 8.00002ZM9.99999 12C9.99999 10.8955 10.8954 10 12 10C13.1046 10 14 10.8955 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 9.99999 13.1046 9.99999 12Z" fill="#0F1729"/>\n            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7673 1.01709C10.9925 0.999829 11.2454 0.99993 11.4516 1.00001L12.5484 1.00001C12.7546 0.99993 13.0075 0.999829 13.2327 1.01709C13.4989 1.03749 13.8678 1.08936 14.2634 1.26937C14.7635 1.49689 15.1915 1.85736 15.5007 2.31147C15.7454 2.67075 15.8592 3.0255 15.9246 3.2843C15.9799 3.50334 16.0228 3.75249 16.0577 3.9557L16.1993 4.77635L16.2021 4.77788C16.2369 4.79712 16.2715 4.81659 16.306 4.8363L16.3086 4.83774L17.2455 4.49865C17.4356 4.42978 17.6693 4.34509 17.8835 4.28543C18.1371 4.2148 18.4954 4.13889 18.9216 4.17026C19.4614 4.20998 19.9803 4.39497 20.4235 4.70563C20.7734 4.95095 21.0029 5.23636 21.1546 5.4515C21.2829 5.63326 21.4103 5.84671 21.514 6.02029L22.0158 6.86003C22.1256 7.04345 22.2594 7.26713 22.3627 7.47527C22.4843 7.7203 22.6328 8.07474 22.6777 8.52067C22.7341 9.08222 22.6311 9.64831 22.3803 10.1539C22.1811 10.5554 21.9171 10.8347 21.7169 11.0212C21.5469 11.1795 21.3428 11.3417 21.1755 11.4746L20.5 12L21.1755 12.5254C21.3428 12.6584 21.5469 12.8205 21.7169 12.9789C21.9171 13.1653 22.1811 13.4446 22.3802 13.8461C22.631 14.3517 22.7341 14.9178 22.6776 15.4794C22.6328 15.9253 22.4842 16.2797 22.3626 16.5248C22.2593 16.7329 22.1255 16.9566 22.0158 17.14L21.5138 17.9799C21.4102 18.1535 21.2828 18.3668 21.1546 18.5485C21.0028 18.7637 20.7734 19.0491 20.4234 19.2944C19.9803 19.6051 19.4613 19.7901 18.9216 19.8298C18.4954 19.8612 18.1371 19.7852 17.8835 19.7146C17.6692 19.6549 17.4355 19.5703 17.2454 19.5014L16.3085 19.1623L16.306 19.1638C16.2715 19.1835 16.2369 19.2029 16.2021 19.2222L16.1993 19.2237L16.0577 20.0443C16.0228 20.2475 15.9799 20.4967 15.9246 20.7157C15.8592 20.9745 15.7454 21.3293 15.5007 21.6886C15.1915 22.1427 14.7635 22.5032 14.2634 22.7307C13.8678 22.9107 13.4989 22.9626 13.2327 22.983C13.0074 23.0002 12.7546 23.0001 12.5484 23H11.4516C11.2454 23.0001 10.9925 23.0002 10.7673 22.983C10.5011 22.9626 10.1322 22.9107 9.73655 22.7307C9.23648 22.5032 8.80849 22.1427 8.49926 21.6886C8.25461 21.3293 8.14077 20.9745 8.07542 20.7157C8.02011 20.4967 7.97723 20.2475 7.94225 20.0443L7.80068 19.2237L7.79791 19.2222C7.7631 19.2029 7.72845 19.1835 7.69396 19.1637L7.69142 19.1623L6.75458 19.5014C6.5645 19.5702 6.33078 19.6549 6.11651 19.7146C5.86288 19.7852 5.50463 19.8611 5.07841 19.8298C4.53866 19.7901 4.01971 19.6051 3.57654 19.2944C3.2266 19.0491 2.99714 18.7637 2.84539 18.5485C2.71718 18.3668 2.58974 18.1534 2.4861 17.9798L1.98418 17.14C1.87447 16.9566 1.74067 16.7329 1.63737 16.5248C1.51575 16.2797 1.36719 15.9253 1.32235 15.4794C1.26588 14.9178 1.36897 14.3517 1.61976 13.8461C1.81892 13.4446 2.08289 13.1653 2.28308 12.9789C2.45312 12.8205 2.65717 12.6584 2.82449 12.5254L3.47844 12.0054V11.9947L2.82445 11.4746C2.65712 11.3417 2.45308 11.1795 2.28304 11.0212C2.08285 10.8347 1.81888 10.5554 1.61972 10.1539C1.36893 9.64832 1.26584 9.08224 1.3223 8.52069C1.36714 8.07476 1.51571 7.72032 1.63732 7.47528C1.74062 7.26715 1.87443 7.04347 1.98414 6.86005L2.48605 6.02026C2.58969 5.84669 2.71714 5.63326 2.84534 5.45151C2.9971 5.23637 3.22655 4.95096 3.5765 4.70565C4.01966 4.39498 4.53862 4.20999 5.07837 4.17027C5.50458 4.1389 5.86284 4.21481 6.11646 4.28544C6.33072 4.34511 6.56444 4.4298 6.75451 4.49867L7.69141 4.83775L7.69394 4.8363C7.72844 4.8166 7.7631 4.79712 7.79791 4.77788L7.80068 4.77635L7.94225 3.95571C7.97723 3.7525 8.02011 3.50334 8.07542 3.2843C8.14077 3.0255 8.25461 2.67075 8.49926 2.31147C8.80849 1.85736 9.23648 1.49689 9.73655 1.26937C10.1322 1.08936 10.5011 1.03749 10.7673 1.01709ZM14.0938 4.3363C14.011 3.85634 13.9696 3.61637 13.8476 3.43717C13.7445 3.2858 13.6019 3.16564 13.4352 3.0898C13.2378 3.00002 12.9943 3.00002 12.5073 3.00002H11.4927C11.0057 3.00002 10.7621 3.00002 10.5648 3.0898C10.3981 3.16564 10.2555 3.2858 10.1524 3.43717C10.0304 3.61637 9.98895 3.85634 9.90615 4.3363L9.75012 5.24064C9.69445 5.56333 9.66662 5.72467 9.60765 5.84869C9.54975 5.97047 9.50241 6.03703 9.40636 6.13166C9.30853 6.22804 9.12753 6.3281 8.76554 6.52822C8.73884 6.54298 8.71227 6.55791 8.68582 6.57302C8.33956 6.77078 8.16643 6.86966 8.03785 6.90314C7.91158 6.93602 7.83293 6.94279 7.70289 6.93196C7.57049 6.92094 7.42216 6.86726 7.12551 6.7599L6.11194 6.39308C5.66271 6.2305 5.43809 6.14921 5.22515 6.16488C5.04524 6.17811 4.87225 6.23978 4.72453 6.34333C4.5497 6.46589 4.42715 6.67094 4.18206 7.08103L3.72269 7.84965C3.46394 8.2826 3.33456 8.49907 3.31227 8.72078C3.29345 8.90796 3.32781 9.09665 3.41141 9.26519C3.51042 9.4648 3.7078 9.62177 4.10256 9.9357L4.82745 10.5122C5.07927 10.7124 5.20518 10.8126 5.28411 10.9199C5.36944 11.036 5.40583 11.1114 5.44354 11.2504C5.47844 11.379 5.47844 11.586 5.47844 12C5.47844 12.414 5.47844 12.621 5.44354 12.7497C5.40582 12.8887 5.36944 12.9641 5.28413 13.0801C5.20518 13.1875 5.07927 13.2876 4.82743 13.4879L4.10261 14.0643C3.70785 14.3783 3.51047 14.5352 3.41145 14.7349C3.32785 14.9034 3.29349 15.0921 3.31231 15.2793C3.33461 15.501 3.46398 15.7174 3.72273 16.1504L4.1821 16.919C4.4272 17.3291 4.54974 17.5342 4.72457 17.6567C4.8723 17.7603 5.04528 17.8219 5.2252 17.8352C5.43813 17.8508 5.66275 17.7695 6.11199 17.607L7.12553 17.2402C7.42216 17.1328 7.5705 17.0791 7.7029 17.0681C7.83294 17.0573 7.91159 17.064 8.03786 17.0969C8.16644 17.1304 8.33956 17.2293 8.68582 17.427C8.71228 17.4421 8.73885 17.4571 8.76554 17.4718C9.12753 17.6719 9.30853 17.772 9.40635 17.8684C9.50241 17.963 9.54975 18.0296 9.60765 18.1514C9.66662 18.2754 9.69445 18.4367 9.75012 18.7594L9.90615 19.6637C9.98895 20.1437 10.0304 20.3837 10.1524 20.5629C10.2555 20.7142 10.3981 20.8344 10.5648 20.9102C10.7621 21 11.0057 21 11.4927 21H12.5073C12.9943 21 13.2378 21 13.4352 20.9102C13.6019 20.8344 13.7445 20.7142 13.8476 20.5629C13.9696 20.3837 14.011 20.1437 14.0938 19.6637L14.2499 18.7594C14.3055 18.4367 14.3334 18.2754 14.3923 18.1514C14.4502 18.0296 14.4976 17.963 14.5936 17.8684C14.6915 17.772 14.8725 17.6719 15.2344 17.4718C15.2611 17.4571 15.2877 17.4421 15.3141 17.427C15.6604 17.2293 15.8335 17.1304 15.9621 17.0969C16.0884 17.064 16.167 17.0573 16.2971 17.0681C16.4295 17.0791 16.5778 17.1328 16.8744 17.2402L17.888 17.607C18.3372 17.7696 18.5619 17.8509 18.7748 17.8352C18.9547 17.8219 19.1277 17.7603 19.2754 17.6567C19.4502 17.5342 19.5728 17.3291 19.8179 16.919L20.2773 16.1504C20.536 15.7175 20.6654 15.501 20.6877 15.2793C20.7065 15.0921 20.6721 14.9034 20.5885 14.7349C20.4895 14.5353 20.2921 14.3783 19.8974 14.0643L19.1726 13.4879C18.9207 13.2876 18.7948 13.1875 18.7159 13.0801C18.6306 12.9641 18.5942 12.8887 18.5564 12.7497C18.5215 12.6211 18.5215 12.414 18.5215 12C18.5215 11.586 18.5215 11.379 18.5564 11.2504C18.5942 11.1114 18.6306 11.036 18.7159 10.9199C18.7948 10.8126 18.9207 10.7124 19.1725 10.5122L19.8974 9.9357C20.2922 9.62176 20.4896 9.46479 20.5886 9.26517C20.6722 9.09664 20.7065 8.90795 20.6877 8.72076C20.6654 8.49906 20.5361 8.28259 20.2773 7.84964L19.8179 7.08102C19.5728 6.67093 19.4503 6.46588 19.2755 6.34332C19.1277 6.23977 18.9548 6.1781 18.7748 6.16486C18.5619 6.14919 18.3373 6.23048 17.888 6.39307L16.8745 6.75989C16.5778 6.86725 16.4295 6.92093 16.2971 6.93195C16.167 6.94278 16.0884 6.93601 15.9621 6.90313C15.8335 6.86965 15.6604 6.77077 15.3142 6.57302C15.2877 6.55791 15.2611 6.54298 15.2345 6.52822C14.8725 6.3281 14.6915 6.22804 14.5936 6.13166C14.4976 6.03703 14.4502 5.97047 14.3923 5.84869C14.3334 5.72467 14.3055 5.56332 14.2499 5.24064L14.0938 4.3363Z" fill="#0F1729"/>\n            </svg>\n       ',t+="</div>",'<div id="settings-control-icon" class="settings-control menu-button">\n            <svg width="30px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 8.00002C9.79085 8.00002 7.99999 9.79088 7.99999 12C7.99999 14.2092 9.79085 16 12 16C14.2091 16 16 14.2092 16 12C16 9.79088 14.2091 8.00002 12 8.00002ZM9.99999 12C9.99999 10.8955 10.8954 10 12 10C13.1046 10 14 10.8955 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 9.99999 13.1046 9.99999 12Z" fill="#0F1729"/>\n            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 8.00002C9.79085 8.00002 7.99999 9.79088 7.99999 12C7.99999 14.2092 9.79085 16 12 16C14.2091 16 16 14.2092 16 12C16 9.79088 14.2091 8.00002 12 8.00002ZM9.99999 12C9.99999 10.8955 10.8954 10 12 10C13.1046 10 14 10.8955 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 9.99999 13.1046 9.99999 12Z" fill="#0F1729"/>\n            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7673 1.01709C10.9925 0.999829 11.2454 0.99993 11.4516 1.00001L12.5484 1.00001C12.7546 0.99993 13.0075 0.999829 13.2327 1.01709C13.4989 1.03749 13.8678 1.08936 14.2634 1.26937C14.7635 1.49689 15.1915 1.85736 15.5007 2.31147C15.7454 2.67075 15.8592 3.0255 15.9246 3.2843C15.9799 3.50334 16.0228 3.75249 16.0577 3.9557L16.1993 4.77635L16.2021 4.77788C16.2369 4.79712 16.2715 4.81659 16.306 4.8363L16.3086 4.83774L17.2455 4.49865C17.4356 4.42978 17.6693 4.34509 17.8835 4.28543C18.1371 4.2148 18.4954 4.13889 18.9216 4.17026C19.4614 4.20998 19.9803 4.39497 20.4235 4.70563C20.7734 4.95095 21.0029 5.23636 21.1546 5.4515C21.2829 5.63326 21.4103 5.84671 21.514 6.02029L22.0158 6.86003C22.1256 7.04345 22.2594 7.26713 22.3627 7.47527C22.4843 7.7203 22.6328 8.07474 22.6777 8.52067C22.7341 9.08222 22.6311 9.64831 22.3803 10.1539C22.1811 10.5554 21.9171 10.8347 21.7169 11.0212C21.5469 11.1795 21.3428 11.3417 21.1755 11.4746L20.5 12L21.1755 12.5254C21.3428 12.6584 21.5469 12.8205 21.7169 12.9789C21.9171 13.1653 22.1811 13.4446 22.3802 13.8461C22.631 14.3517 22.7341 14.9178 22.6776 15.4794C22.6328 15.9253 22.4842 16.2797 22.3626 16.5248C22.2593 16.7329 22.1255 16.9566 22.0158 17.14L21.5138 17.9799C21.4102 18.1535 21.2828 18.3668 21.1546 18.5485C21.0028 18.7637 20.7734 19.0491 20.4234 19.2944C19.9803 19.6051 19.4613 19.7901 18.9216 19.8298C18.4954 19.8612 18.1371 19.7852 17.8835 19.7146C17.6692 19.6549 17.4355 19.5703 17.2454 19.5014L16.3085 19.1623L16.306 19.1638C16.2715 19.1835 16.2369 19.2029 16.2021 19.2222L16.1993 19.2237L16.0577 20.0443C16.0228 20.2475 15.9799 20.4967 15.9246 20.7157C15.8592 20.9745 15.7454 21.3293 15.5007 21.6886C15.1915 22.1427 14.7635 22.5032 14.2634 22.7307C13.8678 22.9107 13.4989 22.9626 13.2327 22.983C13.0074 23.0002 12.7546 23.0001 12.5484 23H11.4516C11.2454 23.0001 10.9925 23.0002 10.7673 22.983C10.5011 22.9626 10.1322 22.9107 9.73655 22.7307C9.23648 22.5032 8.80849 22.1427 8.49926 21.6886C8.25461 21.3293 8.14077 20.9745 8.07542 20.7157C8.02011 20.4967 7.97723 20.2475 7.94225 20.0443L7.80068 19.2237L7.79791 19.2222C7.7631 19.2029 7.72845 19.1835 7.69396 19.1637L7.69142 19.1623L6.75458 19.5014C6.5645 19.5702 6.33078 19.6549 6.11651 19.7146C5.86288 19.7852 5.50463 19.8611 5.07841 19.8298C4.53866 19.7901 4.01971 19.6051 3.57654 19.2944C3.2266 19.0491 2.99714 18.7637 2.84539 18.5485C2.71718 18.3668 2.58974 18.1534 2.4861 17.9798L1.98418 17.14C1.87447 16.9566 1.74067 16.7329 1.63737 16.5248C1.51575 16.2797 1.36719 15.9253 1.32235 15.4794C1.26588 14.9178 1.36897 14.3517 1.61976 13.8461C1.81892 13.4446 2.08289 13.1653 2.28308 12.9789C2.45312 12.8205 2.65717 12.6584 2.82449 12.5254L3.47844 12.0054V11.9947L2.82445 11.4746C2.65712 11.3417 2.45308 11.1795 2.28304 11.0212C2.08285 10.8347 1.81888 10.5554 1.61972 10.1539C1.36893 9.64832 1.26584 9.08224 1.3223 8.52069C1.36714 8.07476 1.51571 7.72032 1.63732 7.47528C1.74062 7.26715 1.87443 7.04347 1.98414 6.86005L2.48605 6.02026C2.58969 5.84669 2.71714 5.63326 2.84534 5.45151C2.9971 5.23637 3.22655 4.95096 3.5765 4.70565C4.01966 4.39498 4.53862 4.20999 5.07837 4.17027C5.50458 4.1389 5.86284 4.21481 6.11646 4.28544C6.33072 4.34511 6.56444 4.4298 6.75451 4.49867L7.69141 4.83775L7.69394 4.8363C7.72844 4.8166 7.7631 4.79712 7.79791 4.77788L7.80068 4.77635L7.94225 3.95571C7.97723 3.7525 8.02011 3.50334 8.07542 3.2843C8.14077 3.0255 8.25461 2.67075 8.49926 2.31147C8.80849 1.85736 9.23648 1.49689 9.73655 1.26937C10.1322 1.08936 10.5011 1.03749 10.7673 1.01709ZM14.0938 4.3363C14.011 3.85634 13.9696 3.61637 13.8476 3.43717C13.7445 3.2858 13.6019 3.16564 13.4352 3.0898C13.2378 3.00002 12.9943 3.00002 12.5073 3.00002H11.4927C11.0057 3.00002 10.7621 3.00002 10.5648 3.0898C10.3981 3.16564 10.2555 3.2858 10.1524 3.43717C10.0304 3.61637 9.98895 3.85634 9.90615 4.3363L9.75012 5.24064C9.69445 5.56333 9.66662 5.72467 9.60765 5.84869C9.54975 5.97047 9.50241 6.03703 9.40636 6.13166C9.30853 6.22804 9.12753 6.3281 8.76554 6.52822C8.73884 6.54298 8.71227 6.55791 8.68582 6.57302C8.33956 6.77078 8.16643 6.86966 8.03785 6.90314C7.91158 6.93602 7.83293 6.94279 7.70289 6.93196C7.57049 6.92094 7.42216 6.86726 7.12551 6.7599L6.11194 6.39308C5.66271 6.2305 5.43809 6.14921 5.22515 6.16488C5.04524 6.17811 4.87225 6.23978 4.72453 6.34333C4.5497 6.46589 4.42715 6.67094 4.18206 7.08103L3.72269 7.84965C3.46394 8.2826 3.33456 8.49907 3.31227 8.72078C3.29345 8.90796 3.32781 9.09665 3.41141 9.26519C3.51042 9.4648 3.7078 9.62177 4.10256 9.9357L4.82745 10.5122C5.07927 10.7124 5.20518 10.8126 5.28411 10.9199C5.36944 11.036 5.40583 11.1114 5.44354 11.2504C5.47844 11.379 5.47844 11.586 5.47844 12C5.47844 12.414 5.47844 12.621 5.44354 12.7497C5.40582 12.8887 5.36944 12.9641 5.28413 13.0801C5.20518 13.1875 5.07927 13.2876 4.82743 13.4879L4.10261 14.0643C3.70785 14.3783 3.51047 14.5352 3.41145 14.7349C3.32785 14.9034 3.29349 15.0921 3.31231 15.2793C3.33461 15.501 3.46398 15.7174 3.72273 16.1504L4.1821 16.919C4.4272 17.3291 4.54974 17.5342 4.72457 17.6567C4.8723 17.7603 5.04528 17.8219 5.2252 17.8352C5.43813 17.8508 5.66275 17.7695 6.11199 17.607L7.12553 17.2402C7.42216 17.1328 7.5705 17.0791 7.7029 17.0681C7.83294 17.0573 7.91159 17.064 8.03786 17.0969C8.16644 17.1304 8.33956 17.2293 8.68582 17.427C8.71228 17.4421 8.73885 17.4571 8.76554 17.4718C9.12753 17.6719 9.30853 17.772 9.40635 17.8684C9.50241 17.963 9.54975 18.0296 9.60765 18.1514C9.66662 18.2754 9.69445 18.4367 9.75012 18.7594L9.90615 19.6637C9.98895 20.1437 10.0304 20.3837 10.1524 20.5629C10.2555 20.7142 10.3981 20.8344 10.5648 20.9102C10.7621 21 11.0057 21 11.4927 21H12.5073C12.9943 21 13.2378 21 13.4352 20.9102C13.6019 20.8344 13.7445 20.7142 13.8476 20.5629C13.9696 20.3837 14.011 20.1437 14.0938 19.6637L14.2499 18.7594C14.3055 18.4367 14.3334 18.2754 14.3923 18.1514C14.4502 18.0296 14.4976 17.963 14.5936 17.8684C14.6915 17.772 14.8725 17.6719 15.2344 17.4718C15.2611 17.4571 15.2877 17.4421 15.3141 17.427C15.6604 17.2293 15.8335 17.1304 15.9621 17.0969C16.0884 17.064 16.167 17.0573 16.2971 17.0681C16.4295 17.0791 16.5778 17.1328 16.8744 17.2402L17.888 17.607C18.3372 17.7696 18.5619 17.8509 18.7748 17.8352C18.9547 17.8219 19.1277 17.7603 19.2754 17.6567C19.4502 17.5342 19.5728 17.3291 19.8179 16.919L20.2773 16.1504C20.536 15.7175 20.6654 15.501 20.6877 15.2793C20.7065 15.0921 20.6721 14.9034 20.5885 14.7349C20.4895 14.5353 20.2921 14.3783 19.8974 14.0643L19.1726 13.4879C18.9207 13.2876 18.7948 13.1875 18.7159 13.0801C18.6306 12.9641 18.5942 12.8887 18.5564 12.7497C18.5215 12.6211 18.5215 12.414 18.5215 12C18.5215 11.586 18.5215 11.379 18.5564 11.2504C18.5942 11.1114 18.6306 11.036 18.7159 10.9199C18.7948 10.8126 18.9207 10.7124 19.1725 10.5122L19.8974 9.9357C20.2922 9.62176 20.4896 9.46479 20.5886 9.26517C20.6722 9.09664 20.7065 8.90795 20.6877 8.72076C20.6654 8.49906 20.5361 8.28259 20.2773 7.84964L19.8179 7.08102C19.5728 6.67093 19.4503 6.46588 19.2755 6.34332C19.1277 6.23977 18.9548 6.1781 18.7748 6.16486C18.5619 6.14919 18.3373 6.23048 17.888 6.39307L16.8745 6.75989C16.5778 6.86725 16.4295 6.92093 16.2971 6.93195C16.167 6.94278 16.0884 6.93601 15.9621 6.90313C15.8335 6.86965 15.6604 6.77077 15.3142 6.57302C15.2877 6.55791 15.2611 6.54298 15.2345 6.52822C14.8725 6.3281 14.6915 6.22804 14.5936 6.13166C14.4976 6.03703 14.4502 5.97047 14.3923 5.84869C14.3334 5.72467 14.3055 5.56332 14.2499 5.24064L14.0938 4.3363Z" fill="#0F1729"/>\n            </svg>\n       </div>'},moveBadge:function(t){const e=document.getElementById("settings-control"),o=document.getElementById(t),n=document.getElementById(t+"-badge");n.innerHTML=o.value,n.style.visibility="visible";const l=o.getBoundingClientRect().left-e.getBoundingClientRect().left;n.style.left=l-4+o.value/o.max*.9*o.getBoundingClientRect().width+"px";const C=o.getBoundingClientRect().top-e.getBoundingClientRect().top;n.style.top=C-22+"px"},hideBadge:function(t){document.getElementById(t+"-badge").style.visibility="hidden"},resetRange:function(t,e){const o=document.getElementById(t);o.value=e,o.dispatchEvent(new Event("input"))},makeRange:function(t,e,o,n,l){let C="<div>";return C+=`<label class="settings-range" for="${t}" onclick="settingsControl.resetRange('${t}', '${n}')">${t}:</label>`,C+=`<input class="settings-range" oninput="settingsControl.updateCSS();settingsControl.moveBadge('${t}')" onfocusout="settingsControl.hideBadge('${t}')" onmouseup="settingsControl.hideBadge('${t}')" type="range" min="${e}" max="${o}" value="${n}" step="${l}" class="range" id="${t}" />`,C+=`<div class="settings-range-badge" id="${t}-badge"></div>`,C+="</div>",C},updateCSS:function(t){let e=".leaflet-tile { filter: ";e+=`brightness(${document.getElementById("Brightness").value}%) `,e+=`contrast(${document.getElementById("Contrast").value}%) `,e+=`invert(${document.getElementById("Invert").value}%) `,e+=`hue-rotate(${document.getElementById("Hue").value}deg) `,e+="};",document.getElementById("img-filters").innerHTML=e},update_catalog_line:function(){const t=document.getElementById("catalog-line-color");if(null!==t){const e=t.color,o=this.options.catalogs[document.getElementById("settings-catalog-picker").value];o.options.strokeColor=`rgb(${e.r},${e.g},${e.b})`,o.options.strokeOpacity=e.a,o.redraw()}},update_catalog_fill:function(t){const e=document.getElementById("catalog-fill-color");if(null!==e){const t=e.color,o=this.options.catalogs[document.getElementById("settings-catalog-picker").value];o.options.fillColor=`rgb(${t.r},${t.g},${t.b})`,o.options.fillOpacity=t.a,o.redraw()}},update_catalog_colorpickers(t){if(void 0!==t){const t=document.getElementById("settings-catalog-picker").value,e=this.options.catalogs[t],o=e.options.strokeColor;let n=o.substring(4,o.length-1).replace(/ /g,"").split(",");const l={r:n[0],g:n[1],b:n[2]},C=`rgba(${l.r},${l.g},${l.b},${e.options.strokeOpacity})`,s=e.options.fillColor;n=s.substring(4,s.length-1).replace(/ /g,"").split(",");const i={r:n[0],g:n[1],b:n[2]},a=`rgba(${i.r},${i.g},${i.b},${e.options.fillOpacity})`;document.getElementById("catalog-line-color").color=C,document.getElementById("catalog-fill-color").color=a}},updateRadiusScaleSlider(){const t=document.getElementById("settings-catalog-picker").value,e=this.options.catalogs[t];document.getElementById("Scale-Radius").value=e.options.scaleRadius},updateRadius(){const t=this.options.catalogs[document.getElementById("settings-catalog-picker").value],e=document.getElementById("Scale-Radius").value;t.options.scaleRadius=e,t.redraw()},updateCatalogNCols(){const t=this.options.catalogs[document.getElementById("settings-catalog-picker").value],e=document.getElementById("settings-catalog-col-n").value;t.options.nCols=e},onAdd:function(t){const e=L.DomUtil.create("div","settings-control");let o=this.makeIcon(),n='<div id="settings-control-menu" class="settings-control menu-control collapsed">';if(n+='<b class="settings">Image Settings</b>',n+=this.makeRange("Brightness",0,800,100,1),n+=this.makeRange("Contrast",0,800,100,1),n+=this.makeRange("Invert",0,100,0,1),n+=this.makeRange("Hue",0,360,0,1),null!=this.options.catalogs&&Object.keys(this.options.catalogs).length>0){let t='<div class="leaflet-control-layers-separator"></div>';t+='<b class="settings">Catalog Settings</b></br>',t+='<div class="settings-catalog-big">',t+='<select id="settings-catalog-picker" name="catalog_picker" id="catalog-picker" oninput="settingsControl.update_catalog_colorpickers(1);settingsControl.updateRadiusScaleSlider()">';for(let e in this.options.catalogs)t+='<option value="'+e+'">'+e+"</option>";const e=this.options.catalogs[Object.keys(this.options.catalogs)[0]];let o=e.options.strokeColor.substring(4,e.options.strokeColor.length-1).replace(/ /g,"").split(",");const l={r:o[0],g:o[1],b:o[2]},C=`rgba(${l.r},${l.g},${l.b},${e.options.strokeOpacity})`;o=e.options.fillColor.substring(4,e.options.fillColor.length-1).replace(/ /g,"").split(",");const s={r:o[0],g:o[1],b:o[2]};t+="</select>",t+='<div id="settings-catalog-menu">',t+="<label>Line:</label>",t+=`<toolcool-color-picker id="catalog-line-color" color="${C}" onblur="settingsControl.update_catalog_line()"></toolcool-color-picker>`,t+="<label>Fill:</label>",t+=`<toolcool-color-picker id="catalog-fill-color" color="${`rgba(${s.r},${s.g},${s.b},${e.options.fillOpacity})`}" onblur="settingsControl.update_catalog_fill()"></toolcool-color-picker>`,t+="<label># Cols:</label>",t+=`<input id="settings-catalog-col-n" onchange="settingsControl.updateCatalogNCols()" type="number" min="1" max="100" value="${e.options.nCols}" step="1" class="range" id="catalog_row_n" />`,t+="</div>",t+="<div>";const i="Scale-Radius";t+=`<label class="settings-range" for="${i}">${i}:</label>`,t+=`<input class="settings-range" oninput="settingsControl.moveBadge('${i}');" onchange="settingsControl.updateRadius();" onfocusout="settingsControl.hideBadge('${i}')" onmouseup="settingsControl.hideBadge('${i}')" type="range" min="${.1}" max="${10}" value="${1}" step="${.1}" class="range" id="${i}" />`,t+=`<div class="settings-range-badge" id="${i}-badge"></div>`,t+="</div>",t+="</div>",n+=t}return n+="</div>",o+=n,e.innerHTML=o,e.id="settings-control",L.DomEvent.disableClickPropagation(e),L.DomEvent.on(e,{mouseenter:this.expand,mouseleave:this.collapse},this),e},onRemove:function(t){},expand(){null!=this.options.catalogs&&this.options.catalogs.length>0&&this.update_catalog_colorpickers(this.options.catalogs),document.getElementById("settings-control-menu").classList.remove("collapsed"),document.getElementById("settings-control-icon").classList.add("collapsed")},collapse(){document.getElementById("settings-control-icon").classList.remove("collapsed"),document.getElementById("settings-control-menu").classList.add("collapsed")}}),L.control.settings=function(t){const e=new L.Control.Settings(t),o=document.createElement("style");return o.id="img-filters",document.getElementsByTagName("head")[0].appendChild(o),e};
\ No newline at end of file
diff --git a/fitsmap/support/tiledMarkers.js b/fitsmap/support/tiledMarkers.js
index 1efee02..0b52d6c 100644
--- a/fitsmap/support/tiledMarkers.js
+++ b/fitsmap/support/tiledMarkers.js
@@ -4,11 +4,13 @@ L.GridLayer.TiledMarkers = L.GridLayer.extend({
 
     options: {
         tileURL: "",
-        color: "#4C72B0",
+        strokeColor: "#4C72B0",
+        fillColor: "#4C72B0",
         fillOpacity: 0.2,
         strokeOpacity: 1.0,
+        scaleRadius: 1.0,
         radius: 10,
-        rowsPerCol: Infinity,
+        nCols: 1,
         catalogColumns: [],
     },
 
@@ -25,10 +27,11 @@ L.GridLayer.TiledMarkers = L.GridLayer.extend({
         const rowsPerCol = this.options.rowsPerColumn;
         const values = json["v"];
 
-        let nCols = Math.floor(nItems / (Number.isFinite(rowsPerCol) ? rowsPerCol : nItems));
-        if (Number.isFinite(rowsPerCol) && nItems % rowsPerCol > 0) {
-            nCols += 1;
-        }
+        // let nCols = Math.floor(nItems / (Number.isFinite(rowsPerCol) ? rowsPerCol : nItems));
+        let nCols = this.options.nCols <= 0 ? 1 : this.options.nCols;
+        // if (Number.isFinite(rowsPerCol) && nItems % rowsPerCol > 0) {
+        //     nCols += 1;
+        // }
 
         let html = "<span>Catalog Information</span>" +
                     "<table class='catalog-table'>";
@@ -93,18 +96,21 @@ L.GridLayer.TiledMarkers = L.GridLayer.extend({
                      .setLatLng(latlng)
                      .setContent((layer) => this.renderPopupContents(this, layer));
 
-            console.log(src);
             if (src.a==-1){
                 return L.circleMarker(latlng, {
-                    color: this.options.color,
+                    color: this.options.strokeColor,
+                    fillColor: this.options.fillColor,
                     assetPath: `catalog_assets/${src.cat_path}/${src.catalog_id}.cbor`,
                     opacity: this.options.strokeOpacity,
                     fillOpacity: this.options.fillOpacity,
-                    radius: this.options.radius,
+                    radius: this.options.radius * this.options.scaleRadius,
                 }).bindPopup(p);
             } else {
-                return L.ellipse(latlng, [src.a, src.b], src.theta, {
-                    color: this.options.color,
+                return L.ellipse(latlng, [src.a * this.options.scaleRadius, src.b * this.options.scaleRadius], src.theta, {
+                    color: this.options.strokeColor,
+                    fillColor: this.options.fillColor,
+                    opacity: this.options.strokeOpacity,
+                    fillOpacity: this.options.fillOpacity,
                     assetPath: `catalog_assets/${src.cat_path}/${src.catalog_id}.cbor`
                 }).bindPopup(p);
             }
@@ -145,7 +151,7 @@ L.GridLayer.TiledMarkers = L.GridLayer.extend({
     },
 
 
-    createTile: function (coords, done) {
+    createTile: function (coords) {
         const offset_y = 2**coords.z - coords.y - 1
         const offset_x = 2**coords.z - coords.x - 1
         const resourceURL = this.options.tileURL
diff --git a/fitsmap/support/tiledMarkers.min.js b/fitsmap/support/tiledMarkers.min.js
index 7d46a76..c4d7ffc 100644
--- a/fitsmap/support/tiledMarkers.min.js
+++ b/fitsmap/support/tiledMarkers.min.js
@@ -1,1 +1,1 @@
-"use strict";L.GridLayer.TiledMarkers=L.GridLayer.extend({options:{tileURL:"",color:"#4C72B0",fillOpacity:.2,strokeOpacity:1,radius:10,rowsPerCol:1/0,catalogColumns:[]},initialize:function(t){L.setOptions(this,t),this.tilePointCache={}},convertJSONtoHTMLTable:function(t){const e=this.options.catalogColumns.length,o=this.options.rowsPerColumn,a=t.v;let n=Math.floor(e/(Number.isFinite(o)?o:e));Number.isFinite(o)&&e%o>0&&(n+=1);let i="<span>Catalog Information</span><table class='catalog-table'>",s=0;i+="<tr>";for(let t=0;t<e;t++){i+=`<td><b>${this.options.catalogColumns[t]}:<b></td><td>${a[t]}</td>`,s+=1,s==n&&(s=0,i+="</tr>")}return i+="</table>",i},renderPopupContents:function(t,e){const o=e.getPopup();return fetch(e.options.assetPath).then((t=>{if(!t.ok)throw console.log(t),new Error("Failed to fetch JSON",t);return t.arrayBuffer()})).then((t=>cbor.decodeAll(t))).then((e=>{o.setContent(t.convertJSONtoHTMLTable(e[0])).update()})).catch((t=>{console.log("ERROR in Popup Rendering",t)})),document.querySelector(".leaflet-popup-pane").addEventListener("load",(function(t){const e=t.target.tagName,o=map._popup;"IMG"===e&&o&&!o._updated&&(o._updated=!0,o.update())}),!0),"Loading..."},createClusterIcon:function(t){const e=L.latLng(t.global_y,t.global_x);if(!t.cluster){const o=L.popup({maxWidth:"auto"}).setLatLng(e).setContent((t=>this.renderPopupContents(this,t)));return console.log(t),-1==t.a?L.circleMarker(e,{color:this.options.color,assetPath:`catalog_assets/${t.cat_path}/${t.catalog_id}.cbor`,opacity:this.options.strokeOpacity,fillOpacity:this.options.fillOpacity,radius:this.options.radius}).bindPopup(o):L.ellipse(e,[t.a,t.b],t.theta,{color:this.options.color,assetPath:`catalog_assets/${t.cat_path}/${t.catalog_id}.cbor`}).bindPopup(o)}const o=t.point_count,a=o<100?"small":o<1e3?"medium":o<1e6?"large":"x-large",n=L.divIcon({html:`<div><span>${t.point_count_abbreviated}</span></div>`,className:`marker-cluster marker-cluster-${a}`,iconSize:L.point(40,40)});return L.marker(e,{icon:n}).bindPopup(`${t.global_y}, ${t.global_x}`)},parseTileResponse:function(t,e){200==e.status&&e.arrayBuffer().then((e=>{this.tilePointCache[t]||(this.tilePointCache[t]=[]);const o=new Pbf(e),a=new VectorTile(o).layers.Points;for(let e=0;e<a.length;e++){let o=a.feature(e);this.tilePointCache[t].push(this.createClusterIcon(o.properties).addTo(map))}})).catch((t=>console.log(t)))},createTile:function(t,e){const o=2**t.z-t.y-1,a=(t.z,t.x,this.options.tileURL.replace("{z}",`${t.z}`).replace("{y}",`${o}`).replace("{x}",`${t.x}`)),n=`${t.z},${t.y},${t.x}`;return fetch(a).then((t=>this.parseTileResponse(n,t))).catch((t=>{console.log(t)})),L.DomUtil.create("canvas","leaflet-tile")},clearItems:function(t){const e=`${t.coords.z},${t.coords.y},${t.coords.x}`;if(this.tilePointCache[e])for(;this.tilePointCache[e].length;){let t=this.tilePointCache[e].pop().remove();t=null}}}),L.gridLayer.tiledMarkers=function(t){const e=new L.GridLayer.TiledMarkers(t);return e.on("tileunload",e.clearItems),e};
\ No newline at end of file
+L.GridLayer.TiledMarkers=L.GridLayer.extend({options:{tileURL:"",strokeColor:"#4C72B0",fillColor:"#4C72B0",fillOpacity:.2,strokeOpacity:1,scaleRadius:1,radius:10,nCols:1,catalogColumns:[]},initialize:function(t){L.setOptions(this,t),this.tilePointCache={}},convertJSONtoHTMLTable:function(t){const o=this.options.catalogColumns.length,e=(this.options.rowsPerColumn,t.v);let i=this.options.nCols<=0?1:this.options.nCols,s="<span>Catalog Information</span><table class='catalog-table'>",a=0;s+="<tr>";for(let t=0;t<o;t++){s+=`<td><b>${this.options.catalogColumns[t]}:<b></td><td>${e[t]}</td>`,a+=1,a==i&&(a=0,s+="</tr>")}return s+="</table>",s},renderPopupContents:function(t,o){const e=o.getPopup();return fetch(o.options.assetPath).then((t=>{if(!t.ok)throw console.log(t),new Error("Failed to fetch JSON",t);return t.arrayBuffer()})).then((t=>cbor.decodeAll(t))).then((o=>{e.setContent(t.convertJSONtoHTMLTable(o[0])).update()})).catch((t=>{console.log("ERROR in Popup Rendering",t)})),document.querySelector(".leaflet-popup-pane").addEventListener("load",(function(t){const o=t.target.tagName,e=map._popup;"IMG"===o&&e&&!e._updated&&(e._updated=!0,e.update())}),!0),"Loading..."},createClusterIcon:function(t){const o=L.latLng(t.global_y,t.global_x);if(!t.cluster){const e=L.popup({maxWidth:"auto"}).setLatLng(o).setContent((t=>this.renderPopupContents(this,t)));return-1==t.a?L.circleMarker(o,{color:this.options.strokeColor,fillColor:this.options.fillColor,assetPath:`catalog_assets/${t.cat_path}/${t.catalog_id}.cbor`,opacity:this.options.strokeOpacity,fillOpacity:this.options.fillOpacity,radius:this.options.radius*this.options.scaleRadius}).bindPopup(e):L.ellipse(o,[t.a*this.options.scaleRadius,t.b*this.options.scaleRadius],t.theta,{color:this.options.strokeColor,fillColor:this.options.fillColor,opacity:this.options.strokeOpacity,fillOpacity:this.options.fillOpacity,assetPath:`catalog_assets/${t.cat_path}/${t.catalog_id}.cbor`}).bindPopup(e)}const e=t.point_count,i=e<100?"small":e<1e3?"medium":e<1e6?"large":"x-large",s=L.divIcon({html:`<div><span>${t.point_count_abbreviated}</span></div>`,className:`marker-cluster marker-cluster-${i}`,iconSize:L.point(40,40)});return L.marker(o,{icon:s}).bindPopup(`${t.global_y}, ${t.global_x}`)},parseTileResponse:function(t,o){200==o.status&&o.arrayBuffer().then((o=>{this.tilePointCache[t]||(this.tilePointCache[t]=[]);const e=new Pbf(o),i=new VectorTile(e).layers.Points;for(let o=0;o<i.length;o++){let e=i.feature(o);this.tilePointCache[t].push(this.createClusterIcon(e.properties).addTo(map))}})).catch((t=>console.log(t)))},createTile:function(t){const o=2**t.z-t.y-1,e=(t.z,t.x,this.options.tileURL.replace("{z}",`${t.z}`).replace("{y}",`${o}`).replace("{x}",`${t.x}`)),i=`${t.z},${t.y},${t.x}`;return fetch(e).then((t=>this.parseTileResponse(i,t))).catch((t=>{console.log(t)})),L.DomUtil.create("canvas","leaflet-tile")},clearItems:function(t){const o=`${t.coords.z},${t.coords.y},${t.coords.x}`;if(this.tilePointCache[o])for(;this.tilePointCache[o].length;){let t=this.tilePointCache[o].pop().remove();t=null}}}),L.gridLayer.tiledMarkers=function(t){const o=new L.GridLayer.TiledMarkers(t);return o.on("tileunload",o.clearItems),o};
\ No newline at end of file
diff --git a/fitsmap/support/urlCoords.js.tmp b/fitsmap/support/urlCoords.js.tmp
index bb2baca..af590a4 100644
--- a/fitsmap/support/urlCoords.js.tmp
+++ b/fitsmap/support/urlCoords.js.tmp
@@ -64,8 +64,8 @@ panToSky = function(rd, zoom, map){
 
 panFromUrl = function(map){
     // Pan map based on ra/dec/[zoom] variables in location bar
-    var ra = urlParam('ra');
-    var dec = urlParam('dec');
+    var ra = urlParam(is_ra_dec ? 'ra' : 'x');
+    var dec = urlParam(is_ra_dec ? 'dec' : 'y');
     var zoom = urlParam('zoom') || map.getMinZoom();
     if ((ra !== null) & (dec !== null)) {
         panToSky([ra,dec], zoom, map);
@@ -78,8 +78,8 @@ panFromUrl = function(map){
 updateLocationBar = function(){
     var rd = pixToSky(map.getCenter());
     //console.log(rd);
-    var params = 'ra=' + rd[0].toFixed(7);
-    params += '&dec=' + rd[1].toFixed(7);
+    var params = `${is_ra_dec ? "ra" : "x"}=` + rd[0].toFixed(7);
+    params += `&${is_ra_dec ? "dec" : "y"}=` + rd[1].toFixed(7);
     params += '&zoom=' + map.getZoom();
     //console.log(params);
     var param_url = window.location.href.split('?')[0] + '?' + params;
diff --git a/fitsmap/support/vector-tile.js b/fitsmap/support/vector-tile.js
index f02a2f9..844c0a0 100644
--- a/fitsmap/support/vector-tile.js
+++ b/fitsmap/support/vector-tile.js
@@ -62,12 +62,6 @@ VectorTileLayer.prototype.feature = function(i) {
     return new VectorTileFeature(this._pbf, end, this.extent, this._keys, this._values);
 };
 
-//'use strict';
-
-//var Point = require('@mapbox/point-geometry');
-
-// module.exports = VectorTileFeature;
-
 function VectorTileFeature(pbf, end, extent, keys, values) {
     // Public
     this.properties = {};


Test patch:
diff --git a/fitsmap/tests/data/expected_test_web.tar.xz b/fitsmap/tests/data/expected_test_web.tar.xz
index a45a7be..d968631 100644
Binary files a/fitsmap/tests/data/expected_test_web.tar.xz and b/fitsmap/tests/data/expected_test_web.tar.xz differ
diff --git a/fitsmap/tests/data/expected_test_web_ellipse.tar.xz b/fitsmap/tests/data/expected_test_web_ellipse.tar.xz
index 178b1fb..a25c5a0 100644
Binary files a/fitsmap/tests/data/expected_test_web_ellipse.tar.xz and b/fitsmap/tests/data/expected_test_web_ellipse.tar.xz differ
diff --git a/fitsmap/tests/data/expected_test_web_no_marker.tar.xz b/fitsmap/tests/data/expected_test_web_no_marker.tar.xz
index 8fb10ec..75c5525 100644
Binary files a/fitsmap/tests/data/expected_test_web_no_marker.tar.xz and b/fitsmap/tests/data/expected_test_web_no_marker.tar.xz differ
diff --git a/fitsmap/tests/data/test_index.html b/fitsmap/tests/data/test_index.html
index 4dfd075..598ae7e 100644
--- a/fitsmap/tests/data/test_index.html
+++ b/fitsmap/tests/data/test_index.html
@@ -7,14 +7,20 @@
     <link rel="shortcut icon" type="image/x-icon" href="imgs/favicon.ico" />
     <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css" integrity="sha512-1xoFisiGdy9nvho8EgXuXvnpR5GAMSjFwp40gSRE3NwdUdIMIKuPa7bqoUhLD0O/5tPNhteAsE5XyyMi5reQVA==" crossorigin="anonymous" referrerpolicy="no-referrer" as="style" onload="this.rel='stylesheet'"/>
     <link rel='preload' href='https://unpkg.com/leaflet-search@2.9.8/dist/leaflet-search.src.css'  as='style' onload='this.rel="stylesheet"'/>
+    <link rel='preload' href='css/LabelControl.min.css'  as='style' onload='this.rel="stylesheet"'/>
     <link rel='preload' href='css/MarkerCluster.Default.min.css'  as='style' onload='this.rel="stylesheet"'/>
     <link rel='preload' href='css/MarkerCluster.min.css'  as='style' onload='this.rel="stylesheet"'/>
     <link rel='preload' href='css/MarkerPopup.min.css'  as='style' onload='this.rel="stylesheet"'/>
+    <link rel='preload' href='css/SettingsControl.min.css'  as='style' onload='this.rel="stylesheet"'/>
     <link rel='preload' href='css/TileNearestNeighbor.min.css'  as='style' onload='this.rel="stylesheet"'/>
     <script defer src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.js" integrity="sha512-SeiQaaDh73yrb56sTW/RgVdi/mMqNeM2oBwubFHagc5BkixSpP1fvqF47mKzPGWYSSy4RwbBunrJBQ4Co8fRWA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script defer src='https://cdnjs.cloudflare.com/ajax/libs/leaflet-search/3.0.2/leaflet-search.src.min.js'></script>
     <script defer src='js/customSearch.min.js'></script>
     <script defer src='js/tiledMarkers.min.js'></script>
+    <script defer src='https://cdn.jsdelivr.net/npm/toolcool-color-picker/dist/toolcool-color-picker.min.js'></script>
+    <script defer src='js/fitsmapScale.min.js'></script>
+    <script defer src='js/labelControl.min.js'></script>
+    <script defer src='js/settingsControl.min.js'></script>
     <script defer src='js/urlCoords.js'></script>
     <script defer src='js/index.js'></script>
     <script defer src='https://unpkg.com/cbor-web@8.1.0/dist/cbor.js'></script>
@@ -22,16 +28,18 @@
     <script defer src='js/l.ellipse.min.js'></script>
     <script defer src='js/vector-tile.min.js'></script>
     <style>
-        /* Map */
-        html,body{height:100%;padding:0;margin:0;font-family:Helvetica,Arial,sans-serif}#map{width:100%;height:100%;visibility:hidden}
-        /* Loading Page */
-        .overlay{background:#fff;height:100vh;width:100%;position:absolute}.brand{position:absolute;top:100px;left:50%;transform:translateX(-50%)}.brand img{width:100%;height:auto}.loadingtext{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:700;font-size:xx-large}.loading{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border-bottom:16px solid #0044aaff;border-top:16px solid #0044aaff;border-left:16px solid #80b3ffff;border-right:16px solid #80b3ffff;width:250px;height:250px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-animation:rotate 1s ease-in-out infinite;-o-animation:rotate 1s ease-in-out infinite;animation:rotate 1s ease-in-out infinite}
-        @keyframes rotate{0%{-webkit-transform:translate(-50%,-50%) rotate(0deg);-moz-transform:translate(-50%,-50%) rotate(0deg);-ms-transform:translate(-50%,-50%) rotate(0deg);-o-transform:translate(-50%,-50%) rotate(0deg);transform:translate(-50%,-50%) rotate(0deg)}100%{-webkit-transform:translate(-50%,-50%) rotate(360deg);-moz-transform:translate(-50%,-50%) rotate(360deg);-ms-transform:translate(-50%,-50%) rotate(360deg);-o-transform:translate(-50%,-50%) rotate(360deg);transform:translate(-50%,-50%) rotate(360deg)}}
+    /* Map */
+    html,body{height:100%;padding:0;margin:0;font-family:Helvetica,Arial,sans-serif}#map{width:100%;height:100%;visibility:hidden}
+    /* Loading Page */
+    /*
+    Copyright (c) 2023 by kootoopas (https://codepen.io/kootoopas/pen/kGPoaB) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+    */
+    @-webkit-keyframes bg-scrolling-reverse {100% {background-position: 50px 50px;}}@-moz-keyframes bg-scrolling-reverse {100% {background-position: 50px 50px;}}@-o-keyframes bg-scrolling-reverse {100% {background-position: 50px 50px;}}@keyframes bg-scrolling-reverse {100% {background-position: 50px 50px;}}@-webkit-keyframes bg-scrolling {0% {background-position: 50px 50px;}}@-moz-keyframes bg-scrolling {0% {background-position: 50px 50px;}}@-o-keyframes bg-scrolling {0% {background-position: 50px 50px;}}@keyframes bg-scrolling {0% {background-position: 50px 50px;}}#loading-screen {color: #999;font: 400 16px/1.5 exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;text-align: center;background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;-webkit-animation: bg-scrolling-reverse 0.92s infinite;-moz-animation: bg-scrolling-reverse 0.92s infinite;-o-animation: bg-scrolling-reverse 0.92s infinite;animation: bg-scrolling-reverse 0.92s infinite;-webkit-animation-timing-function: linear;-moz-animation-timing-function: linear;-o-animation-timing-function: linear;animation-timing-function: linear;width: 100%;height: 100%;}
     </style>
 </head>
 <body>
     <div id="loading-screen" class="overlay">
-        <div class="brand"><img src="imgs/loading-logo.svg" /></div>
+        <div class="brand"><img src="imgs/loading-logo.svg" style="width: 100%" alt="FitsMap logo"/></div>
         <div class="loading"></div>
         <div class="loadingtext">Loading...</div>
     </div>
diff --git a/fitsmap/tests/data/test_index_wcs.html b/fitsmap/tests/data/test_index_wcs.html
index 4dfd075..598ae7e 100644
--- a/fitsmap/tests/data/test_index_wcs.html
+++ b/fitsmap/tests/data/test_index_wcs.html
@@ -7,14 +7,20 @@
     <link rel="shortcut icon" type="image/x-icon" href="imgs/favicon.ico" />
     <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css" integrity="sha512-1xoFisiGdy9nvho8EgXuXvnpR5GAMSjFwp40gSRE3NwdUdIMIKuPa7bqoUhLD0O/5tPNhteAsE5XyyMi5reQVA==" crossorigin="anonymous" referrerpolicy="no-referrer" as="style" onload="this.rel='stylesheet'"/>
     <link rel='preload' href='https://unpkg.com/leaflet-search@2.9.8/dist/leaflet-search.src.css'  as='style' onload='this.rel="stylesheet"'/>
+    <link rel='preload' href='css/LabelControl.min.css'  as='style' onload='this.rel="stylesheet"'/>
     <link rel='preload' href='css/MarkerCluster.Default.min.css'  as='style' onload='this.rel="stylesheet"'/>
     <link rel='preload' href='css/MarkerCluster.min.css'  as='style' onload='this.rel="stylesheet"'/>
     <link rel='preload' href='css/MarkerPopup.min.css'  as='style' onload='this.rel="stylesheet"'/>
+    <link rel='preload' href='css/SettingsControl.min.css'  as='style' onload='this.rel="stylesheet"'/>
     <link rel='preload' href='css/TileNearestNeighbor.min.css'  as='style' onload='this.rel="stylesheet"'/>
     <script defer src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.js" integrity="sha512-SeiQaaDh73yrb56sTW/RgVdi/mMqNeM2oBwubFHagc5BkixSpP1fvqF47mKzPGWYSSy4RwbBunrJBQ4Co8fRWA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script defer src='https://cdnjs.cloudflare.com/ajax/libs/leaflet-search/3.0.2/leaflet-search.src.min.js'></script>
     <script defer src='js/customSearch.min.js'></script>
     <script defer src='js/tiledMarkers.min.js'></script>
+    <script defer src='https://cdn.jsdelivr.net/npm/toolcool-color-picker/dist/toolcool-color-picker.min.js'></script>
+    <script defer src='js/fitsmapScale.min.js'></script>
+    <script defer src='js/labelControl.min.js'></script>
+    <script defer src='js/settingsControl.min.js'></script>
     <script defer src='js/urlCoords.js'></script>
     <script defer src='js/index.js'></script>
     <script defer src='https://unpkg.com/cbor-web@8.1.0/dist/cbor.js'></script>
@@ -22,16 +28,18 @@
     <script defer src='js/l.ellipse.min.js'></script>
     <script defer src='js/vector-tile.min.js'></script>
     <style>
-        /* Map */
-        html,body{height:100%;padding:0;margin:0;font-family:Helvetica,Arial,sans-serif}#map{width:100%;height:100%;visibility:hidden}
-        /* Loading Page */
-        .overlay{background:#fff;height:100vh;width:100%;position:absolute}.brand{position:absolute;top:100px;left:50%;transform:translateX(-50%)}.brand img{width:100%;height:auto}.loadingtext{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:700;font-size:xx-large}.loading{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border-bottom:16px solid #0044aaff;border-top:16px solid #0044aaff;border-left:16px solid #80b3ffff;border-right:16px solid #80b3ffff;width:250px;height:250px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-animation:rotate 1s ease-in-out infinite;-o-animation:rotate 1s ease-in-out infinite;animation:rotate 1s ease-in-out infinite}
-        @keyframes rotate{0%{-webkit-transform:translate(-50%,-50%) rotate(0deg);-moz-transform:translate(-50%,-50%) rotate(0deg);-ms-transform:translate(-50%,-50%) rotate(0deg);-o-transform:translate(-50%,-50%) rotate(0deg);transform:translate(-50%,-50%) rotate(0deg)}100%{-webkit-transform:translate(-50%,-50%) rotate(360deg);-moz-transform:translate(-50%,-50%) rotate(360deg);-ms-transform:translate(-50%,-50%) rotate(360deg);-o-transform:translate(-50%,-50%) rotate(360deg);transform:translate(-50%,-50%) rotate(360deg)}}
+    /* Map */
+    html,body{height:100%;padding:0;margin:0;font-family:Helvetica,Arial,sans-serif}#map{width:100%;height:100%;visibility:hidden}
+    /* Loading Page */
+    /*
+    Copyright (c) 2023 by kootoopas (https://codepen.io/kootoopas/pen/kGPoaB) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+    */
+    @-webkit-keyframes bg-scrolling-reverse {100% {background-position: 50px 50px;}}@-moz-keyframes bg-scrolling-reverse {100% {background-position: 50px 50px;}}@-o-keyframes bg-scrolling-reverse {100% {background-position: 50px 50px;}}@keyframes bg-scrolling-reverse {100% {background-position: 50px 50px;}}@-webkit-keyframes bg-scrolling {0% {background-position: 50px 50px;}}@-moz-keyframes bg-scrolling {0% {background-position: 50px 50px;}}@-o-keyframes bg-scrolling {0% {background-position: 50px 50px;}}@keyframes bg-scrolling {0% {background-position: 50px 50px;}}#loading-screen {color: #999;font: 400 16px/1.5 exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;text-align: center;background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;-webkit-animation: bg-scrolling-reverse 0.92s infinite;-moz-animation: bg-scrolling-reverse 0.92s infinite;-o-animation: bg-scrolling-reverse 0.92s infinite;animation: bg-scrolling-reverse 0.92s infinite;-webkit-animation-timing-function: linear;-moz-animation-timing-function: linear;-o-animation-timing-function: linear;animation-timing-function: linear;width: 100%;height: 100%;}
     </style>
 </head>
 <body>
     <div id="loading-screen" class="overlay">
-        <div class="brand"><img src="imgs/loading-logo.svg" /></div>
+        <div class="brand"><img src="imgs/loading-logo.svg" style="width: 100%" alt="FitsMap logo"/></div>
         <div class="loading"></div>
         <div class="loadingtext">Loading...</div>
     </div>
diff --git a/fitsmap/tests/test_cartographer.py b/fitsmap/tests/test_cartographer.py
index e1fc271..621617b 100644
--- a/fitsmap/tests/test_cartographer.py
+++ b/fitsmap/tests/test_cartographer.py
@@ -81,7 +81,10 @@ def test_layer_name_to_dict_catalog():
         min_zoom=min_zoom,
         max_zoom=max_native_zoom + 5,
         max_native_zoom=max_native_zoom,
-        color=color,
+        stroke_color=color,
+        fill_color=color,
+        stroke_opacity=1.0,
+        fill_opacity=0.2,
         columns=[f'"{c}"' for c in columns.split(",")],
     )
 
@@ -135,6 +138,7 @@ def test_cat_layer_dict_to_str():
     min_zoom = 0
     max_zoom = 2
     name = "test"
+    color = "red"
     columns = "a,b,c"
 
     layer_dict = dict(
@@ -143,11 +147,12 @@ def test_cat_layer_dict_to_str():
         min_zoom=min_zoom,
         max_zoom=max_zoom + 5,
         max_native_zoom=max_zoom,
-        color="red",
+        stroke_color="red",
+        fill_color="red",
         columns=[f'"{c}"' for c in columns.split(",")],
     )
 
-    actual_str = c.cat_layer_dict_to_str(layer_dict, float("inf"))
+    actual_str = c.cat_layer_dict_to_str(layer_dict, "Infinity")
 
     expected_str = "".join(
         [
@@ -156,10 +161,11 @@ def test_cat_layer_dict_to_str():
             "{ ",
             'tileURL:"' + layer_dict["directory"] + '", ',
             "radius: 10, ",
-            'color: "' + layer_dict["color"] + '", ',
+            'strokeColor: "' + layer_dict["stroke_color"] + '", ',
+            'fillColor: "' + layer_dict["fill_color"] + '", ',
             "fillOpacity: 0.2, ",
             "strokeOpacity: 1.0, ",
-            f"rowsPerColumn: Infinity, ",
+            f"nCols: Infinity, ",
             f'catalogColumns: [{",".join(layer_dict["columns"])}], ',
             "minZoom: " + str(layer_dict["min_zoom"]) + ", ",
             "maxZoom: " + str(layer_dict["max_zoom"]) + ", ",
@@ -202,9 +208,13 @@ def test_leaflet_layer_control_declaration():
 
     expected = "\n".join(
         [
+            "const catalogs = {",
+            '    "test":test',
+            "};",
+            "",
             "const layerControl = L.control.layers(",
             '    {"test":test},',
-            '    {"test":test}',
+            "    catalogs",
             ").addTo(map);",
         ]
     )
@@ -217,16 +227,16 @@ def test_leaflet_layer_control_declaration():
 def test_get_colors():
     """test cartographer.colors_js"""
     expected = [
-        "#4C72B0",
-        "#DD8452",
-        "#55A868",
-        "#C44E52",
-        "#8172B3",
-        "#937860",
-        "#DA8BC3",
-        "#8C8C8C",
-        "#CCB974",
-        "#64B5CD",
+        "rgb(76, 114, 176)",
+        "rgb(221, 132, 82)",
+        "rgb(85, 168, 104)",
+        "rgb(196, 78, 82)",
+        "rgb(129, 114, 179)",
+        "rgb(147, 120, 96)",
+        "rgb(218, 139, 195)",
+        "rgb(140, 140, 140)",
+        "rgb(204, 185, 116)",
+        "rgb(100, 181, 205)",
     ]
 
     color_iter = c.get_colors()
@@ -336,9 +346,11 @@ def test_build_conditional_css():
     expected_css = "\n".join(
         [
             "    <link rel='preload' href='https://unpkg.com/leaflet-search@2.9.8/dist/leaflet-search.src.css'  as='style' onload='this.rel=\"stylesheet\"'/>",
+            "    <link rel='preload' href='css/LabelControl.min.css'  as='style' onload='this.rel=\"stylesheet\"'/>",
             "    <link rel='preload' href='css/MarkerCluster.Default.min.css'  as='style' onload='this.rel=\"stylesheet\"'/>",
             "    <link rel='preload' href='css/MarkerCluster.min.css'  as='style' onload='this.rel=\"stylesheet\"'/>",
             "    <link rel='preload' href='css/MarkerPopup.min.css'  as='style' onload='this.rel=\"stylesheet\"'/>",
+            "    <link rel='preload' href='css/SettingsControl.min.css'  as='style' onload='this.rel=\"stylesheet\"'/>",
             "    <link rel='preload' href='css/TileNearestNeighbor.min.css'  as='style' onload='this.rel=\"stylesheet\"'/>",
         ]
     )
@@ -362,6 +374,10 @@ def test_build_conditional_js():
             "    <script defer src='https://cdnjs.cloudflare.com/ajax/libs/leaflet-search/3.0.2/leaflet-search.src.min.js'></script>",
             "    <script defer src='js/customSearch.min.js'></script>",
             "    <script defer src='js/tiledMarkers.min.js'></script>",
+            "    <script defer src='https://cdn.jsdelivr.net/npm/toolcool-color-picker/dist/toolcool-color-picker.min.js'></script>",
+            "    <script defer src='js/fitsmapScale.min.js'></script>",
+            "    <script defer src='js/labelControl.min.js'></script>",
+            "    <script defer src='js/settingsControl.min.js'></script>",
             "    <script defer src='js/urlCoords.js'></script>",
             "    <script defer src='js/index.js'></script>",
             "    <script defer src='https://unpkg.com/cbor-web@8.1.0/dist/cbor.js'></script>",
@@ -398,14 +414,16 @@ def test_build_index_js():
             min_zoom=0,
             max_zoom=8,
             max_native_zoom=2,
-            color="blue",
+            stroke_color="rgb(76, 114, 176)",
+            fill_color="rgb(76, 114, 176)",
             columns=['"a"', '"b"', '"c"'],
         )
     ]
 
-    rows_per_column = np.inf
-
+    n_cols = 1
     max_xy = (2048, 2048)
+    pixel_scale = 0.06
+    units_are_pixels = True
 
     expected_js = "\n".join(
         [
@@ -416,7 +434,7 @@ def test_build_index_js():
             + "minZoom: 0, maxZoom: 8, maxNativeZoom: 3 });",
             "",
             "// Marker layers ===============================================================",
-            'const cat = L.gridLayer.tiledMarkers({ tileURL:"cat/{z}/{y}/{x}.pbf", radius: 10, color: "blue", fillOpacity: 0.2, strokeOpacity: 1.0, rowsPerColumn: Infinity, catalogColumns: ["a","b","c"], minZoom: 0, maxZoom: 8, maxNativeZoom: 2 });',
+            'const cat = L.gridLayer.tiledMarkers({ tileURL:"cat/{z}/{y}/{x}.pbf", radius: 10, strokeColor: "rgb(76, 114, 176)", fillColor: "rgb(76, 114, 176)", fillOpacity: 0.2, strokeOpacity: 1.0, nCols: 1, catalogColumns: ["a","b","c"], minZoom: 0, maxZoom: 8, maxNativeZoom: 2 });',
             "",
             "// Basic map setup =============================================================",
             "L.CRS.FitsMap = L.extend({}, L.CRS.Simple, {",
@@ -430,9 +448,27 @@ def test_build_index_js():
             "    layers: [img]",
             "});",
             "",
+            "// Scale Bar Control ===========================================================",
+            "// https://stackoverflow.com/a/62093918",
+            "const scale = L.control.fitsmapScale({",
+            f"    pixelScale: {pixel_scale},",
+            f"    unitsArePixels: true,",
+            "}).addTo(map);",
+            "",
+            "// Label Control ===============================================================",
+            "const label = L.control.label({",
+            "    position: 'bottomleft',",
+            "    title: '',",
+            "    isRADec: Boolean(is_ra_dec) // from urlCoords.js",
+            "}).addTo(map);",
+            "",
+            "const catalogs = {",
+            '    "cat":cat',
+            "};",
+            "",
             "const layerControl = L.control.layers(",
             '    {"img":img},',
-            '    {"cat":cat}',
+            "    catalogs",
             ").addTo(map);",
             "",
             "// Search ======================================================================",
@@ -443,14 +479,28 @@ def test_build_index_js():
             "const searchControl = buildCustomSearch(catalogPaths, 2);",
             "map.addControl(searchControl);",
             "",
+            "// Settings Control ============================================================",
+            "const settingsControl = L.control.settings({",
+            "    position: 'topleft',",
+            "    catalogs:catalogs,",
+            "}).addTo(map);",
+            "",
             "// Map event setup =============================================================",
             'img.on("load", () => {',
-            '    document.getElementById("loading-screen").style.visibility = "hidden";',
+            '    document.getElementById("loading-screen").style.display = "none";',
             '    document.getElementById("map").style.visibility = "visible";',
+            "    label.update(map.getCenter());",
             "});",
             "",
             'map.on("moveend", updateLocationBar);',
             'map.on("zoomend", updateLocationBar);',
+            'map.on("mousemove", (event) => {label.update(event.latlng);});',
+            'map.on("baselayerchange", (event) => {label.options.title = event.name;});',
+            "",
+            "map.whenReady(function () {",
+            "    scale.options.maxWidth = Math.round(map.getSize().x * 0.2);",
+            "    label.addTo(map);",
+            "});",
             "",
             'if (urlParam("zoom")==null) {',
             f"    map.fitBounds(L.latLngBounds([[0, 0], [{max_xy[0]}, {max_xy[1]}]]));",
@@ -461,10 +511,7 @@ def test_build_index_js():
     )
 
     actual_js = c.build_index_js(
-        img_layer_dict,
-        cat_layer_dict,
-        rows_per_column,
-        max_xy,
+        img_layer_dict, cat_layer_dict, n_cols, max_xy, pixel_scale, units_are_pixels
     )
 
     assert expected_js == actual_js
@@ -511,16 +558,18 @@ def test_build_html():
             '    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.js" integrity="sha512-SeiQaaDh73yrb56sTW/RgVdi/mMqNeM2oBwubFHagc5BkixSpP1fvqF47mKzPGWYSSy4RwbBunrJBQ4Co8fRWA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>',
             extra_js,
             "    <style>",
-            "        /* Map */",
-            r"        html,body{height:100%;padding:0;margin:0;font-family:Helvetica,Arial,sans-serif}#map{width:100%;height:100%;visibility:hidden}",
-            "        /* Loading Page */",
-            r"        .overlay{background:#fff;height:100vh;width:100%;position:absolute}.brand{position:absolute;top:100px;left:50%;transform:translateX(-50%)}.brand img{width:100%;height:auto}.loadingtext{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:700;font-size:xx-large}.loading{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border-bottom:16px solid #0044aaff;border-top:16px solid #0044aaff;border-left:16px solid #80b3ffff;border-right:16px solid #80b3ffff;width:250px;height:250px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-animation:rotate 1s ease-in-out infinite;-o-animation:rotate 1s ease-in-out infinite;animation:rotate 1s ease-in-out infinite}",
-            r"        @keyframes rotate{0%{-webkit-transform:translate(-50%,-50%) rotate(0deg);-moz-transform:translate(-50%,-50%) rotate(0deg);-ms-transform:translate(-50%,-50%) rotate(0deg);-o-transform:translate(-50%,-50%) rotate(0deg);transform:translate(-50%,-50%) rotate(0deg)}100%{-webkit-transform:translate(-50%,-50%) rotate(360deg);-moz-transform:translate(-50%,-50%) rotate(360deg);-ms-transform:translate(-50%,-50%) rotate(360deg);-o-transform:translate(-50%,-50%) rotate(360deg);transform:translate(-50%,-50%) rotate(360deg)}}",
+            "    /* Map */",
+            r"    html,body{height:100%;padding:0;margin:0;font-family:Helvetica,Arial,sans-serif}#map{width:100%;height:100%;visibility:hidden}",
+            "    /* Loading Page */",
+            "    /*",
+            '    Copyright (c) 2023 by kootoopas (https://codepen.io/kootoopas/pen/kGPoaB) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.',
+            "    */",
+            '    @-webkit-keyframes bg-scrolling-reverse {100% {background-position: 50px 50px;}}@-moz-keyframes bg-scrolling-reverse {100% {background-position: 50px 50px;}}@-o-keyframes bg-scrolling-reverse {100% {background-position: 50px 50px;}}@keyframes bg-scrolling-reverse {100% {background-position: 50px 50px;}}@-webkit-keyframes bg-scrolling {0% {background-position: 50px 50px;}}@-moz-keyframes bg-scrolling {0% {background-position: 50px 50px;}}@-o-keyframes bg-scrolling {0% {background-position: 50px 50px;}}@keyframes bg-scrolling {0% {background-position: 50px 50px;}}#loading-screen {color: #999;font: 400 16px/1.5 exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;text-align: center;background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;-webkit-animation: bg-scrolling-reverse 0.92s infinite;-moz-animation: bg-scrolling-reverse 0.92s infinite;-o-animation: bg-scrolling-reverse 0.92s infinite;animation: bg-scrolling-reverse 0.92s infinite;-webkit-animation-timing-function: linear;-moz-animation-timing-function: linear;-o-animation-timing-function: linear;animation-timing-function: linear;width: 100%;height: 100%;}',
             "    </style>",
             "</head>",
             "<body>",
             '    <div id="loading-screen" class="overlay">',
-            '        <div class="brand"><img src="imgs/loading-logo.svg" /></div>',
+            '        <div class="brand"><img src="imgs/loading-logo.svg" style="width: 100%" alt="FitsMap logo"/></div>',
             '        <div class="loading"></div>',
             '        <div class="loadingtext">Loading...</div>',
             "    </div>",
@@ -547,6 +596,8 @@ def test_chart_no_wcs():
     marker_file_names = "test_marker"
     wcs = None
     columns = "a,b,c"
+    pixel_scale = 0.5
+    units_are_pixels = True
 
     with open(os.path.join(out_dir, f"{marker_file_names}.columns"), "w") as f:
         f.write(columns)
@@ -577,6 +628,8 @@ def test_chart_no_wcs():
         wcs,
         float("inf"),
         [100, 100],
+        pixel_scale,
+        units_are_pixels,
     )
 
     # inject current version in to test_index.html
@@ -611,6 +664,8 @@ def test_chart_with_wcs():
     marker_file_names = "test_marker"
     wcs = WCS(os.path.join(out_dir, "test_image.fits"))
     columns = "a,b,c"
+    pixel_scale = 0.5
+    units_are_pixels = True
 
     with open(os.path.join(out_dir, f"{marker_file_names}.columns"), "w") as f:
         f.write(columns)
@@ -642,6 +697,8 @@ def test_chart_with_wcs():
         wcs,
         float("inf"),
         [100, 100],
+        pixel_scale,
+        units_are_pixels,
     )
 
     # inject current version in to test_index.html