npm i @ng-bootstrap/ng-bootstrap

<label for="typeahead-basic">Search for a state:</label>
<input id="typeahead-basic" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" />

// ts files

import { Component } from '@angular/core';
import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
import { Observable, OperatorFunction } from 'rxjs';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
import { FormsModule } from '@angular/forms';
import { JsonPipe } from '@angular/common';

const states = [
	'Alabama',
	'Alaska',
	'American Samoa',
	'Arizona',
	'Arkansas',
	'California',
	'Colorado',
	'Connecticut',
	'Delaware',
	'District Of Columbia',
	'Federated States Of Micronesia',
	'Florida',
	'Georgia',
	'Guam',
	'Hawaii',
	'Idaho',
	'Illinois',
	'Indiana',
	'Iowa',
	'Kansas',
	'Kentucky',
	'Louisiana',
	'Maine',
	'Marshall Islands',
	'Maryland',
	'Massachusetts',
	'Michigan',
	'Minnesota',
	'Mississippi',
	'Missouri',
	'Montana',
	'Nebraska',
	'Nevada',
	'New Hampshire',
	'New Jersey',
	'New Mexico',
	'New York',
	'North Carolina',
	'North Dakota',
	'Northern Mariana Islands',
	'Ohio',
	'Oklahoma',
	'Oregon',
	'Palau',
	'Pennsylvania',
	'Puerto Rico',
	'Rhode Island',
	'South Carolina',
	'South Dakota',
	'Tennessee',
	'Texas',
	'Utah',
	'Vermont',
	'Virgin Islands',
	'Virginia',
	'Washington',
	'West Virginia',
	'Wisconsin',
	'Wyoming',
];

@Component({
	selector: 'ngbd-typeahead-basic',
	imports: [NgbTypeaheadModule, FormsModule, JsonPipe],
	templateUrl: './typeahead-basic.html',
	styles: `.form-control { width: 300px; }`,
})

export class NgbdTypeaheadBasic {
	model: any;

	search: OperatorFunction = (text$: Observable) =>
		text$.pipe(
			debounceTime(200),
			distinctUntilChanged(),
			map((term) =>
				term.length < 2 ? [] : states.filter((v) => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10),
			),
		);
}

npm i @ng-bootstrap/ng-bootstrap

 // table.html
