Help/possible Feature Request: Native support for rotated bounds and maxBounds

[qjot]

MapLibre Bounds and Bearing Handling Issue

Problem Overview

I'm working on a Proof of Concept with MapLibre in Angular that involves placing images on a map. The application includes:

• Admin panel with URL input
• "Insert image" mode using TerraDraw for bounding box selection
• Goal: Set default map position to exactly match the placed image location

Current Implementation

// Get current viewport bounds (including rotation)
getBoundingBox(): Nullable<GeoBoundingBox> {
  const mapInstance = this.getMapInstance();
  const canvas = mapInstance.getCanvas();
  const w = canvas.width;
  const h = canvas.height;
  
  // Get corner coordinates from canvas
  const topLeftCoords = mapInstance.unproject([0, 0]);
  const topRightCoords = mapInstance.unproject([w, 0]);
  const bottomRight = mapInstance.unproject([w, h]);
  const bottomLeft = mapInstance.unproject([0, h]);
  
  return {
    topRight: { latitude: topRightCoords.lat, longitude: topRightCoords.lng },
    topLeft: { latitude: topLeftCoords.lat, longitude: topLeftCoords.lng },
    bottomRight: { latitude: bottomRight.lat, longitude: bottomRight.lng },
    bottomLeft: { latitude: bottomLeft.lat, longitude: bottomLeft.lng }
  };
}

// Workaround using geojson-map-fit-mercator
private computeAndSetView(bbox: GeoBoundingBox, preferredBearing: number, width: number, height: number): void {
  const polygon: FeatureCollection<Polygon> = {
    type: 'FeatureCollection',
    features: [{
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'Polygon',
        coordinates: [[
          [bbox.topLeft.longitude, bbox.topLeft.latitude],
          [bbox.topRight.longitude, bbox.topRight.latitude],
          [bbox.bottomRight.longitude, bbox.bottomRight.latitude],
          [bbox.bottomLeft.longitude, bbox.bottomLeft.latitude],
          [bbox.topLeft.longitude, bbox.topLeft.latitude]
        ]]
      }
    }]
  };
  
  const { center, zoom } = mapFitFeatures(polygon, [width, height], { preferredBearing });
  this.mapCenter.set(center);
  this.mapZoom.set(zoom);
  this.mapBearing.set(preferredBearing);
}

The Issue

What Works ✅

• No rotation: getBounds(), setBounds(), and maxBounds work perfectly
• Getting rotated viewport bounds from canvas coordinates
• Basic image placement and bounding box selection

What Doesn't Work ❌

• With rotation: LngLatBoundsLike doesn't support rotation (uses minimal axis-aligned area)
• Setting maxBounds for rotated views
• Native bounds handling when map has bearing/rotation

Root Cause

As explained in this blog post, the issue stems from:

1. getBounds() returns axis-aligned bounds, losing rotation information
2. LngLatBounds concept doesn't include rotation/bearing
3. maxBounds cannot be set for rotated rectangular areas

Current Workaround

Using geojson-map-fit-mercator:

1. Extract actual viewport corners from canvas
2. Create GeoJSON polygon from corners
3. Calculate optimal center/zoom/bearing
4. Manually disable interactions for "max bounds" effect

Problems with Workaround

• Not native bounds handling
• Manual interaction management required
• Far from the elegance of maxBounds when rotation = 0
• Requires extensive custom camera transformation logic

Question

Is there a way to achieve native bounds and maxBounds behavior for rotated views without:

• Rewriting camera transformations from scratch
• Extensive custom interaction handling
• Losing the simplicity of MapLibre's built-in bounds system

Desired behavior:

• Set default view to exact rotated bounding box
• Prevent zooming out/panning outside this rotated area
• Maintain rotation/bearing throughout interaction

Has anyone found a clean solution for this, or are there plans to support rotated bounds natively in MapLibre?

---

Note: I've seen several closed PRs and issues in MapBox/Libre repos mentioning fitFeature and similar functionality, but no concrete solution for production use.

[HarelM]

I don't think there's a good support for this.
You might be able to use the following method to do some constraining, but I haven't tested this myself:
https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/CameraUpdateTransformFunction/

I think a general hook into the transform's constrain logic might be something beneficial and general enough to cover different types of constraints.
Here's a different use case that might be somewhat similar to this one:
maplibre/maplibre-gl-leaflet#72

[larsmaxfield]

Could you provide a minimal working index.html as a simple example? (Instantiate a map with bearing, insert the rotated image, calculate corners.)

I can take a look if the core behavior is achievable with the new map option transformConstrain I added in #6485. If provided, the transformConstrain overrides the default constrain function that is responsible for respecting the bounds of the map.

It still won't be an elegant interface, but it might work.