Use import maps to load Leaflet in the debug directory (Leaflet#8926)

AlfredManda · Apr 23, 2023 · a359cd1 · a359cd1
1 parent 2407c43
commit a359cd1
Show file tree

Hide file tree

Showing 67 changed files with 535 additions and 66 deletions.
diff --git a/debug/map/canvas.html b/debug/map/canvas.html
@@ -6,11 +6,18 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/screen.css" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<div id="map"></div>
 		<script type="module">
-			import {GridLayer, Map, LatLng} from '../../dist/leaflet-src.esm.js';
+			import {GridLayer, Map, LatLng} from 'leaflet';
 
 			const tiles = new GridLayer();
 

diff --git a/debug/map/control-layers.html b/debug/map/control-layers.html
@@ -6,6 +6,13 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/screen.css" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<div id="map"></div>
@@ -15,7 +22,7 @@
 			}
 		</style>
 		<script type="module">
-			import {Map, TileLayer, Control, Circle, Polygon, GeoJSON} from '../../dist/leaflet-src.esm.js';
+			import {Map, TileLayer, Control, Circle, Polygon, GeoJSON} from 'leaflet';
 
 			const GrayscaleTileLayer = TileLayer.extend({
 				createTile(...args) {

diff --git a/debug/map/controls.html b/debug/map/controls.html
@@ -6,11 +6,18 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/screen.css" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<div id="map"></div>
 		<script type="module">
-			import {TileLayer, Map, Marker, LatLng, Control} from '../../dist/leaflet-src.esm.js';
+			import {TileLayer, Map, Marker, LatLng, Control} from 'leaflet';
 
 			const osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
 			const osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

diff --git a/debug/map/geolocation.html b/debug/map/geolocation.html
@@ -6,11 +6,18 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/screen.css" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<div id="map"></div>
 		<script type="module">
-			import {TileLayer, Map} from '../../dist/leaflet-src.esm.js';
+			import {TileLayer, Map} from 'leaflet';
 
 			const osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
 			const osm = new TileLayer(osmUrl, {maxZoom: 18});

diff --git a/debug/map/grid.html b/debug/map/grid.html
@@ -6,11 +6,18 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/screen.css" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<div id="map"></div>
 		<script type="module">
-			import {GridLayer, Map} from '../../dist/leaflet-src.esm.js';
+			import {GridLayer, Map} from 'leaflet';
 
 			const grid = new GridLayer({
 				attribution: 'Grid Layer'

diff --git a/debug/map/iframe-map.html b/debug/map/iframe-map.html
@@ -7,12 +7,19 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/screen.css" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<div id="map"></div>
 		<button id="populate">Populate with 10 markers</button>
 		<script type="module">
-			import {TileLayer, Map, FeatureGroup, LatLng, Marker, DomUtil} from '../../dist/leaflet-src.esm.js';
+			import {TileLayer, Map, FeatureGroup, LatLng, Marker, DomUtil} from 'leaflet';
 
 			const osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
 			const osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

diff --git a/debug/map/iframe.html b/debug/map/iframe.html
@@ -4,6 +4,13 @@
 		<meta charset="utf-8" />
 		<title>Leaflet debug page - Iframe</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<style>

diff --git a/debug/map/image-overlay.html b/debug/map/image-overlay.html
@@ -6,11 +6,18 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/screen.css" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<div id="map"></div>
 		<script type="module">
-			import {TileLayer, LatLng, Map, LatLngBounds, ImageOverlay} from '../../dist/leaflet-src.esm.js';
+			import {TileLayer, LatLng, Map, LatLngBounds, ImageOverlay} from 'leaflet';
 
 			const osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
 			const osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

diff --git a/debug/map/layer-remove-add.html b/debug/map/layer-remove-add.html
@@ -6,12 +6,19 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/screen.css" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<div id="map"></div>
 		<button id="removeAdd">Remove and Add Layer</button>
 		<script type="module">
-			import {Map, TileLayer, DomUtil} from '../../dist/leaflet-src.esm.js';
+			import {Map, TileLayer, DomUtil} from 'leaflet';
 
 			const map = new Map('map', {center: [0, 0], zoom: 3, maxZoom: 4});
 			const osm = new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {

diff --git a/debug/map/map-mobile.html b/debug/map/map-mobile.html
@@ -6,11 +6,18 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/mobile.css" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<div id="map"></div>
 		<script type="module">
-			import {TileLayer, LatLng, Map, Marker} from '../../dist/leaflet-src.esm.js';
+			import {TileLayer, LatLng, Map, Marker} from 'leaflet';
 
 			const osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
 			const osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

diff --git a/debug/map/map-popup.html b/debug/map/map-popup.html
@@ -6,11 +6,18 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/screen.css" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<div id="map"></div>
 		<script type="module">
-			import {TileLayer, Map, Marker, Circle, Polygon, Popup} from '../../dist/leaflet-src.esm.js';
+			import {TileLayer, Map, Marker, Circle, Polygon, Popup} from 'leaflet';
 
 			const osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
 			const osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

diff --git a/debug/map/map-scaled.html b/debug/map/map-scaled.html
@@ -6,6 +6,13 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/screen.css" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<style>
@@ -32,7 +39,7 @@
 			<div id="map"></div>
 		</div>
 		<script type="module">
-			import {TileLayer, Map, Marker, DomEvent} from '../../dist/leaflet-src.esm.js';
+			import {TileLayer, Map, Marker, DomEvent} from 'leaflet';
 
 			const osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
 			const osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

diff --git a/debug/map/marker-autopan.html b/debug/map/marker-autopan.html
@@ -6,11 +6,18 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/screen.css" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<div id="map"></div>
 		<script type="module">
-			import {Map, Marker, Polygon, TileLayer} from '../../dist/leaflet-src.esm.js';
+			import {Map, Marker, Polygon, TileLayer} from 'leaflet';
 
 			const map = new Map('map', {center: [0, 0], zoom: 3, maxZoom: 4});
 

diff --git a/debug/map/markers.html b/debug/map/markers.html
@@ -6,11 +6,18 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/screen.css" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<div id="map"></div>
 		<script type="module">
-			import {Map, Marker, Polygon, TileLayer} from '../../dist/leaflet-src.esm.js';
+			import {Map, Marker, Polygon, TileLayer} from 'leaflet';
 
 			const map = new Map('map', {center: [0, 0], zoom: 3, maxZoom: 4});
 

diff --git a/debug/map/max-bounds-bouncy.html b/debug/map/max-bounds-bouncy.html
@@ -6,13 +6,20 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/mobile.css" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<h1>Left: Bouncy maxBounds. Right: Not bouncy.</h1>
 		<div id="map1" style="float: left; width:45%; height: 80%;"></div>
 		<div id="map2" style="float: left; width:45%; height: 80%;"></div>
 		<script type="module">
-			import {TileLayer, LatLngBounds, LatLng, Map, Rectangle, Polyline} from '../../dist/leaflet-src.esm.js';
+			import {TileLayer, LatLngBounds, LatLng, Map, Rectangle, Polyline} from 'leaflet';
 
 			const osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
 			const osm1 = new TileLayer(osmUrl, {maxZoom: 18});

diff --git a/debug/map/max-bounds-infinite.html b/debug/map/max-bounds-infinite.html
@@ -6,11 +6,18 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/mobile.css" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<div id="map"></div>
 		<script type="module">
-			import {TileLayer, LatLngBounds, LatLng, Map} from '../../dist/leaflet-src.esm.js';
+			import {TileLayer, LatLngBounds, LatLng, Map} from 'leaflet';
 
 			const osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
 			const osm = new TileLayer(osmUrl, {maxZoom: 18});

diff --git a/debug/map/max-bounds.html b/debug/map/max-bounds.html
@@ -6,11 +6,18 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/mobile.css" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<div id="map"></div>
 		<script type="module">
-			import {TileLayer, LatLngBounds, LatLng, Map, Rectangle, Polyline} from '../../dist/leaflet-src.esm.js';
+			import {TileLayer, LatLngBounds, LatLng, Map, Rectangle, Polyline} from 'leaflet';
 
 			const osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
 			const osm = new TileLayer(osmUrl, {maxZoom: 18});

diff --git a/debug/map/opacity.html b/debug/map/opacity.html
@@ -6,6 +6,13 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/screen.css" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<style>
@@ -60,7 +67,7 @@
 			<div id="map6" class="map"></div>
 		</div>
 		<script type="module">
-			import {Map, TileLayer} from '../../dist/leaflet-src.esm.js';
+			import {Map, TileLayer} from 'leaflet';
 
 			const mapopts = {
 				center: [35, -122],

diff --git a/debug/map/popup-keep-in-view.html b/debug/map/popup-keep-in-view.html
@@ -6,6 +6,13 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/screen.css" />
+		<script type="importmap">
+			{
+				"imports": {
+					"leaflet": "../../dist/leaflet-src.esm.js"
+				}
+			}
+		</script>
 	</head>
 	<body>
 		<div id="map"></div>
@@ -17,7 +24,7 @@
 			<button id="movePopup">Move last popup</button>
 		</div>
 		<script type="module">
-			import {TileLayer, Map, LatLng, Popup} from '../../dist/leaflet-src.esm.js';
+			import {TileLayer, Map, LatLng, Popup} from 'leaflet';
 
 			const osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
 			const osm = new TileLayer(osmUrl, {maxZoom: 18});