# Scale, FullScreen, ImageOverlay

> Three small controls / overlays that close the remaining dl1 gaps: ScaleControl, FullScreenControl, ImageOverlay.

---

.. llms_copy::Scale, FullScreen, ImageOverlay

.. toc::

### Overview

Three thin wrappers around Leaflet 2 building blocks that dash-leaflet 1.x exposed
and dl2 didn't yet:

| Component         | Wraps |
|-------------------|-------|
| `ScaleControl`    | `Control.Scale` — metric / imperial scale bar in any corner. |
| `FullScreenControl` | A small `Control` over the browser's `requestFullscreen()` API. Reports `fullscreen` and `n_clicks` back to Dash. |
| `ImageOverlay`    | `ImageOverlay` — drape one image onto a geographic bounding box. Two-way `url`, `bounds`, `opacity`, `zIndex`. With `editable` it gains a TextMarker-style transform control system. |

### Editable ImageOverlay (resize · rotate · move)

Set `editable=True` and the overlay becomes a draggable, resizable, rotatable object — the
same control language as `dl2.TextMarker`:

- **Click** the image to select it (chrome + handles appear).
- **Drag** the body to move it (translates `bounds`).
- **Drag the corner dot** to resize — the bounds scale about the `anchor`, which stays pinned.
  That dot is also the **white anchor marker**: it sits at whichever `anchor` you choose
  (`center` defaults to the bottom-right corner).
- **Drag the top dot** to rotate. Rotation is a CSS-transform visual rotation pivoting at the
  `anchor` — Leaflet's `ImageOverlay` has no native geographic rotation, so `bounds` stay
  axis-aligned and only the rendered pixels turn.

`bounds`, `rotation`, and `selected` round-trip back to Dash (plus an `n_transforms` counter).

### Live demo

A single map with all three pieces: scale bar bottom-left, fullscreen button top-left, and an
editable image overlay — select it, then drag to move, resize from the corner/anchor dot, and
rotate from the top dot. Change the anchor pivot and watch the white dot follow.

.. exec::docs.scale-fullscreen-image.example
    :code: false

### Source


