How to display leaflet map in f7?

Questions
1

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

I couldn’t show the map correctly.

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

Schermata 2023-04-22 alle 10.00.28
Schermata 2023-04-22 alle 10.00.281920×1323 189 KB

The second page, is divided into two columns, and I have to show the map in the second column. Again, I can not set the size.

Thank you in advance.

Jsfiddle: Framework7 Starter - JSFiddle - Code Playground

#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 class=" col-100 medium-100 large-50">
            <div class=" col-100 medium-100 large-50">
              Dx-top
           </div>
           <div class=" col-100 medium-100 large-50">
              Dx-bottom
           </div>
        </div>
           
   </div>
</div>
2

You can use this code

   
const initializeMap = () => {
  if (mapInitialized) {
    return;
  }
  mapInitialized = true;

  window.LRM = {
    tileLayerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osmServiceUrl: 'https://routing.openstreetmap.de/routed-car/route/v1',
    apiToken: 'YOUR_TOKEN'
  };

  // create the map
  var map = L.map('map');

  // add OpenStreetMap tiles to the map
  L.tileLayer(LRM.tileLayerUrl, {
    detectRetina: true,
    attributionControl: false
  }).addTo(map);
  $('.leaflet-control-attribution').hide();

  // Get the current user position
  navigator.geolocation.getCurrentPosition(function(position) {
    const userLat = position.coords.latitude;
    const userLng = position.coords.longitude;

    // Set the starting waypoint as the user's position
    var waypoints = [
      L.latLng(userLat, userLng),
      L.latLng(AnotherLat, AnotherLang)
    ];

    // Update the waypoints with the current position
    const updateWaypoints = position => {
      waypoints[0] = L.latLng(position.coords.latitude, position.coords.longitude);
      control.setWaypoints(waypoints);
      map.setView(waypoints[0], 19);
    }

    // Start watching the position
    watchId = navigator.geolocation.watchPosition(updateWaypoints, null, {
      enableHighAccuracy: true,
      locationProvider: 'gps,network,fused'
    });

    // Create the routing control with the updated waypoints
    var control = L.Routing.control({
      router: L.routing.osrmv1({
        serviceUrl: LRM.osmServiceUrl
      }),
      plan: L.Routing.plan(waypoints, {
        createMarker: function (i, wp) {
          return L.marker(wp.latLng, {
            draggable: false,
            icon: i === 0 ? L.icon({
              iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png',
              iconSize: [25, 41],
              iconAnchor: [12, 41],
              popupAnchor: [1, -34],
            }) : L.icon({
              iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png',
              iconSize: [25, 41],
              iconAnchor: [12, 41],
              popupAnchor: [1, -34],
            }),
          });
        },
        routeWhileDragging: false
      }),

      fitSelectedRoutes: true,
      showAlternatives: false
    }).addTo(map);

    // Hide the routing control panel
    control.hide();
  }, function(error) {
    console.error(error);
  }, {
    enableHighAccuracy: true
    // timeout: 5000,
    // maximumAge: 0
  });
};

    $f7.on('pageBeforeIn', function (e, page) {
      initializeMap();
    });
3

Thank you for your support. However my problem is displaying the map responsively.
I can’t view full screen or set a height and width. There seems to be some css rules against f7’s css

4

Connect the phone to the computer and debug with chrome inspect.

5

Here the jsfiddle: Framework7 Starter - JSFiddle - Code Playground