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='© <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 posts - 1 participant