Overlay a Custom Banner on Top of FlexMap in JavaScript

Background:

In some scenarios, you may want to display a notification, warning, or status message over a FlexMap component, such as a maintenance notice or informational banner. Since the map is rendered inside a container, you can layer a banner over the map using plain HTML and CSS without interfering with the map’s interactivity.

Steps to Complete:

1. Wrap the FlexMap component in a container <div>.
2. Insert a banner element above the FlexMap component in the markup.
3. Initialize the FlexMap.
4. Use CSS to position and style the banner for correct overlay behavior.

Getting Started:

Wrap the FlexMap component in a container <div>

The container provides a positioned parent element so that the banner can be layered over the map. By setting position: relative on the wrapper, you can absolutely position the banner within it.

<div class="map-wrapper">


  <div id="theMap"></div>
</div>

• The .map-wrapper contains both the banner and the FlexMap.

Insert a banner element above the FlexMap component in the markup

<div class="map-wrapper">
  <div class="map-banner">
    ⚠️ Map is in read-only mode due to maintenance
  </div>

  <div id="theMap"></div>
</div>

• The banner is placed before the map element so it appears visually above it.

Initialize the FlexMap

This creates the FlexMap instance inside the #theMap container. The map renders normally beneath the overlay banner.

import * as wjcMap from '@mescius/wijmo.chart.map';

// Initialize the FlexMap
const map = new wjcMap.FlexMap('#theMap', {
  source: getMapData(),
  binding: 'name'
});

// Optional: set explicit dimensions
map.hostElement.style.height = '600px';
map.hostElement.style.width = '100%';

function getMapData() {
  return []; // Replace with actual map data
}

• The banner remains independent of the map logic.

Use CSS to position and style the banner for correct overlay behavior

This positions the banner absolutely within the wrapper and ensures it appears above the map.

.map-wrapper {
  position: relative;
}

.map-banner {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: #fffbe6;
  border: 1px solid #999;
  border-radius: 5px;
  padding: 10px 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  font-weight: bold;
}

• position: relative on the wrapper establishes the positioning context.
• position: absolute allows the banner to float above the map.
• z-index: 1000 ensures the banner sits on top of the FlexMap canvas.

With this JavaScript setup, you can overlay a custom banner on top of the FlexMap component that remains properly positioned and visually layered above the map. This allows you to display notifications, warnings, or status messages without disrupting map functionality.

Happy coding!