docs: improve adapter docs to include ArcGIS example (#362)

development/src/index.ts

@@ -1,8 +1,3 @@
-import mapboxgl from "mapbox-gl";
-import maplibregl from "maplibre-gl";
-import * as L from "leaflet";
-import { Loader } from "@googlemaps/js-api-loader";
-
 import {
 	TerraDraw,
 	TerraDrawPointMode,
@@ -13,25 +8,42 @@ import {
 	TerraDrawFreehandMode,
 	TerraDrawRectangleMode,
 	TerraDrawAngledRectangleMode,
+	TerraDrawRenderMode,
+	TerraDrawSensorMode,
+	TerraDrawSectorMode,
 	TerraDrawMapboxGLAdapter,
 	TerraDrawLeafletAdapter,
 	TerraDrawGoogleMapsAdapter,
 	TerraDrawMapLibreGLAdapter,
 	TerraDrawArcGISMapsSDKAdapter,
+	TerraDrawOpenLayersAdapter,
 	ValidateMinAreaSquareMeters,
+	ValidateNotSelfIntersecting,
 } from "../../src/terra-draw";
-import { TerraDrawRenderMode } from "../../src/modes/render/render.mode";
-import { ValidateNotSelfIntersecting } from "../../src/validations/not-self-intersecting.validation";
 
+// Mapbox
+import mapboxgl from "mapbox-gl";
+
+// MapLibre
+import maplibregl from "maplibre-gl";
+
+// Leaflet
+import * as L from "leaflet";
+
+// Google Maps
+import { Loader } from "@googlemaps/js-api-loader";
+
+// OpenLayers
 import Feature from "ol/Feature";
 import GeoJSON from "ol/format/GeoJSON";
 import Map from "ol/Map";
-import { TerraDrawOpenLayersAdapter } from "../../src/adapters/openlayers.adapter";
 import View from "ol/View";
 import { Circle, Fill, Stroke, Style } from "ol/style";
 import { OSM, Vector as VectorSource } from "ol/source";
 import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
 import { fromLonLat, getUserProjection } from "ol/proj";
+
+// ArcGIS
 import EsriMap from "@arcgis/core/Map";
 import MapView from "@arcgis/core/views/MapView.js";
 import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
@@ -43,9 +55,9 @@ import SimpleFillSymbol from "@arcgis/core/symbols/SimpleFillSymbol";
 import SimpleLineSymbol from "@arcgis/core/symbols/SimpleLineSymbol";
 import Color from "@arcgis/core/Color";
 import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol";
+
+// Development Environment configuration
 import { Config, Libraries } from "./config";
-import { TerraDrawSectorMode } from "../../src/modes/sector/sector.mode";
-import { TerraDrawSensorMode } from "../../src/modes/sensor/sensor.mode";
 
 const addModeChangeHandler = (
 	draw: TerraDraw,

guides/3.ADAPTERS.md

@@ -284,7 +284,7 @@ const map = new Map({
     controls: [],
 });
 
-map.once("postrender", () => {
+map.once("rendercomplete", () => {
     // Create Terra Draw
     const draw = new TerraDraw({
         adapter: new TerraDrawOpenLayersAdapter({
@@ -371,13 +371,57 @@ draw.start();
 draw.setMode("freehand");
 ```
 
-<!-- TODO:
-### ArcGIS Maps
+### ArcGIS
+```typescript
+import EsriMap from "@arcgis/core/Map";
+import MapView from "@arcgis/core/views/MapView.js";
+import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
+import Point from "@arcgis/core/geometry/Point";
+import Polyline from "@arcgis/core/geometry/Polyline";
+import ArcGISPolygon from "@arcgis/core/geometry/Polygon";
+import Graphic from "@arcgis/core/Graphic";
+import SimpleFillSymbol from "@arcgis/core/symbols/SimpleFillSymbol";
+import SimpleLineSymbol from "@arcgis/core/symbols/SimpleLineSymbol";
+import Color from "@arcgis/core/Color";
+import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol";
+
+// Create an OSM basemap
+const map = new EsriMap({
+  basemap: "osm", // Basemap layer service
+});
 
-```javascript
+// Create a ArcGIS MapView object with the configured center/zoom etc
+const view = new MapView({
+  map: map,
+  center: [0, 0], // Longitude, latitude
+  zoom: 12, // Zoom level
+  container: 'esri-map', // Div element
+});
 
+// Create the Terra Draw instance with the ArcGIS Adapter
+const draw = new TerraDraw({
+  adapter: new TerraDrawArcGISMapsSDKAdapter({
+    lib: {
+      GraphicsLayer,
+      Point,
+      Polyline,
+      Polygon: ArcGISPolygon,
+      Graphic,
+      SimpleLineSymbol,
+      SimpleFillSymbol,
+      SimpleMarkerSymbol,
+      Color,
+    },
+    map: view,
+  }),
+  modes: [new TerraDrawFreehandMode()],
+});
+
+
+// Start drawing
+draw.start();
+draw.setMode("freehand");
 ```
--->
 
 ## Creating Custom Adapters