I can't get either mapbox or leaflet react to show up on emulator

Ionic Framework Ionic React
1

in my app everything works great in the browser. Just no map will show up on emulator whether its mapbox or leaflet. I’m showing my leaflet implementation below.

this is ionic info

Ionic:

   Ionic CLI       : 6.16.3 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.6.8

Capacitor:

   Capacitor CLI      : 3.1.1
   @capacitor/android : 3.2.0
   @capacitor/core    : 3.1.1
   @capacitor/ios     : 3.1.1

Utility:

   cordova-res : 0.15.3
   native-run  : 1.4.0

System:

   NodeJS : v14.17.0 (/usr/local/bin/node)
   npm    : 6.14.13
   OS     : Linux 5.10

I get no errors in the console throughout my entire app.

Here is my leafletmap.js

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import './leafletMap.css'
import '../App.css'
import {useRef} from 'react';

export default function LeafletMap() {

  const mapRef = useRef(null)

  return(
      <MapContainer 
	whenCreated={(map) => setInterval(()=> { map.invalidateSize();
	mapRef.current = map;
      }, 500)
      }
      center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
      <TileLayer
	attribution='&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
	url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[51.505, -0.09]}>
	<Popup>
	  A pretty CSS3 popup. <br /> Easily customizable.
	</Popup>
      </Marker>
    </MapContainer>
  );
}

leafletMap.css

.leaflet-container{
  width: 100vw;
  height: 100vh;
}

body {
  padding: 0;
  margin: 0;
}

html, body, #map {
  height: 100vh;
  width: 100vw;
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
  
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

    <meta charset="utf-8" />
    <title>Ionic App</title>

    <base href="/" />

    <meta name="color-scheme" content="light dark" />
    <meta
      name="viewport"
      content="viewport-fit=cover, width=device-width, initial-scale=1.0"
    />
    <!--minimum-scale=1.0, maximum-scale=1.0, user-scalable=no --!>
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.png" />

    <!-- add to homescreen for ios -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="Ionic App" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    </head>

  <body>
    <div id="root"></div>
    </body>

</html>

I just want a simple map to show up on the emulator please!

2

I got a map to show up by getting rid of viewport-fit=cover!