AnsweredAssumed Answered

I try to make custom wab widget for my app, can help me someone

Question asked by Dilberisimus on Feb 18, 2020
Latest reply on Feb 20, 2020 by Dilberisimus

Hi all,

like a say, I try to make custom wab widget for my app, can help me someone. I have ArcGIS API for JavaScript Sandbox code and need code for WAB..

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />

    <title>CoordinateConversion widget - Custom Formats - 4.14</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
    />


    <style>
      html,
      body,
      #viewDiv
{
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
    </style>


    <script src="https://js.arcgis.com/4.14/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/widgets/CoordinateConversion",
        "esri/widgets/CoordinateConversion/support/Format",
        "esri/widgets/CoordinateConversion/support/Conversion",
        "esri/geometry/Point",
        "esri/geometry/support/webMercatorUtils",
        "esri/geometry/SpatialReference"
      ], function(
        Map,
        SceneView,
        CoordinateConversion,
        Format,
        Conversion,
        Point,
        webMercatorUtils,
        SpatialReference
      ) {
        var map = new Map({
          basemap: "hybrid",
          ground: "world-elevation"
        });

        var view = new SceneView({
          container: "viewDiv",
          map: map,
          // Clip the view to the extent covered by
          // by NAD 1983 HARN StatePlane California I
          clippingArea: {
            xmin: -124.45,
            xmax: -119.99,
            ymax: 43.01,
            ymin: 39.59
          },
          center: {
            x: -122.22,
            y: 41.3
          },
          zoom: 10,
          viewingMode: "local"
        });

        view.when(function(view) {
          view.goTo({ tilt: 45 });
        });

        var ccWidget = new CoordinateConversion({
          view: view
        });

        view.ui.add(ccWidget, "top-right");

        // Regular expression to find a number
        var numberSearchPattern = /-?\d+[\.]?\d*/;

        /**
         * Create a new Format called XYZ, which looks like: "<Latitude>, <Longitude>, <Z>"
         *
         * We need to define a convert function, a reverse convert function,
         * and some formatting information.
         */

        var 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) {
              var returnPoint = point.spatialReference.isWGS84
                ? point
                : webMercatorUtils.webMercatorToGeographic(point);
              var x = returnPoint.x.toFixed(4);
              var y = returnPoint.y.toFixed(4);
              var z = returnPoint.z.toFixed(4);
              return {
                location: returnPoint,
                coordinate: `${x}, ${y}, ${z}`
              };
            },
            // Define a reverse convert function
            // String -> Point
            reverseConvert: function(string) {
              var 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"
        });

        // add our new format to the widget's dropdown
        ccWidget.formats.add(newFormat);

        /**
         * Create a new Format 'SPS I', which looks like: "<X>, <Y>" in the
         * California StatePlane Zone I Spatial Reference, described by wkid 102241
         *
         * For this Format, we only need to provide a spatialReference with the correct
         * wkid. The geometry service can take care of the rest.
         */

        var stateplaneCA = new Format({
          name: "SPS I",
          conversionInfo: {
            spatialReference: new SpatialReference({ wkid: 102241 }),
            reverseConvert: function(string, format) {
              var parts = string.split(",");
              return new Point({
                x: parseFloat(parts[0]),
                y: parseFloat(parts[1]),
                spatialReference: { wkid: 102241 }
              });
            }
          },
          coordinateSegments: [
            {
              alias: "X",
              description: "easting",
              searchPattern: numberSearchPattern
            },
            {
              alias: "Y",
              description: "northing",
              searchPattern: numberSearchPattern
            }
          ],
          defaultPattern: "X, Y"
        });

        // Add our new format to the widget's dropdown
        ccWidget.formats.add(stateplaneCA);

        // Add the two custom formats to the top of the widget's display
        ccWidget.conversions.splice(
          0,
          0,
          new Conversion({
            format: newFormat
          }),
          new Conversion({
            format: stateplaneCA
          })
        );
      });
    </script>

  </head>

  <body class="calcite">
    <div id="viewDiv"></div>
  </body>
</html>

Outcomes