Leaflet not scaling correctly to mobile devices

Question

I have a problem with scaling leaflet map to fit mobile devices. I'm building an application using React, Leaflet(+React-Leaflet) & OpenStreetMaps.

If I'm placing component like footer or zoom control on the bottom of the screen, they appear either half or not at all, as they are hidden behind mobile devices menu.

Here's an example.

Web version

Mobile version

In this case, the zoom control component does not appear at all in the mobile version. If I change maps height property to 90vh for example, it appears again.

Mobile version with 90vh

Of course now it works, but looks ugly and isn't responsive. How can I fix this?

I have followed this example, but it doesn't seem to help.

Answer 1

I fixed this. In case this same problem occurs to someone else in the future, here is my solution.

When you are adding css properties to your Map component, rather than using "height: 100vh;", use "height: 100%;" like shown in this example. You should use a wrapper container set to position fixed, or absolute to get height 100% working correctly. Here is and example:

Rendering Map component

  <div className="map-wrapper">
    <Map/>
  </div>

CSS

.map-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
}

.map {
  width: 100%;
  height: 100%;
  position: relative;
}