Map size for MapKit JS on mobile

Question

Created Jul ’21

Replies 1

Boosts 0

Participants 1

Hello, This code works fine for desktop, but it's very difficult to display user location, map type controls for mobile.

    <style>
      #map {
          width:    100%;
          height:   calc(100vh - 132px);
      }
    </style>

The map's existence depends on the height property only. The controls depend on the width one. Although the algorithm is not clear. I see that the width must be more or equal to display width. It works for portrait, but not for landscape.

    <style>
      #map {
          position: absolute;
          top:      58px;
          left:     0px;
          width:    calc(100vw);
          height:   calc(100vh - 132px);
      }
    </style>

How to get stable appearance of the controls for any cases? I used iPhone SE 1.

Boost

Answer 1

olegfromvolgograd OP

Jul ’21

<style> #map { position: absolute; top: 58px; left: 0px; width: calc(100vw); height: calc(100vh - 58px); } </style> This works for landscape.

0