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

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

Add HTML elements

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.

Use dark colors for code blocks
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.

<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.26/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.26"></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>

      </optgroup>

      <optgroup label="Compromise (distort all)">

        <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option>

      </optgroup>

    </select>
  </body>
</html>

Add modules

In the require statement, add the modules.

The ArcGIS Maps SDK for JavaScript is available as AMD modules and ES modules, but this tutorial is based on AMD. The AMD require function uses references to determine which modules will be loaded – for example, you can specify "esri/Map" for loading the Map module. After the modules are loaded, they are passed as parameters (e.g. Map) to the callback function where they can be used in your application. It is important to keep the module references and callback parameters in the same order. For more information on the different types of modules, visit the Introduction to Tooling guide topic.

Expand
Use dark colors for code blocks
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.
    <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
      ) => {

      });
    </script>
Expand

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.

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.

Expand
Use dark colors for code blocks
Add line.Add line.
        "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;

Expand

Set polygon and point styling that will display when a point is buffered on the map.

Expand
Use dark colors for code blocks
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.
        "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,
        };
Expand

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.

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.

Expand
Use dark colors for code blocks
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.
        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,
          },
        };
Expand

Create a countriesGeoJson element that instantiates the GeoJSONLayer class. Set the renderer to add a purple outline around the countries.

Expand
Use dark colors for code blocks
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.
        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],
              },
            },
          },
        });

Expand

Add the countriesGeoJson layer to the map.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.
        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],
        });
Expand

Set the spatial reference

The default spatial reference for a GeoJSON layer is WGS84 (4326). Use the selector to switch between WGS84 and Web Mercator (3857).

Create a getSpatialReference function that will return an instance of the SpatialReference class based on the wkid that chosen from the selector.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.
        const map = new Map({
          layers: [countriesGeoJson],
        });

        function getSpatialReference(wkid) {
          return new SpatialReference({
            wkid: wkid,
          });
        }
Expand

Assign the wkidSelect variable to the wkid HTML element. Set the spatialReference to the value of the wkid from the selector by calling the getSpatialReference function.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.
        const map = new Map({
          layers: [countriesGeoJson],
        });

        const wkidSelect = document.getElementById("wkid");
        spatialReference = getSpatialReference(wkidSelect.value);

Expand

Add an event listener to register a change based on the event.target.value in the selector.

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.
        const wkidSelect = document.getElementById("wkid");
        spatialReference = getSpatialReference(wkidSelect.value);

        wkidSelect.addEventListener("change", (event) => {
          spatialReference = getSpatialReference(event.target.value);

        });
Expand

Switch between coordinate systems

Each time you select a new spatial reference, the view needs to be destroyed and recreated. Create a function that will reproject the view based on the chosen spatial reference.

Create a center point that will focus the view each time it reprojects. Set the latitude to 30 and longitude to -10. Set the spatialReference to 4326 (WGS84).

Expand
Use dark colors for code blocks
Add line.Add line.Add line.Add line.Add line.Add line.Add line.
        wkidSelect.addEventListener("change", (event) => {
          spatialReference = getSpatialReference(event.target.value);

        });

        let center = new Point({
          latitude: 30,
          longitude: -10,
          spatialReference: {
            wkid: 4326,
          },
        });
Expand

Create a createViewWithSpatialReference function.
Expand
Use dark colors for code blocks