leaflet.fullscreen/demo/demo.esm.html at 0ba859e03858c9fe0fe170c9fb093333cae53849 · KristjanESPERANTO/leaflet.fullscreen · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!doctype html>
<html>
	<head>
		<title>Leaflet Control FullScreen Demo (ESM)</title>
		<meta charset="utf-8" />
		<link
			rel="icon"
			type="image/svg+xml"
			href='data:image/svg+xml,<svg viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M5 10.3V5.9c0-.5.4-.9.9-.9h4.4c.2 0 .4.2.4.4V7c0 .2-.2.4-.4.4h-3v3c0 .2-.2.4-.4.4H5.4a.4.4 0 0 1-.4-.4zm10.3-4.9V7c0 .2.2.4.4.4h3v3c0 .2.2.4.4.4h1.5c.2 0 .4-.2.4-.4V5.9c0-.5-.4-.9-.9-.9h-4.4c-.2 0-.4.2-.4.4zm5.3 9.9H19c-.2 0-.4.2-.4.4v3h-3c-.2 0-.4.2-.4.4v1.5c0 .2.2.4.4.4h4.4c.5 0 .9-.4.9-.9v-4.4c0-.2-.2-.4-.4-.4zm-9.9 5.3V19c0-.2-.2-.4-.4-.4h-3v-3c0-.2-.2-.4-.4-.4H5.4c-.2 0-.4.2-.4.4v4.4c0 .5.4.9.9.9h4.4c.2 0 .4-.2.4-.4z" fill="%23333"/></svg>'
		/>

		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
		<link rel="stylesheet" href="../dist/Control.FullScreen.css" />
		<link rel="stylesheet" href="demo.css" />

		<script type="importmap">
			{
				"imports": {
					"leaflet": "https://unpkg.com/leaflet@latest/dist/leaflet-src.esm.js"
				}
			}
		</script>
	</head>
	<body>
		<div id="map"></div>
		<div id="description">
			<div class="nav-buttons">
				<a href="../index.html" class="back-button">← Back to Home</a>
				<a href="https://github.com/brunob/leaflet.fullscreen/blob/master/demo/demo.esm.html" target="_blank" class="view-source-button">📄 View Source</a>
			</div>

			<div class="description-content">
				<h3>ES Module Demo</h3>
				<p>This example demonstrates modern ES6 module usage with Import Maps for native browser support.</p>

				<p><strong>Features:</strong></p>
				<ul>
					<li>Uses native <code>import</code> statements</li>
					<li>Import Map resolves bare specifiers</li>
					<li>Named exports (<code>FullScreen</code>)</li>
					<li>No global namespace pollution</li>
					<li>Tree-shakeable for bundlers</li>
				</ul>

				<p><strong>Try it:</strong> Use the fullscreen button (top-left of the map) to enter/exit fullscreen mode.</p>

				<div class="api-section">
					<p><strong>Programmatic API:</strong></p>
					<p class="text-muted">You can also control fullscreen via JavaScript using <code>map.fullscreenControl.toggleFullScreen()</code></p>
					<button type="button" class="demo-button api-button" onclick="toggleFullscreen()">Test API Toggle</button>
				</div>
			</div>
		</div>
		<script type="module">
			import { TileLayer, LatLng, Map } from 'leaflet';
			import { FullScreen } from '../dist/Control.FullScreen.js';

			const tiles = new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
				maxZoom: 18,
				attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
			});

			const latlng = new LatLng(48.5, -4.5);

			const map = new Map('map', {
				layers: [tiles],
				center: latlng,
				zoom: 5
			});

			// Add fullscreen control
			map.addControl(
				new FullScreen({
					position: 'topleft',
					title: 'Show me the fullscreen!',
					titleCancel: 'Exit fullscreen mode'
				})
			);

			// Detect fullscreen toggling
			map.on('enterFullscreen', () => console.log('enterFullscreen'));
			map.on('exitFullscreen', () => console.log('exitFullscreen'));

			// Programmatic toggle function
			window.toggleFullscreen = function () {
				map.fullscreenControl.toggleFullScreen();
			};
		</script>
	</body>
</html>