At the end of the Leaflet introductory course, the final mini-project looked like the following map:

With a map displaying geojson data, a mini-map and a title. This screenshot was taken on a PC and looks fine.

But what would it look like on a cell phone?

Here’s the answer:

The rendering doesn’t look so good!

As all page management is carried out locally, even if the map is supplied through a server that adapts pages to different screen sizes (mobile, tablet, computer), it’s only the map frame that will be adapted, not its content.

This adaptation must therefore be taken care of in the page’s Leaflet code.

There are four main aspects to this:

1.Make sure the map takes up the entire screen without overflowing

map { height: 100vh; }

But beware, this style may hide the header on mobile. Here’s a better approach:

Recommended solution :

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#map {
  position: absolute;
  top: 70px; /* Hauteur de ton header */
  bottom: 0;
  left: 0;
  right: 0;
}

The top will need to be adjusted to the actual header height.

2.Make the header responsive

Add to CSS :

header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  position: absolute;
  z-index: 1000;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  max-width: 90%;
}

.logo {
  height: 40px; /* Ajustable selon ta préférence */
  max-width: 100%;
}

.title-group {
  display: flex;
  flex-direction: column;
}

3.Prevent the map from hiding behind the header

Make sure the header is absolute and above the map, for example (z-index: 1000), and that the map starts just below the header.

If you prefer a fixed header above and the map takes up the rest of the space :

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  flex: 0 0 auto;
}
#map {
  flex: 1 1 auto;
}

4.Make sure the map resizes properly

Add to the Leaflet script :

window.addEventListener('resize', function () {
  map.invalidateSize();
});

The mini-map

A common problem is that Leaflet’s MiniMap can become awkward on small screens. Here are three complementary solutions you can implement.

Solution 1: Hide the MiniMap on small screens (CSS media query)

Add this CSS block to the <style>

@media screen and (max-width: 600px) {
  .leaflet-control-minimap {
    display: none !important;
  }
}

This completely hides the MiniMap if the screen width is less than 600 pixels (you can adjust this threshold).

Solution 2: Force MiniMap to fold automatically on mobile devices

Modify the options in the JS code:

const miniMap = new L.Control.MiniMap(baseLayerMini, {
  toggleDisplay: true,
  minimized: window.innerWidth < 600  // réduite par défaut si petit écran
}).addTo(map);

This makes it minimized by default on mobile, but the user can open it.

Solution 3: Reduce its size on small screens

If you prefer to leave it visible but smaller, add this in the CSS:

@media screen and (max-width: 600px) {
  .leaflet-control-minimap {
    width: 100px !important;
    height: 100px !important;
  }
  .leaflet-control-minimap .leaflet-container {
    width: 100px !important;
    height: 100px !important;
  }
}

Recommendation

For a smooth user experience, solution 1 (hide) or 2 (automatically fold) is often preferable on mobile, as screens are too small to display two cards effectively.

Final result

If the rendering on PC remains unchanged, with these modifications the rendering on mobile is as follows:

Si cet article vous a intéressé et que vous pensez qu'il pourrait bénéficier à d'autres personnes, n'hésitez pas à le partager sur vos réseaux sociaux en utilisant les boutons ci-dessous. Votre partage est apprécié !

Atilio Francois