Find spatial relationships

Learn how to determine the spatial relationship between geometries.

A spatial relationship, also known as a spatial relation, is how one geometry is topologically associated with another geometry. The association is made based on their interiors, boundaries, and exteriors.

In this tutorial, you use the geometryEngine to determine spatial relationships between two geometries. To determine if a spatial relationship exists, operations such as intersects, disjoint, and within are used. If the operation is successful, then true is returned.

Prerequisites

You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.

Steps

Create a new pen

  1. To get started, either complete the Display a map tutorial or .

Set the API key

To access ArcGIS services, you need an API key.

  1. Go to your dashboard to get an API key.

  2. In CodePen, set the apiKey to your key, so it can be used to access basemap layer and location services.

        
    Change line
    1
    2
    3
    4
    esriConfig.apiKey = "YOUR_API_KEY";
    const map = new Map({
      basemap: "arcgis-topographic" // Basemap layer service
    });
    

Add modules

  1. In the require statement, add the Graphic, GraphicsLayer, Sketch, and geometryEngine modules.

    The ArcGIS API for JavaScript uses AMD modules. The require function is used to load modules so they can be used in the main function. It's important to keep the module references and function parameters in the same order.

                                                                                                                                                                                                                           
    Add line.Add line.Add line.Add line.Change line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>ArcGIS API for JavaScript Tutorials: Find spatial relationships</title>
        <style>
            html,
            body,
            #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            #relationshipResults {
                width: 175px;
                padding: 10px;
        </style>
    
        <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21/"></script>
    
        <script>
            require([
                "esri/config",
                "esri/Map",
                "esri/views/MapView",
    
                "esri/Graphic",
                "esri/layers/GraphicsLayer",
                "esri/widgets/Sketch",
                "esri/geometry/geometryEngine"
    
            ], (esriConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {
                esriConfig.apiKey = "YOUR_API_KEY";
                const map = new Map({
                    basemap: "arcgis-topographic", // Basemap layer service
                const view = new MapView({
                    map: map,
                    center: [-118.80500, 34.02700], //Longitude, latitude
                    zoom: 13,
                    container: "viewDiv"
                const relationshipDiv = document.getElementById("relationshipResults");
                view.ui.add(relationshipDiv, "bottom-right");
                const graphicsLayer = new GraphicsLayer();
                const polyline = {
                    type: "polyline",
                    paths: [
                        [-13227000.704542402, 4032506.197638312],
                        [-13223540.698857695, 4034443.92109266],
                        [-13222135.94452635, 4032506.197638312],
                        [-13221470.479577951, 4033494.9524006792],
                        [-13221470.404932415, 4033494.9524006792]
                    spatialReference: {
                        wkid: 102100
                const simpleLineSymbol = {
                    type: "simple-line",
                    width: 2
                const polylineGraphic = new Graphic({
                    geometry: polyline,
                    symbol: simpleLineSymbol
                // Create a polygon geometry
                const polygon = {
                    type: "polygon",
                    rings: [
                        [-13228098.704542402, 4035365.9427463487],
                        [-13226362.225451587, 4035365.9427463487],
                        [-13226362.225451587, 4032059.2948176656],
                        [-13228098.704542402, 4032059.2948176656],
                        [-13228098.704542402, 4035365.9427463487]
                    spatialReference: {
                        wkid: 102100
                const simpleFillSymbol = {
                    type: "simple-fill"
                const polygonGraphic = new Graphic({
                    geometry: polygon,
                    symbol: simpleFillSymbol
                let selectedGraphics = [polygonGraphic, polylineGraphic];
                const sketch = new Sketch({
                    view: view,
                    layer: graphicsLayer,
                    updateOnGraphicClick: true,
                    snappingOptions: {
                        enabled: true,
                        featureSources: [{
                            layer: graphicsLayer
                    visibleElements: {
                        createTools: {
                            point: false
                        selectionTools: {
                            "lasso-selection": false,
                            "rectangle-selection": false,
                        settingsMenu: false,
                        undoRedoMenu: false
                view.ui.add(sketch, "top-right");
                sketch.on(["update", "undo", "redo"], onGraphicUpdate);
                sketch.on("create", (event) => {
                    if (event.state === "start") {
                        const arrVal = selectedGraphics.pop();
                    if (event.state === "complete") {
                view.when(() => {
                function onGraphicUpdate() {
                    let geometry1 = selectedGraphics[0].geometry;
                    let geometry2 = selectedGraphics[1].geometry;
                    const contains = geometryEngine.contains(geometry1, geometry2);
                    showSpatialRelationship("Contains", contains)
                    const crosses = geometryEngine.crosses(geometry1, geometry2);
                    showSpatialRelationship("Crosses", crosses)
                    const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                    showSpatialRelationship("Disjoint", disjoint)
                    const equals = geometryEngine.equals(geometry1, geometry2);
                    showSpatialRelationship("Equals", equals)
                    const intersects = geometryEngine.intersects(geometry1, geometry2);
                    showSpatialRelationship("Intersects", intersects)
                    const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                    showSpatialRelationship("Overlaps", overlaps)
                    const touches = geometryEngine.touches(geometry1, geometry2);
                    showSpatialRelationship("Touches", touches)
                    const within = geometryEngine.within(geometry1, geometry2);
                    showSpatialRelationship("Within", within)
                function showSpatialRelationship(string, value) {
                    const element = document.getElementById(string)
                    if (value) {
                      element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                    } else {
                     element.innerHTML = string + ": " + value;
        </script>
    </head>
    
    <body>
    
        <div id="viewDiv"></div>
    
        <div id="relationshipResults" class="esri-widget">
            <div><b>Spatial relationships</b></div>
            <div id="Contains"></div>
            <div id="Crosses"></div>
            <div id="Disjoint"></div>
            <div id="Equals"></div>
            <div id="Intersects"></div>
            <div id="Overlaps"></div>
            <div id="Touches"></div>
            <div id="Within"></div>
        </div>
    
    </body>
    
    </html>

Add HTML elements

Add <div> elements to display the spatial relationship between the two geometries in the view.

  1. Using HTML, create div elements to display each spatial relationship to evaluate.

                                                                                                                                                                                                                           
    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>ArcGIS API for JavaScript Tutorials: Find spatial relationships</title>
        <style>
            html,
            body,
            #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            #relationshipResults {
                width: 175px;
                padding: 10px;
        </style>
    
        <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21/"></script>
    
        <script>
            require([
                "esri/config",
                "esri/Map",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/layers/GraphicsLayer",
                "esri/widgets/Sketch",
                "esri/geometry/geometryEngine"
            ], (esriConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {
                esriConfig.apiKey = "YOUR_API_KEY";
                const map = new Map({
                    basemap: "arcgis-topographic", // Basemap layer service
                const view = new MapView({
                    map: map,
                    center: [-118.80500, 34.02700], //Longitude, latitude
                    zoom: 13,
                    container: "viewDiv"
                const relationshipDiv = document.getElementById("relationshipResults");
                view.ui.add(relationshipDiv, "bottom-right");
                const graphicsLayer = new GraphicsLayer();
                const polyline = {
                    type: "polyline",
                    paths: [
                        [-13227000.704542402, 4032506.197638312],
                        [-13223540.698857695, 4034443.92109266],
                        [-13222135.94452635, 4032506.197638312],
                        [-13221470.479577951, 4033494.9524006792],
                        [-13221470.404932415, 4033494.9524006792]
                    spatialReference: {
                        wkid: 102100
                const simpleLineSymbol = {
                    type: "simple-line",
                    width: 2
                const polylineGraphic = new Graphic({
                    geometry: polyline,
                    symbol: simpleLineSymbol
                // Create a polygon geometry
                const polygon = {
                    type: "polygon",
                    rings: [
                        [-13228098.704542402, 4035365.9427463487],
                        [-13226362.225451587, 4035365.9427463487],
                        [-13226362.225451587, 4032059.2948176656],
                        [-13228098.704542402, 4032059.2948176656],
                        [-13228098.704542402, 4035365.9427463487]
                    spatialReference: {
                        wkid: 102100
                const simpleFillSymbol = {
                    type: "simple-fill"
                const polygonGraphic = new Graphic({
                    geometry: polygon,
                    symbol: simpleFillSymbol
                let selectedGraphics = [polygonGraphic, polylineGraphic];
                const sketch = new Sketch({
                    view: view,
                    layer: graphicsLayer,
                    updateOnGraphicClick: true,
                    snappingOptions: {
                        enabled: true,
                        featureSources: [{
                            layer: graphicsLayer
                    visibleElements: {
                        createTools: {
                            point: false
                        selectionTools: {
                            "lasso-selection": false,
                            "rectangle-selection": false,
                        settingsMenu: false,
                        undoRedoMenu: false
                view.ui.add(sketch, "top-right");
                sketch.on(["update", "undo", "redo"], onGraphicUpdate);
                sketch.on("create", (event) => {
                    if (event.state === "start") {
                        const arrVal = selectedGraphics.pop();
                    if (event.state === "complete") {
                view.when(() => {
                function onGraphicUpdate() {
                    let geometry1 = selectedGraphics[0].geometry;
                    let geometry2 = selectedGraphics[1].geometry;
                    const contains = geometryEngine.contains(geometry1, geometry2);
                    showSpatialRelationship("Contains", contains)
                    const crosses = geometryEngine.crosses(geometry1, geometry2);
                    showSpatialRelationship("Crosses", crosses)
                    const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                    showSpatialRelationship("Disjoint", disjoint)
                    const equals = geometryEngine.equals(geometry1, geometry2);
                    showSpatialRelationship("Equals", equals)
                    const intersects = geometryEngine.intersects(geometry1, geometry2);
                    showSpatialRelationship("Intersects", intersects)
                    const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                    showSpatialRelationship("Overlaps", overlaps)
                    const touches = geometryEngine.touches(geometry1, geometry2);
                    showSpatialRelationship("Touches", touches)
                    const within = geometryEngine.within(geometry1, geometry2);
                    showSpatialRelationship("Within", within)
                function showSpatialRelationship(string, value) {
                    const element = document.getElementById(string)
                    if (value) {
                      element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                    } else {
                     element.innerHTML = string + ": " + value;
        </script>
    </head>
    
    <body>
    
        <div id="viewDiv"></div>
    
        <div id="relationshipResults" class="esri-widget">
            <div><b>Spatial relationships</b></div>
            <div id="Contains"></div>
            <div id="Crosses"></div>
            <div id="Disjoint"></div>
            <div id="Equals"></div>
            <div id="Intersects"></div>
            <div id="Overlaps"></div>
            <div id="Touches"></div>
            <div id="Within"></div>
        </div>
    
    </body>
    
    </html>
  2. Add relationshipResults to the bottom-right of the view's UI.

                                                                                                                                                                                                                           
    Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>ArcGIS API for JavaScript Tutorials: Find spatial relationships</title>
        <style>
            html,
            body,
            #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            #relationshipResults {
                width: 175px;
                padding: 10px;
        </style>
    
        <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21/"></script>
    
        <script>
            require([
                "esri/config",
                "esri/Map",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/layers/GraphicsLayer",
                "esri/widgets/Sketch",
                "esri/geometry/geometryEngine"
            ], (esriConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {
                esriConfig.apiKey = "YOUR_API_KEY";
                const map = new Map({
                    basemap: "arcgis-topographic", // Basemap layer service
                const view = new MapView({
                    map: map,
                    center: [-118.80500, 34.02700], //Longitude, latitude
                    zoom: 13,
                    container: "viewDiv"
                });
    
                const relationshipDiv = document.getElementById("relationshipResults");
                view.ui.add(relationshipDiv, "bottom-right");
                const graphicsLayer = new GraphicsLayer();
                const polyline = {
                    type: "polyline",
                    paths: [
                        [-13227000.704542402, 4032506.197638312],
                        [-13223540.698857695, 4034443.92109266],
                        [-13222135.94452635, 4032506.197638312],
                        [-13221470.479577951, 4033494.9524006792],
                        [-13221470.404932415, 4033494.9524006792]
                    spatialReference: {
                        wkid: 102100
                const simpleLineSymbol = {
                    type: "simple-line",
                    width: 2
                const polylineGraphic = new Graphic({
                    geometry: polyline,
                    symbol: simpleLineSymbol
                // Create a polygon geometry
                const polygon = {
                    type: "polygon",
                    rings: [
                        [-13228098.704542402, 4035365.9427463487],
                        [-13226362.225451587, 4035365.9427463487],
                        [-13226362.225451587, 4032059.2948176656],
                        [-13228098.704542402, 4032059.2948176656],
                        [-13228098.704542402, 4035365.9427463487]
                    spatialReference: {
                        wkid: 102100
                const simpleFillSymbol = {
                    type: "simple-fill"
                const polygonGraphic = new Graphic({
                    geometry: polygon,
                    symbol: simpleFillSymbol
                let selectedGraphics = [polygonGraphic, polylineGraphic];
                const sketch = new Sketch({
                    view: view,
                    layer: graphicsLayer,
                    updateOnGraphicClick: true,
                    snappingOptions: {
                        enabled: true,
                        featureSources: [{
                            layer: graphicsLayer
                    visibleElements: {
                        createTools: {
                            point: false
                        selectionTools: {
                            "lasso-selection": false,
                            "rectangle-selection": false,
                        settingsMenu: false,
                        undoRedoMenu: false
                view.ui.add(sketch, "top-right");
                sketch.on(["update", "undo", "redo"], onGraphicUpdate);
                sketch.on("create", (event) => {
                    if (event.state === "start") {
                        const arrVal = selectedGraphics.pop();
                    if (event.state === "complete") {
                view.when(() => {
                function onGraphicUpdate() {
                    let geometry1 = selectedGraphics[0].geometry;
                    let geometry2 = selectedGraphics[1].geometry;
                    const contains = geometryEngine.contains(geometry1, geometry2);
                    showSpatialRelationship("Contains", contains)
                    const crosses = geometryEngine.crosses(geometry1, geometry2);
                    showSpatialRelationship("Crosses", crosses)
                    const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                    showSpatialRelationship("Disjoint", disjoint)
                    const equals = geometryEngine.equals(geometry1, geometry2);
                    showSpatialRelationship("Equals", equals)
                    const intersects = geometryEngine.intersects(geometry1, geometry2);
                    showSpatialRelationship("Intersects", intersects)
                    const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                    showSpatialRelationship("Overlaps", overlaps)
                    const touches = geometryEngine.touches(geometry1, geometry2);
                    showSpatialRelationship("Touches", touches)
                    const within = geometryEngine.within(geometry1, geometry2);
                    showSpatialRelationship("Within", within)
                function showSpatialRelationship(string, value) {
                    const element = document.getElementById(string)
                    if (value) {
                      element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                    } else {
                     element.innerHTML = string + ": " + value;
        </script>
    </head>
    
    <body>
    
        <div id="viewDiv"></div>
    
        <div id="relationshipResults" class="esri-widget">
            <div><b>Spatial relationships</b></div>
            <div id="Contains"></div>
            <div id="Crosses"></div>
            <div id="Disjoint"></div>
            <div id="Equals"></div>
            <div id="Intersects"></div>
            <div id="Overlaps"></div>
            <div id="Touches"></div>
            <div id="Within"></div>
        </div>
    
    </body>
    
    </html>
  3. Add some CSS to format the relationshipResults <div>.

                                                                                                                                                                                                                           
    Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>ArcGIS API for JavaScript Tutorials: Find spatial relationships</title>
        <style>
            html,
            body,
            #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            }
    
            #relationshipResults {
                width: 175px;
                padding: 10px;
            }
        </style>
    
        <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21/"></script>
    
        <script>
            require([
                "esri/config",
                "esri/Map",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/layers/GraphicsLayer",
                "esri/widgets/Sketch",
                "esri/geometry/geometryEngine"
            ], (esriConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {
                esriConfig.apiKey = "YOUR_API_KEY";
                const map = new Map({
                    basemap: "arcgis-topographic", // Basemap layer service
                const view = new MapView({
                    map: map,
                    center: [-118.80500, 34.02700], //Longitude, latitude
                    zoom: 13,
                    container: "viewDiv"
                const relationshipDiv = document.getElementById("relationshipResults");
                view.ui.add(relationshipDiv, "bottom-right");
                const graphicsLayer = new GraphicsLayer();
                const polyline = {
                    type: "polyline",
                    paths: [
                        [-13227000.704542402, 4032506.197638312],
                        [-13223540.698857695, 4034443.92109266],
                        [-13222135.94452635, 4032506.197638312],
                        [-13221470.479577951, 4033494.9524006792],
                        [-13221470.404932415, 4033494.9524006792]
                    spatialReference: {
                        wkid: 102100
                const simpleLineSymbol = {
                    type: "simple-line",
                    width: 2
                const polylineGraphic = new Graphic({
                    geometry: polyline,
                    symbol: simpleLineSymbol
                // Create a polygon geometry
                const polygon = {
                    type: "polygon",
                    rings: [
                        [-13228098.704542402, 4035365.9427463487],
                        [-13226362.225451587, 4035365.9427463487],
                        [-13226362.225451587, 4032059.2948176656],
                        [-13228098.704542402, 4032059.2948176656],
                        [-13228098.704542402, 4035365.9427463487]
                    spatialReference: {
                        wkid: 102100
                const simpleFillSymbol = {
                    type: "simple-fill"
                const polygonGraphic = new Graphic({
                    geometry: polygon,
                    symbol: simpleFillSymbol
                let selectedGraphics = [polygonGraphic, polylineGraphic];
                const sketch = new Sketch({
                    view: view,
                    layer: graphicsLayer,
                    updateOnGraphicClick: true,
                    snappingOptions: {
                        enabled: true,
                        featureSources: [{
                            layer: graphicsLayer
                    visibleElements: {
                        createTools: {
                            point: false
                        selectionTools: {
                            "lasso-selection": false,
                            "rectangle-selection": false,
                        settingsMenu: false,
                        undoRedoMenu: false
                view.ui.add(sketch, "top-right");
                sketch.on(["update", "undo", "redo"], onGraphicUpdate);
                sketch.on("create", (event) => {
                    if (event.state === "start") {
                        const arrVal = selectedGraphics.pop();
                    if (event.state === "complete") {
                view.when(() => {
                function onGraphicUpdate() {
                    let geometry1 = selectedGraphics[0].geometry;
                    let geometry2 = selectedGraphics[1].geometry;
                    const contains = geometryEngine.contains(geometry1, geometry2);
                    showSpatialRelationship("Contains", contains)
                    const crosses = geometryEngine.crosses(geometry1, geometry2);
                    showSpatialRelationship("Crosses", crosses)
                    const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                    showSpatialRelationship("Disjoint", disjoint)
                    const equals = geometryEngine.equals(geometry1, geometry2);
                    showSpatialRelationship("Equals", equals)
                    const intersects = geometryEngine.intersects(geometry1, geometry2);
                    showSpatialRelationship("Intersects", intersects)
                    const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                    showSpatialRelationship("Overlaps", overlaps)
                    const touches = geometryEngine.touches(geometry1, geometry2);
                    showSpatialRelationship("Touches", touches)
                    const within = geometryEngine.within(geometry1, geometry2);
                    showSpatialRelationship("Within", within)
                function showSpatialRelationship(string, value) {
                    const element = document.getElementById(string)
                    if (value) {
                      element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                    } else {
                     element.innerHTML = string + ": " + value;
        </script>
    </head>
    
    <body>
    
        <div id="viewDiv"></div>
    
        <div id="relationshipResults" class="esri-widget">
            <div><b>Spatial relationships</b></div>
            <div id="Contains"></div>
            <div id="Crosses"></div>
            <div id="Disjoint"></div>
            <div id="Equals"></div>
            <div id="Intersects"></div>
            <div id="Overlaps"></div>
            <div id="Touches"></div>
            <div id="Within"></div>
        </div>
    
    </body>
    
    </html>

Create graphics

You need two geometries to execute a spatial relationship operation. Create a polyline and a polygon graphic that displays when the application runs.

  1. Create a new GraphicsLayer and add it to the map.

                                                                                                                                                                                                                           
    Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>ArcGIS API for JavaScript Tutorials: Find spatial relationships</title>
        <style>
            html,
            body,
            #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            #relationshipResults {
                width: 175px;
                padding: 10px;
        </style>
    
        <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21/"></script>
    
        <script>
            require([
                "esri/config",
                "esri/Map",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/layers/GraphicsLayer",
                "esri/widgets/Sketch",
                "esri/geometry/geometryEngine"
            ], (esriConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {
                esriConfig.apiKey = "YOUR_API_KEY";
                const map = new Map({
                    basemap: "arcgis-topographic", // Basemap layer service
                const view = new MapView({
                    map: map,
                    center: [-118.80500, 34.02700], //Longitude, latitude
                    zoom: 13,
                    container: "viewDiv"
                });
    
                const relationshipDiv = document.getElementById("relationshipResults");
                view.ui.add(relationshipDiv, "bottom-right");
    
                const graphicsLayer = new GraphicsLayer();
                map.add(graphicsLayer);
    
                const polyline = {
                    type: "polyline",
                    paths: [
                        [-13227000.704542402, 4032506.197638312],
                        [-13223540.698857695, 4034443.92109266],
                        [-13222135.94452635, 4032506.197638312],
                        [-13221470.479577951, 4033494.9524006792],
                        [-13221470.404932415, 4033494.9524006792]
                    spatialReference: {
                        wkid: 102100
                const simpleLineSymbol = {
                    type: "simple-line",
                    width: 2
                const polylineGraphic = new Graphic({
                    geometry: polyline,
                    symbol: simpleLineSymbol
                // Create a polygon geometry
                const polygon = {
                    type: "polygon",
                    rings: [
                        [-13228098.704542402, 4035365.9427463487],
                        [-13226362.225451587, 4035365.9427463487],
                        [-13226362.225451587, 4032059.2948176656],
                        [-13228098.704542402, 4032059.2948176656],
                        [-13228098.704542402, 4035365.9427463487]
                    spatialReference: {
                        wkid: 102100
                const simpleFillSymbol = {
                    type: "simple-fill"
                const polygonGraphic = new Graphic({
                    geometry: polygon,
                    symbol: simpleFillSymbol
                let selectedGraphics = [polygonGraphic, polylineGraphic];
                const sketch = new Sketch({
                    view: view,
                    layer: graphicsLayer,
                    updateOnGraphicClick: true,
                    snappingOptions: {
                        enabled: true,
                        featureSources: [{
                            layer: graphicsLayer
                    visibleElements: {
                        createTools: {
                            point: false
                        selectionTools: {
                            "lasso-selection": false,
                            "rectangle-selection": false,
                        settingsMenu: false,
                        undoRedoMenu: false
                view.ui.add(sketch, "top-right");
                sketch.on(["update", "undo", "redo"], onGraphicUpdate);
                sketch.on("create", (event) => {
                    if (event.state === "start") {
                        const arrVal = selectedGraphics.pop();
                    if (event.state === "complete") {
                view.when(() => {
                function onGraphicUpdate() {
                    let geometry1 = selectedGraphics[0].geometry;
                    let geometry2 = selectedGraphics[1].geometry;
                    const contains = geometryEngine.contains(geometry1, geometry2);
                    showSpatialRelationship("Contains", contains)
                    const crosses = geometryEngine.crosses(geometry1, geometry2);
                    showSpatialRelationship("Crosses", crosses)
                    const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                    showSpatialRelationship("Disjoint", disjoint)
                    const equals = geometryEngine.equals(geometry1, geometry2);
                    showSpatialRelationship("Equals", equals)
                    const intersects = geometryEngine.intersects(geometry1, geometry2);
                    showSpatialRelationship("Intersects", intersects)
                    const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                    showSpatialRelationship("Overlaps", overlaps)
                    const touches = geometryEngine.touches(geometry1, geometry2);
                    showSpatialRelationship("Touches", touches)
                    const within = geometryEngine.within(geometry1, geometry2);
                    showSpatialRelationship("Within", within)
                function showSpatialRelationship(string, value) {
                    const element = document.getElementById(string)
                    if (value) {
                      element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                    } else {
                     element.innerHTML = string + ": " + value;
        </script>
    </head>
    
    <body>
    
        <div id="viewDiv"></div>
    
        <div id="relationshipResults" class="esri-widget">
            <div><b>Spatial relationships</b></div>
            <div id="Contains"></div>
            <div id="Crosses"></div>
            <div id="Disjoint"></div>
            <div id="Equals"></div>
            <div id="Intersects"></div>
            <div id="Overlaps"></div>
            <div id="Touches"></div>
            <div id="Within"></div>
        </div>
    
    </body>
    
    </html>
  2. Create a polyline graphic and add it to the graphicsLayer.

                                                                                                                                                                                                                           
    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.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>ArcGIS API for JavaScript Tutorials: Find spatial relationships</title>
        <style>
            html,
            body,
            #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            #relationshipResults {
                width: 175px;
                padding: 10px;
        </style>
    
        <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21/"></script>
    
        <script>
            require([
                "esri/config",
                "esri/Map",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/layers/GraphicsLayer",
                "esri/widgets/Sketch",
                "esri/geometry/geometryEngine"
            ], (esriConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {
                esriConfig.apiKey = "YOUR_API_KEY";
                const map = new Map({
                    basemap: "arcgis-topographic", // Basemap layer service
                const view = new MapView({
                    map: map,
                    center: [-118.80500, 34.02700], //Longitude, latitude
                    zoom: 13,
                    container: "viewDiv"
                });
    
                const relationshipDiv = document.getElementById("relationshipResults");
                view.ui.add(relationshipDiv, "bottom-right");
    
                const graphicsLayer = new GraphicsLayer();
                map.add(graphicsLayer);
    
                const polyline = {
                    type: "polyline",
                    paths: [
                        [-13227000.704542402, 4032506.197638312],
                        [-13223540.698857695, 4034443.92109266],
                        [-13222135.94452635, 4032506.197638312],
                        [-13221470.479577951, 4033494.9524006792],
                        [-13221470.404932415, 4033494.9524006792]
                    ],
                    spatialReference: {
                        wkid: 102100
                    }
                };
                const simpleLineSymbol = {
                    type: "simple-line",
                    width: 2
                };
                const polylineGraphic = new Graphic({
                    geometry: polyline,
                    symbol: simpleLineSymbol
                });
                graphicsLayer.add(polylineGraphic);
    
                // Create a polygon geometry
                const polygon = {
                    type: "polygon",
                    rings: [
                        [-13228098.704542402, 4035365.9427463487],
                        [-13226362.225451587, 4035365.9427463487],
                        [-13226362.225451587, 4032059.2948176656],
                        [-13228098.704542402, 4032059.2948176656],
                        [-13228098.704542402, 4035365.9427463487]
                    spatialReference: {
                        wkid: 102100
                const simpleFillSymbol = {
                    type: "simple-fill"
                const polygonGraphic = new Graphic({
                    geometry: polygon,
                    symbol: simpleFillSymbol
                let selectedGraphics = [polygonGraphic, polylineGraphic];
                const sketch = new Sketch({
                    view: view,
                    layer: graphicsLayer,
                    updateOnGraphicClick: true,
                    snappingOptions: {
                        enabled: true,
                        featureSources: [{
                            layer: graphicsLayer
                    visibleElements: {
                        createTools: {
                            point: false
                        selectionTools: {
                            "lasso-selection": false,
                            "rectangle-selection": false,
                        settingsMenu: false,
                        undoRedoMenu: false
                view.ui.add(sketch, "top-right");
                sketch.on(["update", "undo", "redo"], onGraphicUpdate);
                sketch.on("create", (event) => {
                    if (event.state === "start") {
                        const arrVal = selectedGraphics.pop();
                    if (event.state === "complete") {
                view.when(() => {
                function onGraphicUpdate() {
                    let geometry1 = selectedGraphics[0].geometry;
                    let geometry2 = selectedGraphics[1].geometry;
                    const contains = geometryEngine.contains(geometry1, geometry2);
                    showSpatialRelationship("Contains", contains)
                    const crosses = geometryEngine.crosses(geometry1, geometry2);
                    showSpatialRelationship("Crosses", crosses)
                    const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                    showSpatialRelationship("Disjoint", disjoint)
                    const equals = geometryEngine.equals(geometry1, geometry2);
                    showSpatialRelationship("Equals", equals)
                    const intersects = geometryEngine.intersects(geometry1, geometry2);
                    showSpatialRelationship("Intersects", intersects)
                    const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                    showSpatialRelationship("Overlaps", overlaps)
                    const touches = geometryEngine.touches(geometry1, geometry2);
                    showSpatialRelationship("Touches", touches)
                    const within = geometryEngine.within(geometry1, geometry2);
                    showSpatialRelationship("Within", within)
                function showSpatialRelationship(string, value) {
                    const element = document.getElementById(string)
                    if (value) {
                      element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                    } else {
                     element.innerHTML = string + ": " + value;
        </script>
    </head>
    
    <body>
    
        <div id="viewDiv"></div>
    
        <div id="relationshipResults" class="esri-widget">
            <div><b>Spatial relationships</b></div>
            <div id="Contains"></div>
            <div id="Crosses"></div>
            <div id="Disjoint"></div>
            <div id="Equals"></div>
            <div id="Intersects"></div>
            <div id="Overlaps"></div>
            <div id="Touches"></div>
            <div id="Within"></div>
        </div>
    
    </body>
    
    </html>
  3. Create a polygon graphic and add it to the graphicsLayer.

                                                                                                                                                                                                                           
    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.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>ArcGIS API for JavaScript Tutorials: Find spatial relationships</title>
        <style>
            html,
            body,
            #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            #relationshipResults {
                width: 175px;
                padding: 10px;
        </style>
    
        <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21/"></script>
    
        <script>
            require([
                "esri/config",
                "esri/Map",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/layers/GraphicsLayer",
                "esri/widgets/Sketch",
                "esri/geometry/geometryEngine"
            ], (esriConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {
                esriConfig.apiKey = "YOUR_API_KEY";
                const map = new Map({
                    basemap: "arcgis-topographic", // Basemap layer service
                const view = new MapView({
                    map: map,
                    center: [-118.80500, 34.02700], //Longitude, latitude
                    zoom: 13,
                    container: "viewDiv"
                });
    
                const relationshipDiv = document.getElementById("relationshipResults");
                view.ui.add(relationshipDiv, "bottom-right");
    
                const graphicsLayer = new GraphicsLayer();
                map.add(graphicsLayer);
    
                const polyline = {
                    type: "polyline",
                    paths: [
                        [-13227000.704542402, 4032506.197638312],
                        [-13223540.698857695, 4034443.92109266],
                        [-13222135.94452635, 4032506.197638312],
                        [-13221470.479577951, 4033494.9524006792],
                        [-13221470.404932415, 4033494.9524006792]
                    ],
                    spatialReference: {
                        wkid: 102100
                    }
                };
                const simpleLineSymbol = {
                    type: "simple-line",
                    width: 2
                };
                const polylineGraphic = new Graphic({
                    geometry: polyline,
                    symbol: simpleLineSymbol
                });
                graphicsLayer.add(polylineGraphic);
    
                // Create a polygon geometry
                const polygon = {
                    type: "polygon",
                    rings: [
                        [-13228098.704542402, 4035365.9427463487],
                        [-13226362.225451587, 4035365.9427463487],
                        [-13226362.225451587, 4032059.2948176656],
                        [-13228098.704542402, 4032059.2948176656],
                        [-13228098.704542402, 4035365.9427463487]
                    ],
                    spatialReference: {
                        wkid: 102100
                    }
                };
                const simpleFillSymbol = {
                    type: "simple-fill"
                };
                const polygonGraphic = new Graphic({
                    geometry: polygon,
                    symbol: simpleFillSymbol
                });
    
                graphicsLayer.add(polygonGraphic);
    
                let selectedGraphics = [polygonGraphic, polylineGraphic];
                const sketch = new Sketch({
                    view: view,
                    layer: graphicsLayer,
                    updateOnGraphicClick: true,
                    snappingOptions: {
                        enabled: true,
                        featureSources: [{
                            layer: graphicsLayer
                    visibleElements: {
                        createTools: {
                            point: false
                        selectionTools: {
                            "lasso-selection": false,
                            "rectangle-selection": false,
                        settingsMenu: false,
                        undoRedoMenu: false
                view.ui.add(sketch, "top-right");
                sketch.on(["update", "undo", "redo"], onGraphicUpdate);
                sketch.on("create", (event) => {
                    if (event.state === "start") {
                        const arrVal = selectedGraphics.pop();
                    if (event.state === "complete") {
                view.when(() => {
                function onGraphicUpdate() {
                    let geometry1 = selectedGraphics[0].geometry;
                    let geometry2 = selectedGraphics[1].geometry;
                    const contains = geometryEngine.contains(geometry1, geometry2);
                    showSpatialRelationship("Contains", contains)
                    const crosses = geometryEngine.crosses(geometry1, geometry2);
                    showSpatialRelationship("Crosses", crosses)
                    const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                    showSpatialRelationship("Disjoint", disjoint)
                    const equals = geometryEngine.equals(geometry1, geometry2);
                    showSpatialRelationship("Equals", equals)
                    const intersects = geometryEngine.intersects(geometry1, geometry2);
                    showSpatialRelationship("Intersects", intersects)
                    const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                    showSpatialRelationship("Overlaps", overlaps)
                    const touches = geometryEngine.touches(geometry1, geometry2);
                    showSpatialRelationship("Touches", touches)
                    const within = geometryEngine.within(geometry1, geometry2);
                    showSpatialRelationship("Within", within)
                function showSpatialRelationship(string, value) {
                    const element = document.getElementById(string)
                    if (value) {
                      element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                    } else {
                     element.innerHTML = string + ": " + value;
        </script>
    </head>
    
    <body>
    
        <div id="viewDiv"></div>
    
        <div id="relationshipResults" class="esri-widget">
            <div><b>Spatial relationships</b></div>
            <div id="Contains"></div>
            <div id="Crosses"></div>
            <div id="Disjoint"></div>
            <div id="Equals"></div>
            <div id="Intersects"></div>
            <div id="Overlaps"></div>
            <div id="Touches"></div>
            <div id="Within"></div>
        </div>
    
    </body>
    
    </html>
  4. Add the graphics to the selectedGraphics array.

                                                                                                                                                                                                                           
    Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>ArcGIS API for JavaScript Tutorials: Find spatial relationships</title>
        <style>
            html,
            body,
            #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            #relationshipResults {
                width: 175px;
                padding: 10px;
        </style>
    
        <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21/"></script>
    
        <script>
            require([
                "esri/config",
                "esri/Map",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/layers/GraphicsLayer",
                "esri/widgets/Sketch",
                "esri/geometry/geometryEngine"
            ], (esriConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {
                esriConfig.apiKey = "YOUR_API_KEY";
                const map = new Map({
                    basemap: "arcgis-topographic", // Basemap layer service
                const view = new MapView({
                    map: map,
                    center: [-118.80500, 34.02700], //Longitude, latitude
                    zoom: 13,
                    container: "viewDiv"
                const relationshipDiv = document.getElementById("relationshipResults");
                view.ui.add(relationshipDiv, "bottom-right");
                const graphicsLayer = new GraphicsLayer();
                const polyline = {
                    type: "polyline",
                    paths: [
                        [-13227000.704542402, 4032506.197638312],
                        [-13223540.698857695, 4034443.92109266],
                        [-13222135.94452635, 4032506.197638312],
                        [-13221470.479577951, 4033494.9524006792],
                        [-13221470.404932415, 4033494.9524006792]
                    spatialReference: {
                        wkid: 102100
                const simpleLineSymbol = {
                    type: "simple-line",
                    width: 2
                const polylineGraphic = new Graphic({
                    geometry: polyline,
                    symbol: simpleLineSymbol
                // Create a polygon geometry
                const polygon = {
                    type: "polygon",
                    rings: [
                        [-13228098.704542402, 4035365.9427463487],
                        [-13226362.225451587, 4035365.9427463487],
                        [-13226362.225451587, 4032059.2948176656],
                        [-13228098.704542402, 4032059.2948176656],
                        [-13228098.704542402, 4035365.9427463487]
                    spatialReference: {
                        wkid: 102100
                const simpleFillSymbol = {
                    type: "simple-fill"
                const polygonGraphic = new Graphic({
                    geometry: polygon,
                    symbol: simpleFillSymbol
                graphicsLayer.add(polygonGraphic);
    
                let selectedGraphics = [polygonGraphic, polylineGraphic];
                const sketch = new Sketch({
                    view: view,
                    layer: graphicsLayer,
                    updateOnGraphicClick: true,
                    snappingOptions: {
                        enabled: true,
                        featureSources: [{
                            layer: graphicsLayer
                    visibleElements: {
                        createTools: {
                            point: false
                        selectionTools: {
                            "lasso-selection": false,
                            "rectangle-selection": false,
                        settingsMenu: false,
                        undoRedoMenu: false
                view.ui.add(sketch, "top-right");
                sketch.on(["update", "undo", "redo"], onGraphicUpdate);
                sketch.on("create", (event) => {
                    if (event.state === "start") {
                        const arrVal = selectedGraphics.pop();
                    if (event.state === "complete") {
                view.when(() => {
                function onGraphicUpdate() {
                    let geometry1 = selectedGraphics[0].geometry;
                    let geometry2 = selectedGraphics[1].geometry;
                    const contains = geometryEngine.contains(geometry1, geometry2);
                    showSpatialRelationship("Contains", contains)
                    const crosses = geometryEngine.crosses(geometry1, geometry2);
                    showSpatialRelationship("Crosses", crosses)
                    const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                    showSpatialRelationship("Disjoint", disjoint)
                    const equals = geometryEngine.equals(geometry1, geometry2);
                    showSpatialRelationship("Equals", equals)
                    const intersects = geometryEngine.intersects(geometry1, geometry2);
                    showSpatialRelationship("Intersects", intersects)
                    const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                    showSpatialRelationship("Overlaps", overlaps)
                    const touches = geometryEngine.touches(geometry1, geometry2);
                    showSpatialRelationship("Touches", touches)
                    const within = geometryEngine.within(geometry1, geometry2);
                    showSpatialRelationship("Within", within)
                function showSpatialRelationship(string, value) {
                    const element = document.getElementById(string)
                    if (value) {
                      element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                    } else {
                     element.innerHTML = string + ": " + value;
        </script>
    </head>
    
    <body>
    
        <div id="viewDiv"></div>
    
        <div id="relationshipResults" class="esri-widget">
            <div><b>Spatial relationships</b></div>
            <div id="Contains"></div>
            <div id="Crosses"></div>
            <div id="Disjoint"></div>
            <div id="Equals"></div>
            <div id="Intersects"></div>
            <div id="Overlaps"></div>
            <div id="Touches"></div>
            <div id="Within"></div>
        </div>
    
    </body>
    
    </html>
  5. Run the code to verify that the graphics appear in the view.

Create a sketch widget

Use the Sketch and GraphicsLayer classes to interactively create a graphic and add it to the view. An event handler will listen for a change from the sketch widget and update the spatial relationship accordingly.

  1. Create the Sketch widget with configurations. Specify the layer as the graphicsLayer we defined earlier. This will allow you to move and update the line and polyline graphics created in the last step. Also, enable the snappingOptions on the Sketch widget. Lastly, set the visibleElements of the widget to remove the tools that are not needed.