Client-side projection

Explore in the sandbox

View live

This sample demonstrates how layers are automatically projected to a spatial reference using the SDK's client-side projection module. The sample uses a GeoJSONLayer as a custom basemap.

This also demonstrates how graphics and their respective geometries can be projected to more accurately maintain shape based on the view's spatial reference by using the shapePreservingProjectOperator. The operator must first be loaded using the load() method.

Use dark colors for code blocksCopy
        if (!shapePreservingProjectOperator.isLoaded()) {
          await shapePreservingProjectOperator.load();
        }

        // Project the polygon to the map's spatial reference.
        // Use the shapePreservingProjectOperator to more accurately maintain the shape of the polygon.
        const projectedPolygon = await shapePreservingProjectOperator.execute(
          polygon,
          viewElement.spatialReference,
        );

The map component's spatialReference can be switched to a projected spatial reference selected by the user using the Select projection pulldown list.

Use dark colors for code blocksCopy
      // Reproject the map and polygon to the spatial reference selected by the user
      const wkidSelect = document.getElementById("projectWKID");
      wkidSelect.addEventListener("calciteSelectChange", () => {
        viewElement.closePopup();
        viewElement.spatialReference = new SpatialReference({
          wkid: Number(wkidSelect.value),
        });

        document.getElementById("mapSRDiv").innerHTML =
          `SpatialReference.wkid = <b>${viewElement.spatialReference.wkid}</b>`;

        drawGraphic();
      });