Select to view content in your preferred language

Setting a map view center when using British National Grid coordinates

588
2
Jump to solution
03-30-2023 05:11 AM
nevvo
by
Emerging Contributor

Hello there,

I am working with a map that uses the BNG coordinate system (spatial reference 27700).

I have created a control that displays and draws on a map, this all works well.

I am also able to fly to a location on the map by setting the map view centre with a [lon, lat] pair of values:

 

this.view.center = [-5.33420, 56.23880]

 

I have also hooked up a reactive event that when the map stop scrolling it gives me the current view.center values so I can see where the view is currently centered:

 

reactiveUtils.when(
    () => this.view.stationary === true,
    () => {
        const lonLat = webMercatorUtils.xyToLngLat(this.view.center.x, this.view.center.y);
        console.log(`      Center XY ${this.view.center.x}, ${this.view.center.y}`);
        console.log(`  Center LatLon ${this.view.center.latitude}, ${this.view.center.longitude}`);
        console.log(`Mercator LatLon ${lonLat[1]}, ${lonLat[0]}`);
    }
);

 

Which returns the following:

                 Center XY 187578.10796897276, 688867.6335343525
    Center LatLon null, null
Mercator LatLon 6.176207331557647, 1.6850428135475004

My goal is to be able to scroll a map to a predefined place, however because I do not have the lat lon values available to me in the map as it is using BNG I cannot use the method I described above.  I need to return the user to their selected position and zoom level if they save and close the app as the map will initially start at a way larger scale than the final selection of the user when they draw the geometry on the map (starting at county level, but drawing on a street in a town).

I've tried setting the x and y values on the centre but this doesn't work:

 

this.view.center.x =  187578.10796897276;
this.view.center.y =  688867.6335343525;
this.view.focus;

 

Is there a way for me to navigate using the center.x and center.y values, or for me to somehow get the lat lon for the current map center point or to convert to a Point that I can then set the center as?

Thanks.

0 Kudos
1 Solution

Accepted Solutions
Egge-Jan_Pollé
MVP Regular Contributor

You may try something like this:

center: new Point({x: 500000, y: 500000, spatialReference: 27700})

For a fully working example, please have a look at the script shown in this post:

ArcGIS JavaScript with UK data - URL.searchParams - Esri Community

Cheers,

Egge-Jan

View solution in original post

2 Replies
Egge-Jan_Pollé
MVP Regular Contributor

You may try something like this:

center: new Point({x: 500000, y: 500000, spatialReference: 27700})

For a fully working example, please have a look at the script shown in this post:

ArcGIS JavaScript with UK data - URL.searchParams - Esri Community

Cheers,

Egge-Jan

nevvo
by
Emerging Contributor

D'oh - thanks very much.  Brain fail.

0 Kudos