arcgis-coordinates-projection

Work with coordinate systems, projections, and coordinate conversion. Use for transforming coordinates and displaying position in multiple formats.

Quality

66%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./contexts/4.34/skills/arcgis-coordinates-projection/SKILL.md

ArcGIS Coordinates and Projection

Use this skill for coordinate conversion, projection transformations, and spatial reference handling.

Important: The projection module is deprecated as of version 4.32 and geodesicUtils is deprecated as of version 4.33. Use the projectOperator and geometry operators instead. See the Deprecation Notice section for migration guidance.

Coordinate Conversion Component

Basic Coordinate Conversion

<arcgis-map basemap="topo-vector" center="-117.049, 34.485" zoom="12">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
  <arcgis-coordinate-conversion slot="bottom-left"></arcgis-coordinate-conversion>
</arcgis-map>

Coordinate Conversion Widget (Core API)

import CoordinateConversion from "@arcgis/core/widgets/CoordinateConversion.js";

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

view.ui.add(ccWidget, "bottom-left");

Custom Coordinate Formats

import CoordinateConversion from "@arcgis/core/widgets/CoordinateConversion.js";
import Format from "@arcgis/core/widgets/CoordinateConversion/support/Format.js";

// Create custom format
const customFormat = new Format({
  name: "Custom XY",
  conversionInfo: {
    spatialReference: { wkid: 4326 },
    reverseConvert: (string) => {
      const parts = string.split(",");
      return [parseFloat(parts[0]), parseFloat(parts[1])];
    }
  },
  coordinateSegments: [
    { alias: "Lon", description: "Longitude", searchPattern: "X" },
    { alias: "Lat", description: "Latitude", searchPattern: "Y" }
  ],
  defaultPattern: "X°, Y°"
});

const ccWidget = new CoordinateConversion({
  view: view,
  formats: [customFormat]
});

Spatial Reference

Create Spatial Reference

import SpatialReference from "@arcgis/core/geometry/SpatialReference.js";

// By WKID
const wgs84 = new SpatialReference({ wkid: 4326 });
const webMercator = new SpatialReference({ wkid: 102100 });

// By WKT
const customSR = new SpatialReference({
  wkt: 'PROJCS["NAD_1983_StatePlane_California_VI_FIPS_0406_Feet"...'
});

Common Spatial References

// WGS 84 (Geographic)
const wgs84 = { wkid: 4326 };

// Web Mercator (Projected)
const webMercator = { wkid: 102100 };  // or 3857

// UTM Zone 11N
const utm11n = { wkid: 32611 };

// State Plane (example)
const statePlane = { wkid: 2230 };

Modern Projection Operator

Use the projectOperator for client-side coordinate projection (recommended).

Project Geometry

import projectOperator from "@arcgis/core/geometry/operators/projectOperator.js";

// Load projection engine (required before use)
await projectOperator.load();

// Project geometry to WGS84
const projectedGeometry = projectOperator.execute(geometry, { wkid: 4326 });

Project with Geographic Transformation

import projectOperator from "@arcgis/core/geometry/operators/projectOperator.js";

await projectOperator.load();

// Project with specific transformation (e.g., NAD83 to WGS84)
const projectedGeometry = projectOperator.execute(geometry, { wkid: 4326 }, {
  geographicTransformation: {
    steps: [{ wkid: 108190 }]  // NAD_1983_To_WGS_1984_5
  }
});

For geodetic geometry operations (geodesicBuffer, geodesicLength, geodesicArea, etc.), see arcgis-geometry-operations.

Geometry Service Projection

Server-Side Projection

import geometryService from "@arcgis/core/rest/geometryService.js";
import ProjectParameters from "@arcgis/core/rest/support/ProjectParameters.js";

const gsUrl = "https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer";

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

const results = await geometryService.project(gsUrl, params);
const projectedGeometry = results[0];

Coordinate Conversion Utilities

Convert Coordinates

import webMercatorUtils from "@arcgis/core/geometry/support/webMercatorUtils.js";

// Web Mercator to Geographic
const geographicPoint = webMercatorUtils.webMercatorToGeographic(webMercatorPoint);

// Geographic to Web Mercator
const webMercatorPoint = webMercatorUtils.geographicToWebMercator(geographicPoint);

// Check if can project
const canProject = webMercatorUtils.canProject(fromSR, toSR);

Display Coordinates

Show Mouse Coordinates

view.on("pointer-move", (event) => {
  const mapPoint = view.toMap({ x: event.x, y: event.y });

  if (mapPoint) {
    document.getElementById("coords").textContent =
      `Lat: ${mapPoint.latitude.toFixed(6)}, Lon: ${mapPoint.longitude.toFixed(6)}`;
  }
});

Format Coordinates

import coordinateFormatter from "@arcgis/core/geometry/coordinateFormatter.js";

