Overlay a Custom Banner on Top of FlexMap in Angular

Background:

In some scenarios, developers may want to display a message or banner over a FlexMap component—such as a warning or status notification. Since the map itself is rendered within a container, HTML and CSS can be used to layer a custom banner over the map without interfering with the map's functionality.

Steps to Complete:

1. Wrap the FlexMap component in a container div
2. Insert a banner element above the FlexMap
3. Style the banner using CSS for positioning and appearance

Getting Started:

Wrap the FlexMap component in a container div

To position the banner in relation to the map, start by placing both the map and banner inside a container element with position: relative styling.

<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%;">
  </wj-flex-map>
</div>

Style the banner using CSS for positioning and appearance

The following CSS positions the banner above the map and centers it horizontally. You can adjust top, background, or z-index as needed based on your design.

.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;
}

This approach offers a flexible way to overlay banners or notices on top of the FlexMap while keeping the map fully functional in the background.

You can also find a live sample of this project here.

Happy coding!