Height in % produces missing map

  • Resolved berad

    (@berad)


    5 years, 1 month ago

    Thank you for such an amazing plugin; it is exactly what I was looking for.

    I’ve only tested this with version 2.23.3, so it is unknown if it affects other versions.
    When setting option for height in %, the resulting page will show no map at all; using a pixel height works fine; width % works fine.

    Thank you
    —————–
    Leaflet Map 2.23.3
    Wordpress 5.7.1
    theme = Twenty Twenty One

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author bozdoz

    (@bozdoz)

    5 years, 1 month ago

    Yeah that’s a limitation of CSS, not specifically this plugin or Leaflet. Thanks!

    Thread Starter berad

    (@berad)

    5 years, 1 month ago

    Thanks CSS. =/
    Is there another (easy) way to dynamically set the map height/size for each screen?

    My use case is: maps that are easy to read and navigate using any device (mobile, pc, etc.) and the map adjusts to fill the screen.

    I am also using “Extensions for Leaflet Map” by hupe13 ( https://ww.wp.xz.cn/plugins/extensions-leaflet-map ) to provide a full screen button, but the maps I’m creating are used by a lot of older people that aren’t so tech inclined, so ease of use is important, and understanding that there is a button on the screen to do something is not always obvious to them.

    Thread Starter berad

    (@berad)

    5 years, 1 month ago

    I found a solution that I hope helps others: vw and vh

    Here is a more technical article: https://www.freecodecamp.org/news/css-unit-guide/

    and a less technical article: https://graphichow.com/tutorial/how-do-vw-and-vh-viewport-units-work-in-css/

    and a good chart/checker for which browsers support those options (almost all current/modern browsers):
    https://caniuse.com/viewport-units

    examples for use with Leaflet Map:

    [leaflet-map width=100vw height=100vh]

    this will produce a full (browser) screen map (if your theme supports it) (though in my case it seems to overflow a bit and create scroll bars, so 99vw,96vh looks nicer)

    [leaflet-map width=100vw height=250px]
    height is in pixels

    [leaflet-map width=75% height=250px]
    width is a percent of the browser window, not your device screen

    [leaflet-map height=100vh]
    width will be the Leaflet Map plugin default

    [leaflet-map width=100vw]
    height will be the Leaflet Map plugin default / your WordPress block/theme default width
    ————————————–
    my setup is:
    Wordpress = 5.7.1
    Theme = Twenty Twenty One
    Plugins =
    Leaflet Map https://ww.wp.xz.cn/plugins/leaflet-map/

    Fullwidth Page Templates https://ww.wp.xz.cn/plugins/fullwidth-templates/

    (and optionally)
    Extensions for Leaflet Map https://ww.wp.xz.cn/plugins/extensions-leaflet-map/
    (it gives you a button for full (device) screen view, and other enhancements)

    • This reply was modified 5 years, 1 month ago by berad.
    • This reply was modified 5 years, 1 month ago by berad. Reason: added examples
    • This reply was modified 5 years, 1 month ago by berad. Reason: more explanation of examples
Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Height in % produces missing map’ is closed to new replies.