eBOS R&D leaflet maps Docs

Bootstrap 5 Modal map

  var map = null; // Initialize map variable

  // Function to initialize the map
  function initMap() {
    map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    L.marker([51.5, -0.09]).addTo(map)
      .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
      .openPopup();
  }

  // Show the map when the modal is shown
  $('#mapModal').on('shown.bs.modal', function () {
    if (!map) {
      initMap();
    }
    map.invalidateSize(); // Update map size
  });