Overlay a Custom Banner on Top of FlexMap in Vue

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 template.
3. 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.

<template>
  <div class="map-wrapper">
    

    <wj-flex-map
      :source="mapSource"
      binding="name"
      style="height: 600px; width: 100%;"
    />
  </div>
</template>

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

Insert a banner element above the FlexMap component in the template

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

    <wj-flex-map
      :source="mapSource"
      binding="name"
      style="height: 600px; width: 100%;"
    />
  </div>
</template>

• The banner is placed before the map so it appears visually on top.

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

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 a positioning context.
• position: absolute on the banner allows it to float above the map.
• z-index: 1000 ensures the banner stays on top of the map’s canvas.

With this Vue 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 status messages, warnings, or notifications without disrupting map functionality.

Happy coding!