<form>
	<div class="mb-3 row">
		<label for="table-complete-search" class="col-xs-3 col-sm-auto col-form-label">Full text search:</label>
		<div class="col-xs-3 col-sm-auto">
			<input
				id="table-complete-search"
				type="text"
				class="form-control"
				name="searchTerm"
				[(ngModel)]="service.searchTerm"
			/>
		</div>
		@if (service.loading$ | async) {
			<span class="col col-form-label">Loading...</span>
		}
	</div>

	<table class="table table-striped">
		<thead>
			<tr>
				<th scope="col">#</th>
				<th scope="col" sortable="name" (sort)="onSort($event)">Country</th>
				<th scope="col" sortable="area" (sort)="onSort($event)">Area</th>
				<th scope="col" sortable="population" (sort)="onSort($event)">Population</th>
			</tr>
		</thead>
		<tbody>
			@for (country of countries$ | async; track country.id) {
				<tr>
					<th scope="row">{{ country.id }}</th>
					<td>
						<img
							[src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag"
							[alt]="'The flag of ' + country.name"
							class="me-2"
							style="width: 20px"
						/>
						<ngb-highlight [result]="country.name" [term]="service.searchTerm" />
					</td>
					<td><ngb-highlight [result]="country.area | number" [term]="service.searchTerm" /></td>
					<td><ngb-highlight [result]="country.population | number" [term]="service.searchTerm" /></td>
				</tr>
			} @empty {
				<tr>
					<td colspan="4" style="text-align: center">No countries found</td>
				</tr>
			}
		</tbody>
	</table>

	<div class="d-flex justify-content-between p-2">
		<ngb-pagination [collectionSize]="(total$ | async)!" [(page)]="service.page" [pageSize]="service.pageSize">
		</ngb-pagination>

		<select class="form-select" style="width: auto" name="pageSize" [(ngModel)]="service.pageSize">
			<option [ngValue]="2">2 items per page</option>
			<option [ngValue]="4">4 items per page</option>
			<option [ngValue]="6">6 items per page</option>
		</select>
	</div>
</form>
                              

 // table.ts
  import { AsyncPipe, DecimalPipe } from '@angular/common';
  import { Component, inject, viewChildren } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  
  import { NgbHighlight, NgbPagination } from '@ng-bootstrap/ng-bootstrap';
  import { Observable } from 'rxjs';
  
  import {
    NgbdSortableHeaderDirective,
    SortEvent,
  } from '../../../shared/directives/sortable.directive';
  import { Table } from '../../../shared/interface/table';
  import { TableService } from '../../../shared/services/tables/tables.service';
  
  @Component({
    selector: 'app-data-table',
    templateUrl: './data-table.html',
    styleUrls: ['./data-table.scss'],
    providers: [TableService, DecimalPipe],
    imports: [FormsModule, NgbdSortableHeaderDirective, NgbHighlight, NgbPagination, AsyncPipe],
  })
  export class DataTable {
    service = inject(TableService);
  
    basicTable$: Observable;
    total$: Observable;
  
    readonly headers = viewChildren(NgbdSortableHeaderDirective);
  
    constructor() {
      const service = this.service;
      this.basicTable$ = service.basicTable$;
      this.total$ = service.total$;
    }
  
    onSort({ column, direction }: SortEvent) {
      this.headers().forEach(header => {
        if (header.sortable() !== column) {
          header.currentDirection.set('');
        }
      });
  
      this.service.sortColumn = column;
      this.service.sortDirection = direction;
    }
  }
  

 // table service
  import { DecimalPipe } from '@angular/common';
import { Injectable, PipeTransform, inject } from '@angular/core';

import {
  BehaviorSubject,
  of,
  Observable,
  Subject,
  tap,
  debounceTime,
  switchMap,
  delay,
} from 'rxjs';

import { TABLEDATA } from '../../data/table/tableData';
import { SortColumn, SortDirection } from '../../directives/sortable.directive';
import { Table } from '../../interface/table';

interface SearchResult {
  basicTable: Table[];
  total: number;
}

interface State {
  page: number;
  pageSize: number;
  searchTerm: string;
  sortColumn: SortColumn;
  sortDirection: SortDirection;
}

const compare = (v1: string | number, v2: string | number) => (v1 < v2 ? -1 : v1 > v2 ? 1 : 0);

function sort(basicTable: Table[], column: SortColumn, direction: string): Table[] {
  if (direction === '' || column === '') {
    return basicTable;
  } else {
    return [...basicTable].sort((a, b) => {
      const res = compare(a[column], b[column]);
      return direction === 'asc' ? res : -res;
    });
  }
}

function matches(table: Table, term: string, pipe: PipeTransform) {
  return (
    table.name.toLowerCase().includes(term.toLowerCase()) ||
    pipe.transform(table.invoice).includes(term) ||
    table.office.toLowerCase().includes(term.toLowerCase())
  );
}
@Injectable({
  providedIn: 'root',
})
export class TableService {
  private pipe = inject(DecimalPipe);

  private _loading$ = new BehaviorSubject(true);
  private _search$ = new Subject();
  private _tables$ = new BehaviorSubject([]);
  private _total$ = new BehaviorSubject(0);

  private _state: State = {
    page: 1,
    pageSize: 4,
    searchTerm: '',
    sortColumn: '',
    sortDirection: '',
  };

  constructor() {
    this._search$
      .pipe(
        tap(() => this._loading$.next(true)),
        debounceTime(200),
        switchMap(() => this._search()),
        delay(200),
        tap(() => this._loading$.next(false)),
      )
      .subscribe(result => {
        this._tables$.next(result.basicTable);
        this._total$.next(result.total);
      });
    this._search$.next();
    console;
  }

  get basicTable$() {
    return this._tables$.asObservable();
  }
  get total$() {
    return this._total$.asObservable();
  }
  get loading$() {
    return this._loading$.asObservable();
  }
  get page() {
    return this._state.page;
  }
  get pageSize() {
    return this._state.pageSize;
  }
  get searchTerm() {
    return this._state.searchTerm;
  }

  set page(page: number) {
    this._set({ page });
  }
  set pageSize(pageSize: number) {
    this._set({ pageSize });
  }
  set searchTerm(searchTerm: string) {
    this._set({ searchTerm });
  }
  set sortColumn(sortColumn: SortColumn) {
    this._set({ sortColumn });
  }
  set sortDirection(sortDirection: SortDirection) {
    this._set({ sortDirection });
  }

  private _set(patch: Partial) {
    Object.assign(this._state, patch);
    this._search$.next();
  }

  private _search(): Observable {
    const { sortColumn, sortDirection, pageSize, page, searchTerm } = this._state;

    // 1. sort
    let basicTable = sort(TABLEDATA, sortColumn, sortDirection);

    // 2. filter
    basicTable = basicTable.filter(country => matches(country, searchTerm, this.pipe));

    const total = basicTable.length;

    // 3. paginate
    basicTable = basicTable.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
    return of({ basicTable, total });
  }
}

 // directives
    import { Directive, HostBinding, HostListener, input, output, signal } from '@angular/core';

    import { Table } from '../interface/table';
    
    export type SortColumn = keyof Table | '';
    export type SortDirection = 'asc' | 'desc' | '';
    const rotate: { [key: string]: SortDirection } = { asc: 'desc', desc: '', '': 'asc' };
    
    export interface SortEvent {
      column: SortColumn;
      direction: SortDirection;
    }
    @Directive({
      selector: 'th[sortable]',
      host: {
        '[class.asc]': 'direction === "asc"',
        '[class.desc]': 'direction === "desc"',
        '(click)': 'rotate()',
      },
    })
    export class NgbdSortableHeaderDirective {
      readonly sortable = input('');
      readonly direction = input(''); // initial direction from parent
    
      public currentDirection = signal(this.direction());
    
      readonly sort = output();
    
      @HostBinding('class.asc')
      get isAsc() {
        return this.currentDirection() === 'asc';
      }
    
      @HostBinding('class.desc')
      get isDesc() {
        return this.currentDirection() === 'desc';
      }
    
      // HostListener to handle clicks
      @HostListener('click')
      rotateColumn() {
        this.currentDirection.set(rotate[this.currentDirection()]);
        this.sort.emit({ column: this.sortable(), direction: this.currentDirection() });
      }
    }
    

 // data
export interface Table {
  id: number;
  img: string;
  name: string;
  position: string;
  office: string;
  credit: string;
  invoice: string;
  startDate: string;
  salary: string;
  Budget: string;
  ActionClass: string;
  iconClass: string;
  iconColor: string;
}


export const TABLEDATA: Table[] = [
  {
    id: 1,
    img: 'assets/images/user/1.jpg',
    name: 'Tiger Nixon',
    position: 'System Architect',
    office: 'Hewlett packard',
    invoice: '#PX0101',
    startDate: '2022/04/27',
    Budget: '$3142.00',
    salary: 'High',
    credit: '4.3%',
    ActionClass: 'badge-light-primary',
    iconClass: 'icofont-arrow-up',
    iconColor: 'success',
  },
  {
    id: 2,
    img: 'assets/images/user/2.jpg',
    name: 'Garrett Winters',
    position: 'Maintenace service',
    office: 'Apple Inc.',
    invoice: '#RF304f',
    startDate: '2022/04/22',
    Budget: '$1234.00',
    salary: 'Urgent',
    credit: '5.6%',
    ActionClass: 'badge-light-danger',
    iconClass: 'icofont-arrow-up',
    iconColor: 'success',
  },
  {
    id: 3,
    img: 'assets/images/user/3.jpg',
    name: 'Ashton Cox',
    position: 'Junior Technical Author	',
    office: 'Edinburgh',
    invoice: '#DNJ480',
    startDate: '2022/05/21',
    Budget: '$2345.00',
    salary: 'Low',
    credit: '2.4%',
    ActionClass: 'badge-light-success',
    iconClass: 'icofont-arrow-down',
    iconColor: 'danger',
  },
  {
    id: 4,
    img: 'assets/images/user/6.jpg',
    name: 'Brielle Williams',
    position: 'Senior Javascript Developer',
    office: 'Microsoft',
    invoice: '#G189d0',
    startDate: '2022/03/09',
    Budget: '$7689.00',
    salary: 'Medium',
    credit: '2.2%',
    ActionClass: 'badge-light-warning',
    iconClass: 'icofont-arrow-down',
    iconColor: 'danger',
  },
  {
    id: 5,
    img: 'assets/images/user/7.jpg',
    name: 'Tiger Nixon',
    position: 'Accountant',
    office: 'Tata Co.',
    invoice: '#31D8FFS',
    startDate: '2022/04/10',
    Budget: '$2145.00',
    salary: 'High',
    credit: '5.8%',
    ActionClass: 'badge-light-primary',
    iconClass: 'icofont-arrow-up',
    iconColor: 'success',
  },
  {
    id: 6,
    img: 'assets/images/user/14.png',
    name: 'Michael Morris',
    position: 'General service',
    office: 'Google Inc.',
    invoice: '#G189D4',
    startDate: '2022/06/12',
    Budget: '$2578.00',
    salary: 'Urgent',
    credit: '6.4%',
    ActionClass: 'badge-light-danger',
    iconClass: 'icofont-arrow-up',
    iconColor: 'success',
  },
  {
    id: 7,
    img: 'assets/images/user/10.jpg',
    name: 'Kevin Dawson',
    position: 'System Architect',
    office: 'Mindtree Ltd.',
    invoice: '#PX2101',
    startDate: '2022/04/25',
    Budget: '$6538.00',
    salary: 'Low',
    credit: '0.3%',
    ActionClass: 'badge-light-sucess',
    iconClass: 'icofont-arrow-down',
    iconColor: 'danger',
  },
  {
    id: 8,
    img: 'assets/images/user/12.png',
    name: 'Thomas Taylor',
    position: 'System Architect',
    office: 'Wipro Ltd.',
    invoice: '#px0101',
    startDate: '2022/06/09',
    Budget: '$2121.00',
    salary: 'Urgent',
    credit: '7.3%',
    ActionClass: 'badge-light-danger',
    iconClass: 'icofont-arrow-up',
    iconColor: 'success',
  },
  {
    id: 9,
    img: 'assets/images/user/14.png',
    name: 'Carolyn Jones',
    position: 'General service',
    office: 'Edinburgh',
    invoice: '#G5384H',
    startDate: '2022/01/11',
    Budget: '$9546.00',
    salary: 'High',
    credit: '6.3%',
    ActionClass: 'badge-light-primary',
    iconClass: 'icofont-arrow-up',
    iconColor: 'success',
  },
  {
    id: 10,
    img: 'assets/images/user/6.jpg',
    name: 'Glen Matney',
    position: 'System Architect',
    office: 'Mphasis Ltd',
    invoice: '#E5384H',
    startDate: '2022/04/02',
    Budget: '$4587.00',
    salary: 'Medium',
    credit: '3.3%',
    ActionClass: 'badge-light-warning',
    iconClass: 'icofont-arrow-down',
    iconColor: 'danger',
  },
  {
    id: 11,
    img: 'assets/images/user/9.jpg',
    name: 'Charles Kubik',
    position: 'System Architect',
    office: 'Infosys Ltd.',
    invoice: '#JK384H',
    startDate: '2022/05/01',
    Budget: '$3140.00',
    salary: 'Low',
    credit: '2.3%',
    ActionClass: 'badge-light-success',
    iconClass: 'icofont-arrow-down',
    iconColor: 'danger',
  },
  {
    id: 12,
    img: 'assets/images/user/10.jpg',
    name: 'Herbert Stokes',
    position: 'General service',
    office: 'Edinburgh',
    invoice: '#HY5384H',
    startDate: '2022/07/04',
    Budget: '$3014.00',
    salary: 'Low',
    credit: '1.3%',
    ActionClass: 'badge-light-success',
    iconClass: 'icofont-arrow-down',
    iconColor: 'danger',
  },
  {
    id: 13,
    img: 'assets/images/user/11.png',
    name: 'Mary Cousar',
    position: 'System Architect',
    office: 'Infosys.',
    invoice: '#KH384H',
    startDate: '2022/04/06',
    Budget: '$2014.00',
    salary: 'Urgent',
    credit: '5.3%',
    ActionClass: 'badge-light-danger',
    iconClass: 'icofont-arrow-up',
    iconColor: 'success',
  },
];
          

npm i ng2-google-charts

// google-chart.html //
                                 
<google-chart [data]="pieChart1"></google-chart>
                              

// google-chart.ts //
                                 
import { Component } from '@angular/core';
import * as chartData from '../../../shared/data/chart/google-chart';
import { Ng2GoogleChartsModule } from 'ng2-google-charts';

@Component({
    selector: 'app-google',
    templateUrl: './google.html',
    styleUrls: ['./google.scss'],
    standalone: true,
    imports: [Ng2GoogleChartsModule]
})
export class Google {

  constructor() { }

  // Pie Chart
  public pieChart1 = chartData.pieChart1

}
// google-chart-data.ts //

let primary_color = localStorage.getItem('primary_color') || '#7e37d8';
let secondary_color = localStorage.getItem('secondary_color') || '#fe80b2';

// Pie Chart 1
export var pieChart1 = {
  chartType: 'PieChart'
  dataTable: [
    ['Task', 'Hours per Day'],
    ['Work', 5],
    ['Eat', 10],
    ['Commute', 15],
    ['Watch TV', 20],
    ['Sleep', 25]
  ],
  options: {
    title: 'My Daily Activities',
    width: '100%',
    height: 400,
    colors: ["#06b5dd", primary_color, secondary_color, "#80cf00", "#FF5370"],
    backgroundColor: 'transparent'
  },
};
 
                                 
                              

npm i ng2-charts

//chartjs.html//
<canvas baseChart class="chart"
baseChart
class="chart"
[data]="barChart"
[datasets]="barChart.datasets"
[options]="barChart.barOptions"
">
</canvas>
                              

//chartjs.ts//
  import { Component } from '@angular/core';

  import { BarController, BarElement, CategoryScale, LinearScale } from 'chart.js';
  import { BaseChartDirective, provideCharts } from 'ng2-charts';
  
  import { barChart } from '../../../../shared/data/charts/chartsjs';
  
  @Component({
    selector: 'app-bars-chart',
    templateUrl: './bars-chart.html',
    styleUrls: ['./bars-chart.scss'],
    imports: [BaseChartDirective],
    providers: [
      provideCharts({
        registerables: [BarController, CategoryScale, LinearScale, BarElement],
      }),
    ],
  })
  export class BarsChart {
    public barChart = barChart;
  } 

 // chartjs-data.ts //
 ;
 
  import { ChartDataset, ChartOptions, ChartType } from 'chart.js';

 let primary_color = localStorage.getItem('primary_color') || 'var(--theme-default)';
 let secondary_color = localStorage.getItem('secondary_color') || 'var(--theme-secondary)';

 let primary_color =  '#2B5F60';
 let secondary_color = '#C06240';
 
 export const barChart = {
   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
   responsive: false,
   datasets: [
     {
       label: 'My First dataset',
       backgroundColor: 'rgba(43, 94, 94, 0.4)',
       borderColor: primary_color,
       borderWidth: 2,
       data: [35, 59, 80, 81, 56, 55, 40],
     },
     {
       label: 'My Second dataset',
       borderColor: secondary_color,
       backgroundColor: 'rgba(192, 98, 64, 0.4)',
       borderWidth: 2,
       data: [28, 48, 40, 19, 86, 27, 90],
     },
   ],
   barOptions: [
     {
       scaleBeginAtZero: true,
       scaleShowGridLines: true,
       scaleGridLineColor: 'rgba(0,0,0,0.1)',
       scaleGridLineWidth: 1,
       scaleShowHorizontalLines: true,
       scaleShowVerticalLines: true,
       barShowStroke: true,
       barStrokeWidth: 2,
       barValueSpacing: 5,
       barDatasetSpacing: 1,
     },
   ],
 };
                              

 app.config.ts
import { HttpClient } from '@angular/common/http';
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideRouter } from '@angular/router';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
import { routes } from './app.routes';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAnimations(),
    provideCharts(withDefaultRegisterables()),
 
  ]
};

                              

