berad
Forum Replies Created
-
an example of what I am looking to do can be found at:
https://developers.google.com/maps/documentation/javascript/interaction#gesture-handlingit talks about gesturehandling – greedy vs. cooperative
greedy allows single finger dragging and scrollwheel zoom, while cooperative requires 2 fingers to drag and ctrl+scroll wheel to zoom.
I would like the “greedy” gesture handling, or the option to switch between the two options. =)
[leaflet-map fitbounds]
using “dragging” and/or “scrollwheel” has no effect.to be more clear:
on mobile, with Extensions for Leaflet Map activated, it says “use 2 fingers to move the map”. I can move (drag) the map with 2 fingers on ios 14.4 & android 10, but on android 8 it does not work.with Extensions for Leaflet Map deactivated, I can drag/move the map with 1 finger on all mobile devices tested.
———————-on pc, with Extensions for Leaflet Map activated, it says “use ctrl + scroll to zoom the map”;
with Extensions for Leaflet Map deactivated, I can scroll with the mouse wheel without pressing the ctrl button also.Thank you very much.
Forum: Plugins
In reply to: [Leaflet Map] Height in % produces missing mapI 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-unitsexamples 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://wordpress.org/plugins/leaflet-map/Fullwidth Page Templates https://wordpress.org/plugins/fullwidth-templates/
(and optionally)
Extensions for Leaflet Map https://wordpress.org/plugins/extensions-leaflet-map/
(it gives you a button for full (device) screen view, and other enhancements)Forum: Plugins
In reply to: [Leaflet Map] Height in % produces missing mapThanks 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://wordpress.org/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.