eba6b2e6ad
slot is a reserved HTML global attribute with shadow-DOM semantics; using it was misleading even though it happened to work. Switch to type="base" / type="overlay", which is conventional and carries no side effects.
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
|
|
type="base"
|
|
name="OpenStreetMap"
|
|
checked
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
attribution="© OpenStreetMap"
|
|
></leaflet-tile-layer>
|
|
<leaflet-tile-layer
|
|
type="base"
|
|
name="Light"
|
|
url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"
|
|
attribution="© CARTO"
|
|
></leaflet-tile-layer>
|
|
<leaflet-tile-layer
|
|
type="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>
|