CoordinateConversion format to show DMS + elevation

[Leandro-Zamudio]

Hi, following the CoordinateConversion custom format in the documentation I've implemented the widget correctly in my 4.24 app.

But now i need to show the lat/long in DMS, it's like combining these two

This is my format code 

    const numberSearchPattern = /-?\d+[\.]?\d*/;
    const newFormat = new Format({
      // Nombre único e información del Formato
      name: "XYZ",
      conversionInfo: {
        convert: function (point) {
          const returnPoint = point.spatialReference.isWGS84
            ? point
            : webMercatorUtils.webMercatorToGeographic(point);
          const x = returnPoint.x.toFixed(2);
          const y = returnPoint.y.toFixed(2);
          const z = returnPoint.z.toFixed(2)/2;
          return {
            location: returnPoint,
            coordinate: `${x}, ${y}, ${z}`
          };
        },
        reverseConvert: function (string) {
          const parts = string.split(",");
          return new Point({
            x: parseFloat(parts[0]),
            y: parseFloat(parts[1]),
            z: parseFloat(parts[2]),
            spatialReference: { wkid: 4326 }
          });
        }
      },
      coordinateSegments: [
        {
          alias: "X",
          description: "Longitud",
          searchPattern: numberSearchPattern
        },
        {
          alias: "Y",
          description: "Latitud",
          searchPattern: numberSearchPattern
        },
        {
          alias: "Z",
          description: "Elevación",
          searchPattern: numberSearchPattern
        }
      ],
      defaultPattern: "X°, Y°, Zm"
    });

 Note: The Z value is divided by 2 because the WebScene has a 2x exaggeration.

Thanks in advance

[GreteSoosalu]

Hi @Leandro-Zamudio 

In such a case, it is the best to break the coordinates already into degrees-minutes-seconds inside the conversionInfo and adjust the coordinateSegments accordingly.  

For pre-formatting the point's coordinates into "40 50 02.55N 121 31 54.83W" pattern, you can use the coordinateFormatter converter: 

coordinateFormatter.toLatitudeLongitude(returnPoint, "dms", 3)

Here's an example app that shows the widget with a custom DMS format with Z values: https://codepen.io/gsoosalu/pen/xxJRjMX

Hope this helps you further. 

[Leandro-Zamudio]

Hi @GreteSoosalu 

I watched the codepen but it doesn't show the custom coordinate format but reading the code and re-thinking it I could solve it breaking the coordinates as you suggested. For further reference I share the solution of the same code but corrected:

const newFormat = new Format({
      name: "XYZ",
      conversionInfo: {
        convert: function (point) {
          const returnPoint = point.spatialReference.isWGS84
            ? point
            : webMercatorUtils.webMercatorToGeographic(point);
          const x = Math.trunc(returnPoint.x);
          const a = Math.trunc(-(returnPoint.x-x)*60);
          const b = (-(returnPoint.x-x-(a/-60))*3600).toFixed(2);
          const y = Math.trunc(returnPoint.y);
          const c = Math.trunc(-(returnPoint.y-y)*60);
          const d = (-(returnPoint.y-y-(c/-60))*3600).toFixed(2);
          const z = returnPoint.z.toFixed(2)/2;
          //console.log(b)
          return {
            location: returnPoint,
            coordinate: `${x}, ${a}, ${b}, ${y}, ${c}, ${d}, ${z}`
          };
        },
//For now i'm not using the reverseConvert function so I left it as is
        reverseConvert: function (string) {
          const parts = string.split(",");
          return new Point({
            x: parseFloat(parts[0]),
            y: parseFloat(parts[1]),
            z: parseFloat(parts[2]),
            spatialReference: { wkid: 4326 }
          });
        }
      },
      coordinateSegments: [
        {alias: "X", description: "Longitud Grados", searchPattern: numberSearchPattern},
        {alias: "A", description: "Longitud Minutos", searchPattern: numberSearchPattern},
        {alias: "B", description: "Longitud Segundos", searchPattern: numberSearchPattern},
        {alias: "Y", description: "Latitud Grados", searchPattern: numberSearchPattern},
        {alias: "C", description: "Latitud Minutos", searchPattern: numberSearchPattern},
        {alias: "D", description: "Latitud Segundos", searchPattern: numberSearchPattern},
        {alias: "Z", description: "Elevación", searchPattern: numberSearchPattern}
      ],
      defaultPattern: "X° A\' B\", Y° C\' D\", Zm"
    });

I'd like to know more about the Regular expressions that you used to find a number, is there any reference to read about it?

      // Regular expressions to find a number
      const numberSearchPattern = /-?\d+[\.]?\d*/;
      const number2Digit = /\d{1,2}[\.|\.]?\d*/i; // Same as CoordinateConversion widget's DMS format uses
      const number3Digit = /\d{1,3}[\.|\.]?\d*/i; // Same as CoordinateConversion widget's DMS format uses

Thanks for your help

[GreteSoosalu]

Oh, you're right, there was a bug in my app. It should be fixed now, so the custom format should be shown: 

And thanks @Leandro-Zamudio for sharing the fixed code that works for you! 

[GreteSoosalu]

Regarding the Regular expressions, I cannot think of any references at the moment but if I find anything, I'll post it here.