CSS breaking Leaflet map rendering

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.

Broken Leaflet map

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.

Adding maps to an #Angular application using the #Leaflet library

If you are looking to add maps to your Angular website or application a great option that I’ve used on a few projects is Leaflet.js. The library provides features like custom markers, ability to use various map sources, multiple layers, and much more. In addition to that it is also free, open source, and actively maintained. The project has been around for years and has an active community continuing to extend it with numerous plugins. The majority of documentation out there for the library focuses on using it in a vanilla JavaScript project so in this post we’re going to explore adding Leaflet.js to an Angular Ivy project.

In this application we’ll create a component that will hold the map object. It will be configured to always show Europe when it starts up but also provide a button to pan the map to a specific location. The user can change the zoom or move the map around as they wish. There will also be callbacks setup to execute when the user changes the zoom level or the center of the map. You can see the complete project on GitHub. A running example can also be seen on StackBlitz.

To start off, if you don’t already have an Angular app to add the mapping feature to, create a new one.

$ ng new leaflet-map-example

Once the project is initialized we will need to add references to Leaflet and its Typings definition to the project. This can be done by opening the package.json file and adding
"leaflet": "^1.6.0"
to the dependencies section. In devDependencies add
"@types/leaflet": "^1.5.7"

Another location that needs to be updated is the angular.json file. Under "projects" --> "demo" --> "architect" --> "build" --> "options" --> "assets" add this code that will copy leaflet assets out to the leaflet folder during the build process.

    "glob": "**/*",
    "input": "./node_modules/leaflet/dist/images",
    "output": "leaflet/"

Also, just below the "assets" section should be the "styles" section. In this section add this line so we can bring the Leaflet styles over to the application during the build.


Next we’ll want to create a new component that will hold our logic for this map. From the command line run:

$ ng generate component map

We should now have a new folder in our project called map that contains three files: map.component.css, map.component.html, map.component.ts. The majority of our work will be in the TypeScript file but we still do need to add some code to the CSS and HTML files.

In map.component.html we’ll add two <div> tags, one to encompass the HTML for the page and another to hold the map. At the bottom of the page we will have a button that calls a function in the TypeScript code to pan the map on a specific location.

<div class="map-container">
  <div id="map"></div>
  <br />
  <button (click)="centerMap(39.95, -75.16)">Locate Philadelphia, PA</button>

Next we’ll add some CSS to define the size and add a border to the map in map.component.css.

  border: 2px solid black;
  height: 400px;
  width: 100%;

With the scaffolding in place we can now focus on map.component.ts to add the code which will instantiate and customize the actual map. The first line of code we’ll add is to import the Leaflet library at the top of the file.

import * as L from "leaflet";

Within the class definition add a variable to hold the map object.

map: L.Map;

We’ll setup the actual actual initialization of the map object and tie it to the HTML DOM in the ngOnInit() function.

The map object will be configured to center the map on a latitude and longitude over Europe. We’ll have the zoom level set to 4 and restrict the permitted zoom levels to be between 1 and 10. Besides those properties the most important part of the initialization is the first parameter, 'map'. This value matches up to the ID field in one of the map.component.html <div> elements and tells Leaflet to use that element to render the map.

// Initialize the map to display Europe    
this.map = L.map('map',
      center: [49.8282, 8.5795],
      zoom: 4,
      minZoom: 1,
      maxZoom: 10

Before anything can be displayed we also need to let Leaflet know where to retrieve the tiles for the map. If you aren’t familiar with tiles they are the background image that is displayed. These can be road maps, start charts, or any other image. In this example the tiles are pulled from the OpenStreetMap.org repository. We’ll do this by creating a Tile Layer and then add that layer to the map object.

const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 10,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'


In the HTML for the component there is a button that calls a centerMap() function, passing it latitude and longitude values. When called, this function will pan the map over to the new center coordinates, draw a circle marker on that location, and zoom to a specific level.

centerMap(lat: number, lng: number): void {
this.map.panTo([lat, lng]);
// Generate a circle marker for this location
let currentLocation: L.CircleMarker =
L.circleMarker([lat, lng], {
radius: 5
// Wait a short period before zooming to a designated level
setTimeout(() => {this.map.setZoom(8);}, 750);

With the definition of the map component completed we need to add the component to the app.component.html file so that we can actually see it in the applicaiton.


There is one last piece of the puzzle that we need to add in order for the maps to be displayed correctly. We need to reference the Leaflet CSS code in the project’s styles.css file. Without the reference we won’t be able to pull the styles into the project.

@import "~leaflet/dist/leaflet.css";

If you forget this piece you’ll see a partial map appear on the site. A few squares of the map will be visible and if you look in the Console window you won’t see any errors reported. The fact that you missed the styles file isn’t obvious so be sure to include it.

At this point we should be able to run the project and see the map displayed similar to the below image.

$ ng serve

Then when you click on the Locate Philadelphia, PA button it will pan the map over to the city and draw a marker on the city.

If there is a need to take actions when the user changes the zoom level of the map or drags the map to a new location it can be achieved by adding listeners to the "zoomlevelschange" and "moveend" events. In this example we’ll add them during the initialization of the map.

// Initialize the map to display Europe
this.map = L.map('map', {
center: [49.8282, 8.5795],
zoom: 4,
minZoom: 1,
maxZoom: 10
}) // Create a callback for when the user changes the zoom
.addEventListener("zoomlevelschange", this.onZoomChange, this)
// Create a callback for when the map is moved
.addEventListener("moveend", this.onCenterChange, this);

From these callbacks you can grab the new center, zoom level, or map boundaries by accession the map object referenced via the this object. You can see examples of these in the map.component.ts file.

Hopefully this post helps get you on your way adding Leaflet maps to your Angular project. Besides a few behind the scenes updates of files the process is straight forward. In a future post I’ll go over adding markers and custom popup dialogs.