Is there a way to show a specific overlay in a panel?

Sweco 2

Hi everyone,

I'm building a dashboard that aims to show different indicators and their corresponding maps. The dashboard is structured as follows:

• The panel is split, with a top part and a bottom part
• The top part contains a set of themes divided over a set of maintabs, each of the maintabs contains a short introduction about the theme.
• When a theme is selected, the user can select from a few subtabs. Each of these subtabs contains a indicator.

Now i'm trying to get the bottom part (the map) to show a specific overlay when a subtap is selected. So if the user selects the "3-30-300 Regel" maintab, the bottom has to show the overlay with the ID: 0.

If the user then selects the subtab "3-Regel" the top part needs to show the indicator (already working) and the bottom part has to show the overlay with the ID: 52.

I've tried code like this: "var mainUrl = '$SESSION/map.html?id=52&token=' + token;"

That however doesn't seem to work, is there another way?

Rudolf

Hey there,

Looking at your setup it seems to be that you are using an iframe to inject the map into your dashboard. This is an easy and appropriate way to create a dashboard quickly. The downside is that interactions with an iframe can be limited by the browser for security reasons.

If the iframe is enclosed in a dashboard served by the same Tygron server, it is possible to run functions in the iframe. For example, if the iframe is defined using id="myMap", the following code can access the iframe and switch the overlay to a specific overlay with id 2:

document.getElementById('myMap').contentWindow.overlayControl.showOverlay(2,0,true);

The parameters are the OverlayID, the timeframe to show, and whether to show the legend.

Sweco 2

Hi Rudolf,

Thanks for your answer! However im not that good at coding, I'm mostly using AI to help me write the JavaScript.

Could you help me further? This is currently the code I'm using, how should I alter the code to load the corresponding overlays?:

<script>

  // Define a token for authentication

  var token = '$TOKEN';

  // The default URL to load on the right side of the dashboard (e.g., a map)

  var mainUrl = '$SESSION/map.html?token=' + token;

  // Define the mapping of tab and subtab IDs to corresponding URLs and maps

  var tabs = [

    {

      id: 1,

      name: 'Overzicht',

      panelId: 3,

      subtabs: []

    },

    {

      id: 2,

      name: 'Ruimtegebruik',

      panelId: 4,

      subtabs: [

        { id: 0, name: 'Ruimtegebruik', mapId: 4 },

        { id: 4, name: 'Dichtheid', mapId: 130 }

      ]

    },

    {

      id: 3,

      name: 'Hittestress',

      panelId: 5,

      subtabs: [

        { id: 0, name: 'Hittestress', mapId: 53 },

        { id: 5, name: 'Schaduw op fiets- & wandelpaden', mapId: 96 }

      ]

    },

    {

      id: 4,

      name: '3-30-300 Regel',

      panelId: 6,

      subtabs: [

        { id: 11, name: '3-Regel', mapId: 52 },

        { id: 10, name: '30-Regel', mapId: 67 },

        { id: 8, name: '300-Regel', mapId: 83 }

      ]

    }

  ];

  $(window).on('load', function() {

    // Create main tabs

    tabs.forEach(function(tab) {

      var $tab = $('<div><span>' + tab.name + '</span></div>')

        .attr('data-tab-id', tab.id) // Use the tab ID

        .addClass('tab'); // Add the tab class

      $('.indicatorTabs').append($tab);

    });

    // Handle main tab click to load corresponding panel and map

    $('.indicatorTabs').on('click', '.tab', function(event) {

      var tabId = $(this).attr('data-tab-id');

      // Activate the clicked tab

      $('.tab').removeClass('active');

      $(this).addClass('active');

      // Update the top part with the panel ID

      var panel = tabs.find(tab => tab.id == tabId);

      $('.indicatorDisplay').find('iframe').attr('src', '$SESSION/panel.html?id=' + panel.panelId + '&token=' + token);

      // Update the bottom part with the corresponding map

      var mapId = panel.panelId; // Map ID could be the same as the panel ID

      $('.mainDisplay').find('iframe').attr('src', '$SESSION/map.html?id=' + mapId + '&token=' + token);

  

      // Load subtabs for this panel if any

      var subtabs = panel.subtabs;

      $('.subTabs').empty(); // Clear existing subtabs

      if (subtabs.length > 0) {

        subtabs.forEach(function(subtab) {

          var $subTab = $('<div><span>' + subtab.name + '</span></div>')

            .attr('data-indicator-id', subtab.id) // Use the indicator ID

            .addClass('subTab'); // Add the subtab class

          $('.subTabs').append($subTab);

        });

        $('.subTabs').show(); // Show subtabs if they exist

      } else {

        $('.subTabs').hide(); // Hide if no subtabs

      }

    });

    // Handle subtab click to load indicator and map

    $('.subTabs').on('click', '.subTab', function(event) {

      var indicatorId = $(this).attr('data-indicator-id');

      // Find the corresponding subtab based on indicator ID

      var subtab = tabs.flatMap(tab => tab.subtabs).find(st => st.id == indicatorId);

      // Update the top part with the indicator ID

      $('.indicatorDisplay').find('iframe').attr('src', '$SESSION/indicator.html?id=' + indicatorId + '&token=' + token);

      // Update the bottom part with the corresponding map ID

      $('.mainDisplay').find('iframe').attr('src', '$SESSION/map.html?id=' + subtab.mapId + '&token=' + token);

      // Activate the clicked subtab

      $('.subTab').removeClass('active');

      $(this).addClass('active');

    });

    // Trigger a click on the first main tab to load its content by default

    $($('.indicatorTabs').children()[0]).trigger('click');

  });

</script>

Sweco 2

Nevermind I managed!

Hedi

That's good news! Of course we're very curious for the result :-)