I have a problem with using the Leaflet features in my Angular component

i want to use leaflet in my project with all of this library features. this is my code which shows the map with distance feature but draw and easyprint features does not work and there is no anything representing these tools in the map component. if you can help me to have a map component with all features I would be grateful for any helps.

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
import 'leaflet-draw';
import 'leaflet-measure'; // For measuring distances
import 'leaflet-easyprint'; // For exporting the map as an image

// Extend Leaflet control types for Draw
declare module 'leaflet' {

namespace control {
function measure(options?: any): L.Control;
function locate(options?: any): L.Control;
}
}
@Component({
selector: 'app-leaflet-map',
templateUrl: './leaflet-map.component.html',
styleUrls: ['./leaflet-map.component.css'], // Fix typo: "styleUrl" -> "styleUrls"
})
export class LeafletMapComponent implements OnInit {
private map!: L.Map;

ngOnInit(): void {
this.initMap();
}
private initMap(): void {
this.map = L.map('map', {
zoomControl: false,
}).setView([35.6892, 51.3890], 13);

const baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© OpenStreetMap contributors',
}).addTo(this.map);

L.control.zoom({ position: 'topright' }).addTo(this.map);
L.control.scale({ position: 'bottomleft' }).addTo(this.map);

const marker = L.marker([35.6892, 51.3890], { draggable: true })
.addTo(this.map)
.bindPopup('Tehran, Iran')
.openPopup();

const satelliteLayer = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© OpenStreetMap contributors | Satellite',
});

L.control.layers(
{ Default: baseLayer, Satellite: satelliteLayer },
undefined,
{ position: 'topright' }
).addTo(this.map);

(L.control as any)
.locate({
position: 'topright',
strings: { title: 'Show my location' },
setView: 'once',
})
.addTo(this.map);

this.map.on('click', (e: L.LeafletMouseEvent) => {
const { lat, lng } = e.latlng;
L.popup()
.setLatLng(e.latlng)
.setContent(`You clicked the map at:<br>Lat: ${lat.toFixed(4)}<br>Lng: ${lng.toFixed(4)}`)
.openOn(this.map);
});

const drawControl = new L.Control.Draw({
position: 'topright',
draw: {
polyline: {}, // Polyline drawing options
polygon: {}, // Polygon drawing options
rectangle: {}, // Rectangle drawing options
circle: {}, // Circle drawing options
marker: {}, // Marker drawing options
},
});
this.map.addControl(drawControl);

this.map.on(L.Draw.Event.CREATED, (e: any) => {
const layer = e.layer;
this.map.addLayer(layer);
});

(L.control as any)
.measure({
position: 'topright',
primaryLengthUnit: 'meters',
primaryAreaUnit: 'sqmeters',
})
.addTo(this.map);

(L as any).easyPrint({
title: 'Export Map',
position: 'topright',
filename: 'LeafletMap',
}).addTo(this.map);
}

}

Continue reading...