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:
'© <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';