0

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

user1
  • 1
  • I have explained it in this page: https://stackoverflow.com/questions/67667646/how-to-create-the-leaflet-map-in-angular-formly/67668219#67668219 – Elham Dabiri May 31 '21 at 08:49
  • Yes I have create as You mentiond but facing the problem with how to include in the main (formly component).Can you help me how to include this leaflet component in main formly component – user1 May 31 '21 at 08:57
  • I explained including it completely. Would you mind you explaining your problem clearly? – Elham Dabiri May 31 '21 at 09:02
  • I have created the formly component with tabs each tab containing the 3 tabs containing the form fields and fourth tab has to show the map .that is the way In fomly main component I have placed the div from custom leaflet component data as
    . But it is not loading the data     – user1 May 31 '21 at 09:07
  • I add Styles to that link . Please add each code part to your project , step by step. – Elham Dabiri May 31 '21 at 09:38
  • But the main formly Html (which shows all the tabs for info) I have to integrate that map Id right then only I will see the map in fourth tab of fromly and the HTML for formly component is
    . is it right or correct me If I am wrong     – user1 May 31 '21 at 10:31
  • I can not understand where is your problem exactly :( – Elham Dabiri May 31 '21 at 14:52

0 Answers0