website pic
one of my colleagues suggested to use “mapbox” and I’ve searched a lot but I couldn’t even find the npm code for installing it, any other suggestions?

this is the .ts code

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
@Component({
  selector: 'app-leaflet-map',
  standalone: true,
  imports: [],
  templateUrl: './leaflet-map.component.html',
  styleUrl: './leaflet-map.component.css'
})
export class LeafletMapComponent implements OnInit {


  ngOnInit(): void {
    this.configMap();
  }

  //variables
  map: any;

  //configMap
  configMap(){
     this.map=L.map('map', {
      center: [51.505, -0.09],
      zoom: 8
     });

     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(this.map);
  }
}

and this is the .css code:

.map-container{
    height: 400px;
    #map{
        height: 100%;
    }
}