How to Add Full Screen Control to OpenStreetMap using JavaScript

Full Screen Control feature helps to view maps in full-screen mode. The full-screen control button is placed at the corner of the map, it allows you to go full-screen or exit full-screen.

There are some third-party plugins available to extend OpenStreetMap functionality with Leaflet. In this example script, we will use the leaflet.fullscreen plugin to add full screen control in OpenStreetMap using JavaScript.

The following code embeds OpenStreetMap with full screen control in HTML using JavaScript.

Include the JS (Control.FullScreen.js) and CSS (Control.FullScreen.css) library files of the leaflet.fullscreen plugin:

<link rel="stylesheet" href="leaflet.fullscreen/Control.FullScreen.css" />
<script src="leaflet.fullscreen/Control.FullScreen.js"></script>

Add the fullscreen control button to the map:

var mymap = L.map('mapWrap', {
    fullscreenControl: true,
    fullscreenControlOptions: {
        position: 'topright'
    }
});

You can download the leaflet.fullscreen library files from here.