Zoom to coordinate via URL parameter

In this article, we will demonstrate how to pass a coordinate with URL parameters and zoom to that location.

Integrating M.App Enterprise with other systems is a common requirement in many projects. This integration often involves straightforward actions such as zooming to a specific coordinate or object.

The simplest method is to include the object's coordinate or ID in the request URL, as shown below:

https://yourServer.com/AppEngine/?tenant=mytenant&appId=17472b35-9d98-4c41-b31e-8dcb34305d97&edit=false&lat=46.6155934&long=14.3132042

The specified coordinate may now be utilized within our custom code to implement zoom functionality to the desired location.

import * as ReferenceProvider from '@luciad/ria/reference/ReferenceProvider';
import * as ShapeFactory from '@luciad/ria/shape/ShapeFactory';
import { WebGLMap } from "@luciad/ria/view/WebGLMap";

const map: WebGLMap = window.map;
const WGS84 = ReferenceProvider.getReference('EPSG:4326');

main();

function main() {
    const urlParams = new URLSearchParams(window.parent.location.search);
    const lat = Number.parseFloat(urlParams.get("lat"));
    const long = Number.parseFloat(urlParams.get("long"));

    map.layerTree.whenReady().then(() => {
        if(!Number.isNaN(lat) && !Number.isNaN(long)) {
            map.mapNavigator.pan({ targetLocation: ShapeFactory.createPoint(WGS84, [long, lat]) });
        }
    });        
}