ArcGIS map shows all continents (zoom out completely) when using wkid 102704

Question

I am referring an example provided in, https://developers.arcgis.com/documentation/core-concepts/features-and-geometries/#polygons for drawing a polygon and move the map to that location. The example is working fine. But when I use my custom details such as the rings values and WKID, the polygon is drawing in the location but the map appears completely zoom out such that all the continents are appearing (Please check the image attached). It is required to zoom to the location by click on the '+' widget. Please find the code below. enter image description here

I have commented the example wkid and ring values.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


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


<style>
  html,
  body,
  #mapDiv,
  .map .container {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100vw !important;
  }
</style>

</head>
<body>


<script>
require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/FeatureLayer",
  "esri/geometry/Polygon",
  "esri/Graphic",
  "esri/symbols/SimpleFillSymbol",
  "esri/geometry/support/webMercatorUtils",
  "dojo/domReady!"
], function(
  Map,
  MapView,
  FeatureLayer,
  Polygon,
  Graphic,
  SimpleFillSymbol,
  webMercatorUtils
) {
  var map = new Map({
    basemap: "streets-navigation-vector"
  });


// 102704 - Custom WKID
// 4326 - Example WKID
  var poly = new Polygon({
    spatialReference: {
      wkid: 102704
    },
    rings: [
      // [
      //   [-118.38516, 34.0127],
      //   [-118.38827, 34.01489],
      //   [-118.38813, 34.01602],
      //   [-118.38797, 34.01648],
      //   [-118.3876, 34.01712],
      //   [-118.38733, 34.01696],
      //   [-118.38696, 34.01749],
      //   [-118.38662, 34.01789],
      //   [-118.38689, 34.01805],
      //   [-118.38683, 34.01812],
      //   [-118.38295, 34.01592],
      //   [-118.38516, 34.0127]
      // ],
      // [
      //   [-118.38661, 34.01486],
      //   [-118.38634, 34.01498],
      //   [-118.38652, 34.01563],
      //   [-118.3867, 34.01559],
      //   [-118.38679, 34.01595],
      //   [-118.38699, 34.01591],
      //   [-118.38707, 34.01507],
      //   [-118.38661, 34.01486]
      // ]



    [
       [
       2744913.4668447226,
       541568.06113781035
      ],
      [
       2744917.4038447142,
       541499.65215389431
      ],
      [
       2744864.2454864681,
       541496.82210706174
      ],
      [
       2744813.6648789644,
       541494.12952713668
      ],
      [
       2744810.2104895562,
       541563.64283956587
      ],
      [
       2744860.4905727208,
       541565.79441006482
      ],
      [
       2744913.4668447226,
       541568.06113781035
      ]
     ]
    ]
  });

  var view = new MapView({
    container: "mapDiv",
    map: map,
    // zoom: 18,
        // minZoom: 13,
        basemap: "satellite",
    // extent: webMercatorUtils.geographicToWebMercator(poly.extent.expand(3))
  });
  var symbol = new SimpleFillSymbol({
    style: "solid",
    color: [4, 121, 193, 0.5],
    outline: {
      width: 2,
      color: [2, 94, 149, 1]
    }
  });

  var graphic = new Graphic({
    geometry: poly,
    symbol: symbol
  });

  view.on("mouse-wheel", function(event) {
    event.stopPropagation();
    var doc = document.documentElement;
    var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
    window.scroll(0, top + event.deltaY);
  });

  view.graphics.add(graphic);

});
</script>
<div style="" id="mapDiv"></div>
<mat-button-toggle-group [multiple]="true" name="fontStyle" aria-label="Font Style">
  <button id="parcels" value="bold">Parcels</button>
  <button id="housenumbers" value="italic">House Numbers</button>
  <button id="said" value="underline">Sample Area IDs</button>
</mat-button-toggle-group>
</body>
</html>

score 0 · Accepted Answer · answered Sep 14 '20 at 04:50

The problem is that you need to reproject your custom coordinates (assume we call custom to other coordinate rather than WebMercator 3857 or 102100 and Geographics 4326). In order to do so,

you can use the GeometryService to interact with a geometry service of an ArcGIS Server,
or you could try pojection module to do it in the client.

Here you have a working example base on your code, that uses GeometryService.

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>


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


  <style>
    html,
    body,
    #mapDiv,
    .map .container {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100vw !important;
    }
  </style>

</head>

<body>


  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/geometry/Polygon",
      "esri/geometry/SpatialReference",
      "esri/Graphic",
      "esri/tasks/GeometryService",
      "esri/tasks/support/ProjectParameters",
      "dojo/domReady!"
    ], function (
      Map,
      MapView,
      Polygon,
      SpatialReference,
      Graphic,
      GeometryService,
      ProjectParameters
    ) {

      const map = new Map({
        basemap: "streets"
      });

      const view = new MapView({
        container: "mapDiv",
        map: map
      });

      // 102704 - Custom WKID
      const originalPoly = new Polygon({
        spatialReference: {
          wkid: 102704
        },
        rings: [
          [
            [
              2744913.4668447226,
              541568.06113781035
            ],
            [
              2744917.4038447142,
              541499.65215389431
            ],
            [
              2744864.2454864681,
              541496.82210706174
            ],
            [
              2744813.6648789644,
              541494.12952713668
            ],
            [
              2744810.2104895562,
              541563.64283956587
            ],
            [
              2744860.4905727208,
              541565.79441006482
            ],
            [
              2744913.4668447226,
              541568.06113781035
            ]
          ]
        ]
      });

      console.log(`Original Polygon: ${JSON.stringify(originalPoly.toJSON())}`);

      const geomSer = new GeometryService(
        "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer"
      );

      const outSpatialReference = new SpatialReference({ wkid: 102100 });

      const params = new ProjectParameters({
        geometries: [originalPoly],
        outSpatialReference
      });

      geomSer.project(params).then(function(result) {
        const projectedPoly = result[0];

        if (!projectedPoly) {
          return;
        }

        console.log(`Projected Polygon: ${JSON.stringify(projectedPoly.toJSON())}`);

        view.graphics.add(new Graphic({
          geometry: projectedPoly,
          symbol: {
            type: "simple-fill",
            style: "solid",
            color: [255, 0, 0, 0.1],
            outline: {
              width: 2,
              color: [255, 0, 0, 1]
            }
          }
        }));

        view.extent = projectedPoly.extent.clone().expand(3);

      });

    });
  </script>
  <div id="mapDiv"></div>
</body>

</html>

ArcGIS API - GeometryService

ArcGIS API - projection

Thank you so much for this information. The map is working with the converted polygon values. :) — Adam-KER, Sep 14 '20 at 13:26

ArcGIS map shows all continents (zoom out completely) when using wkid 102704

1 Answers1