await coordinateFormatter.load();

// To Degrees Minutes Seconds
const dms = coordinateFormatter.toLatitudeLongitude(
  point,
  "dms",  // or "dm", "dd"
  3       // decimal places
);
// Output: "34°29'06.000\"N 117°02'56.400\"W"

// To MGRS
const mgrs = coordinateFormatter.toMgrs(
  point,
  "automatic",  // conversion mode
  5,            // precision
  false         // add spaces
);
// Output: "11SNU1234567890"

// To UTM
const utm = coordinateFormatter.toUtm(
  point,
  "north-south-indicators",
  true  // add spaces
);
// Output: "11S 500000 3800000"

// From string to point
const pointFromDMS = coordinateFormatter.fromLatitudeLongitude(
  "34°29'06\"N 117°02'56\"W"
);

USNG and MGRS

USNG Conversion

import coordinateFormatter from "@arcgis/core/geometry/coordinateFormatter.js";

await coordinateFormatter.load();

// To USNG
const usng = coordinateFormatter.toUsng(point, 5, false);

// From USNG
const point = coordinateFormatter.fromUsng("11SNU1234567890");

Complete Example

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://js.arcgis.com/calcite-components/3.3.3/calcite.esm.js"></script>
  <script src="https://js.arcgis.com/4.34/"></script>
  <script type="module" src="https://js.arcgis.com/4.34/map-components/"></script>
  <style>
    html, body { height: 100%; margin: 0; }
    #coordsPanel {
      position: absolute;
      bottom: 50px;
      right: 10px;
      background: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <arcgis-map basemap="topo-vector" center="-117.049, 34.485" zoom="12">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
    <arcgis-coordinate-conversion slot="bottom-left"></arcgis-coordinate-conversion>
  </arcgis-map>

  <div id="coordsPanel" class="esri-widget">
    <div id="latlon">Move mouse to see coordinates</div>
    <div id="utm"></div>
    <div id="mgrs"></div>
  </div>

  <script type="module">
    import coordinateFormatter from "@arcgis/core/geometry/coordinateFormatter.js";

    await coordinateFormatter.load();

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

    viewElement.addEventListener("arcgisViewPointerMove", (event) => {
      const point = viewElement.view.toMap({
        x: event.detail.x,
        y: event.detail.y
      });

      if (point) {
        document.getElementById("latlon").textContent =
          `Lat/Lon: ${point.latitude.toFixed(6)}, ${point.longitude.toFixed(6)}`;

        document.getElementById("utm").textContent =
          `UTM: ${coordinateFormatter.toUtm(point, "north-south-indicators", true)}`;

        document.getElementById("mgrs").textContent =
          `MGRS: ${coordinateFormatter.toMgrs(point, "automatic", 5, true)}`;
      }
    });
  </script>
</body>
</html>

Reference Samples

coordinate-conversion - Converting between coordinate formats
client-projection - Client-side projection of geometries
widgets-coordinateconversion - CoordinateConversion widget usage

Common Pitfalls

Load projection engine: Must call projectOperator.load() before using
Coordinate order: Geographic is (lon, lat), not (lat, lon)
WKID vs WKT: Use WKID when available, WKT for custom projections
Datum transformations: May be needed for accurate results between datums
Client vs server: Use client-side for speed, server for complex transformations

Deprecated APIs

DEPRECATED: The APIs below are deprecated. Use the modern alternatives shown above.

Migration Guide

Deprecated	Modern Replacement
`projection.project(geom, sr)`	`projectOperator.execute(geom, sr)`
`projection.load()`	`projectOperator.load()`
`geodesicUtils.geodesicDistance(p1, p2, unit)`	`geodeticDistanceOperator.execute(p1, p2, { unit })`
`geodesicUtils.geodesicArea(geom, unit)`	`geodeticAreaOperator.execute(geom, { unit })`
`geodesicUtils.geodesicLength(geom, unit)`	`geodeticLengthOperator.execute(geom, { unit })`

Legacy projection Module (Deprecated since 4.32)

// DEPRECATED - Use projectOperator instead
import projection from "@arcgis/core/geometry/projection.js";

await projection.load();

const projectedGeometry = projection.project(
  geometry,
  new SpatialReference({ wkid: 4326 })
);

Legacy geodesicUtils (Deprecated since 4.33)

// DEPRECATED - Use geodesicDistanceOperator instead
import geodesicUtils from "@arcgis/core/geometry/support/geodesicUtils.js";

const distance = geodesicUtils.geodesicDistance(
  point1,
  point2,
  "kilometers"
);

Repository: SaschaBrunnerCH/arcgis-maps-sdk-js-ai-context
Path: contexts/4.34/skills/arcgis-coordinates-projection/SKILL.md
Commit: d84407b

Last updated: 3 days ago
First committed: 6 months ago

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.