TLDR; Be specific with img element styling definitions, otherwise they could impact the rendering of Leaflet maps.
I didn’t do it on purpose, but at some point, over the last few months, I broke my usage of Leaflet.js in a React app using the react-leaflet library. It was one of those worst-case scenarios where it kind of works but definitely doesn’t work and quite frankly I couldn’t wrap my head around what caused the break. I hope that my suffering can keep someone else from going through the same. Here is what happened.
After I had made some updates to incorporate the MUI library as the primary user interface, and added components to handle the main layout of the website, I ran through some tests to verify there were no unintended side-effects. Everything checked out except the mapping feature. What I saw was that the tiles were all visible but laid out in the wrong order and the marker pin was taller than it should along with appearing cropped.
My next thought was that some parts of the UI libraries being used were causing problems. Going through the packages.json file I saw that there were multiple bootstrap libraries referenced in addition to the MUI library. There was no need for them so I pulled out all of the bootstrap references and cleaned up the core CSS/SCSS files. Still no luck.
At this point, I thought it made sense to try and recreate the issue in a clean project. I took all of the packages referenced in my current project and added them to a new project on Stackblitz, ReactJS-MaterialUI-Leaflet. In doing so I created a basic implementation that used MUI and Leaflet but still didn’t see the issue.
To find the specific cause of the failure I began removing the parent components until the maps started rendering correctly. Luckily it didn’t take long to find that there was a style defined for the header image which was causing the problem.
This style was used as part of the main header image and not one I wanted to remove. To keep it, I changed the style from being element-focused to being a class name,
.header-img, and scoped to the particular component. A simple change, eight total characters, but it ensured that the images used by the map weren’t given the wrong styling.