How to display leaflet map in framework7?

Question

I’m using Framework7 v. 5.5.1 and Leaflet 1.9.3 (https://leafletjs.com/),

I couldn’t show the map correctly.

I have to use the map on two different pages.

On the first page, I have to view it in full screen, however, the map goes beyond the screen, and I can’t see the right side and the bottom side.

There seem to be some CSS rules against f7’s CSS

on: {
  pageInit: function(e, page) {

    var map = L.map('map').setView([48.864716, 2.349014], 8);
  }
},

#map {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
}

<div class="page-content">
  <div class="row">
    <div class=" col-100 medium-100 large-50">
      <div class="col">
        <div id="map"></div>
      </div>
    </div>
  </div>
</div>

Answer 1

You Leaflet.js related code is ok as you can see in the screenshot and the demo below:

And the Framework7 pageInit is just not supported here by the Stackoverflow demo code, so that method is not called here at the web page.

var map = L.map('map').setView([48.864716, 2.349014], 8);
 
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
}).addTo(map);

var marker = L.marker([48.864716, 2.349014])
  .addTo(map)
  .bindPopup('Your Leaflet.js code is ok')
  .openPopup();

#map { 
    overflow: hidden;
    position: fixed;
    height: 100%;
    width: 100%;
}

<div class="page-content">
    <div class="row">
        <div class="col-100 medium-100 large-50">
           <div class="col">
                 <div id="map"></div>
             </div>
        </div>     
   </div>
</div>

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.min.js"></script>