CoordinateConversion widget - Custom Formats

This sample demonstrates how to add a custom format to the Coordinate Conversion widget. In the sample, two custom formats are added:

  1. A format representing a WGS84 point, with the addition of a z-value in meters.
  2. A format representing a NAD 1983 HARN StatePlane California I point, described by wkid 102241.

The Scene View in this sample is clipped to an extent where the StatePlane California I spatial reference is useful.

User defined custom formats need to define a convert function and a reverse convert function or a Spatial Reference and a reverse convert function. If a SpatialReference is provided, a convert function is not required; the Geometry Service will be used to project as needed.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// Regular expression to find a number
const numberSearchPattern = /-?\d+[\.]?\d*/;

const newFormat = new Format({
  // The format's name should be unique with respect to other formats used by the widget
  name: "XYZ",
  conversionInfo: {
    // Define a convert function
    // Point -> Position
    convert: function(point) {
      const returnPoint = point.spatialReference.isWGS84
        ? point
        : webMercatorUtils.webMercatorToGeographic(point);
      const x = returnPoint.x.toFixed(4);
      const y = returnPoint.y.toFixed(4);
      const z = returnPoint.z.toFixed(4);
      return {
        location: returnPoint,
        coordinate: `${x}, ${y}, ${z}`
      };
    },
    // Define a reverse convert function
    // String -> Point
    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 }
      });
    }
  },
  // Define each segment of the coordinate
  coordinateSegments: [
    {
      alias: "X",
      description: "Longitude",
      searchPattern: numberSearchPattern
    },
    {
      alias: "Y",
      description: "Latitude",
      searchPattern: numberSearchPattern
    },
    {
      alias: "Z",
      description: "Elevation",
      searchPattern: numberSearchPattern
    }
  ],
  defaultPattern: "X°, Y°, Z"
});

Additional resources

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.