e45162b0be
New <leaflet-control-layers> wraps Control.Layers. Children with slot="base" or slot="overlay" and a name attribute are automatically registered as base layers or overlays. The control intercepts child leaflet-register events and stops propagation so layers are managed by the layers control rather than added directly to the map. Unchecked layers that connected before the control are removed from the map before the control initialises, so Control.Layers._addItem correctly reflects the unchecked state on first render.
54 lines
1.6 KiB
HTML
54 lines
1.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Layers Control Demo</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; padding: 20px; font-family: sans-serif; }
|
|
leaflet-map { height: 500px; display: block; border: 1px solid #ccc; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Leaflet Layers Control</h1>
|
|
|
|
<leaflet-map id="map" lat="51.5" lng="-0.09" zoom="12">
|
|
<leaflet-control-layers position="topright" collapsed>
|
|
<leaflet-tile-layer
|
|
slot="base"
|
|
name="OpenStreetMap"
|
|
checked
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
attribution="© OpenStreetMap"
|
|
></leaflet-tile-layer>
|
|
<leaflet-tile-layer
|
|
slot="base"
|
|
name="Light"
|
|
url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"
|
|
attribution="© CARTO"
|
|
></leaflet-tile-layer>
|
|
<leaflet-tile-layer
|
|
slot="base"
|
|
name="Dark"
|
|
url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"
|
|
attribution="© CARTO"
|
|
></leaflet-tile-layer>
|
|
</leaflet-control-layers>
|
|
|
|
<leaflet-marker lat="51.5" lng="-0.09">
|
|
<leaflet-popup>Marker inside a layers control overlay</leaflet-popup>
|
|
</leaflet-marker>
|
|
</leaflet-map>
|
|
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"leaflet": "/node_modules/leaflet/dist/leaflet-src.esm.js"
|
|
}
|
|
}
|
|
</script>
|
|
<script type="module" src="/dist/index.js"></script>
|
|
</body>
|
|
</html>
|