title: Leaflet fullscreen button not showing
body: <p>I am currently learning TypeScript by working on a small project.</p>
  <p>I had an issue with Google free trial, so i switched to Leaflet.</p>
  <p>My question is how to display the full screen button in the map, here are code samples.</p>
  <p>in my CustomMap.ts:</p>
  <pre class="lang-ts prettyprint-override"><code>import * as L from 'leaflet';
  import { User } from './User';
  import { Company } from './Company';
  
  
  //instructions to every other class
  //on how they can be an argument to 'addMarker'
  interface Mappable {
      location: {
          lat: number;
          lng: number;
      }
  }
  
  export class CustomMap {
      private leafletMap: L.Map;
  
      constructor(mapDiv: HTMLElement) {
          this.leafletMap = new L.Map(mapDiv, {
              center: [40.731253, -73.996139],
              zoom: 2,
              fullscreenControl: true,
              fullscreenControlOptions: {
                  position: 'topleft'
              }
            })
  
            
          var layer = new L.TileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                  maxZoom: 18,
                  id: 'mapbox/streets-v11',
                  tileSize: 512,
                  zoomOffset: -1
              }).addTo(this.leafletMap);
      }
  
      addMarker(mappable: Mappable): void {
          let marker = new L.Marker(
              L.latLng(mappable.location.lat, mappable.location.lng)
              )
          marker.addTo(this.leafletMap).bindPopup('').openPopup();
      }
  }
  </code></pre>
  <p>In my index.ts:</p>
  <pre class="lang-ts prettyprint-override"><code>import { User } from './User';
  import { Company } from './Company';
  
  import L from 'leaflet';
  import { CustomMap } from './CustomMap'
  
  const user = new User();
  
  const company = new Company();
  
  const customMap1 = new CustomMap(document.querySelector('#map'));
  
  
  customMap1.addMarker(user)
  customMap1.addMarker(company)
  </code></pre>
  <p>Here is index.html:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.7.1/dist/leaflet.css&quot; integrity=&quot;sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==&quot; crossorigin=&quot;&quot;/&gt;
      &lt;script src=&quot;https://unpkg.com/leaflet@1.7.1/dist/leaflet.js&quot; integrity=&quot;sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==&quot; crossorigin=&quot;&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id=&quot;map&quot; style=&quot;height:500px; width:500px;&quot;&gt;&lt;/div&gt;
  
      &lt;script src=&quot;/src/index.ts&quot;&gt;
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>So basically this code generates a map with the zoom in + zoom out button, but no fullscreen button (by the way I use parcel-bundler)</p>