leaflet.fullscreen
Version:
Simple plugin for Leaflet that adds fullscreen button to your maps.
61 lines (57 loc) • 1.94 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Leaflet.Control.FullScreen Demo</title>
<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="Control.FullScreen.css" />
<link rel="icon" type="image/svg+xml" href="icon-fullscreen.svg" />
<style type="text/css">
#map {
width: 700px;
max-width: 100%;
height: 433px;
}
</style>
<script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
<script src="Control.FullScreen.js"></script>
</head>
<body>
<div id="map"></div>
<div style="margin: 1em 0 0">
<span style="padding: 0 0.25em 0 0">Demonstration of 'toggleFullscreen' method</span>
<button type="button" onclick="toggleFullscreen();">Show map in fullscreen mode</button>
</div>
<script>
const base = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
maxZoom: 19,
subdomains: 'abcd',
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>'
});
let map = L.map('map', {
layers: [base],
tap: false, // ref https://github.com/Leaflet/Leaflet/issues/7255
center: new L.LatLng(48.5, -4.5),
zoom: 5,
fullscreenControl: true,
fullscreenControlOptions: {
// optional
title: 'Show me the fullscreen!',
titleCancel: 'Exit fullscreen mode'
}
});
// detect fullscreen toggling
map.on('enterFullscreen', function () {
if (window.console) window.console.log('enterFullscreen');
});
map.on('exitFullscreen', function () {
if (window.console) window.console.log('exitFullscreen');
});
// toggler into fullscreen mode
const toggleFullscreen = function () {
map.toggleFullscreen();
};
</script>
</body>
</html>