Leaflet options: reduce minimum map height; add disable mouse zoom option

[patdunlavey]

1. If you look here, we see that it's not possible to display a map shorter than 480 pixels high. However in my case I want to display it with a height of just 200 pixels. Is it actually necessary to impose a minimum height at all? I think a site builder should be trusted to select whatever value suits them, but we could always just set a minimum height of, say, 10, just to ensure that they see something?
2. When a user's cursor is on a leaflet map and they try to use their mouse wheel to scroll the page, or if the cursor arrives onto the map as the user uses their mouse wheel to scroll the page, the page stops scrolling and the map zooms in or out. This may not be desirable behavior. Leaflet provides an option to disable mouse scroll-wheel zoom. I propose that we add a checkbox to the StrawberryMapFormatter settings form to allow the site builder to disable mouse scroll-wheel zoom.

[patdunlavey]

I tried to find information about a minimum height for leaflet maps, and could not find any. If we can find a reference that defines one, we could use that. However, I think an absolute minimum height probably can't be presumed since, arguably, it would be subject to selected options for map control widgets and whatnot. I propose that we simply change the value of the minimum height, currently set at 480 pixels, to something like 10, only to ensure that a site admin can't make their map literally disappear at zero height.

As for the scroll-wheel zoom, I researched this a bit. Does this sound right to you @DiegoPino ?

Here, add a checkbox to "Disable mouse wheel zoom":

      'disable_mouse_zoom' => [
        '#type' => 'checkbox',
        '#title' => $this->t('Disable mouse wheel zoom'),
        '#default_value' => $this->getSetting('disable_mouse_zoom'),
      ],

and here, get this setting into the leaflet map initialization:

      var $disable_mouse_zoom = false;
      if (drupalSettings.format_strawberryfield_views.leaflet[element_id]['disable_mouse_zoom']) {
            $disable_mouse_zoom = drupalSettings.format_strawberryfield_views.leaflet[element_id]['disable_mouse_zoom'];
       }

          // initialize the map
          var map = L.map(element_id, {
              zoom: 2,
              maxZoom: $maxzoom,
              scrollWheelZoom: $disable_mouse_zoom ? false : true
            }

Any thoughts, @DiegoPino ?

[DiegoPino]

Hi, could you measure in pixels the interface? Plus and minus icons? That should be the minimum but honestly if 12 pixels is what you all need that also ok, as long as that is not the default. For the pull, code looks good, don’t forget to add the config option + defaults to the schema yaml for the zoom wheel and a js default in case an old archipelago without re-saving the config calls the new js variables

On Tue, Feb 13, 2024 at 1:36 PM Pat Dunlavey @.***> wrote:

I tried to find information about a minimum height for leaflet maps, and could not find any. If we can find a reference that defines one, we could use that. However, I think an absolute minimum height probably can't be presumed since, arguably, it would be subject to selected options for map control widgets and whatnot. I propose that we simply change the value of the minimum height, currently set at 480 pixels, to something like 10, only to ensure that a site admin can't make their map literally disappear at zero height.

As for the scroll-wheel zoom, I researched this a bit. Does this sound right to you @DiegoPino https://github.com/DiegoPino ?

Here https://github.com/esmero/format_strawberryfield/blob/1.3.0/src/Plugin/Field/FieldFormatter/StrawberryMapFormatter.php#L504C1-L513C1, add a checkbox to "Disable mouse wheel zoom":

'disable_mouse_zoom' => [ '#type' => 'checkbox', '#title' => $this->t('Disable mouse wheel zoom'), '#default_value' => $this->getSetting('disable_mouse_zoom'), ],

and here https://github.com/esmero/format_strawberryfield/blob/1.3.0/modules/format_strawberryfield_views/js/leaflet_strawberry_views.js#L55, get this setting into the leaflet map initialization:

var $disable_mouse_zoom = false; if (drupalSettings.format_strawberryfield_views.leaflet[element_id]['disable_mouse_zoom']) { $disable_mouse_zoom = drupalSettings.format_strawberryfield_views.leaflet[element_id]['disable_mouse_zoom']; }

  // initialize the map
  var map = L.map(element_id, {
      zoom: 2,
      maxZoom: $maxzoom,
      scrollWheelZoom: $disable_mouse_zoom ? false : true
    }

Any thoughts, @DiegoPino ?

— Reply to this email directly, view it on GitHub https://github.com/esmero/format_strawberryfield/issues/414#issuecomment-1941967361, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABU7ZZZPH53RRPYL4ZKTNSTYTOJAPAVCNFSM6AAAAABDGZPEVKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBRHE3DOMZWGE . You are receiving this because you were mentioned.Message ID: @.***>

[patdunlavey]

PRs created:

• 1.3.0
• 1.4.0

[DiegoPino]

Resolved by @patdunlavey via https://github.com/esmero/format_strawberryfield/commit/cf23b5879aef8d8621ed7cc18c89e78e72370cef and https://github.com/esmero/format_strawberryfield/commit/6926c3b8a85bad9315d7ffa30dc97beef785c46b. Thanks!!

[patdunlavey]

Thank YOU!