npm i ng-chartist

// chartist.html
      <x-chartist [configuration]="chart1" ></x-chartist>
                              

// chartist.html
import { Component } from '@angular/core';
import * as chartData from '../../../../shared/data/charts/chartist';
import { ChartistModule } from 'ng-chartist';

@Component({
    selector: 'app-advanced-smil',
    templateUrl: './advanced-smil.html',
    styleUrls: ['./advanced-smil.scss'],
    imports: [ChartistModule]
})

export class AdvancedSmil {

  public chart1 = chartData.chart1;

}


// chartist-data.ts

import * as Chartist from 'chartist';
import { BarChartConfiguration, LineChartConfiguration, PieChartConfiguration } from 'ng-chartist

let primary_color = localStorage.getItem('primary_color') || '#2B5F60';
let secondary_color = localStorage.getItem('secondary_color') || '#C06240';

export var chart1: LineChartConfiguration = {
  type: 'Line',
  data: {
    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
    series: [
      [12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
      [4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
      [5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
      [3, 4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3],
    ],
  },
  options: {
    low: 0,
    showArea: false,
    fullWidth: true,
    height: 250,
  },
};

                              

npm i @bluehalo/ngx-leaflet

// leaflet-map.html

<div class="map-height" leaflet [leafletOptions]="options1"></div>
                              

// leaflet-map.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';

import { LeafletModule } from '@bluehalo/ngx-leaflet';
import * as L from 'leaflet';

@Component({
  selector: 'app-leaflet-map',
  templateUrl: './leaflet-map.html',
  styleUrls: ['./leaflet-map.scss'],
  imports: [CommonModule, LeafletModule],
})
export class LeafletMap {
  options1 = {
    layers: [
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '...',
      }),
    ],
    zoom: 5,
    center: L.latLng(46.879966, -121.726909),
  };

  //Second map
  layersControl = {
    baseLayers: {
      'Open Street Map': L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '...',
      }),
      'Open Cycle Map': L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '...',
      }),
    },
    overlays: {
      'Big Circle': L.circle([46.95, -122], { radius: 5000 }),
      'Big Square': L.polygon([
        [46.8, -121.55],
        [46.9, -121.55],
        [46.9, -121.7],
        [46.8, -121.7],
      ]),
    },
  };

  options2 = {
    layers: [
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 50,
        attribution: '...',
      }),
    ],
    zoom: 5,
    center: L.latLng(46.879966, -121.726909),
  };

  //Third map
  map: L.Map;
  options3 = {
    layers: [
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '',
      }),
    ],
    zoom: 7,
    center: L.latLng(47.482023, -1),
  };

  //Forth map
  map4: L.Map;
  homeCoords = {
    lat: 23.810331,
    lon: 90.412521,
  };

  popupText = 'Some popup text';

  markerIcon = {
    icon: L.icon({
      iconSize: [25, 41],
      iconAnchor: [10, 41],
      popupAnchor: [2, -40],
      iconUrl: 'assets/images/marker-icon.png',
      shadowUrl: 'assets/images/marker-shadow.png',
    }),
  };

  options4 = {
    layers: [
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '',
      }),
    ],
    zoom: 5,
    center: L.latLng(this.homeCoords.lat, this.homeCoords.lon),
  };

  initMarkers() {
    const popupInfo = `${this.popupText}`;
    L.marker([this.homeCoords.lat, this.homeCoords.lon], this.markerIcon)
      .addTo(this.map4)
      .bindPopup(popupInfo);
  }

  onMapReady4(map: L.Map) {
    this.map4 = map;
    this.initMarkers();
  }
}