Prevent panning beyond the northmost and southmost extents

[James_Ridley]

Is there a way to prevent scrolling outside the northern and southern map extents, short of snapping back in the OnCurrentExtentChanged event. See the image which is from your cloud sample page. This is the code I am using to get it to recenter, but it of course snaps back and is a bit distracting.

// Prevent infinite north/south panning by clamping the visible extent in the map’s native unit.
var extentCenter = e.CurrentExtent.GetCenterPoint();
var maxCenterY = _settings.ActiveMapView.MapUnit == GeographyUnit.Meter
? _mapGeoUtilities.ConvertPointToMeters(new PointShape(0d, MapConstants.MaxWebMercatorLatitude)).Y
: MapConstants.MaxWebMercatorLatitude;
var halfExtentHeight = e.CurrentExtent.Height / 2d;
var minAllowedCenterY = -maxCenterY + halfExtentHeight;
var maxAllowedCenterY = maxCenterY - halfExtentHeight;
var clampedCenterY = minAllowedCenterY > maxAllowedCenterY
? 0d
: Math.Clamp(extentCenter.Y, minAllowedCenterY, maxAllowedCenterY);

if (Math.Abs(extentCenter.Y - clampedCenterY) > 1e-6)
{
await _settings.ActiveMapView.ZoomToCenterAsync(
_settings.ActiveMapClass.MapZoomLevel,
new PointShape(extentCenter.X, clampedCenterY));
return;
}

Thanks,
James R.

[James_Ridley]

After writing this I realized it may just be using the cloud maps, and once I create my own GIS Server later, I can control it.

Thanks,
James R.

[Ben]

Hi James,

Instead of re-centering in OnCurrentExtentChanged, you can use MapView.RestrictExtent. Until now it only clamped the center of the view on Blazor, so you could only drag half a screen of empty space past the pole. That is fixed in 15.0.0-beta131: the whole visible map now stays inside the extent, panning simply stops at the edge (no snap-back), zooming out stops once the extent fills the map.

To limit north/south only and keep the map wrapping around the dateline, give the extent the world’s north and south bounds and an east-west range wider than the world:

// Meter (Web Mercator)
const double world = 20037508.2314245;

// East/west = ten worlds wide on purpose: exactly one world wide would stop the map 
// at the dateline; wider never limits east/west, so the map keeps wrapping.
var restrictExtent = new RectangleShape(-10 * world, world, 10 * world, -world);

razor
<MapView Id="mapView"
         MapUnit="GeographyUnit.Meter"
         RestrictExtent="restrictExtent"
         ...>

For a DecimalDegree map do the same in degrees, e.g. new RectangleShape(-1800, 85.0511, 1800, -85.0511).

One side effect to be aware of: with a restriction set, the map will no longer zoom out past the point where the world fills the map’s height, since anything beyond that would show area outside the extent.

Thanks,
Ben