Leaflet fullscreen button not showing-CodePudding

I am currently learning TypeScript by working on a small project.

I had an issue with Google free trial, so i switched to Leaflet.

My question is how to display the full screen button in the map, here are code samples.

in my CustomMap.ts:

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();
    }
}

In my index.ts:

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)

Here is index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
</head>
<body>

    <div id="map" style="height:500px; width:500px;"></div>

    <script src="/src/index.ts">
    </script>
</body>
</html>

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)

CodePudding user response：

There is no built-in Fullscreen button in Leaflet unfortunately.

You can add this feature with a plugin, see https://leafletjs.com/plugins.html#fullscreen-controls

CodePudding user response：

Not in typescript but see maybe this solution worked. I am using this plugin Leaflet.fullscreen Here I have a way to use react-leaflet-examples and below all the code:

import { MapContainer, TileLayer } from 'react-leaflet';
import 'leaflet-fullscreen/dist/Leaflet.fullscreen.js';
import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
import tileLayer from '../util/tileLayer';

const center = [52.22977, 21.01178];

const MapWrapper = () => {
  return (
    <MapContainer
      fullscreenControl={true}
      center={center}
      zoom={13}
      scrollWheelZoom={false}
    >

      <TileLayer {...tileLayer} />

    </MapContainer>
  )
}

export default MapWrapper;