Search tab map is blank on first page load

[archaeogeek]

Describe the bug The search map does not load on the search page until the page is reloaded in GeoNetwork 4.2.9

To Reproduce Steps to reproduce the behavior:

1. Run a clean instance of GeoNetwork 4.2.9 in jetty (or anything else) with no additional configuration
2. Load the sample records
3. Close the GeoNetwork browser tab
4. Re-open GeoNetwork
5. Go to the search tab (no need to log in)
6. Expand the search map- note that it's blank- no base layer and no bounding boxes
7. Reload the page and note that the search map is now populated with a base layer and bounding boxes

Expected behavior The map on the search tab should have a base layer and bounding boxes on first load

Additional context I've tried adjusting the map storage options in the UI settings, and also note that it makes no difference whether you agree to cookies or not, or are logged in

[archaeogeek]

@josegar74 apologies that it has taken me a while to get back to you, but having applied this fix, this issue still occurs for us in GeoNetwork 4.2.x

[josegar74]

@archaeogeek do you use any custom view or just the default one?

I checked and also for @ianwallen was solving the issue, but I'll recheck it.

[archaeogeek]

@josegar74 we made a small change to the search tab, in xslt/base-layout-cssjs-loader.xsl, where we added an xsl:if statement to start with the map minimised:

<xsl:if test="$isVegaEnabled or $angularApp = ('gn_editor', 'gn_admin')">
      <script src="{$uiResourcesPath}lib/vega/vega.js"></script>
    </xsl:if>

    <!-- Hide minimap on Search page first load -->
    <xsl:if test = "$angularApp = 'gn_search'">
        <script type="text/javascript">
            window.onload = function() {
                var button = document.querySelector(".gn-minimap-toggle");

                if (button) {
                    button.click();
                }
            };
        </script>
    </xsl:if>

So the steps we take to see this are:

1. load catalog
2. switch to search tab
3. maximise map (it's blank)
4. reload the page (the map appears)

[josegar74]

@archaeogeek I've tried the change in xslt/base-layout-cssjs-loader.xsl in themain branch, but for me button is always null. To get it working I had to replace it with this:

   <!-- Hide minimap on Search page first load -->
    <xsl:if test = "$angularApp = 'gn_search'">
      <script type="text/javascript">
        $(document).ready(function(){
          var button = $( "button.gn-minimap-toggle" );

          if (button) {
            button.click();
          }
        });
      </script>
    </xsl:if>

Maybe you have something else that causes your code to work fine. In any case, with the previous change I can reproduce the issue. It seems when the map is hidden the change in the pull request, even if executed doesn't work.

If you change the following code:

https://github.com/geonetwork/core-geonetwork/blob/933b8c626a2c7f88e7cba5863a33ff51669875f3/web-ui/src/main/resources/catalog/views/default/module.js#L215-L220

With this, it works for me:

 $scope.toggleMap = function () { 
   $(searchMap.getTargetElement()).toggle(); 
   $("button.gn-minimap-toggle > i").toggleClass( 
     "fa-angle-double-left fa-angle-double-right" 
   ); 

   setTimeout(function () {
      searchMap.updateSize();
   }, 0);
 }; 

[archaeogeek]

Thanks @josegar74 that seems to fix it for us. I'll close this