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.

The typical problems with Leaflet are implementations that don’t reference the Leaflet CSS style sheet. When this happens you’ll see either no tiles or tiles with lots of white space surrounding them. However, since my project uses the react-leaflet library there is no need to also reference the Leaflet JavaScript. The CSS reference was verified to have been added to the index.html file of the project and there were no references to the Leaflet JavaScript code.

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.

Since this implementation ruled out possible conflicts with MUI and other referenced JavaScript libraries I assumed that somewhere in my code I must have a component defining CSS/SCSS that was causing the problems. To prove it out I then brought over the parent components. An immediate success, the failure was repeated.

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.

img {
  object-fit: cover;
  width: 100%;
  max-height: 400px;
  min-height: 400px;
}

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.

You can see the problematic implementation in my Github and Stackblitz projects. Feel free to fork the project and remove the bad styling to see the fix in action.