I am creating an angular application and i want it to display a map using leaflet and angular, however when implementing i am encountering the error:

ReferenceError: L is not defined

the typescript has all of my map implementation

import { AfterViewInit, Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-moc-report',
  templateUrl: './moc-report.component.html',
  styleUrls: ['./moc-report.component.css'],
})
export class MocReportComponent implements OnInit, AfterViewInit 
{
 
  private map;
  private initMap(): void {
    this.map = L.map('map', {
      center: [10.536421, -61.311951],
      zoom: 8,
    });

    const tiles = L.tileLayer(
      'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      {
        maxZoom: 18,
        minZoom: 3,
        attribution:
          '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      }
    );

    tiles.addTo(this.map);
  }


  constructor(
    private router: Router,
    private fb: FormBuilder,
    private http: HttpClient
  ) {
    
  }

  ngAfterViewInit(): void {
    this.initMap();
    this.mapService.getMarkers(this.map);
  }
  

    onMapClick(e) {
    this.L.popup()
        .setLatLng(e.latlng)
        .setContent("You clicked the map at "   e.latlng.toString())
        .openOn(this.map);
  }

   this.map.on('click', this.onMapClick)

  ngOnInit(): void {
    
  }
}

Im not quite sure what im doing wrong as it is the first time working with leaflet and angular. thank you

CodePudding user response：

You did not import leaflet, try something like:

import * as L from 'leaflet'

CodePudding user response：

You are missing:

import * as L from 'leaflet';