Geofield Map Widget visibility issue inside field group, with Leaflet library

So. I was looking at this for https://github.com/localgovdrupal/localgov_directories/issues/265 and figuring it should be easy enough to add a specific trigger as we control the entity (now https://www.drupal.org/project/geo_entity → ), but I think I've come up with something generally enough it would fit here:

Drupal.behaviors.geoEntityInlineMap = {
  attach: function (context, settings) {
    context = context || document;
    const maps = context.querySelectorAll('form .geofield-map-widget');

    maps.forEach(map => {
      new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          if(entry.intersectionRatio > 0) {
            window.dispatchEvent(new Event('resize'));
            observer.disconnect();
          }
        });
      }).observe(map);
    });

  }
};

It would seem harmless enough to just add with any geofield map? Maybe it could even be added for Leaflet map - if we could get a list of the IDs or something else to add it with. @itamair any thoughts where it might live best?

Hi @ekes

Just tested this code on a local installation and it works fine for me.

Both the Leaflet and Geofield Map maps trigger the following events when they initialise:

'geofieldMapInit':
https://git.drupalcode.org/project/geofield_map/-/blob/8.x-2.x/js/geofie...
https://git.drupalcode.org/project/geofield_map/-/blob/8.x-2.x/js/geofie...

'leafletMapInit':
https://git.drupalcode.org/project/leaflet/-/blob/10.0.x/js/leaflet.drup...

Those are the perfect ways/hooks to start interacting with those maps (and their properties and features/markers) right after they are initialised ...

For instance this could be the code of a Drupal.behavior from an additional module, on the Leaflet map

  Drupal.behaviors.leafletInteractions = {
    attach: function(context) {
      let self = this;

      // React on leafletMapInit event.
      $(context).on('leafletMapInit', function (e, settings, lMap, mapid, data_markers) {
        let map = lMap;
        let markers = Drupal.Leaflet[mapid].markers;
        let features = Drupal.Leaflet[mapid].features;

        // Do whatever you want, etc ... 
      });

and the Geofield Map would work the same.

But the code that reacts to the leafletMapinit event could also be (more stably/generally) injected in the leaflet.drupal.js file itself, if that reaction copes a general need to the Leaflet Map (such as triggering a kind of window resize event)?

What you think?

> But the code that reacts to the leafletMapinit event could also be (more stably/generally) injected in the leaflet.drupal.js file itself, if that reaction copes a general need to the Leaflet Map (such as triggering a kind of window resize event)?

Sounds good to me. Doesn't even need to be the event? Unless there's some need to add something to exclude non-supporting IE? I'll push something in a branch to test for geofield_map here.

With the leaflet module version knowing it's leaflet even just https://leafletjs.com/reference.html#map-invalidatesize would work instead of the full refresh?

Just this https://git.drupalcode.org/issue/geofield_map-3087072/-/compare/8.x-2.x.... works in my testing.

Relate leaflet version 📌 Use IntersectionObserver to update map on entering viewport to fix visibility issue Fixed

Hey here ... I took some good time to test this issue and this issue use case.
Referring to the correspondent issue described in D7, it seems the Field Group module for D8+ doesn't have any "multipage" option,
so I am just applying the Tab->Tabs pattern ...
and NO, I cannot reproduce this issue with the Geofield Map widget, that behaves (and shows itself) correctly once its wrapping Tab is opened
(screenshots attached).

The originally attached screenshot is indeed showing the Leaflet module widget, and in fact this issue is just affecting the Leaflet module.
I am closing this as "Cannot reproduce" and going to Review and Fix the relate leaflet version 📌 Use IntersectionObserver to update map on entering viewport to fix visibility issue Fixed instead ...

https://github.com/localgovdrupal/localgov_directories/issues/265 <- leaflet map, but produced by Geofield Map, so fixing it in Leaflet doesn't solve the problem as leaflet-drupal is not actually called, this module is using L.map itself directly.

This doesn't seem to be an issue anymore in leaflet 10.0.14

itamair → closed merge request !9

I can still reproduce this with geofield_map 3.0.11:

I encountered an issue when using patch #20 in combination with inline entity form and field group.

I tested all this, reproducing the described use case with Vertical Tabs and a Geofield Map (version 3.0.11) inside one of it (not loaded / open by default), also with in a complex scenario of paragraphs (so inside paragraphs widget),
and all is working fine to me, with no visibility issues ...
(screenshot attached).

Sorry, I cannot reproduce this issue, with latest Geofield Map version (and patch #21 is not producing any particular / evident benefit to me).

I am closing this as "Closed (cannot reproduce)", but please reopen this if you have have further evidence and guidelines on how to clearly and objectively reproduce this.

Sorry sorry ... indeed it looks that what reported here is happening in the Geofield Map Widget when used with the Leaflet library.
I slightly better commented and relocated last @JeroenT patch into this new one to only act in case of Leaflet library used.

Going to commit into dev branch and make it part of next Leaflet module release.

Thanks a lot for you contribution on this @JeroenT.

Automatically closed - issue fixed for 2 weeks with no activity.