Locking the extent that a user can pan and zoom out

[mattpgreen]

Hi all, sorry for this newbie question. I've trawled around and around on this and have received a very authoritative answer from ChatGPT (pasted below) - can someone please guide on this ...

Need is - to lock the terriamap service to within a set North, South, East, West box so that - 1. the user focuses on the local story being told and 2. the service is not being used and charged for delivering global data.

Yes, I've created initialview - the need is to set overall map extent.

I ask how to do this in the way that TerriaMap is set up . Ideally so that I can edit one or some json config files and not have to try stumbling into coding within terria.js.

Can someone please guide on this?
Thanks, Matt

CHATGPT Text follows -

You are an expert in terria.js - please guide on how to set the extent box in latitude and longitude within which a user can view the map

ChatGPT
Setting an extent box (bounding box) in TerriaJS involves specifying the minimum and maximum latitude and longitude values that define the area within which the user can view the map. This can be achieved by configuring the initialView property in the TerriaJS initialization file or through programmatic adjustments.

Configuring via Initialization File
You can define the extent in the initialization JSON file (usually init.json). Here’s an example of how to do this:

json
Copy code
{
"initialView": {
"west": 144.0, // minimum longitude
"south": -40.0, // minimum latitude
"east": 149.0, // maximum longitude
"north": -35.0 // maximum latitude
}
}
This configuration sets the initial view of the map to the specified bounding box.

Programmatically Setting the Extent
If you want to set the extent programmatically, you can use the Terria object and the viewRectangle property. Here’s an example in JavaScript:

javascript
Copy code
import { Rectangle } from 'terriajs-cesium/Source/Core/Rectangle';
import { WebMercatorTilingScheme } from 'terriajs-cesium/Source/Core/WebMercatorTilingScheme';

const terria = new Terria({
baseUrl: 'path/to/your/assets'
});

terria.initSources.push({
initialCamera: {
west: 144.0, // minimum longitude
south: -40.0, // minimum latitude
east: 149.0, // maximum longitude
north: -35.0 // maximum latitude
}
});

terria.start().then(() => {
const viewer = terria.viewer;

// Define the extent
const extent = Rectangle.fromDegrees(144.0, -40.0, 149.0, -35.0);

// Apply the extent
viewer.scene.camera.setView({
destination: extent
});
});
In this example:

We initialize Terria with the base URL.
We push an initial camera configuration into initSources to set the initial view extent.
We start Terria and then set the view extent using the viewer.scene.camera.setView method.
Tips
Coordinate Systems: Ensure you are using the correct coordinate system (typically WGS84 for latitude and longitude).
Bounds Checking: Validate the coordinates to ensure they are within valid ranges (-180 to 180 for longitude, -90 to 90 for latitude).
Initialization Order: Make sure the extent settings are applied after the map has been initialized.
By following these steps, you can effectively control the geographic area that users can view on the map in TerriaJS.

please continue with this answer - I am asking how to limit a user to only view within a box defined by North south east west or lat and lon coordinates

ChatGPT

How to Limit a User to View Only Within a Defined Box in TerriaJS

🗒️ Answer
To restrict the user to view only within a specific geographic extent in TerriaJS, you need to configure the bounding box coordinates (north, south, east, west) in the map settings. Here’s how you can do it:

Configuration in Initialization File
Modify the init.json file to include the initialView property. This sets the initial bounding box that the user can view.

json
Copy code
{
"initialView": {
"west": 144.0, // minimum longitude
"south": -40.0, // minimum latitude
"east": 149.0, // maximum longitude
"north": -35.0 // maximum latitude
}
}
Programmatic Restriction
To further ensure that the user cannot pan outside this box, you can programmatically set the view constraints:

javascript
Copy code
import { Rectangle } from 'terriajs-cesium/Source/Core/Rectangle';
import { Viewer } from 'terriajs-cesium/Source/Widgets/Viewer/Viewer';

// Initialize Terria
const terria = new Terria({
baseUrl: 'path/to/your/assets'
});

terria.initSources.push({
initialCamera: {
west: 144.0, // minimum longitude
south: -40.0, // minimum latitude
east: 149.0, // maximum longitude
north: -35.0 // maximum latitude
}
});

terria.start().then(() => {
const viewer = terria.viewer;

// Define the extent
const extent = Rectangle.fromDegrees(144.0, -40.0, 149.0, -35.0);

// Apply the extent
viewer.scene.camera.setView({
destination: extent
});

// Limit panning to within the extent
viewer.scene.screenSpaceCameraController.constrainedAxis = extent;
});
This setup ensures that the user starts within the defined bounding box and is unable to pan outside of it.

Notes:
Ensure Valid Coordinates: Check that the provided coordinates are within valid ranges.
TerriaJS Updates: Make sure to test these configurations with the latest version of TerriaJS as there may be updates affecting these settings.
By following these steps, you can effectively restrict the user's view to a specified geographic area in TerriaJS.

🌐 Sources
docs.terria.io - GpxCatalogItem
github.com - terriajs/CHANGES.md at main
docs.terria.io - ShapefileCatalogItem
github.com - terriajs/lib/Models/Terria.ts at main
stackoverflow.com - How to deploy TerriaJS on my site
stackoverflow.com - How do I limit panning in Google maps API V3?

[ljowen]

Hi Matt thanks for reaching out. Currently there is no configuration to lock the view to a certain extent.
It would be possible to implement this by listening to camera events and restricting camera movements manually. See the Cesium documentation: https://cesium.com/learn/cesiumjs/ref-doc/Camera.html