```python
# File: docs/scale-fullscreen-image/example.py

"""
ScaleControl, FullScreenControl, ImageOverlay — limited working example.

A single map with the scale bar bottom-left, the fullscreen button top-left, and
a sample raster ImageOverlay draped over a Honolulu, HI
bounding box. Right column tweaks each piece live.
"""

import dash_leaflet2 as dl2
import dash_mantine_components as dmc
from dash import Input, Output, callback
from dl2_tiles import NATGEO, register_theme_swap
from dl2_locations import HONOLULU
from dl2_shared import code_panel, header, info_panel

# Basemap pair for this page — dl2_tiles owns the light/dark wiring.
TILES = NATGEO

# A ~17 x 20 km box centred on the city. Expressed in kilometres rather than
# degrees so the overlay covers the same ground area at Honolulu's latitude as
# it would anywhere else — a fixed degree box would stretch east-west near the
# equator and squash near the poles.
OVERLAY_BOUNDS = HONOLULU.bounds(8.35, 9.83)
# Public sample image used by Leaflet docs.
SAMPLE_IMAGE = "https://leafletjs.com/examples/crs-simple/uqm_map_full.png"
SAMPLE_IMAGE_2 = "https://maps.lib.utexas.edu/maps/historical/texas_southern_1895.jpg"

ANCHORS = [
    "top-left", "top", "top-right",
    "left", "center", "right",
    "bottom-left", "bottom", "bottom-right",
]

CODE = """dl2.Map(center=[21.3069, -157.8583], zoom=12, children=[
    dl2.TileLayer(),
    dl2.ScaleControl(position="bottomleft", metric=True, imperial=True),
    dl2.FullScreenControl(position="topleft"),

    # Editable: click to select, drag to move, corner dot resizes (about `anchor`),
    # top dot rotates. bounds / rotation / selected round-trip back to Dash.
    dl2.ImageOverlay(
        id="img",
        url="https://leafletjs.com/examples/crs-simple/uqm_map_full.png",
        bounds=[[21.23, -157.95], [21.38, -157.76]],
        opacity=0.85,
        editable=True, selected=True, anchor="center", rotation=0,
    ),
])

@callback(Output("out", "children"),
          Input("img", "bounds"), Input("img", "rotation"))
def show(bounds, rotation): ..."""

component = dmc.Stack(
    [
        header(
            "Scale, FullScreen, ImageOverlay",
            "Scale bar bottom-left (metric + imperial), fullscreen button top-left, and an "
            "EDITABLE ImageOverlay: click it to select, then drag to move, drag the corner "
            "dot (the anchor marker) to resize, and the top dot to rotate — bounds + rotation "
            "round-trip back to Dash. The anchor dot follows the chosen anchor.",
            badge="dl2.{Scale,FullScreen}Control · editable dl2.ImageOverlay",
        ),
        dmc.Grid(
            [
                dmc.GridCol(
                    dmc.Paper(
                        dl2.Map(
                            id="sfi-map",
                            center=HONOLULU.center,
                            zoom=11,
                            style={"height": "60vh"},
                            children=[
                                dl2.TileLayer(id="sfi-tile", **TILES.kwargs("light")),
                                dl2.ScaleControl(
                                    id="sfi-scale",
                                    position="bottomleft",
                                    metric=True,
                                    imperial=True,
                                ),
                                dl2.FullScreenControl(
                                    id="sfi-fs",
                                    position="topleft",
                                    title="Enter full screen",
                                    titleCancel="Leave full screen",
                                ),
                                dl2.ImageOverlay(
                                    id="sfi-image",
                                    url=SAMPLE_IMAGE,
                                    bounds=OVERLAY_BOUNDS,
                                    opacity=0.85,
                                    editable=True,
                                    selected=True,
                                    anchor="center",
                                    rotation=0,
                                ),
                            ],
                        ),
                        shadow="sm",
                        radius="md",
                        withBorder=True,
                        style={"overflow": "hidden", "height": "60vh"},
                    ),
                    span=8,
                ),
                dmc.GridCol(
                    dmc.Stack(
                        [
                            info_panel(
                                "Scale bar",
                                dmc.Stack(
                                    [
                                        dmc.SegmentedControl(
                                            id="sfi-scale-pos",
                                            data=[
                                                {"label": "BL", "value": "bottomleft"},
                                                {"label": "BR", "value": "bottomright"},
                                                {"label": "TL", "value": "topleft"},
                                                {"label": "TR", "value": "topright"},
                                            ],
                                            value="bottomleft",
                                            fullWidth=True,
                                        ),
                                        dmc.Switch(id="sfi-scale-metric", checked=True, label="metric"),
                                        dmc.Switch(id="sfi-scale-imperial", checked=True, label="imperial"),
                                    ],
                                    gap="xs",
                                ),
                            ),
                            info_panel(
                                "Fullscreen",
                                dmc.Stack(
                                    [
                                        dmc.Badge(id="sfi-fs-state", color="gray", variant="light", children="windowed"),
                                        dmc.Text(id="sfi-fs-clicks", size="xs", c="dimmed"),
                                    ],
                                    gap="xs",
                                ),
                            ),
                            info_panel(
                                "ImageOverlay opacity",
                                dmc.Slider(
                                    id="sfi-image-opacity",
                                    min=0,
                                    max=1,
                                    step=0.05,
                                    value=0.6,
                                ),
                            ),
                            info_panel(
                                "ImageOverlay source",
                                dmc.SegmentedControl(
                                    id="sfi-image-url",
                                    data=[
                                        {"label": "UQM sample", "value": SAMPLE_IMAGE},
                                        {"label": "1895 TX scan", "value": SAMPLE_IMAGE_2},
                                    ],
                                    value=SAMPLE_IMAGE,
                                    fullWidth=True,
                                ),
                            ),
                            info_panel(
                                "Transform (anchor pivot)",
                                dmc.Stack(
                                    [
                                        dmc.SegmentedControl(
                                            id="sfi-anchor",
                                            data=[{"label": a, "value": a} for a in ANCHORS],
                                            value="center",
                                            orientation="vertical",
                                            fullWidth=True,
                                            size="xs",
                                        ),
                                        dmc.Text("Rotation", size="xs", c="dimmed"),
                                        dmc.Slider(
                                            id="sfi-rot", min=-180, max=180, value=0,
                                            marks=[{"value": 0, "label": "0°"}],
                                        ),
                                        dmc.Code(id="sfi-image-out", block=True, children="…"),
                                    ],
                                    gap="xs",
                                ),
                            ),
                        ],
                        gap="md",
                    ),
                    span=4,
                ),
            ],
            gutter="md",
        ),
        code_panel("Three new pieces in one map", CODE),
    ],
    gap="md",
)


@callback(Output("sfi-scale", "position"), Input("sfi-scale-pos", "value"))
def scale_pos(v):
    return v or "bottomleft"


@callback(Output("sfi-scale", "metric"), Input("sfi-scale-metric", "checked"))
def scale_metric(checked):
    return bool(checked)


@callback(Output("sfi-scale", "imperial"), Input("sfi-scale-imperial", "checked"))
def scale_imperial(checked):
    return bool(checked)


@callback(Output("sfi-fs-state", "children"), Output("sfi-fs-state", "color"), Input("sfi-fs", "fullscreen"))
def fs_state(is_full):
    if is_full:
        return "fullscreen", "blue"
    return "windowed", "gray"


@callback(Output("sfi-fs-clicks", "children"), Input("sfi-fs", "n_clicks"))
def fs_clicks(n):
    return f"button clicks: {n or 0}"


@callback(Output("sfi-image", "opacity"), Input("sfi-image-opacity", "value"))
def image_opacity(v):
    return float(v or 0)


@callback(Output("sfi-image", "url"), Input("sfi-image-url", "value"))
def image_url(v):
    return v or SAMPLE_IMAGE


@callback(Output("sfi-image", "anchor"), Input("sfi-anchor", "value"))
def image_anchor(v):
    return v or "center"


@callback(Output("sfi-image", "rotation"), Input("sfi-rot", "value"))
def image_rotation(v):
    return int(v or 0)


@callback(
    Output("sfi-image-out", "children"),
    Input("sfi-image", "bounds"),
    Input("sfi-image", "rotation"),
    Input("sfi-image", "n_transforms"),
)
def image_readback(bounds, rotation, n):
    b = bounds or OVERLAY_BOUNDS
    return (
        f"rotation: {rotation or 0}°\n"
        f"bounds  : [[{b[0][0]:.4f}, {b[0][1]:.4f}],\n"
        f"           [{b[1][0]:.4f}, {b[1][1]:.4f}]]\n"
        f"n_transforms: {n or 0}"
    )


# Light/dark basemap, driven off the color-scheme store.
register_theme_swap("sfi-tile", TILES)
```

    :defaultExpanded: false
    :withExpandedButton: true


---

*Source: /scale-fullscreen-image*