Leaflet Fullscreen

Go fullscreen by sizing the div in CSS. You must also size the html and body elements, setting each of them to 100% width and height

<html>
<head>
   <title>Leaflet Fullscreen Example</title>
   
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		
   <style>
   html, body, #map {
      height:100%;
      width:100%;
      padding:0px;
      margin:0px;
   } 
   </style>
   
   <link rel="stylesheet" href="leaflet/leaflet.css" />
   
   
   <script src="leaflet/leaflet.js"></script>
   
   <script language="javascript">
      function init() {
         var map = new L.Map('map');                       
              
      	 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
            maxZoom: 18
         }).addTo(map);
         map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text.

var london = new L.LatLng(51.505, -0.09); 
         map.setView(london, 13);
      }
   </script>
   
</head>
<body onLoad="javascript:init();">
   <div id="map"></div>
   
</body>                                                                                                                          
</html>

view directly

Home
Blog
About
Maps
Other
Contact

Harry Wood

Leaflet Fullscreen