# dash-leaflet2 — Leaflet 2 maps for Dash

> dash-leaflet2 — Leaflet 2 (alpha) mapping components for Plotly Dash 4. Wraps Leaflet 2 core directly instead of react-leaflet, exposing unified Pointer Events, BlanketOverlay canvas/WebGL layers, ES6-class subclassing, ResizeObserver sizing and map rotation as Dash components. By Pip Install Python.

> Leaflet 2 (alpha) mapping components for Plotly Dash 4, without react-leaflet.

---



# dash-leaflet2 — Leaflet 2 maps for Dash

> **`dash-leaflet2`** wraps **Leaflet 2 core directly** — no react-leaflet — and
> ships it as real Dash components. By [Pip Install Python](https://github.com/2plotai).

### Overview

`dash-leaflet` is frozen on react-leaflet, which has no Leaflet 2 line, so it
cannot move past Leaflet 1.9. This library skips that abstraction entirely and
drives Leaflet 2 core itself, which is what puts v2's headline features inside
reach of a Python callback:

- **Unified Pointer Events** — one event model for mouse, touch and stylus, with
  `pointerType`, `pressure` and `tiltX` / `tiltY` reaching your callbacks
- **`BlanketOverlay` canvas / WebGL layers** — your own renderer across the
  whole viewport, instead of the DOM layer system
- **ES6-class subclassing** — extend a Leaflet 2 class and mount the result
- **`ResizeObserver` sizing** — no grey tiles for a map born in a hidden tab
- **Map rotation** — `bearing` as a first-class, two-way prop

The demo below is the whole claim in one page: Leaflet `2.0.0-alpha.1`,
rendering inside Dash 4, with no JavaScript build step.

### Watch the introduction

[Dash Leaflet 2.0: Drone Tracking, Image Overlays & Map Packages in
Python](https://youtu.be/Wlmw98JrJZI) — drone tracking, image overlays and map
packages, built with this library.


### Live demo


### Source


```python
# File: docs/home/example.py

"""Home — prove Leaflet 2 alpha renders inside Dash 4."""

import dash_mantine_components as dmc
from dl2_shared import code_panel, header, info_panel, map_div

QUICKSTART = """# app.py  — no JS build step
from dash import Dash, hooks, html

V = "2.0.0-alpha.1"  # WITH the dot; the dotless form 404s on unpkg
hooks.stylesheet([{"external_url": f"https://unpkg.com/leaflet@{V}/dist/leaflet.css",
                   "external_only": True}])
hooks.script([{"external_url": f"https://unpkg.com/leaflet@{V}/dist/leaflet-global.js",
               "external_only": True}])   # exposes window.leaflet (NOT window.L)

app = Dash(__name__)
app.layout = html.Div(className="leaflet2-map", **{"data-demo": "home"},
                      style={"height": "60vh"})

# assets/leaflet2_maps.js mounts the map:
#   const map = new leaflet.Map(el).setView([49.286, -123.12], 12);
#   new leaflet.TileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);
"""

component = dmc.Stack(
    [
        header(
            "Leaflet 2 on Dash 4",
            "dash-leaflet is frozen on react-leaflet → Leaflet 1.9. This app skips "
            "react-leaflet entirely and drives Leaflet 2 core directly — a generation "
            "ahead, with a smaller footprint and direct access to v2 features.",
            badge="2.0.0-alpha.1",
        ),
        map_div("home"),
        code_panel("How it works (zero build step)", QUICKSTART),
        info_panel(
            "What the other pages show",
            dmc.List(
                [
                    dmc.ListItem(
                        "Pointer Events — v2's unified pointer model (pen pressure, tilt)."
                    ),
                    dmc.ListItem(
                        "Canvas Renderer — thousands of points through one <canvas>."
                    ),
                    dmc.ListItem(
                        "ES6 Subclassing — custom Control + a BlanketOverlay canvas layer."
                    ),
                    dmc.ListItem(
                        "ResizeObserver Sizing — no more gray tiles in collapsible panels."
                    ),
                    dmc.ListItem(
                        "Vector Layers — Polygon / Polyline / Circle / CircleMarker."
                    ),
                    dmc.ListItem(
                        "Events → Python — map state round-tripped into @callback."
                    ),
                ]
            ),
        ),
    ],
    gap="md",
)
```

    :defaultExpanded: false
    :withExpandedButton: true


---

*Source: /*

## Pages

Every page in this application. Each has a Markdown version at the `llms.txt` URL beside it.

- [dash-leaflet2 — Leaflet 2 maps for Dash](https://leaflet.2plot.dev/): dash-leaflet2 — Leaflet 2 (alpha) mapping components for Plotly Dash 4. Wraps Leaflet 2 core directly instead of react-leaflet, exposing unified Pointer Events, BlanketOverlay canvas/WebGL layers, ES6-class subclassing, ResizeObserver sizing and map rotation as Dash components. By Pip Install Python.
  - Machine-readable: https://leaflet.2plot.dev/llms.txt
- [Attribution](https://leaflet.2plot.dev/attribution): explicit control over the attribution box.
  - Machine-readable: https://leaflet.2plot.dev/attribution/llms.txt
- [Canvas Renderer](https://leaflet.2plot.dev/canvas-overlay): dense point clouds through one <canvas>.
  - Machine-readable: https://leaflet.2plot.dev/canvas-overlay/llms.txt
- [Compare Lab](https://leaflet.2plot.dev/compare-lab): stack, reorder and cross-fade tile overlays from a TreeViewPro popover.
  - Machine-readable: https://leaflet.2plot.dev/compare-lab/llms.txt
- [Easy Button](https://leaflet.2plot.dev/easy-button): Easy Button + marker creation flow with emoji picker, form popup, and view mode.
  - Machine-readable: https://leaflet.2plot.dev/easy-button/llms.txt
- [Draw & Edit](https://leaflet.2plot.dev/edit-control): native v2 drawing/editing toolbar with full dash-leaflet-style API parity.
  - Machine-readable: https://leaflet.2plot.dev/edit-control/llms.txt
- [Edit Control + Measurement](https://leaflet.2plot.dev/edit-control-measurement): popover-driven drawing, recoloring, and per-feature labels.
  - Machine-readable: https://leaflet.2plot.dev/edit-control-measurement/llms.txt
- [Emoji & Iconify](https://leaflet.2plot.dev/emoji-iconify): a live DashEmojiMart picker + a full Iconify catalogue search,
  - Machine-readable: https://leaflet.2plot.dev/emoji-iconify/llms.txt
- [Events → Python](https://leaflet.2plot.dev/events-python): full JS→Python round-trip via dcc.Store.
  - Machine-readable: https://leaflet.2plot.dev/events-python/llms.txt
- [Flight Sim](https://leaflet.2plot.dev/flight-sim): single-player, keyboard + touch-joystick, rAF physics loop.
  - Machine-readable: https://leaflet.2plot.dev/flight-sim/llms.txt
- [FlyTo](https://leaflet.2plot.dev/flyto): smooth viewport transitions, modelled on dash-leaflet's `viewport` API.
  - Machine-readable: https://leaflet.2plot.dev/flyto/llms.txt
- [GeoJSON clustering](https://leaflet.2plot.dev/geojson-cluster): SuperCluster-backed point clustering for dl2.GeoJSON — cluster, pointToLayer, clusterToLayer, hideout, superClusterOptions.
  - Machine-readable: https://leaflet.2plot.dev/geojson-cluster/llms.txt
- [LayerGroup & FeatureGroup](https://leaflet.2plot.dev/layer-group): Bundle N layers so they can be added, removed, toggled, or measured as one — wraps Leaflet 2's LayerGroup / FeatureGroup.
  - Machine-readable: https://leaflet.2plot.dev/layer-group/llms.txt
- [Layers Control](https://leaflet.2plot.dev/layers-control): the compiled dl2.LayersControl component.
  - Machine-readable: https://leaflet.2plot.dev/layers-control/llms.txt
- [Map pro props](https://leaflet.2plot.dev/map-pro-props): minZoom, maxZoom, maxBounds, zoomControl, keyboard — the dash-leaflet 1.x Map options ported to dl2.
  - Machine-readable: https://leaflet.2plot.dev/map-pro-props/llms.txt
- [MiniMap](https://leaflet.2plot.dev/minimap): small overview map pinned to a corner of the main map.
  - Machine-readable: https://leaflet.2plot.dev/minimap/llms.txt
- [Pointer Events](https://leaflet.2plot.dev/pointer-events): Leaflet 2's headline change.
  - Machine-readable: https://leaflet.2plot.dev/pointer-events/llms.txt
- [ResizeObserver Sizing](https://leaflet.2plot.dev/resize-observer): no gray tiles in collapsible layouts.
  - Machine-readable: https://leaflet.2plot.dev/resize-observer/llms.txt
- [Basic Rotation](https://leaflet.2plot.dev/rotation-basic): `bearing` on dl2.Map + dl2.KeyboardControl
  - Machine-readable: https://leaflet.2plot.dev/rotation-basic/llms.txt
- [Scale, FullScreen, ImageOverlay](https://leaflet.2plot.dev/scale-fullscreen-image): Three small controls / overlays that close the remaining dl1 gaps: ScaleControl, FullScreenControl, ImageOverlay.
  - Machine-readable: https://leaflet.2plot.dev/scale-fullscreen-image/llms.txt
- [ES6 Subclassing](https://leaflet.2plot.dev/subclassing): custom Control + a BlanketOverlay canvas layer.
  - Machine-readable: https://leaflet.2plot.dev/subclassing/llms.txt
- [TextMarker](https://leaflet.2plot.dev/text-marker): Editable, draggable, styleable text placed on the map like a Marker — drag to move, double-click to edit, on-canvas resize/rotate handles, and a style toolbar; round-trips position/text/rotation/fontSize/color back to Dash.
  - Machine-readable: https://leaflet.2plot.dev/text-marker/llms.txt
- [Tile Layers (Pro)](https://leaflet.2plot.dev/tile-layers-pro): EasyButton + Popover + MultiSelect + TreeViewPro.
  - Machine-readable: https://leaflet.2plot.dev/tile-layers-pro/llms.txt
- [Tile Selector](https://leaflet.2plot.dev/tile-selector): pick map tiles by clicking or shift-dragging, and round-trip them to Python.
  - Machine-readable: https://leaflet.2plot.dev/tile-selector/llms.txt
- [TileLayer pro props](https://leaflet.2plot.dev/tilelayer-pro-props): minZoom, bounds, errorTileUrl, zIndex, subdomains, detectRetina, tms — the dash-leaflet 1.x TileLayer surface ported to dl2.
  - Machine-readable: https://leaflet.2plot.dev/tilelayer-pro-props/llms.txt
- [Vector Layers](https://leaflet.2plot.dev/vector-layers): Polygon / Polyline / Circle / CircleMarker.
  - Machine-readable: https://leaflet.2plot.dev/vector-layers/llms.txt
- [Walking Sim](https://leaflet.2plot.dev/walking-sim): top-down RPG-style walking with the full pirate-captain sprite
  - Machine-readable: https://leaflet.2plot.dev/walking-sim/llms.txt

## About The 2plot network

Open-source Dash component libraries by Pip Install Python. Each component has its own documentation site and its own llms.txt; 2plot.dev indexes all of them, and 2plot.ai is the hub.

Network index: [https://2plot.dev](https://2plot.dev/llms.txt)

## Network

Other applications in this network. Same operator; each one serves its own `/llms.txt` in this format.

- [2plot.ai](https://2plot.ai): Network hub and account origin.
  - Machine-readable: https://2plot.ai/llms.txt
- [2plot.dev](https://2plot.dev): Package index for every open-source component in the network.
  - Machine-readable: https://2plot.dev/llms.txt
- [Documentation boilerplate](https://boilerplate.2plot.dev): The markdown-driven documentation template every satellite site is built from.
  - Machine-readable: https://boilerplate.2plot.dev/llms.txt
- [dash-mui-scheduler](https://muischeduler.2plot.dev): MUI X Scheduler — calendars and event scheduling for Dash.
  - Machine-readable: https://muischeduler.2plot.dev/llms.txt
- [dash-flows](https://flows.2plot.dev): Node-graph editors built on React Flow.
  - Machine-readable: https://flows.2plot.dev/llms.txt
- [dash-email](https://email.2plot.dev): Email composition and delivery components.
  - Machine-readable: https://email.2plot.dev/llms.txt

## Related projects

Projects by the same author on their own domains. Built on the same stack, but not part of the primary network.

- [2plot.ai](https://2plot.ai): The original component documentation site.
  - Machine-readable: https://2plot.ai/llms.txt
- [Pirate's Bargain](https://piratesbargain.com): Deal aggregator built on the same Dash stack.
  - Machine-readable: https://piratesbargain.com/llms.txt
- [ai-agent.buzz](https://ai-agent.buzz): Agent tooling directory.
  - Machine-readable: https://ai-agent.buzz/llms.txt

## External references

Third-party documentation this project depends on or references. Not affiliated — listed so an agent can follow a dependency directly instead of searching for it.

- [Dash Mantine Components](https://www.dash-mantine-components.com): The UI component layer these docs are built with.
  - Machine-readable: https://www.dash-mantine-components.com/llms.txt
- [Plotly Dash documentation](https://dash.plotly.com): Upstream framework documentation.
  - Machine-readable: https://dash.plotly.com/llms.txt