Display projected geometries

Learn how to display geometries in different projections.

A geometry projection transforms the vertices of a geometric shape from one coordinate system (a spatial reference) to another. For example, you can project a geographic coordinate system such as WGS84 (4326) to a projected coordinate system such as World Sinusoidal (54008).

Each projection can maintain one of the following: area, angle, or direction. The projection you use is based on your application's requirements. For example, if you have data centered on the North Pole, the Web Mercator (3857) spatial reference is typically not used as the pole features are not correctly represented by the projection; there is a large area distortion. Instead, you might use the North Pole Gnomonic (102034) spatial reference because it preserves the area around the North Pole.

In this tutorial, you project GeoJSON features using the projection engine and a spatial reference chosen from the selector. A center point and buffer graphic are also added to the map view.

Prerequisites

There are no prerequisites for this tutorial.

Steps

Create a new pen

  1. Go to CodePen to create a new pen for your mapping application.

Add HTML elements

  1. In CodePen > HTML, add HTML and CSS to create a page with viewDivand wkid elements. The viewDiv is the element displays the map and its CSS resets any browser settings so it can consume the full width and height of the browser. The wkid options will be Web Mercator and WGS84. Create <script> and <link> tags to reference the CSS and JS library.

                                                                                                                                                                                                                                                                                                            
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    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
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Display projected geometries</title>
        <style>
          html,
          body,
          #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            background-color: #ffffff;
          }
          #wkid {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 220px;
            font-family: "Avenir Next";
            font-size: 1em;
          }
        </style>
        <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21"></script>
    
        <script>
          require([
            "esri/views/MapView",
            "esri/Map",
            "esri/request",
            "esri/geometry/SpatialReference",
            "esri/Graphic",
            "esri/geometry/Point",
            "esri/geometry/Polyline",
            "esri/layers/GeoJSONLayer",
            "esri/geometry/geometryEngine",
            "esri/geometry/projection",
          ], (
            Map,
          ) => {
            let spatialReference;
            let view;
            const polySym = {
              type: "simple-fill", // autocasts as new SimpleFillSymbol()
              color: [150, 130, 220, 0.85],
              outline: {
                color: "gray",
                width: 0.5,
            const pointSym = {
              type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
              color: "red",
              outline: {
                color: "white",
                width: 0.5,
              size: 5,
            const projectionBoundary = {
              symbol: {
                type: "simple-fill",
                color: null,
                outline: {
                  width: 0.5,
                  color: [50, 50, 50, 0.75],
                  style: "dash",
              geometry: {
                type: "extent",
                xmin: -180,
                xmax: 180,
                ymin: -90,
                ymax: 90,
                spatialReference: SpatialReference.WGS84,
            const countriesGeoJson = new GeoJSONLayer({
              url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson",
              copyright: "Esri",
              spatialReference: {
                wkid: 4326,
              renderer: {
                type: "simple",
                symbol: {
                  type: "simple-fill",
                  color: [255, 255, 255, 1],
                  outline: {
                    width: 0.5,
                    color: [100, 70, 170, 0.75],
            const map = new Map({
              layers: [countriesGeoJson],
            const wkidSelect = document.getElementById("wkid");
            wkidSelect.addEventListener("change", (event) => {
            let center = new Point({
              latitude: 30,
              longitude: -10,
              spatialReference: {
                wkid: 4326,
            function createViewWithSpatialReference(){
            async function createViewWithSpatialReference() {
              await projection.load();
              if (view) {
                view.map = null;
              view = new MapView({
                container: "viewDiv",
                map: map,
                spatialReference: spatialReference,
                center: center, //Need to use projection engine
                scale: 150000000,
              view.ui.add(wkidSelect, "top-right");
              view.when(() => {
              view.on("pointer-move", (event) => {
            function getSpatialReference(wkid) {
              return new SpatialReference({
                wkid: wkid,
            function displayCoordinates(point) {
              const popupTemplate = {
                title: `WKID: ${point.spatialReference.wkid}`,
                content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed(
                  5
                )}`,
                overwriteActions: true,
                buttonEnabled: false,
                closeButton: false,
                featureNavigation: false,
              const graphic = new Graphic({
                geometry: point,
                popupTemplate: popupTemplate,
                features: [graphic],
            function createBuffer(event) {
              let point = view.toMap({
                x: event.x,
                y: event.y,
              if (point) {
            function bufferPoint(point) {
              if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) {
                point = projection.project(point, getSpatialReference(4326));
                if (!point) {
                  return;
              const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers");
              if (point && buffer) {
                // Avoid removing the map projection boundary
                  view.graphics.getItemAt(2),
                  view.graphics.getItemAt(3),
                const bufferGraphic = {
                  geometry: buffer,
                  symbol: polySym,
                    geometry: point,
                    symbol: pointSym,
        </script>
    
      </head>
      <body>
        <div id="viewDiv"></div>
        <select id="wkid" class="esri-widget esri-select">
    
          <option value="3857" disabled>Select a projection</option>
          <optgroup label="Equidistant (maintain length)">
    
            <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option>
    
            <option value="54028">World Cassini (Cylindrical)</option>
            <option value="54027">World Equidistant conic (Conic)</option>
    
          </optgroup>
    
          <optgroup label="Conformal (maintain angles)">
    
            <option value="54026">World Stereographic (Azimuthal)</option>
          </optgroup>
          <optgroup label="Equal-area (maintain area)">
    
            <option value="54010">World Eckert VI (Pseudocylindrical)</option>
            <option value="54008">World Sinusoidal (Pseudocylindrical)</option>
          </optgroup>
          <optgroup label="Gnomonic (distances)">
    
            <option value="102034">North Pole Gnomonic (Azimuthal)</option>
          </optgroup>
    
          <optgroup label="Compromise (distort all)">
    
            <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option>
    
            <option value="54016">World Gall Stereographic (Cylindrical)</option>
            <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option>
            <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option>
    
          </optgroup>
    
        </select>
      </body>
    </html>

Add modules

  1. In the require statement, add the modules.

    The ArcGIS API for JavaScript uses AMD modules. The require function is used to load modules so they can be used in the main function. It's important to keep the module references and function parameters in the same order.

                                                                                                                                                                                                                                                                                                            
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    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
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Display projected geometries</title>
        <style>
          html,
          body,
          #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            background-color: #ffffff;
          #wkid {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 220px;
            font-family: "Avenir Next";
            font-size: 1em;
        </style>
        <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21"></script>
    
        <script>
          require([
    
            "esri/views/MapView",
            "esri/Map",
            "esri/request",
            "esri/geometry/SpatialReference",
            "esri/Graphic",
            "esri/geometry/Point",
            "esri/geometry/Polyline",
            "esri/layers/GeoJSONLayer",
            "esri/geometry/geometryEngine",
            "esri/geometry/projection",
          ], (
            MapView,
            Map,
            esriRequest,
            SpatialReference,
            Graphic,
            Point,
            Polyline,
            GeoJSONLayer,
            geometryEngine,
            projection
          ) => {
    
            let spatialReference;
            let view;
            const polySym = {
              type: "simple-fill", // autocasts as new SimpleFillSymbol()
              color: [150, 130, 220, 0.85],
              outline: {
                color: "gray",
                width: 0.5,
            const pointSym = {
              type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
              color: "red",
              outline: {
                color: "white",
                width: 0.5,
              size: 5,
            const projectionBoundary = {
              symbol: {
                type: "simple-fill",
                color: null,
                outline: {
                  width: 0.5,
                  color: [50, 50, 50, 0.75],
                  style: "dash",
              geometry: {
                type: "extent",
                xmin: -180,
                xmax: 180,
                ymin: -90,
                ymax: 90,
                spatialReference: SpatialReference.WGS84,
            const countriesGeoJson = new GeoJSONLayer({
              url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson",
              copyright: "Esri",
              spatialReference: {
                wkid: 4326,
              renderer: {
                type: "simple",
                symbol: {
                  type: "simple-fill",
                  color: [255, 255, 255, 1],
                  outline: {
                    width: 0.5,
                    color: [100, 70, 170, 0.75],
            const map = new Map({
              layers: [countriesGeoJson],
            const wkidSelect = document.getElementById("wkid");
            wkidSelect.addEventListener("change", (event) => {
            let center = new Point({
              latitude: 30,
              longitude: -10,
              spatialReference: {
                wkid: 4326,
            function createViewWithSpatialReference(){
            async function createViewWithSpatialReference() {
              await projection.load();
              if (view) {
                view.map = null;
              view = new MapView({
                container: "viewDiv",
                map: map,
                spatialReference: spatialReference,
                center: center, //Need to use projection engine
                scale: 150000000,
              view.ui.add(wkidSelect, "top-right");
              view.when(() => {
              view.on("pointer-move", (event) => {
            function getSpatialReference(wkid) {
              return new SpatialReference({
                wkid: wkid,
            function displayCoordinates(point) {
              const popupTemplate = {
                title: `WKID: ${point.spatialReference.wkid}`,
                content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed(
                  5
                )}`,
                overwriteActions: true,
                buttonEnabled: false,
                closeButton: false,
                featureNavigation: false,
              const graphic = new Graphic({
                geometry: point,
                popupTemplate: popupTemplate,
                features: [graphic],
            function createBuffer(event) {
              let point = view.toMap({
                x: event.x,
                y: event.y,
              if (point) {
            function bufferPoint(point) {
              if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) {
                point = projection.project(point, getSpatialReference(4326));
                if (!point) {
                  return;
              const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers");
              if (point && buffer) {
                // Avoid removing the map projection boundary
                  view.graphics.getItemAt(2),
                  view.graphics.getItemAt(3),
                const bufferGraphic = {
                  geometry: buffer,
                  symbol: polySym,
                    geometry: point,
                    symbol: pointSym,
          });
        </script>
    
      </head>
      <body>
        <div id="viewDiv"></div>
        <select id="wkid" class="esri-widget esri-select">
    
          <option value="3857" disabled>Select a projection</option>
          <optgroup label="Equidistant (maintain length)">
    
            <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option>
    
            <option value="54028">World Cassini (Cylindrical)</option>
            <option value="54027">World Equidistant conic (Conic)</option>
    
          </optgroup>
    
          <optgroup label="Conformal (maintain angles)">
    
            <option value="54026">World Stereographic (Azimuthal)</option>
          </optgroup>
          <optgroup label="Equal-area (maintain area)">
    
            <option value="54010">World Eckert VI (Pseudocylindrical)</option>
            <option value="54008">World Sinusoidal (Pseudocylindrical)</option>
          </optgroup>
          <optgroup label="Gnomonic (distances)">
    
            <option value="102034">North Pole Gnomonic (Azimuthal)</option>
          </optgroup>
    
          <optgroup label="Compromise (distort all)">
    
            <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option>
    
            <option value="54016">World Gall Stereographic (Cylindrical)</option>
            <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option>
            <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option>
    
          </optgroup>
    
        </select>
      </body>
    </html>

Set global variables and styles

Set the global variables needed to switch between spatial references and to recreate the view. The polygon and point styles will style the buffer created in a later step.

  1. Create spatialReference and view variables that will be used when switching between spatial references. Set the coordinates variable with the coordinates div to display the projected x/y of the center point on the map.

                                                                                                                                                                                                                                                                                                            
    Add line.Add line.
    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
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Display projected geometries</title>
        <style>
          html,
          body,
          #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            background-color: #ffffff;
          #wkid {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 220px;
            font-family: "Avenir Next";
            font-size: 1em;
        </style>
        <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21"></script>
    
        <script>
          require([
            "esri/views/MapView",
            "esri/Map",
            "esri/request",
            "esri/geometry/SpatialReference",
            "esri/Graphic",
            "esri/geometry/Point",
            "esri/geometry/Polyline",
            "esri/layers/GeoJSONLayer",
            "esri/geometry/geometryEngine",
            "esri/geometry/projection",
          ], (
            MapView,
            Map,
            esriRequest,
            SpatialReference,
            Graphic,
            Point,
            Polyline,
            GeoJSONLayer,
            geometryEngine,
            projection
          ) => {
    
            let spatialReference;
            let view;
    
            const polySym = {
              type: "simple-fill", // autocasts as new SimpleFillSymbol()
              color: [150, 130, 220, 0.85],
              outline: {
                color: "gray",
                width: 0.5,
            const pointSym = {
              type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
              color: "red",
              outline: {
                color: "white",
                width: 0.5,
              size: 5,
            const projectionBoundary = {
              symbol: {
                type: "simple-fill",
                color: null,
                outline: {
                  width: 0.5,
                  color: [50, 50, 50, 0.75],
                  style: "dash",
              geometry: {
                type: "extent",
                xmin: -180,
                xmax: 180,
                ymin: -90,
                ymax: 90,
                spatialReference: SpatialReference.WGS84,
            const countriesGeoJson = new GeoJSONLayer({
              url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson",
              copyright: "Esri",
              spatialReference: {
                wkid: 4326,
              renderer: {
                type: "simple",
                symbol: {
                  type: "simple-fill",
                  color: [255, 255, 255, 1],
                  outline: {
                    width: 0.5,
                    color: [100, 70, 170, 0.75],
            const map = new Map({
              layers: [countriesGeoJson],
            const wkidSelect = document.getElementById("wkid");
            wkidSelect.addEventListener("change", (event) => {
            let center = new Point({
              latitude: 30,
              longitude: -10,
              spatialReference: {
                wkid: 4326,
            function createViewWithSpatialReference(){
            async function createViewWithSpatialReference() {
              await projection.load();
              if (view) {
                view.map = null;
              view = new MapView({
                container: "viewDiv",
                map: map,
                spatialReference: spatialReference,
                center: center, //Need to use projection engine
                scale: 150000000,
              view.ui.add(wkidSelect, "top-right");
              view.when(() => {
              view.on("pointer-move", (event) => {
            function getSpatialReference(wkid) {
              return new SpatialReference({
                wkid: wkid,
            function displayCoordinates(point) {
              const popupTemplate = {
                title: `WKID: ${point.spatialReference.wkid}`,
                content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed(
                  5
                )}`,
                overwriteActions: true,
                buttonEnabled: false,
                closeButton: false,
                featureNavigation: false,
              const graphic = new Graphic({
                geometry: point,
                popupTemplate: popupTemplate,
                features: [graphic],
            function createBuffer(event) {
              let point = view.toMap({
                x: event.x,
                y: event.y,
              if (point) {
            function bufferPoint(point) {
              if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) {
                point = projection.project(point, getSpatialReference(4326));
                if (!point) {
                  return;
              const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers");
              if (point && buffer) {
                // Avoid removing the map projection boundary
                  view.graphics.getItemAt(2),
                  view.graphics.getItemAt(3),
                const bufferGraphic = {
                  geometry: buffer,
                  symbol: polySym,
                    geometry: point,
                    symbol: pointSym,
        </script>
    
      </head>
      <body>
        <div id="viewDiv"></div>
        <select id="wkid" class="esri-widget esri-select">
    
          <option value="3857" disabled>Select a projection</option>
          <optgroup label="Equidistant (maintain length)">
    
            <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option>
    
            <option value="54028">World Cassini (Cylindrical)</option>
            <option value="54027">World Equidistant conic (Conic)</option>
    
          </optgroup>
    
          <optgroup label="Conformal (maintain angles)">
    
            <option value="54026">World Stereographic (Azimuthal)</option>
          </optgroup>
          <optgroup label="Equal-area (maintain area)">
    
            <option value="54010">World Eckert VI (Pseudocylindrical)</option>
            <option value="54008">World Sinusoidal (Pseudocylindrical)</option>
          </optgroup>
          <optgroup label="Gnomonic (distances)">
    
            <option value="102034">North Pole Gnomonic (Azimuthal)</option>
          </optgroup>
    
          <optgroup label="Compromise (distort all)">
    
            <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option>
    
            <option value="54016">World Gall Stereographic (Cylindrical)</option>
            <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option>
            <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option>
    
          </optgroup>
    
        </select>
      </body>
    </html>
  2. Set polygon and point styling that will display when a point is buffered on the map.

                                                                                                                                                                                                                                                                                                            
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    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
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Display projected geometries</title>
        <style>
          html,
          body,
          #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            background-color: #ffffff;
          #wkid {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 220px;
            font-family: "Avenir Next";
            font-size: 1em;
        </style>
        <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21"></script>
    
        <script>
          require([
            "esri/views/MapView",
            "esri/Map",
            "esri/request",
            "esri/geometry/SpatialReference",
            "esri/Graphic",
            "esri/geometry/Point",
            "esri/geometry/Polyline",
            "esri/layers/GeoJSONLayer",
            "esri/geometry/geometryEngine",
            "esri/geometry/projection",
          ], (
            MapView,
            Map,
            esriRequest,
            SpatialReference,
            Graphic,
            Point,
            Polyline,
            GeoJSONLayer,
            geometryEngine,
            projection
          ) => {
    
            let spatialReference;
            let view;
    
            const polySym = {
              type: "simple-fill", // autocasts as new SimpleFillSymbol()
              color: [150, 130, 220, 0.85],
              outline: {
                color: "gray",
                width: 0.5,
              },
            };
    
            const pointSym = {
              type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
              color: "red",
              outline: {
                color: "white",
                width: 0.5,
              },
              size: 5,
            };
            const projectionBoundary = {
              symbol: {
                type: "simple-fill",
                color: null,
                outline: {
                  width: 0.5,
                  color: [50, 50, 50, 0.75],
                  style: "dash",
              geometry: {
                type: "extent",
                xmin: -180,
                xmax: 180,
                ymin: -90,
                ymax: 90,
                spatialReference: SpatialReference.WGS84,
            const countriesGeoJson = new GeoJSONLayer({
              url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson",
              copyright: "Esri",
              spatialReference: {
                wkid: 4326,
              renderer: {
                type: "simple",
                symbol: {
                  type: "simple-fill",
                  color: [255, 255, 255, 1],
                  outline: {
                    width: 0.5,
                    color: [100, 70, 170, 0.75],
            const map = new Map({
              layers: [countriesGeoJson],
            const wkidSelect = document.getElementById("wkid");
            wkidSelect.addEventListener("change", (event) => {
            let center = new Point({
              latitude: 30,
              longitude: -10,
              spatialReference: {
                wkid: 4326,
            function createViewWithSpatialReference(){
            async function createViewWithSpatialReference() {
              await projection.load();
              if (view) {
                view.map = null;
              view = new MapView({
                container: "viewDiv",
                map: map,
                spatialReference: spatialReference,
                center: center, //Need to use projection engine
                scale: 150000000,
              view.ui.add(wkidSelect, "top-right");
              view.when(() => {
              view.on("pointer-move", (event) => {
            function getSpatialReference(wkid) {
              return new SpatialReference({
                wkid: wkid,
            function displayCoordinates(point) {
              const popupTemplate = {
                title: `WKID: ${point.spatialReference.wkid}`,
                content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed(
                  5
                )}`,
                overwriteActions: true,
                buttonEnabled: false,
                closeButton: false,
                featureNavigation: false,
              const graphic = new Graphic({
                geometry: point,
                popupTemplate: popupTemplate,
                features: [graphic],
            function createBuffer(event) {
              let point = view.toMap({
                x: event.x,
                y: event.y,
              if (point) {
            function bufferPoint(point) {
              if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) {
                point = projection.project(point, getSpatialReference(4326));
                if (!point) {
                  return;
              const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers");
              if (point && buffer) {
                // Avoid removing the map projection boundary
                  view.graphics.getItemAt(2),
                  view.graphics.getItemAt(3),
                const bufferGraphic = {
                  geometry: buffer,
                  symbol: polySym,
                    geometry: point,
                    symbol: pointSym,
        </script>
    
      </head>
      <body>
        <div id="viewDiv"></div>
        <select id="wkid" class="esri-widget esri-select">
    
          <option value="3857" disabled>Select a projection</option>
          <optgroup label="Equidistant (maintain length)">
    
            <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option>
    
            <option value="54028">World Cassini (Cylindrical)</option>
            <option value="54027">World Equidistant conic (Conic)</option>
    
          </optgroup>
    
          <optgroup label="Conformal (maintain angles)">
    
            <option value="54026">World Stereographic (Azimuthal)</option>
          </optgroup>
          <optgroup label="Equal-area (maintain area)">
    
            <option value="54010">World Eckert VI (Pseudocylindrical)</option>
            <option value="54008">World Sinusoidal (Pseudocylindrical)</option>
          </optgroup>
          <optgroup label="Gnomonic (distances)">
    
            <option value="102034">North Pole Gnomonic (Azimuthal)</option>
          </optgroup>
    
          <optgroup label="Compromise (distort all)">
    
            <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option>
    
            <option value="54016">World Gall Stereographic (Cylindrical)</option>
            <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option>
            <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option>
    
          </optgroup>
    
        </select>
      </body>
    </html>

Add a GeoJSON layer

To access the GeoJSONLayer class, you create a layer based on GeoJSON data. GeoJSON features are in the WGS84 geographic coordinate system. Once added to the map, the features are automatically projected to the match the spatial reference in the map view. To visualize the extent of the world for each spatial reference, a boundary graphic is displayed.

  1. Create a boundary graphic. Set the outline property of the symbol to create a gray dash line. Set the geometry type to the extent and the spatialReference property to WGS84.

                                                                                                                                                                                                                                                                                                            
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    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
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Display projected geometries</title>
        <style>
          html,
          body,
          #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            background-color: #ffffff;
          #wkid {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 220px;
            font-family: "Avenir Next";
            font-size: 1em;
        </style>
        <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21"></script>
    
        <script>
          require([
            "esri/views/MapView",
            "esri/Map",
            "esri/request",
            "esri/geometry/SpatialReference",
            "esri/Graphic",
            "esri/geometry/Point",
            "esri/geometry/Polyline",
            "esri/layers/GeoJSONLayer",
            "esri/geometry/geometryEngine",
            "esri/geometry/projection",
          ], (
            Map,
          ) => {
            let spatialReference;
            let view;
            const polySym = {
              type: "simple-fill", // autocasts as new SimpleFillSymbol()
              color: [150, 130, 220, 0.85],
              outline: {
                color: "gray",
                width: 0.5,
            const pointSym = {
              type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
              color: "red",
              outline: {
                color: "white",
                width: 0.5,
              },
              size: 5,
            };
    
            const projectionBoundary = {
              symbol: {
                type: "simple-fill",
                color: null,
                outline: {
                  width: 0.5,
                  color: [50, 50, 50, 0.75],
                  style: "dash",
                },
              },
              geometry: {
                type: "extent",
                xmin: -180,
                xmax: 180,
                ymin: -90,
                ymax: 90,
                spatialReference: SpatialReference.WGS84,
              },
            };
            const countriesGeoJson = new GeoJSONLayer({
              url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson",
              copyright: "Esri",
              spatialReference: {
                wkid: 4326,
              renderer: {
                type: "simple",
                symbol: {
                  type: "simple-fill",
                  color: [255, 255, 255, 1],
                  outline: {
                    width: 0.5,
                    color: [100, 70, 170, 0.75],
            const map = new Map({
              layers: [countriesGeoJson],
            const wkidSelect = document.getElementById("wkid");
            wkidSelect.addEventListener("change", (event) => {
            let center = new Point({
              latitude: 30,
              longitude: -10,
              spatialReference: {
                wkid: 4326,
            function createViewWithSpatialReference(){
            async function createViewWithSpatialReference() {
              await projection.load();
              if (view) {
                view.map = null;
              view = new MapView({
                container: "viewDiv",
                map: map,
                spatialReference: spatialReference,
                center: center, //Need to use projection engine
                scale: 150000000,
              view.ui.add(wkidSelect, "top-right");
              view.when(() => {
              view.on("pointer-move", (event) => {
            function getSpatialReference(wkid) {
              return new SpatialReference({
                wkid: wkid,
            function displayCoordinates(point) {
              const popupTemplate = {
                title: `WKID: ${point.spatialReference.wkid}`,
                content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed(
                  5
                )}`,
                overwriteActions: true,
                buttonEnabled: false,
                closeButton: false,
                featureNavigation: false,
              const graphic = new Graphic({
                geometry: point,
                popupTemplate: popupTemplate,
                features: [graphic],
            function createBuffer(event) {
              let point = view.toMap({
                x: event.x,
                y: event.y,
              if (point) {
            function bufferPoint(point) {
              if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) {
                point = projection.project(point, getSpatialReference(4326));
                if (!point) {
                  return;
              const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers");
              if (point && buffer) {
                // Avoid removing the map projection boundary
                  view.graphics.getItemAt(2),
                  view.graphics.getItemAt(3),
                const bufferGraphic = {
                  geometry: buffer,
                  symbol: polySym,
                    geometry: point,
                    symbol: pointSym,
        </script>
    
      </head>
      <body>
        <div id="viewDiv"></div>
        <select id="wkid" class="esri-widget esri-select">
    
          <option value="3857" disabled>Select a projection</option>
          <optgroup label="Equidistant (maintain length)">
    
            <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option>
    
            <option value="54028">World Cassini (Cylindrical)</option>
            <option value="54027">World Equidistant conic (Conic)</option>
    
          </optgroup>
    
          <optgroup label="Conformal (maintain angles)">
    
            <option value="54026">World Stereographic (Azimuthal)</option>
          </optgroup>
          <optgroup label="Equal-area (maintain area)">
    
            <option value="54010">World Eckert VI (Pseudocylindrical)</option>
            <option value="54008">World Sinusoidal (Pseudocylindrical)</option>
          </optgroup>
          <optgroup label="Gnomonic (distances)">
    
            <option value="102034">North Pole Gnomonic (Azimuthal)</option>
          </optgroup>
    
          <optgroup label="Compromise (distort all)">
    
            <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option>
    
            <option value="54016">World Gall Stereographic (Cylindrical)</option>
            <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option>
            <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option>
    
          </optgroup>
    
        </select>
      </body>
    </html>
  2. Create a countriesGeoJson element that instantiates the GeoJSONLayer class. Set the renderer to add a purple outline around the countries.

                                                                                                                                                                                                                                                                                                            
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    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
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Display projected geometries</title>
        <style>
          html,
          body,
          #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            background-color: #ffffff;
          #wkid {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 220px;
            font-family: "Avenir Next";
            font-size: 1em;
        </style>
        <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21"></script>
    
        <script>
          require([
            "esri/views/MapView",
            "esri/Map",
            "esri/request",
            "esri/geometry/SpatialReference",
            "esri/Graphic",
            "esri/geometry/Point",
            "esri/geometry/Polyline",
            "esri/layers/GeoJSONLayer",
            "esri/geometry/geometryEngine",
            "esri/geometry/projection",
          ], (
            Map,
          ) => {
            let spatialReference;
            let view;
            const polySym = {
              type: "simple-fill", // autocasts as new SimpleFillSymbol()
              color: [150, 130, 220, 0.85],
              outline: {
                color: "gray",
                width: 0.5,
            const pointSym = {
              type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
              color: "red",
              outline: {
                color: "white",
                width: 0.5,
              size: 5,
            const projectionBoundary = {
              symbol: {
                type: "simple-fill",
                color: null,
                outline: {
                  width: 0.5,
                  color: [50, 50, 50, 0.75],
                  style: "dash",
                },
              },
              geometry: {
                type: "extent",
                xmin: -180,
                xmax: 180,
                ymin: -90,
                ymax: 90,
                spatialReference: SpatialReference.WGS84,
              },
            };
    
            const countriesGeoJson = new GeoJSONLayer({
              url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson",
              copyright: "Esri",
              spatialReference: {
                wkid: 4326,
              },
              renderer: {
                type: "simple",
                symbol: {
                  type: "simple-fill",
                  color: [255, 255, 255, 1],
                  outline: {
                    width: 0.5,
                    color: [100, 70, 170, 0.75],
                  },
                },
              },
            });
    
            const map = new Map({
              layers: [countriesGeoJson],
            const wkidSelect = document.getElementById("wkid");
            wkidSelect.addEventListener("change", (event) => {
            let center = new Point({
              latitude: 30,
              longitude: -10,
              spatialReference: {
                wkid: 4326,
            function createViewWithSpatialReference(){
            async function createViewWithSpatialReference() {
              await projection.load();
              if (view) {
                view.map = null;
              view = new MapView({
                container: "viewDiv",
                map: map,
                spatialReference: spatialReference,
                center: center, //Need to use projection engine
                scale: 150000000,
              view.ui.add(wkidSelect, "top-right");
              view.when(() => {
              view.on("pointer-move", (event) => {
            function getSpatialReference(wkid) {
              return new SpatialReference({
                wkid: wkid,
            function displayCoordinates(point) {
              const popupTemplate = {
                title: `WKID: ${point.spatialReference.wkid}`,
                content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed(
                  5
                )}`,
                overwriteActions: true,
                buttonEnabled: false,
                closeButton: false,
                featureNavigation: false,
              const graphic = new Graphic({
                geometry: point,
                popupTemplate: popupTemplate,
                features: [graphic],
            function createBuffer(event) {
              let point = view.toMap({
                x: event.x,
                y: event.y,
              if (point) {
            function bufferPoint(point) {
              if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) {
                point = projection.project(point, getSpatialReference(4326));
                if (!point) {
                  return;
              const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers");
              if (point && buffer) {
                // Avoid removing the map projection boundary
                  view.graphics.getItemAt(2),
                  view.graphics.getItemAt(3),
                const bufferGraphic = {
                  geometry: buffer,
                  symbol: polySym,
                    geometry: point,
                    symbol: pointSym,
        </script>
    
      </head>
      <body>
        <div id="viewDiv"></div>
        <select id="wkid" class="esri-widget esri-select">
    
          <option value="3857" disabled>Select a projection</option>
          <optgroup label="Equidistant (maintain length)">
    
            <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option>
    
            <option value="54028">World Cassini (Cylindrical)</option>
            <option value="54027">World Equidistant conic (Conic)</option>
    
          </optgroup>
    
          <optgroup label="Conformal (maintain angles)">
    
            <option value="54026">World Stereographic (Azimuthal)</option>
          </optgroup>
          <optgroup label="Equal-area (maintain area)">
    
            <option value="54010">World Eckert VI (Pseudocylindrical)</option>
            <option value="54008">World Sinusoidal (Pseudocylindrical)</