I have to create the leaflet map where I have used the angular formly .
and I have created the custom component for leaflet map as
leaflet.component.ts
import { Component, OnInit } from '@angular/core';
declare let L: any
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class LeafletComponent implements OnInit {
constructor() {
}
ngOnInit() {
const map = L.map('map').setView([51.509865,-0.118092], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
}
}
And I ahve included the css and html for the above map in main Angular formly component as
.formly.component.html
<mat-tab label="AREAS COVERED">
<div id="map"></div>
</mat-tab>
.formly.component.css
div{
height: 500px;
width: 500px;
}
and In app.module.ts I have added the custom component as
app.module.ts
import { LeafletComponent } from './ang-formly/ang-formly/leaflet-component';
@NgModule({
declarations: [
AppComponent,
LeafletComponent,
Now the Map is not loading Can anyone help me how to add this custom component in angular formly