Dynamic Bounding Box Visualization in mapml-viewer

This experiment demonstrates the matchMedia API ability to query the map by using bounding box, zoom, and other criteria. By leveraging a custom matchMedia API, the script evaluates the map's extent in real time and creates a visual representation as a new map-layer.

The custom matchMedia API dynamically checks whether the map's extent overlaps with the bounding box. This ensures that layers appear or disappear in the layer control responsively based on the map's position and zoom level.

When triggered, the implementation calculates the current map extent and uses this to define the bounding box. A new map-layer is created to visualize this bounding box as a polygon, which dynamically toggles its visibility depending on whether the bounding box is within the map's bounds.

How to Interact with the Map

• Get Bounding Box:
  • Click the "Get Bounding Box" button to calculate the current map extent.
  • A new bounding box layer will be displayed on the map, outlining the visible region.
  • Pan or zoom the map to see the layer is dynamically added or removed on the map and in the layer control based on overlap.

Get Bounding Box