Resizable Container Demo
← Back to Main

1. Map with footer bar filling a resizable container

The .geoview-map div uses height: 100%. Drag the bottom-right corner of the dashed container to resize it horizontally and vertically. The map should follow both dimensions. When the footer panel is opened, the viewer grows taller than the container, so scroll the container to reach the panel content.

2. Map with default footer bar in a split pane

Drag the grey divider up or down to change the height of the top pane containing the map. The map uses the default footer bar, so scroll the top pane to reach the panel content when the footer panel is opened.

Bottom pane content
Show the code used to resize map 2
<!-- The map div fills the top pane; GeoView follows the pane height -->
<style>
  .split-pane { display: flex; flex-direction: column; height: 600px; }
  .split-pane-top { height: 60%; min-height: 100px; overflow: auto; }
  .split-pane-divider { flex: 0 0 8px; background: #ccc; cursor: row-resize; }
  .split-pane-bottom { flex: 1; min-height: 50px; overflow: auto; }
  .geoview-map.fill-parent { height: 100%; margin-bottom: 0; box-sizing: border-box; }
</style>

<div class="split-pane">
  <div id="splitPaneTop" class="split-pane-top">
    <div id="Map2" class="geoview-map fill-parent" data-lang="en" data-config-url="./configs/footer-tabs-config.json"></div>
  </div>
  <div id="splitPaneDivider" class="split-pane-divider" role="separator"></div>
  <div class="split-pane-bottom">Bottom pane content</div>
</div>

<script>
  // Dragging the divider only changes the height of the top pane; GeoView detects the change on its own
  const splitPaneTop = document.getElementById('splitPaneTop');
  const splitPaneDivider = document.getElementById('splitPaneDivider');
  splitPaneDivider.addEventListener('pointerdown', (downEvent) => {
    downEvent.preventDefault();
    splitPaneDivider.setPointerCapture(downEvent.pointerId);
    const startY = downEvent.clientY;
    const startHeight = splitPaneTop.getBoundingClientRect().height;
    const onMove = (moveEvent) => {
      splitPaneTop.style.height = `${Math.max(100, startHeight + moveEvent.clientY - startY)}px`;
    };
    const onUp = () => {
      splitPaneDivider.removeEventListener('pointermove', onMove);
      splitPaneDivider.removeEventListener('pointerup', onUp);
    };
    splitPaneDivider.addEventListener('pointermove', onMove);
    splitPaneDivider.addEventListener('pointerup', onUp);
  });
</script>

3. Map and footer panel sharing a resizable container

Same as map 1, but the container keeps a fixed height and the page splits it between the map and the footer panel while the panel is open (stateApi.getFooterBarIsOpen()): the panel gets 40% of the container through the data-footer-height attribute and the map gets the rest through a CSS variable. Both stay visible while you resize, with no scroll bar.

Show the code used to resize map 3
<style>
  .resizable-container { resize: both; overflow: hidden; width: 80%; height: 500px; padding: 4px; box-sizing: border-box; }
  .geoview-map.fill-parent { height: 100%; margin-bottom: 0; box-sizing: border-box; }
  /* The map takes what the open footer panel does not use */
  .split-container .geoview-map.fill-parent { height: calc(100% - var(--panel-height, 0px)); }
</style>

<div class="resizable-container split-container">
  <div id="Map3" class="geoview-map fill-parent" data-lang="en" data-config-url="./configs/footer-tabs-config.json"></div>
</div>

<script>
  // Splits a fixed-height container between the map and the open footer panel.
  // GeoView sizes the panel from the data-footer-height attribute and the map from the host CSS height.
  function splitContainerWithFooter(mapViewer) {
    const host = document.getElementById(mapViewer.mapId);
    const container = host.parentElement;
    const { stateApi } = mapViewer;
    // The tabs panel content is 56px shorter than its data-footer-height value
    const PANEL_HEADER = 56;
    const PANEL_SHARE = 0.4;
    let appliedPanel = 0;
    let frameId;

    const update = () => {
      frameId = undefined;

      const style = getComputedStyle(container);
      const contentHeight = container.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);
      const panel = stateApi.getFooterBarIsOpen() ? Math.max(100, Math.round(contentHeight * PANEL_SHARE)) : 0;
      if (panel === appliedPanel) return;
      appliedPanel = panel;

      container.style.setProperty('--panel-height', `${panel}px`);
      if (panel > 0) host.setAttribute('data-footer-height', `${panel + PANEL_HEADER}px`);
      else host.removeAttribute('data-footer-height');

      // Makes GeoView measure the host height again with the new CSS height
      window.dispatchEvent(new Event('resize'));
    };

    // Changing the host size inside the observer callback triggers the ResizeObserver loop error, so defer it
    const scheduleUpdate = () => {
      if (frameId === undefined) frameId = requestAnimationFrame(update);
    };

    const observer = new ResizeObserver(scheduleUpdate);
    observer.observe(host);
    observer.observe(container);
    scheduleUpdate();
  }

  cgpv.onMapReady((mapViewer) => {
    if (mapViewer.mapId === 'Map3') splitContainerWithFooter(mapViewer);
  });
</script>
Top