In the ArcGIS JS 4 SDK, there is a sketch widget that allows one to draw different shapes on the map of your choosing. I implemented this to an iframe on my site. However, I need code to help me get to the end goal. I have the iframe working and am able to draw shapes. See the code pen here.

I need to be able to get the polygon or shape that is drawn into the OGC WKT polygon representation. Similar to this...


I have the code pen showing what the iframe projects. It would be ideal to have the JS code to get the polygon out work on the JS file of the original project, in this case, a tools page.

A little background context this is to put the polygon shape into an HTTP request based on whatever polygon someone has in mind. How do I go about getting the OGC WKT polygon representation out of the sketch widget?

Would I do something like this?

This is the JavaScript code that runs the iframe, precisely what is in the code pen.

        ], (esriConfig, Map, MapView, ScaleBar, Sketch, Graphic, GraphicsLayer, geometryEngine, Basemap) => {
            esriConfig.apiKey = "AAPKe1c05b9485c44780824e587fe012a020tUuqQMozRdQZiJa_DA9xrDKX6I5Dsl7F9KurI89k2tGEKbfrfdpoX6ek8Kh0rqIf";

            const graphicsLayer = new GraphicsLayer();

            const map = new Map({
                basemap: new Basemap({
                    portalItem: {
                        id: "979c6cc89af9449cbeb5342a439c6a76"  // Light Gray Canvas
                layers: [graphicsLayer]

            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-75.056, 38.540], // Longitude, latitude
                zoom: 5 // Zoom level

            const sketch = new Sketch({
                layer: graphicsLayer,
                view: view,
                // graphic will be selected as soon as it is created
                creationMode: "update",
                availableCreateTools: ["polygon", "rectangle"],
                updateOnGraphicClick: true,
                visibleElements: {
                    createTools: {
                        point: false,
                        circle: false
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    settingsMenu: false,
                    undoRedoMenu: false
            view.ui.add(sketch, "top-right");

            const scalebar = new ScaleBar({
                view: view,
                unit: "metric"
            view.ui.add(scalebar, "bottom-right");

            const measurements = document.getElementById("measurements");
            view.ui.add(measurements, "manual");

1 Answer 1


Conversion of ArcGiS graphics to WKT geometry can be done with the use of terraformer-arcgis-parser and terraformer-wkt-parser libraries:

<script src="https://cdnjs.cloudflare.com/ajax/libs/terraformer/1.0.12/terraformer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/terraformer-wkt-parser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/terraformer-arcgis-parser.min.js"></script>

ArcGIS graphics is first converted to GeojSON feature and then feature geometry is converted to WKT. Code for conversion could the look something like this:

sketch.on(["update"], onGraphicUpdate);

function onGraphicUpdate(evt) {
  var feature = Terraformer.ArcGIS.parse(evt.graphics[0]);
  var wkt = Terraformer.WKT.convert(feature.geometry);

Here is working JSFiddle: https://jsfiddle.net/TomazicM/kbpL3c4z/

  • 1
    See edited answer with working JSFiddle.
    – TomazicM
    Oct 19, 2023 at 19:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.