How to correctly display and center a WMTS-service with EPSG 2056 (Swiss CH1903+ / LV95)?

348
2
Jump to solution
02-22-2022 11:31 PM
NadjaBernhard
Occasional Contributor

Hi, 

I'm really new to the ArcGIS API for Javascript 4.x. I'm trying to get my basemap (a WMTS service from swisstopo) correctly displayed. https://codepen.io/nwp_nadja_bernhard/pen/YzEvxdw with editor-view shows my code of my best attempt.

I've managed to get the service displayed (see displayed_wmts_service.jpg), but I'm encountering a problem in the centering of the map. No matter which center coordinates I choose (LV95 - x, y or y, x, WGS84), the WMTS-service gets displayed in the top-left corner. The currently chosen center-coordinates however are in the center of Switzerland, see center_coordinates.jpg. 

I would like the WMTS-service to be displayed in such way, that the entire Switzerland is shown and that it is centered. What am I missing? 

Best wished,

Nadja

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
UndralBatsukh
Esri Regular Contributor

Hi there, 

You can only pass in long/lat as an array of numbers for the MapView.center. But in your case, it won't work. To center your map in your coordinate system, you need to set the mapView.center to a point object in the spatial reference of your view. 

You can do this and it will work.

 const view = new MapView({
   container: "viewDiv",
   map: map,
   center: {
     type: "point", 
     x: 2657560, 
     y: 1194592,
     spatialReference: {
       wkid: 2056 
     }
   },
   scale: 1500000,
   spatialReference: {
     wkid: 2056 
   }
 });

 

View solution in original post

0 Kudos
2 Replies
UndralBatsukh
Esri Regular Contributor

Hi there, 

You can only pass in long/lat as an array of numbers for the MapView.center. But in your case, it won't work. To center your map in your coordinate system, you need to set the mapView.center to a point object in the spatial reference of your view. 

You can do this and it will work.

 const view = new MapView({
   container: "viewDiv",
   map: map,
   center: {
     type: "point", 
     x: 2657560, 
     y: 1194592,
     spatialReference: {
       wkid: 2056 
     }
   },
   scale: 1500000,
   spatialReference: {
     wkid: 2056 
   }
 });

 

0 Kudos
NadjaBernhard
Occasional Contributor

Thank you UndralBatsukh. It worked 🙂

0 Kudos