react-leaflet
react-leaflet copied to clipboard
App crashes after zooming out a few times
Bug report in v4
Before opening an issue, make sure to read the contributing guide and understand this is a bug tracker, not a support platform.
Please make sure to check the following boxes before submitting an issue.
Issues opened without using this template will be closed unless they have a good reason not to follow this template.
- [x] All peer dependencies are installed: React, ReactDOM and Leaflet.
- [x] Using the latest version of React and ReactDOM v18.
- [x] Using the supported version of Leaflet (v1.8.0 minimum) and its corresponding CSS file is loaded.
- [x] Using the latest v4 version of React-Leaflet.
- [x] The issue has not already been reported.
- [x] Make sure you have followed the quick start guide for Leaflet.
- [x] Make sure you have fully read the documentation and that you understand the limitations.
Expected behavior
I expect to be able to zoom out more than two times and the app won't crash
Actual behavior
After zooming out on my react-leaflet map on my Ionic and Android app, the app crashes. I get the following errors each time when I check logcat on Android Studio:
[ERROR:shared_context_state.cc(819)] SharedContextState context lost via Skia.
[1203/030423.762223:ERROR:file_io_posix.cc(144)] open /sys/devices/system/cpu/cpu0/cpufreq/scaling_max_freq: Permission denied (13)
This issue only seems to happen on my Pixel 7. On a Pixel 4a there are no problems.
Steps to reproduce
It's a pretty basic layout and works generally. Just doesn't work on Pixel 7. Looks like this
<MapContainer center={[currLat, currLong]} zoom={13}>
<TileLayer
attribution='© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{mics.map(mic => (
<Marker
key={mic.id}
position ={[
mic.mic_lat,
mic.mic_long
]}
onClick = {() => {
setActiveMic(mic);
}}
>
<Popup position={[
mic.mic_lat,
mic.mic_long]}
>
<div>
<Link to={`/MicProfile/${mic.id}/`}>{mic.mic_name}</Link><br />
{mic.mic_showuptime}<br />
{mic.mic_day}
</div>
</Popup>
</Marker>
))}
</MapContainer>